Manual Sitios Web PDF

2015
Gestin de sitios web
Asistente Tecnolgico de Moquegua

Prof. Jhon Nelson Madueo Gonzales
19-11-2015
Con cario para mis colegas de las

aulas de innovacin pedaggica
TABLA DE CONTENIDO
1.
SITIOS WEB QU SON? .......................................................................................... 4

ACTIVIDADES DE PRCTICA ................................................................................. 18
CUESTIONARIO.......................................................................................................... 18
2.
CREACIN DE PGINAS WEB ............................................................................... 19

CUESTIONARIO.......................................................................................................... 33
3.
CREACIN DE PGINAS WEB EN LNEA ............................................................ 34

CUESTIONARIO.......................................................................................................... 57
4.
SISTEMA DE MANEJO DE CONTENIDOS (CMS) ............................................... 58

CUESTIONARIO.......................................................................................................... 69
5.
EDICIN Y ADMINISTRACIN DE UN CMS ........................................................ 70

CUESTIONARIO.......................................................................................................... 86
6.
ALOJAMIENTO ............................................................................................................ 87
CUESTIONARIO.......................................................................................................... 91
7.
TRANSFERENCIA EN FTP ....................................................................................... 92

CUESTIONARIO.......................................................................................................... 99
8.
REFERENCIAS.......................................................................................................... 100

GESTIN DE SITIOS WEB
Competencia
Desarrolla contenidos bsicos de edicin, diseo y mantenimiento de sitios web,
transferencia de archivos en la World Wide Web y el enfoque del lenguaje HTML.
Capacidades
Disea, crea y edita pginas web mediante el uso de software local o en lnea
para la creacin de sitios web administrativos y pedaggicos.
Utiliza hosting gratuitos o pagos para cargar los archivos necesarios para el
funcionamiento de un sitio web.
Utiliza el protocolo FTP para la transferencia de archivos a servidores remotos

mediante la utilizacin de software local o en lnea.

1. SITIOS WEB QU SON?
OBJETIVOS:
Diferenciar los diferentes tipos de sitios web para definir su proyecto de

creacin de su sitio web.
Identifica los elementos de un sitio web en diferentes ejemplos

estableciendo aquellos que sean pertinentes para un sitio web educativo.

SITIOS WEB
Un website o sitio web en Internet es un conjunto de documentos y archivos electrnicos
alojados en algn servidor web con una direccin URL denominada dominio o
subdominio. Es un concepto tan
antiguo como el internet.
El auge de internet en las dos
ltimas dcadas ha propiciado la
aparicin
de
enormes
cantidades de websites, basta

con hacer un bsqueda para
fijarnos en la cantidad de sitios
web donde aparece el tpico
consultado. Esto nos da una idea de lo catico que se ha vuelto encontrar informacin.
Antes de ingresar a desarrollar un sitio web es necesario conocer algunos conceptos
necesarios para encontrar la finalidad de tener uno.
1. INTERNET
Internet es la red de redes, es decir, es la conexin de ordenadores a nivel
mundial que ofrece una diversidad de servicios como el correo electrnico, chat
o la web. Los servicios que se ofrecen en la red son ejecutados por ordenadores
que nunca se apagan y estn interconectados. Estos ordenadores se denominan
servidores y los hay especializados en brindar un servicio determinado como
correo electrnico o web. Existen servidores que brindan acceso a internet a los
ordenadores de usuarios finales.
En resumen, internet es una red de ordenadores conectados donde muchos
cumplen la funcin de servidores que ofrecen diferentes servicios.
Para la conexin, los ordenadores deben
utilizar
protocolos
actualmente
se
de
utiliza
comunicacin,
la
familia
de
protocolos TCP/IP lo que garantiza que las

redes
fsicas
heterogneas
que
la
componen funcionen como una red lgica

nica, de alcance mundial.
El origen de Internet se fecha en 1969, ao
en que se estableci la primera conexin de

ordenadores a nivel universitario. Se denominaba ARPANET, y se cre con la
finalidad de unir tres universidades en California y una en Utah, EE. UU.
Es necesario aclarar que el protocolo TCP/IP no es el nico sino que existen
otros tipos de protocolos de acuerdo al servicio. Por ejemplo el servicio web tiene
sus propios protocolos as como el correo electrnico que utiliza el protocolo
SMTP. Para la trasmisin de datos se usa FTP y P2P; para mensajera
instantnea, comunicacin multimedia y otros se usa VoIP; para acceso remoto
se utiliza SSH y TELNET; entre otros.
2. WEB
De acuerdo a Lpez (2011), El trmino Web es una palabra que se ha hecho
muy popular y se ha extendido a casi toda la poblacin en el siglo XXI. El trmino
es reconocido por la Real Academia Espaola de la Lengua en su diccionario y
en su versin en lnea, seala que:
El servicio que ms xito ha tenido en Internet ha sido la World Wide Web

(WWW, o "la Web"), y es comn confundir ambos trminos. La WWW es un
conjunto de protocolos que permite, de forma sencilla, la consulta remota de
archivos de hipertexto. Se puede decir tambin que la web es un conjunto de
documentos electrnicos conectados unos con otros por medio de enlaces, links,
vnculos o hipervnculos.
La web se construy en un sistema
denominado hipertexto que es un
entramado de pginas electrnicas
conectadas
mediante
enlaces.
Aunque pareciera que la web slo

permite textos, la verdad es que la
web puede ofrecer imgenes, vdeos,
sonidos o cualquier tipo de archivo
por lo que ha llegado a ser el servicio ms enriquecido entre los que brinda
internet. Por esta razn el sistema que implementa la web, el hipertexto, se le ha
dado un nuevo nombre, el de hipermedia haciendo referencia al hipertexto con
contenido multimedia.
6

Los orgenes de la Word Wide Web pueden situarse a comienzos de la dcada
de los noventa en el Conseil Europen pour la Recherche Nuclaire (CERN),
cuando un grupo de cientficos comenz a trabajar en un sistema de
documentacin que permitiera intercambiar informacin entre los investigadores.
(Ther, 2002)
Por otro lado y Comparado con las enciclopedias y con las bibliotecas
tradicionales, la web ha permitido una descentralizacin repentina y extrema de
la informacin y de los datos. Algunas compaas e individuos han adoptado el
uso de los weblogs, que se utilizan en gran parte como diarios actualizables.
Algunas organizaciones comerciales animan a su personal para incorporar sus
reas de especializacin en sus sitios, con la esperanza de que impresionen a
los visitantes con conocimiento experto e informacin libre. (Pazmio, 2010)
En palabras de Berns: El concepto de la Web integr muchos sistemas de
informacin diferentes, por medio de la formacin de un espacio imaginario
abstracto en el cual las diferencias entre ellos no existan. La Web tena que
incluir toda la informacin de cualquier tipo en cualquier sistema. La Web,
entonces es creada con tres principios bsicos: todos pueden publicar, todos
pueden leer, nadie debe restringir. A esta web le podemos decir la Web 1.0.
(Ruz, 2012)
3. WEB 2.0
la mejor metfora para Web 2.0, es la de una biblioteca. Ah hay informacin
restringida al lugar fsico donde funciona. Hace 50 aos alguien que buscaba
informacin, deba recorrer biblioteca por biblioteca y correlacionar o comparar
la informacin a mano. Por ejemplo, determinar los ttulos de libros que estudian
la vida de Andrs Bello no poda navegar a travs de imgenes virtuales de todos
los libros de todas las bibliotecas del mundo juntas. Sin embargo, la Web hizo
posible esa realidad. (Gran & Willen, 2010)
Si bien esta mirada sigue siendo
acadmica no deja de ser vlida
para
cualquier
actividad
rea
humana.
de
la
La
informacin se ha convertido en
lo ms valioso dentro de, por
ejemplo,
una
empresa,
cualquiera sea el sector en que

se desempee.

Para muchos autores no existe la Web 2.0 es slo una moda, dicen otros para
Gran y Willen (2010) la Web 2.0 es un trmino polmico, en que unos la
consideran como parte de la evolucin del Internet, y del uso que mnimamente
hacemos de ella, concebida como la Red, y otros (gente estudiosa), la
consideran una moda que pasar en un momento, que es la segunda Burbuja
de la Red, la Nube (infraestructura tecnolgica en que se apoya la Red para
compartir informacin).
Para Fumero y Roca la evolucin de la Web se puede graficar como en la imagen
siguiente donde se observa una separacin a partir de 1998 entre la funcin
primordial de la web que es el manejo de datos, sin embargo, con el
advenimiento de la web semntica se ha producido un giro en torno a esta
funcin.
Las TIC, desde su infraestructura hasta sus aplicaciones, se distribuye y se

consumen como un servicio en la red. Estos servicios pueden ser de diferente
tipo: gratuitos o de pago. Sin embargo, el potencial que tienen radica en su
masificacin por lo que comienzan como gratuitos pasando luego a ofertar un
servicio de pago con algunas caractersticas de mejora.
Otra ventaja de estos servicios es que ya no es necesario que el usuario instale
el software en su ordenador dado que slo es necesario un navegador web para
poder acceder directamente a ellos desde la Web. Un ejemplo es el de la edicin
de fotos que hace menos de 10 aos requera que el usuario tenga instalado
programas para hacerlo en su computadora. Ahora esto se puede hacer en lnea,
incluso en los celulares.
En la web 2.0 el actor principal es el propio usuario y no los datos como en la
anterior web. Pero el usuario no puede hacerlo slo porque esta nueva Web ha
propiciado el desarrollo de la inteligencia colectiva y por ende de comunidades

en lnea que trabajan desinteresadamente en muchos casos para compartir la
informacin y crear conocimientos, por eso es llamada tambin la Web social.
La web se compone principalmente de sitios de noticias, como los Weblogs,
comunidades digitales, redes sociales, entre otro sinfn de herramientas. Lo que
les interesa a los usuarios es lo novedoso de la Web 2.0, donde pueden subir a
la nube el acontecer da a da, de lo que hacen, investigan, ven, trabajando, y
ms cosas. (Ruz, 2012)
Como se muestra en la imagen de
la pgina anterior, el nacimiento
de la Web 2.0 se produjo en 2004
con la aparicin de servicios
como
Wordpress,
Blogger,
Wikipedia,
Youtube,
Flirck,
Myspace, Facebook entre otras

que han sobrecargado la red en
busca de usuarios que generen
contenido y no slo consuman
informacin,
los
denominados
prosumer, productores y consumidores que es la caracterstica de la mayora de

usuarios de la Web.
Muchas de estas aplicaciones o servicios han irrumpido en el mundo acadmico
y en especial en el de la educacin a tal punto que la mayor parte de pases del
mundo hacen esfuerzos por implementar sus escuelas con acceso a internet e
incluso se habla de que el acceso al internet es un derecho humano.
Muchos docentes han experimentado llevar las herramientas Web 2.0 cero y han
encontrado gran aceptacin en los estudiantes, sin embargo, ha generado que
la mayora desarrolle rechazo por usarlas puesto que esto les obliga a cambiar
su rol tradicional y buscar nuevas estrategias de trabajo en aula.
Como por ejemplo se puede citar los denominados CMS (sistema de manejo de
contenidos), por sus siglas en ingls.
Un CMS es una herramienta o
espacio en la WEB que permite
integrar casi todo lo que la Web 2.0
ofrece: compartir los contenidos,
generar
discusiones
construir
contenido
en
de
foros,
manera
colaborativa, desarrollar proyectos y

9

mdulos con nuevas estrategias de trabajo educativo motivando la aparicin de
lo que se ha denominado el aula aumentada o aula 2.0 que ha generado el
denominado aprendizaje 2.0
Luego de ms de 10 aos desde su aparicin la mayor parte de investigadores
concuerdan en que el principal beneficiario de las herramientas 2.0 ha sido la
educacin y en especial los procesos de enseanza-aprendizaje: ya que se
generar contenidos que son compartidos, sean para clases preparadas, para
equipos de trabajo colaborativo, o simplemente por compartir con las redes de
quienes los suben. As, el Aprendizaje 2.0 se constituye por dos principios
elementales de la actual Web: contenidos generados por el usuario y una cultura
de participacin activa y colaborativa. (Ruz, 2012)
4. SITIO WEB
Un sitio web es una coleccin o conjunto de documentos electrnicos o pginas
web que tienen un fin o propsito particular. Un sitio web se caracteriza por tener
una pgina principal o inicial la cual da acceso a las otras pginas del sitio. La
pgina de inicio del sitio es accesible mediante una direccin web o URL del
protocolo HTTP de internet.
Un sitio web es un sitio (localizacin) en la World Wide Web que contiene

documentos (pginas web) organizados jerrquicamente. Cada documento
(pgina web) contiene texto y o grficos que aparecen como informacin digital
en la pantalla de un ordenador. Un sitio puede contener una combinacin de
grficos, texto, audio, vdeo, y otros materiales dinmicos o estticos. (Medrano
& Villalba, 2009)
Como medio, los sitios web son similares a las pelculas, a la televisin o a las
revistas, en que tambin crean y manipulan imgenes digitales y texto, pero un
10

sitio web es tambin un medio de comunicacin. La diferencia principal entre un
sitio web y los medios tradicionales es que un sitio web est en una red de
ordenadores (Internet) y est codificado de manera que permite que los usuarios
interacten con l.
5. TIPOS DE SITIOS WEB
Dependiendo de la finalidad, la cantidad de informacin o la manera de como el
usuario utiliza la informacin podemos establecer varios tipos de sitios web, por
ejemplo, se pueden observar sitios que requieren de suscripcin para poder
ingresar y otros que son libre acceso. Un ejemplo de sitio web que requiere
suscripcin es http://www.ticmoquegua.edu.pe/ donde para ingresar se requiere
un usuario y contrasea:
Por otro lado existen sitios web que por la dimensin se denominan Portales o
pueden ser corporativos o personales. Un portal, a decir de Flores (2010, p. 6)
es un sitio web que centraliza enlaces de una forma organizada y fcil de tal
forma que facilita la navegacin dentro de un tema especfico en la red.
11
Pero de acuerdo a nuestra finalidad, consideramos ampliar el tema de los sitios

web educativos, dado que son el tipo que desarrollaremos.
6. SITIO WEB EDUCATIVO
A decir de Area (2003) un sitio web educativo pudiramos definirlo, en un sentido
amplio, como espacios o pginas en la WWW que ofrecen informacin, recursos
o materiales relacionados con el campo o mbito de la educacin. Se entiende
entonces que puede tener esta categora cualquier pgina o sitio con algn
inters educativo tales como las pginas personales de los profesores, los sitios
institucionales de universidades, academias, colegios o instituciones educativas
pblicas o privadas; los sitios de las Unidades de Gestin Educativa Locales
(UGEL), de las direcciones regionales de educacin, de los portales de los
ministerios de educacin o los que hagan sus veces, las plataformas de
educacin a distancia por medio de Internet; sitios de empresas dedicados a la
formacin, entre otras.
Existen en la web infinidad de sitios que no fueron diseados para fines
educativos pero que sin embargo, muchos docentes han descubierto el potencial
educativo que tienen y actualmente forman parte de la enorme lista de sitios web
educativos. Un ejemplo de este tipo de sitios es el propio Google con todas sus
herramientas que fueron diseadas para fines empresariales pero se adoptaron
rpidamente al entorno educativo.
Existen en la web una cantidad enorme de sitios web educativos y se podra
hacer diferentes clasificaciones pero atendiendo a su finalidad podemos
establecer que hay 2 tipos de sitios web educativos: los que se disean con un
12

fin informativo como en el caso del sitio web de una universidad y los que se
crean con fines pedaggicos o didcticos como es el caso de los sitios
personales de docentes.
En el primer caso el sitio web se disea y, en consecuencia, se consulta para
obtener informacin o datos. Por ejemplo, si se accede al sitio web de una
universidad o de un centro educativo normalmente se obtienen datos sobre su
historia, sobre su localizacin geogrfica, sobre su oferta de cursos y
titulaciones, sobre el profesorado. (Area, 2003)
En el segundo caso, existen otro conjunto de webs de naturaleza
especficamente pedaggica o formativa, es decir, que han sido creados, y en
consecuencia son utilizados, para generar un proceso determinado de
enseanza-aprendizaje. Por ejemplo, si se accede al sitio web de una
determinada asignatura universitaria se podr encontrar el programa de la
misma, los textos de lectura, y posiblemente las actividades o prcticas que
deben cursar los alumnos. Por otra parte, si se entra en la web de un curso on
line o virtual podremos encontrar los objetivos, los contenidos, las actividades y
la evaluacin de dicho curso destinado a que el visitante adquiera una serie de
conocimientos o destrezas. (Area, 2003)
De acuerdo con Area (2003) los sitios web educativos pueden clasificarse de
acuerdo a su naturaleza o finalidad, su posicin puede graficarse en el siguiente
organizador:
Webs
institucionales
Informativos
webs de recursos
o bases de datos
educativos
Sitios web
educativos
Formativos
Webs Entornos
de formacin a
distancia
Webs de
materiales
didcticos
13
Webs institucionales
Este tipo de sitio es el tradicional. Por medio de este la institucin informa a
los usuarios (padres, estudiantes y comunidad) sobre temas relacionados a
su historia, actividades, datos estadsticos, organigramas, relaciones de
docentes, estudiantes, fotos, vdeos de actividades, relacin de blogs de
docentes, proyectos, asistencia de docentes y estudiantes, entre otros datos
de naturaleza meramente informativa.
Un ejemplo de este tipo de sitios es:
Webs de recursos o bases de datos

Este tipo de sitios son de naturaleza eminentemente informativa dado que
proporcionan al usuario recursos o materiales educativos diversos
clasificados de manera que les fcil al usuario encontrar lo que busca.
Existen webs de recursos de todo tipo y de la combinacin de los mismos,
por ejemplo sitios de imgenes: fotos, dibujos u otros; de sonidos: grabados,
msica, podcast, de recursos pedaggicos, de enlaces.
Actualmente estos sitios han evolucionado dando al usuario la posibilidad de
poder subir sus propios archivos incrementndose la oferta de estos y donde
se benefician todos. Por otro lado, estos sitios ofrecen servicios adicionales
como generacin de cdigos HTML, compartir los recursos en las redes
sociales o en blog entre otras. En los ltimos tiempos ha surgido una mejora
en este tipo de webs dado que permiten la creacin en lnea de recursos que
luego pasan a formar parte de los ndices del sitio.
Ejemplos de este tipo de sitios puede ser Youtube.com, parte del gigante de
la web, Google, que funciona como un repositorio de vdeos que pueden ser
vistos por cualquiera que se conecte a Internet, que permite que los usuarios
registrados suban y compartan sus propios vdeos; que incluye herramientas
14

para poder reinventar los vdeos actuales permitiendo mezclas. Actualmente
permite la trasmisin en vivo de vdeos lo cual puede ser explotado por la
escuela de diversos modos.
Webs entornos de formacin a distancia

Dentro de este rubro podemos clasificar los portales educativos donde la
caracterstica principal es que el usuario debe contar con un usuario y
contrasea para poder acceder.
Las universidades fueron las pioneras en este tipo de webs y actualmente
toda institucin relacionada a la formacin, tanto de jvenes como adultos,
poseen sus plataformas desarrolladas para brindar un servicio a cambio de
un pago, en la mayora de los casos.
15
Webs de materiales didcticos

El desarrollo de la web ha ocasionado que muchas empresas volteen a ver
un mercado potencialmente rentable, el de la educacin y han generado o
generan una cantidad enorme de materiales educativos muchos de los
cuales son compartidos.
Son webs de naturaleza didctica ya que ofrecen un material diseado y
desarrollado especficamente para ser utilizado en un proceso de
enseanza-aprendizaje. En este sentido, pudiramos indicar que estos sitios
web son materiales curriculares en formato digital que utilizan la WWW como
una estrategia de difusin y de acceso al mismo. Suelen ser elaborados por
profesores para la enseanza de su materia y/o asignatura. (Area, 2003)
7. BENEFICIOS Y VENTAJAS DE TENER UN SITIO WEB

Hoy en da Internet es utilizado en todo y por todo el mundo y nos permite
acceder a mltiples recursos como sonidos, imgenes, vdeos y dems
elementos que han convertido a las pginas web en una herramienta
comunicativa muy atractiva en especial para las personas jvenes.
De acuerdo a Pea (2008, p. 28) una de las ventajas que tiene la pgina web
con respecto a otros medios de publicacin, es la interactividad, ya que
simplemente con el hecho de que el usuario ingresa a la pgina web,
inmediatamente el usuario puede interactuar con ella directamente, puede visitar
lo que ms le interese, dejar su opinin, comunicarse por medio del correo
electrnico o simplemente ingresar informacin. En el sector educativo esta
ventaja es determinante para captar la atencin del usuario, sea estudiante,
docente, padre u otro.
Otra ventaja de la pgina web es el soporte en la que se ubica, Internet, y como
tal es la accesibilidad. Una pgina web en un servidor web conectado a internet
16

est a disposicin de todo el mundo que se encuentre conectado y en cualquier
lugar. El costo que demanda la distribucin es mnimo comparado con la
cantidad de posibles visitantes y en muchos el costo se traslada al usuario quien
debe pagar una conexin para acceder a Internet.
17
ACTIVIDADES DE PRCTICA
1. Identifica los elementos o partes de los diferentes tipos de sitios web
educativos tratados.
2. Elabora un croquis de la estructura de tu sitio web.
3. Completa la prctica del docente.
CUESTIONARIO
1. Qu otros tipos de pginas web educativas has podido encontrar? Por
qu no pueden estar dentro de la clasificacin propuesta?
2. Qu semejanzas y diferencias puedes encontrar entre los diferentes
tipos de sitios web educativos tratados?
3. Es necesario contar con un sitio web propio? Por qu?
18

2. CREACIN DE PGINAS WEB
OBJETIVOS
Definir y disear la estructura de una pgina web bsica.
Crear una pgina web bsica en el bloc de notas y con el estndar

HTML5.
19

CREACIN DE PGINAS WEB
1. LAS PGINAS WEB COMO DOCUMENTOS ELECTRNICOS
Los sitios web estn constituidos por un conjunto de documentos electrnicos
enlazados entre si denominados pginas web.
Una pgina web es un documento virtual ubicado en el World Wide Web y
accesible mediante una conexin a Internet. Este tipo de archivo est destinado
a ser visualizado en pantalla, ya sea de ordenador, de mvil o de agenda
electrnica. (Ardila & Vargas, 2007)
Una pgina web, de acuerdo a la Real Academia Espaola de la Lengua en su
diccionario en lnea, es:
De acuerdo a lo definido por la RAE, una pgina web es un documento que

contiene informacin especfica de un tema en particular y que es almacenado
en algn servidor que se encuentre conectado a la World Wide Web o red
informtica mundial. De esta forma, este documento puede ser visto por
cualquier usuario que se conecte a internet. Otra caracterstica de una pgina
web es que puede contener imgenes, animaciones, vdeos entre otros
elementos que nos pueden conducir a otro lugar de la misma pgina o a otras
mediante los hipervnculos. Es necesario diferenciar las pginas web estticas
de las dinmicas.
Las pginas web estticas son las que son desarrolladas por profesionales en
programacin web y cuyos cambios o actualizaciones slo pueden ser
ejecutados por los ellos mismos.
A diferencia de las pginas web estticas, las pginas web dinmicas que
aunque poseen elementos estticos, pueden ser enriquecidas o actualizadas por
usuarios comunes sin conocimientos de programacin web por medio de
formularios.
20
2. LAS PGINAS WEB POR DENTRO

Las pginas web estn construidas en el lenguaje HTML que es reconocido por
el protocolo de internet HTTP. Para ver el cdigo HTML de una pgina web se
procede de acuerdo al navegador web que se est usando:
a. En el navegador web Mozilla Firefox, por ejemplo, hacer clic en el botn
de abrir men ubicado en el extremo derecho de la barra de herramientas
del navegador.
b. En el men desplegado que nos ofrece una variedad de herramientas,

hacer clic en Desarrollador. A continuacin se mostrar la lista de
opciones, buscar y hacer clic en Cdigo fuente de esta pgina o Ctrl+U
21
c. En una nueva pestaa, el navegador nos muestra la pgina web pero

como fue escrito en el cdigo HTML (estndar HTML5). En color prpura
se muestran lo que se denomina etiquetas. Adems se observan otros
componentes del cdigo HTML que se vern ms adelante y el contenido
o informacin que se muestra en la pgina web.
d. Para crear una pgina web no es necesario mucho material. Es necesario

slo un editor de HTML o un editor de texto y un navegador web. Un
editor de texto que tenemos en Windows es el bloc de notas, adems
22

contamos con varios navegadores web gratuitos o el Internet Explorer en
todo caso.
3. CREACIN DE PGINAS WEB

El diseo de pginas web es un proceso metdico, donde es necesario pasar
por diferentes etapas para lograr un producto de calidad.
La primera etapa es la planificacin, en sta se debe analizar el contenido

general que tendr la presentacin, la interaccin y la personalizacin de
la pgina web que ser dirigida a una audiencia objetivo. En esta etapa
tambin se debe dividir la audiencia objetivo, el contenido asignado, la
particularidad o diferenciacin respecto a otras pginas web del tema ya
existentes en la red.
La segunda etapa que es la estructuracin, como su nombre lo indica es

donde se estructura la presentacin de la pgina web, en esta etapa se
separa la informacin total en pginas web y se relacionan entre s.
Adems de esto se deben definir los objetivos especficos de cada pgina
web, la arquitectura que une a estas pginas y la interconexin mediante
hipertextos con la informacin ya presente en otras fuentes de
informacin.
La tercera etapa es el diseo-diagramacin-implementacin, en esta

etapa es en donde se implementa el estilo y la estructura que ya se han
determinado en la etapa dos, de acuerdo a esto se realiza la
diagramacin grfica, se organiza la informacin que debe estar en cada
prrafo y se seleccionan las imgenes, figuras y dems elementos que
deben incluirse en cada pgina. Dependiendo de cada pgina web se
incorporan elementos tales como plantillas para que el usuario deje
23

informacin o diga su opinin. Finalmente se organizan, se unifican y se
complementan todos los anteriores elementos para originar la pgina
web.
La ltima etapa es la publicacin, en esta etapa se debe tener la pgina

web terminada y slo faltara la instalacin de sta en un servidor web
para hacerla accesible a la comunidad de Internet.
El diseo de una pgina web es completamente personal y se puede hacer de

acuerdo a las preferencias o se puede utilizar una plantilla (tmplate). (Ardila &
Vargas, 2007)
Actualmente, la mayora de las pginas en la Web se hacen a travs del lenguaje
HTML, acrnimo ingls de HyperText Markup Language (lenguaje de marcas
hipertextuales). Este formato se ha convertido en uno de los ms populares para
la creacin de pginas Web debido a su fcil manejo, es el lenguaje de marcas
de texto utilizado normalmente en la www (World Wide Web).
Como se indic al inicio del apartado, el lenguaje para construir una pgina web
es el HTML que se trata bsicamente de etiquetas que sirven para definir los
textos y dems elementos que contendr la pgina web. En la imagen anterior
se muestra la sintaxis de una etiqueta.
Para editar o crear una pgina

web se utilizan los editores de
HTML que pueden ser de dos
tipos: unos permiten editar en
CSS
base a etiquetas y otros en base

al diseo como si se editara en
HTML
Java
Script
un programa como Word.

Actualmente el lenguaje HTML
est siendo reemplazado por
HTML5 por lo que lo utilizaremos
HTML5
en el presente manual.
HTML5 es un estndar que
rene tres (3) tecnologas: el
24

lenguaje HTML, CSS, JavaScript. HTML5 combina estas tecnologas utilizando
HTML para crear la estructura de la pgina web, CSS para dar apariencia de las
mismas y JavaScript para darles la interactividad y animacin.
Como se seal anteriormente podemos usar el Bloc de Notas de Windows para
comenzar en el aprendizaje de HTML.
Para crear una pgina web desde cero abrir el bloc de notas y luego seguir los
pasos siguientes:
En el Block de Notas
escribir la etiqueta de
apertura o inicio <html>,
las
etiquetas
Etiqueta de apertura
van
siempre entre los signos
Etiqueta de cierre
menor que (<) y mayor

que (>), la mayora de las
etiquetas
poseen
una
etiqueta de cierre como se muestra en la imagen adjunta. Las etiquetas

de cierre deben tener el mismo contenido que la etiqueta de apertura
anteponiendo una barra invertida.
Las etiquetas se escriben en una estructura de rbol, esto quiere decir

que hay etiquetas anidadas, es decir, etiquetas dentro de otras. Como se
mostr en la imagen anterior toda pgina web debe comenzar con la
etiqueta <html> y terminar con la etiqueta de cierre</html>. Todo debe
estar entre este espacio, es decir, toda el contenido o cdigo de la pgina
web ir entre estas etiquetas.
Cdigo de la Pgina web
De acuerdo al estndar HTML5, antes de la etiqueta de apertura <html>

se debe escribir la etiqueta <!DOCTYPE html> para informar al
navegador del tipo de estndar que se usar en la pgina.
25
A continuacin procedemos a escribir el cdigo de la pgina web,

siempre con etiquetas, y podemos comenzar con <head> que sirve para
incluir informacin las hojas de estilo, los archivos JavaScript internos,
conos, ttulo de la pgina web, sin embargo estos en su mayora no se
vern cuando se visualice en el navegador la pgina web creada.
Tambin puede incluir las etiquetas meta y otras. Escribimos la etiqueta
<head> y su cierre </head>.
Como se expres en el punto anterior, la etiqueta <head> puede incluir

las etiquetas meta; una de las principales es <meta charset=iso-8559/>
que permite especificar como se mostrar el texto de la pgina web en la
pantalla. Generalmente estas etiquetas son construidas por el
navegador. Es necesario sealar que la etiqueta meta, igual que otras,
no tiene etiqueta de cierre por lo que se usa la barra invertida antes del
< menor que.
26
Otras etiquetas esenciales para una pgina web son:

<meta name=description content=Integracin TIC/>
Esta metaetiqueta da una descripcin de la temtica de la pgina
web lo cual es fundamental para los buscadores como Google,
Yahoo u otros dado que estos la utilizan para categorizarla. Para
hacer esto se ha utilizado atributos como content. Los tributos son
opcionales, sin embargo permiten dar una informacin adicional
<meta name=keywords content=tic, aip, crt, UCSM/>
Con esta etiqueta especificaremos las palabras claves para los
buscadores.
Ahora incluiremos una de las etiquetas importantes y necesarias: <body>

que significa cuerpo y en el ir todo lo que se desee mostrar en la pgina
web. Igual que <head> tiene su etiqueta de cierre: </body>. En medio de
ambas escribir un mensaje.
Para guardar la pgina web creamos una carpeta con

el nombre, por ejemplo, web y en el bloc de notas
hacemos clic en archivo opcin guardar o guardar
como. Al escribir el nombre del archivo se debe agregar
el punto y luego html (.html) En la carpeta debe
27

mostrarse el archivo guardado con el cono del navegador configurado
por defecto.
Al hacer doble clic sobre el archivo html guardado en la carpeta web se

abrir en el navegador la pgina web creada. Observe que slo muestra
el contenido escrito entre las etiquetas body.
4. LAS NUEVAS ETIQUETAS EN HTML5

Hasta ahora se ha visto algunas etiquetas usadas en el estndar HTML5.
Algunas otras etiquetas que se usan se muestran en la imagen siguiente son:
28
Como se observa en el bloc de notas anterior, se ha utilizado algunas otras etiquetas

como por ejemplo <header> que se usa para establecer una cabecera pero dentro se
ha utilizado <group> debido a que se coloc un ttulo h1 y otro h2.
<nav> est diseado para colocar el men de navegacin generalmente se usa la
etiqueta <ul> dentro de ella.
<section> define un rea de contenido nica dentro de la pgina. <article> define zonas
de contenido independiente dentro de la pgina web. <aside> se utiliza para determinar
un contenido que no tiene relacin directa con el objetivo de la pgina web. Y <footer>
que permite colocar un pie de pgina.
Por otro lado se tiene las etiquetas ms importantes, de acuerdo a muchos sitios en
internet:
<video> permite la insercin de un vdeo sin necesidad de plugins.
<audio> como lo indica su nombre, permite insertar un audio en formato, por

ejemplo Mp3 aunque depende del navegador.
<svg> es una etiqueta, al igual que <img>, que permite insertar dibujos y
animaciones vectoriales al estilo de Flash.
Existen muchas otras etiquetas que permiten mejorar el aspecto final de la pgina web
u organizar mejor la informacin, pero a partir de ahora puede ser necesario utilizar otros
tipos de editores HTML o plantillas que es lo ms recomendable.
29

5. EDICIN DE PGINAS WEB
Para editar una pgina web podemos utilizar un editor de HTML, sin embargo,
tambin se puede seguir usando el Bloc de Notas de Windows. Para editar
procedemos de la siguiente forma:
Abrir la carpeta donde se ubica el archivo html. Y abrir el archivo en el

navegador por defecto haciendo doble clic en el mismo.
Hacer clic derecho en el archivo y buscar la opcin Abrir con y hacer clic
en Bloc de notas.
Al abrir el archivo con el bloc de notas se puede escribir nuevas etiquetas

para ir mejorando el aspecto de la pgina web.
Como se explic anteriormente, los buscadores actuales toman en

cuenta palabras clave ubicadas en el ttulo de la pginas web para
mostrar sus resultados de bsqueda, por ello es aconsejable usar la
etiqueta title dentro de head para escribir el ttulo de la pgina.
<title>Pgina de AIP</title>
30
Hacer clic en guardar y luego desde la carpeta donde se guard el

archivo hacer doble clic en el archivo. En el navegador se mostrar la
pgina web pero en la pestaa se ver lo que se escribi en la etiqueta
title.
31

7. ORGANIZACIN DE LA PGINA WEB
En este apartado veremos la organizacin bsica actual del body de una pgina
web en el estndar HTML5. En la cabecera se podra poner el logotipo, direccin
e informacin importante; en la barra de navegacin se podra poner los men,
mens desplegables, y enlaces para navegar por el sitios; en la barra lateral
donde suelen aparecer enlaces, puede estar a la derecha o la izquierda; el
cometido principal con la informacin o servicio que se brinda; y debajo la
informacin personal o institucional, dependiendo de tipo de web, como por
ejemplo el correo y otros.
Al costado de las partes de la pgina web se pueden observar las etiquetas que
se utilizan en HTML5.
Por ejemplo para poner el ttulo de la pgina web utilizamos la etiqueta
<header> y </header> para cerrar.
Otra etiqueta que se usa bastante es <h1> y </h1> que permite establecer el
tamao de la fuente ms grande, estas etiquetas pueden ir de h1 a h6 siendo h1
el tamao de fuente ms grande y h6 el ms pequeo.
32

1. Investiga acerca de las etiquetas utilizadas en el estndar HTML5, elabora
un cuadro con las principales, su sintaxis y la aplicacin de cada una.
2. Crea una pgina web utilizando el bloc de notas de Windows.
CUESTIONARIO
1. Qu diferencias existen entre HTML y HTML5?
3. Es necesario contar con un sitio web propio?
33

3. CREACIN DE PGINAS WEB EN LNEA
OBJETIVOS
Utilizar servicios on line para crear y publicar un sitio web.
Insertar herramientas 2.0 en los sitios web creados.
34

CREACIN DE PGINAS WEB EN LNEA
SERVICIOS DE CREACIN DE PGINAS WEB EN LNEA
En la nube podemos encontrar infinidad de sitios web que ofrecen la posibilidad de
crear una pgina web gratuita con ayuda de editores en lnea y sin saber lago de
programacin o del lenguaje HTML o del estndar HTML5 o de otro.
1. WIX
Uno de los sitios que ofrece la creacin de sitios web o pginas web es Wix.com. La
direccin de este sitio en espaol es http://es.wix.com/es y el registro es gratuito
puedes hacerlo con tu cuenta de Gmail de Google.
a. Para crear un nuevo sitio hacer clic en el botn correspondiente esto

mostrar una nueva ventana con las plantillas que se pueden usar.
35

b. En el lado izquierdo de la pantalla se muestra un men con las diferentes
categoras de plantillas que ofrece el sitio, al hacer clic en el signo ms al
lado izquierdo de cada categora se muestra las subcategoras. Al hacer
clic en las subcategoras, las plantillas pertenecientes a esta. Cada
plantilla ofrece una miniatura de muestra, dos opciones en ella y si es
gratuita o de pago. La opcin ver permite dar un vistazo a la plantilla y la
opcin editar permite comenzar a trabajar directamente con la plantilla.
c. Al hacer clic en editar se muestra la plantilla, como puede observar en la

imagen siguiente, en el editor con 4 opciones: fondo, agregar, app market
y mis archivos. Sin embargo el aspecto de cada elemento mostrado en la
36

pgina web Es posible hacer cambios de cualquier elemento de la pgina
mostrada. En la parte superior se muestra una barra de opciones.
d. Al hacer clic en algn elemento se ofrece las opciones en una barra de

herramientas flotante, con esta es posible personalizar cualquier aspecto
del elemento e incluso eliminarlo.
e. Al hacer clic en una opcin del men izquierdo se muestra las alternativas
que se tiene. Por ejemplo en la opcin Fondo de pgina muestra las
opciones de color, imagen o vdeo.
f.
La opcin agregar muestra una cantidad enorme de elementos que es

posible agregar a la pgina web: texto, imagen y dems que se muestran
en la imagen siguiente.
37

g. Terminada
la
personalizacin y edicin de
la pgina se puede pasar
hacer lo mismo con las
dems pginas o crear otras
y proceder a editarlas de
acuerdo
al
criterio
del
usuario.
Para acceder a editar las
otras pginas del sitio hacer
clic en la opcin pginas
ubicada en la barra superior.
El
cuadro
de
pginas
permite reubicar el orden de

las pginas arrastrando el
nombre de la pgina al lugar
elegido.
Cada pgina muestra al lado
derecho un botn con tres
puntos con el que se accede a opciones referidas a personalizar
prcticamente cualquier aspecto del diseo, nombre y hasta eliminar la
pgina.
En la parte inferior se muestra el botn de agregar pginas que ofrece la
posibilidad de agregar una pgina adicional, un enlace o un men de
encabezado.
Por otro lado con, la opcin
transiciones entre pginas
es posible elegir un efecto
de transicin entre las
pginas.
h. La opcin sitio de la barra
de herramientas muestra
una serie de opciones de
control
del
sitio
como
guardar, publicar, salir del

editor,
ir
al
panel
de
control, entre otras.

38

i.
La opcin herramientas permite activar y desactivar estas dentro del

editor. Adems se tiene las opciones ayuda, upgrade, deshacer y
rehacer. Se muestra adems el botn
para cambiar la versin del
editor para mviles. Se muestra a continuacin la opcin de guardar y la

publicar. Al hacer clic en publicar se muestra un cuadro como se muestra
a
continuacin
donde se puede obtener
un dominio gratuito
proporcionado por Wix o conectar con el dominio que poseamos. La

manera de obtener un dominio en Wix es escribir en el espacio resaltado
al final de la direccin URL mostrada, el nombre del sitio que se desea.
j.
Hacer clic en el botn guardar y continuar. Ahora se muestra las

felicitaciones y la opcin para poder ver el sitio en una nueva pestaa del
navegador o presionar el botn hecho ubicado al pie del cuadro.
39

2. GOOGLE SITES
Google ofrece una aplicacin gratuita para la creacin de pginas web y websites
denominada SITES. La forma de crear pginas web con SITES de Google es sencilla
como editar un documento. Una de las ms grandes ventajas que otorga Sites de
Google es que permite incrustar rpidamente todos los archivos y servicios de las
otras herramientas de Google como Drive, Picassa, Youtube, entre otras, sin
necesidad, en la mayora de casos del cdigo HTML.
Como lo seala en su sitio web: Google Sites es una aplicacin online que permite
crear un sitio web de colaboracin. Tan fcil como editar un documento. Google
Sites permite recopilar con rapidez informacin de distinta naturaleza en una misma
ubicacin (vdeos, calendarios, presentaciones, archivos adjuntos y texto) y
compartirla fcilmente con un pequeo grupo de personas, toda tu organizacin o
con cualquier usuario de la Red para verla o editarla.
Por otro lado se seala que las funciones de la aplicacin son:
Personaliza la interfaz del sitio para que se parezca a tu grupo o adquiera el

aspecto del proyecto.
Crea una nueva subpgina solo con hacer clic en un botn.
Elige distintos tipos de pgina, como pgina web, anuncios, panel de control y
lista.
Centraliza la informacin compartida: incrusta contenido enriquecido (vdeo,

documentos, hojas de clculo, presentaciones, presentaciones de diapositivas
de fotos de Picasa, gadgets de iGoogle) en cualquier pgina y sube archivos
adjuntos.
Administra la configuracin de permisos para mantener el grado de privacidad,

de libertad de edicin o de visualizacin que quieras. Solo los usuarios que
invites a tu dominio como colaboradores podrn crear sitios para tu dominio.
Realiza bsquedas en tu contenido de Google Sites mediante la tecnologa de

bsqueda de Google.
Para utilizar esta aplicacin de Google, se debe tener una cuenta en Gmail:
a. Para ingresar a SITES usar la URL https://sites.google.com/?hl=ca o en el
Google buscar sites. Cuando se ingresa a Google Sites se muestra el
escritorio o pgina de inicio que se muestra en la imagen siguiente. En esta
pgina de inicio de SITES se mostrarn, luego todas las pginas que se
hayan creado.
En la parte superior de la pgina de inicio se muestra el botn de Crear, hacer
clic ah para empezar a crear un sitio.
40
b. A continuacin se muestra opciones para decidir por ejemplo si usar una

plantilla en blanco o buscar en la galera de plantillas prediseadas de
acuerdo a las categoras ms utilizadas para la creacin de sitios web.
c. Al hacer clic en navegar por la galera se muestran las categoras como la

de escuela y educacin con diversas plantillas como la de webquest u otras.
41

d. Al hacer clic en una plantilla se muestra una miniatura de la pgina web
principal y en la parte inferior el botn de seleccionar. Para poder hacer una
vista previa de la plantilla hacer clic en el enlace Gadget from template
directory sealado en la imagen siguiente.
e. En la barra superior de la vista previa hacer clic en el botn utilizar la plantilla

si estamos de acuerdo con utilizarla. Ahora se retorna a la pgina de inicio
de Google Sites con la plantilla elegida y seleccionada. Ahora es necesario
completar la informacin requerida como el nombre del sitio.
f.
Para la ubicacin del sitio escribir un nombre al final de la URL

http://sites.google.com/site/[nombre de tu sitio] el nombre del sitio, tal y como
se informa slo puede contener letras y nmeros.
g. Se cuenta con las opciones de elegir un diseo y escribir una descripcin del
sitio. Luego se muestra la opcin para marcar que no es un robot quien crea
el sitio y el RECAPTCHA para comprobarlo.
42
h. Ahora slo queda hacer clic en el botn CREAR ubicado en la parte superior
de la pgina. Esto tomar algn tiempo. Finalmente se mostrar el sitio recin
creado en modo de edicin. En la parte superior de la pgina del editor se
tienen las herramientas para editar representado por el cono de un lpiz
, crear una nueva pgina
, ms acciones
y la opcin de
compartir el sitio.
i.
Para editar la pgina web actual hacer clic en el cono del lpiz, a
continuacin se presenta en modo edicin. En este modo se tiene una barra
de men y herramientas de formato de texto, adems se tiene el botn
guardar o cancelar. Si se desea utilizar el lenguaje HTML, existe la opcin
para pasar a ese modo de ingresar informacin.
43
HTML
j.
El botn insertar de la barra de men muestra una serie de elementos para

poder integrar o incrustar en la pgina web actual. Se ha divido en tres tipos
de elementos: comn, gadget o plugin y Google.
Los elementos situados en la categora comn nos sirven para poder insertar
imgenes y otros elementos que toda pgina web posee. Por ejemplo para
subir una imagen a la pgina web en edicin hacer clic en la opcin
correspondiente, esto mostrar un cuadro donde se puede subir una imagen
44

o pegar una URL. Una vez seleccionada la imagen se activa el botn aceptar
ubicada en la esquina inferior.
k. La imagen se ubicar en el lugar donde se ubic el cursor con una serie de
opciones como la ubicacin, tamao y otras.
l.
Terminada la edicin de la pgina hacer clic en el botn guardar ubicado en

la parte superior de la ventana.
45

Para otras opciones como las de
administracin de la pgina actual o
del sitio en su totalidad, hacer clic en
el botn con el cono
del
engranaje. Esto despliega un men

con diferentes opciones que se
muestran en la imagen adjunta.
Este men ofrece desde ver el
historial de revisiones de la pgina,
copiarla,
eliminarla
hasta
la
administracin del sitio en pleno.

Como se observa en la imagen
adjunta de las acciones que se
pueden realizar en esta opcin se
han clasificado en 3 grupos:
a. Acciones de pgina, que
como lo indica el nombre se
refiere a todas las acciones
en torno a la pgina actual. El historial de revisiones permite monitorear la
evolucin de las ediciones hechas a la pgina y la posibilidad de poder ir al
estado anterior.
La siguiente opcin permite registrar una direccin de correo electrnico a
donde llegarn los informes de
las ediciones de la pgina y as
monitorear
por
ejemplo
el
trabajo colaborativo de varios

autores en la construccin de
la pgina.
Al hacer clic en Configuracin
de la pgina muestra las
opciones
que
pueden
ser
desactivadas: mostrar ttulo de

la pgina, los enlaces; permitir
archivos
comentarios,
adjuntos
entre
y
otras.
Tambin muestra el enlace o

46

URL de la pgina. Incluso es posible cambiar la plantilla de la pgina en
edicin.
Culminada la activacin o desactivacin de opciones se debe hacer clic en
guardar ubicada al final.
Otras opciones de este grupo permiten imprimir, copiar, mover, eliminar y la
vista en modo lector.
b. El grupo de opciones referida a las plantillas permite guardar la actual como
plantilla de pgina, muy importante si he diseado una nueva plantilla. La
otra opcin da acceso al cambio de la plantilla actual.
c. Acciones del sitio. Como se puede observar en la imagen anterior estas
opciones se aplican a todo el sitio, es decir a toda las pginas del sitio. La
primera es similar a la pgina y permite registrar un correo electrnico a cuya
bandeja llegarn informes cada vez que el sitio haya sido editado. Esto es
particularmente importante cuando se construye o administra un sitio de
manera colaborativa.
La siguiente opcin es la de Modifica el diseo del sitio. Al ingresar a esta
opcin se puede observar que en la parte superior (enmarcado en la imagen
siguiente) las partes del diseo como encabezado y otras. Al hacer clic en
alguna de ellas, por ejemplo Barra lateral, se deshabilita y ya no aparecer
en el sitio. Para habilitarla, hacer clic, nuevamente, en Barra lateral. Otro
aspecto que puede cambiar en el diseo es el ancho del sitio que puede ser
determinado por la plantilla o personalizado; es necesario considerar una
tamao entre 800 y 1000 pixeles pues si es demasiado grande no podr
entrar en la pantalla del navegador en algunas pantallas.
47

Otro aspecto resaltante es la opcin de que al pasar el cursor por las
diferentes zonas de la pgina web se muestra un recuadro para su edicin.
Por ejemplo en la imagen anterior, al pasar el cursor sobre el encabezado se
muestra Editar encabezado del sitio.
Para modificar las zonas de la pgina web hacer clic sobre ellas. Por ejemplo
para modificar el diseo del encabezado hacer clic sobre ella. Esto mostrar
un cuadro, que se muestra a continuacin, que permite, por ejemplo,
modificar: la altura, uso del logotipo, la alineacin y la oportunidad de adjuntar
archivos. Para guardar los cambios, hacer clic en el botn aceptar
Para editar el sitio hacer clic en la opcin Administrar sitio. A continuacin

se muestra un men en el lado izquierdo con las opciones que afectarn a
todo el sitio que se ha creado.
48

La primera opcin del men es la de actividad reciente del sitio. La segunda
opcin. Pginas, muestra el rbol de pginas web y subpginas con
hipervnculo a las mismas.
La opcin Archivos adjuntos permite visualizar e identificar la ubicacin de
los archivos subidos en las diferentes pginas del sitio.
Otra opcin muy importante es General que muestra la informacin que se
muestra a los visitantes cuando ingresan a la pgina principal, esta se puede
editar o cambiar directamente en las cajas que la contienen; el estado del
almacenamiento (se otorga 100 Mb) y otras opciones.
La opcin compartir y permisos permite cambiar a quienes pueden ver el
sitio. Por defecto el sitio es pblico pero se puede restringir a usuarios que
tengan el enlace, o slo considerar a ciertos usuarios.
Aqu tambin es posible invitar a otros usuarios, siempre que tengan una
cuenta en Gmail, para que puedan ser editores del sitio. Estos nuevos
administradores del sitio recibirn un correo de invitacin y debern aceptarla
para que aparezcan como editores del sitio.
Se puede usar un dominio adquirido para ser el de la pgina creada. Esto

se puede hacer en la opcin de direccin web.
La opcin TEMAS, COLORES Y FUENTES permite personalizar el aspecto
del sitio, para lo cual debe marcase la ltima opcin. Por ejemplo en el caso
mostrado en la imagen siguiente: el fondo de la pgina completa est
seleccionado por defecto la alternativa Tema. Esto indica que el tema de
plantilla elegida determina el color del fondo de toda la pgina. Al marcar la
49
opcin ninguno se elimina el color y al hacer clic en el tarro de pintura

se muestra la paleta de colores para elegir uno. Cada cambio realizado hace
que se modifique el aspecto de la pgina web y se mostrar en la vista previa
ubicada en la parte inferior.
Para modificar el texto de la pgina completa se debe hacer clic en la opcin

texto. Se mostrar a continuacin otras opciones para determinar el formato
y color del texto: fuente, color, tamao y color de enlace. Como se observa
en la imagen siguiente todo se ha seleccionado de acuerdo al tema elegido
durante la creacin del sitio sin embargo se ofrece la posibilidad de poder
personalizar estos aspectos marcando la opcin correspondiente y de esta
manera tener acceso a las alternativas de cada aspecto del formato.
50

CREAR UNA PGINA WEB
a. Si se est diseando el sitio web a partir de una plantilla ser necesario, eliminar
o crear otras pginas web dentro del sitio, de acuerdo a las necesidades que se
vayan encontrando. La manera ms sencilla de hacer esto, crear pginas, es
con la opcin Agregar pgina, que est representada con el cono
ubicado en la parte superior de la pgina.
b. A continuacin se muestra la pgina de creacin (imagen a continuacin) donde

se debe completar con el nombre de la nueva pgina, seleccionar una plantilla
(opcional) indicar la ubicacin, si ser de nivel superior o dentro de otra pgina.
Finalmente hacer clic en Crear (botn rojo en la parte superior)
Si el nombre es largo usar el modelo slug es decir separar las palabras con
guiones.
51

c. Ahora se muestra la pgina recin creada dentro del diseo del sitio y en el
modo de edicin para poder colocar el contenido que se desea publicar. En la
parte superior se tiene la barra de mens y de herramientas bsicas. Se muestra
adems el encabezado del sitio y el sidebar. En el sidebar no se aprecia la
pgina creada debido a que an no se ha configurado la pgina. Antes de esto
proceder a guardar la pgina. Clic en el botn de guardar.
d. Para configurar la pgina hacer clic en el cono del engranaje ubicado en la parte
superior.
e. Se muestra un cuadro con las diferentes opciones para configurar la pgina

creada. Como se observa, es posible, incluso, cambiar el nombre de la pgina
y su plantilla. Se puede, adems,
escribir una descripcin de la
pgina y su contenido. Para que
se muestre en la barra lateral
junto a las dems pginas del
sitio se debe marcar la opcin
Mostrar esta pgina en la
barra lateral. Configurado todo
lo referido a la actual pgina del
sitio, clic en guardar.
52

f.
Como se observa en la siguiente imagen, ahora el nombre de la pgina nueva

(Documento) se ubica en la barra lateral como acceso o vnculo.
g. Para seguir editando la pgina creada, hacer clic en el cono del lpiz. Esto nos
muestra la pgina en modo edicin con las barras de herramientas.
h. Si es necesario insertar contenido hacer clic en el men insertar de la barra
superior para que muestre los tres tipos de contenido que se puede insertar.
Como se observa en la imagen siguiente, es posible insertar directamente
contenido de los otros servicios de Google como Calendario, Grfico, Drive,
Google+, Grupo, Hangout, Mapas y Youtube.
i.
Para insertar un archivo que se tenga guardado en Google Drive hacer clic en
Drive lo que, como lo muestra la imagen siguiente, los distintos tipos de archivos
que se guarda en Drive.
53

j.
Al hacer clic en alguna de las opciones se muestra el cuadro de insertar. Elegir

el tipo de archivo a insertar. A continuacin se mostrarn las miniaturas de todos
los archivos de ese tipo guardados en Drive. Seleccionar el archivo a insertar y
clic en el botn de seleccionar ubicado al pie del cuadro.
k. A continuacin se muestra las opciones de publicacin del archivo

seleccionado. Marcar o desmarcar de acuerdo a criterio del usuario y determinar
o cambiar el alto y ancho de dicho archivo en modo incrustado dentro de la
pgina web.
l.
Ahora se muestra el archivo en la pgina pero en modo edicin. Se puede

configura el aspecto con respecto a texto o a la alineacin
54

m. Finalmente hacer clic en el botn de guardar ubicado en la parte superior de la
pgina. Ahora se muestra el archivo incrustado en la pgina web. Es posible
seguir editando de acuerdo al proceso indicado.
Para insertar vdeos directamente de Youtube se procede de igual manera que en el

caso de archivos.
a. Se crea una pgina (si es necesario) en el men insertar elegir, en el grupo
Google, la ltima opcin, Youtube.
b. En el cuadro siguiente pegar la URL del vdeo que se desea incrustar en la

pgina web. Se muestra una miniatura del vdeo. Marcar o desmarcar las
opciones y clic en guardar.
55

c. Se muestra en la ubicacin donde estar el vdeo con las opciones finales sobre
la alineacin o su aspecto respecto al texto.
d. Hacer clic en Guardar. Esto muestra la pgina como se mostrar al pblico, con
el vdeo incrustado en la pgina.
56

1. Regstrate en un servicio gratuito de creacin de sitios web y elige una
plantilla gratuita, edita y publica.
2. Elabora un pequeo manual de uso del sitio.
CUESTIONARIO
3. Qu semejanzas y diferencias puedes encontrar entre WIX y SITES de
Google?
4. Qu desventajas tienen los sitios creados en servicios gratuitos?
57

4. SISTEMA DE MANEJO DE CONTENIDOS (CMS)
OBJETIVOS
Identificar alternativas a la creacin de pginas y sitios web con software

local o en lnea.
Instalar un sistema de manejo de contenidos en un hosting gratuito y de

pago
Utilizar un sistema de manejo de contenidos para publicar una pgina

web educativa con integracin de herramientas web 2.0.
58

SISTEMA DE MANEJO DE CONTENIDOS (CMS)
La creacin de pginas web o de sitios es
una tarea compleja y demanda una gran
cantidad de tiempo. En esto se puede
observar dos grandes tareas, por un lado se
tiene la creacin de las pginas web con los
estndares actuales, lo que demanda de
profundos
conocimientos
tcnicos
informticos. Por otro lado se tiene que

considerar el contenido que se mostrar en
las pginas web, la informacin que es el centro de toda esta evolucin en el campo de
la tecnologa.
En la actualidad, los avances en este aspecto de la tecnologa han permitido separar
ambos trabajos, permitiendo liberar al usuario de la parte informtica, cdigos y
lenguajes para poder darle la primaca a la informacin que se quiere compartir, al
contenido que se publica.
En este contexto se ha generado el fenmeno de que usuarios de diferentes sectores
de la sociedad incursionen en la creacin de sitios web y en su actualizacin sin tener
muchos conocimientos de informtica. Esto ha revolucionado el uso de la web y ha
impulsado la generacin de conceptos como el de inteligencia colectiva y otros que han
irrumpido en el campo educativo.
Por otro lado se tiene a una gran cantidad de docentes de todo el mundo incursionado
en el uso de herramientas web 2.0 compartiendo los logros alcanzados sobre todo en la
motivacin por aprender que genera en el estudiante.
Gracias a estas herramientas se ha podido
dar paso a metodologas diversas y el
surgimiento
de
modelos
educativos
innovadores con el uso de la tecnologa

dando impulso al debate en torno a la
escuela 2.0, el aula aumentada y otros que
an son muy controversiales.
El docente, en esta realidad, ya no puede
seguir transmitiendo la informacin y el conocimiento como antao, est llamado a
gestionar el conocimiento de sus estudiantes para lo cual tiene que recurrir a las
59

herramientas web 2.0 dado que estas utilizan el lenguaje de los estudiantes
denominados nativos digitales. Tienen que hablarles en su idioma.
Hoy la informacin es compartida de manera directa por quienes la generan, y eso es
gracias a las redes sociales y las herramientas Web 2.0. stas han cambiado en mucho
los ambientes personales de aprendizaje (APA o PLE por sus siglas en ingls) de
nuestros alumnos, y de los propios investigadores y docentes, el conocimiento libre y
educacin expandida, el uso de los recursos educativos abiertos (REA), el aprendizaje
en red y la inteligencia colectiva (teoras
de las redes sociales), son vas alternas
en donde los profesores y alumnos
aprenden
fuera
de
los
espacios
formales. (Ruz, 2012)

Sin embargo estas herramientas no se
encuentran en un solo sitio sino que han
sido desarrolladas por diferentes empresas y se publican en diferentes lugares en la
web, y para centralizarlas en un espacio se han desarrollado los denominados CMS
(sistema de manejo de contenidos), por sus siglas en ingls. Un CMS es una
herramienta o espacio en la WEB que permite integrar casi todo lo que la Web 2.0
ofrece: compartir los contenidos, generar discusiones en foros, construir contenido de
manera colaborativa, desarrollar proyectos y mdulos con nuevas estrategias de trabajo
educativo.
De acuerdo a la teora del Conectivismo de George Siemens y Stephen Downes, el
manejo de un programa curricular asistido con un sistema de gestin de contenidos (en
ingls Content Management System, abreviado CMS) permite al profesor mejorar la
gestin del conocimiento con sus alumnos. (Ruz, 2012)
Los sistemas de gestin de contenido (CMS) constituyen los cimientos esenciales de
las plataformas de prestacin de servicios de publicacin y colaboracin como los son
los blogs y wikis. Detrs de cada herramienta de colaboracin, comunicacin, expresin,
manejo de contenidos, hay unos sistemas muy complejos, que forman parte de esa
infraestructura de la web, y que es invisible para los usuarios, ellos deben enfocarse a
la creacin, manipulacin, comparticin y/o publicacin de contenido.
60

La gestin de contenidos debe considerarse
como un paso necesario en la evolucin de la
gestin de la informacin, ya que integra la
gestin de todo tipo de informacin (por
ejemplo: no estructurada, estructurada, semiestructurada) a travs de todo el ciclo de vida
de los contenidos que se producen y utilizan
en los contextos organizacionales (Boiko, 2002). En ese sentido, los sistemas de gestin
de contenidos (CMS por sus siglas en ingls) deben cumplir con tres funciones bsicas:
(a) permitir la entrada de contenido digital en diversos formatos, (b) permitir la gestin
de dicho contenido, y (c) permitir la recuperacin posterior de todo esto (Serrano-Cobos,
2007). (Bohorquez, 2015)
En la web se puede encontrar muchos CMS, entre los ms conocidos tenemos a
Wordpress, Joomla, Drupal, Moodle entre otros.
WORDPRESS
Wordpress es el sistema de gestin de contenidos ms popular en lengua castellana

incluso se tiene una versin en Per cuya URL es https://pe.wordpress.org/
De acuerdo al sitio web, WordPress es uno de los Software Web (plataformas

semnticas de publicacin), ms usados en el mundo. Permite crear blogs o sitios
web, combinando la esttica, los estndares web y la usabilidad. Adems,
WordPress es de libre distribucin y se publica bajo la Licencia Pblica General de
GNU (GNU GPL).
61

La principal diferencia entre crear una pgina web con WordPress.org o con un
creador de websites es el nivel de complejidad. Con Wordpress se puede acceder a
gestionar el sitio y expandirlo debido a que no se tiene lmites como con sitios
creados directamente.
Wordpress permite crear pginas web de diseo profesional gracias a la inmensa
cantidad de temas y plugins aportados por los propios miembros de la comunidad
repartidos en todo el mundo.
Wordpress proporciona un software de instalacin del sitio web en cualquier servicio
de alojamiento o hosting de pago o gratuito, siempre y cuando cumpla con los
requisitos:
PHP versin 5.2.4 o superior.
MySQL versin 5.0 o superior.
El mdulo mod_rewrite de Apache.
La instalacin de Wordpress en un servicio de alojamiento o hosting, como Miarroba,

puede realizarse directamente utilizando el servicio WEBFTP o utilizando un cliente
FTP como Filezilla. En el apartado de alojamiento se puede encontrar una breve
gua para adquirir y configurar un alojamiento o hosting gratuito en el sitio de
Miarroba
Para cargar los archivos de instalacin de Wordpress por medio del servicio
WEBFTP de Miarroba requiere de los siguientes pasos:
a. Descargar la ltima versin de Wordpress desde la pgina oficial de Per:
https://pe.wordpress.org/
b. Se descarga una carpeta comprimida con los archivos necesarios para

instalar el sistema de gestin de contenidos Wordpress. Descomprimir el
paquete descargado en una carpeta vaca creada en su equipo. Cargar los
todos los archivos en una carpeta del espacio concedido por su servicio de
alojamiento contratado o de pago. Para hacer esto se requiere utilizar
software de transmisin de datos FTP. Miarroba proporciona un servicio
WEBFTP incluido en su sitio as que no ser necesario instalar otro software.
62

c. Hacer clic en WebFTP del panel de control del sitio web. En la parte inferior
se muestra las carpetas tmp y web, es dentro de esta ltima, la carpeta web,
donde se sube todos los archivos descomprimidos en el paso anterior. Hacer
clic en la carpeta web para abrirla
d. Una vez ubicados en la carpeta web, en la barra de herramientas hacer clic

en la opcin subir ubicada a la derecha. Esto mostrar el explorador de
Windows para poder buscar, seleccionar y subir todos los archivos.
e. Con el explorador de Windows, seleccionar los archivos a subir teniendo el

cuidado de crear las carpetas al igual que el descomprimido. Todos los
archivos deben ser subidos sin errores por lo que es necesario fijarse que en
recuadro del lado derecho del WEBFTP. En este recuadro se puede observar
el progreso en la subida de archivos. En la parte inferior se muestra la cola
que hacen los archivos para ser subidos o transferidos al alojamiento y en la
parte superior se muestran los archivos que ya se intent transferir. Todos
los archivos deben tener el check verde que indica que han subido
correctamente. Si se tiene un cono rojo es aviso de que el archivo respectivo
no subi por lo que hay que reintentar subirlo ponindolo en cola.
63
f.
Terminado el proceso de transferencia de archivos se procede a crear la

base de datos MySQL necesaria para que el sitio web funcione
adecuadamente. Para esto se debe hacer clic en MySQL ubicado en el panel
superior como se muestra en la imagen siguiente, completar con la
contrasea de la base de datos de MySQL, confirmar y escribir las letras
mostradas en el recuadro correspondiente. Hacer clic en continuar.
g. Al presionar el botn continuar se muestra la informacin sobre la base de

datos de MySQL creada en el paso anterior, el nombre del servidor, el
nombre de la base datos, el usuario, la versin y otros datos que se
solicitarn cuando se instale el software por lo que es importante anotarlos.
64

h. Ahora se tiene que introducir los datos de la base de datos de MySQL
anotados en el paso anterior para lo cual se debe retornar a la carpeta web
en WEBFTP y buscar el archivo wp-config-sample.php. hacer clic en el
nombre del archivo y eliminar -sample para cambiar el nombre del archivo
por wp-config.php, luego seleccionarlo haciendo clic en la casilla
respectiva.
i.
A continuacin hacer clic en el botn accin de las herramientas y

seleccionar la opcin editar para poder modificar la informacin referida a la
base de datos de MySQL.
j.
A continuacin se mostrar el editor de HTML en lnea, para poder modificar

los datos de la base de datos MySQL. Reemplazar los datos requeridos
65

resaltados en color azul por los datos de la base de datos MySQL creada
con anterioridad.
k. Cambiar los datos solicitados y resaltados y hacer clic en grabar, cono del
disquete ubicado en la parte superior de la ventana, esperar a que termine
de grabar antes de salir. Luego cerrar la ventana haciendo clic en la X.
Grabar cambios
l.
A continuacin se procede a instalar el software de Wordpress en el

alojamiento elegido para lo cual se debe ingresar a la carpeta wp-admin
ubicada en la carpeta web de WEBFTP y hacer clic en el archivo install.php.
66
m. Se mostrar, en una nueva pestaa del navegador, el instalador de

Wordpress donde se debe completar el ttulo del sitio; el usuario y contrasea
para ingresar al panel de control; correo entre otros datos. Finalmente hacer
clic en el botn Instalar Wordpress, ubicado al final del cuadro.
n. El navegador muestra una pgina con el mensaje de xito si todo ha salido

bien y ahora podemos acceder al panel de control para administrar y editar
nuestro sitio. El dominio ser el proporcionado por Miarroba y se desea
utilizar un dominio propio establecerlo en las herramientas de Miarroba. Para
acceder al panel de control hacer clic en iniciar sesin.
67

o. Escribir el usuario establecido y la contrasea elegidos en los pasos
anteriores
p. Ahora podemos administrar y editar nuestro sitio.
68

1. Investiga y elabora una comparacin entre los CMS ms populares que
pueden utilizarse en el sector educacin.
2. Instala un CMS en un alojamiento gratuito o de pago. Elabora un manual.
CUESTIONARIO
1. Cul es la importancia de los sistemas de gestin de contenidos?
2. Cules son las funcionalidades de los CMS?
3. Qu relacin existe entre los CMS y la gestin del conocimiento?
69

5. EDICIN Y ADMINISTRACIN DE UN CMS
OBJETIVOS
Editar un sistema de gestin de contenidos adecuando los temas a los

requerimientos de un sitio web educativo institucional.
Utilizar el panel de control para administrar un sitio web en base a un

CMS y actualizarlo.
70

EDICIN Y ADMINISTRACIN DE UN CMS
La gran diferencia entre los CMS de la web 1.0 y los CMS de la web 2.0 es la facilidad
de utilizacin de los mismos. Mientras que durante el periodo que se llama web 1.0
instalar y administrar un CMS se requera conocimientos de HTML, hojas de estilo,
bases de datos y lenguajes de programacin. Las nuevas herramientas desarrolladas
durante el periodo de la web 2.0 ha facilitado la administracin, gestin e instalacin de
estas herramientas hasta el punto de que algunas de ellas solo requieren conocer el
nombre de la base de datos, la direccin host del servidor y recordar la clave del usuario.
Los CMS ofrecen todo el utillaje
informtico
necesario
para
desarrollar con comodidad la

autora
creacin
de
los
contenidos. En este sentido,

acostumbran a suministrar un
editor de texto WYSIWYG (what
you see is what you get: lo que
ves
es
lo
que
obtendrs,
literalmente). Este editor, que

funciona de una manera similar a los editores de texto tradicionales, permite que un
contenido pueda ser creado por una persona que no posea conocimientos tcnicos
sobre la creacin de pginas web, sobre lenguajes HTML o XML. Con este editor, la
persona es consciente en todo momento del aspecto final del contenido y no tiene que
estar pendiente, como en el caso de otros editores de pginas web, de los complicados
cdigos que generan ese aspecto. (Montoro, 2005)
Esta funcionalidad se refuerza, adems, con el hecho de que los CMS tratan el
contenido separadamente de la apariencia final que pueda adquirir el mismo. Esto
permite que la persona que lo est creando pueda despreocuparse de los temas
relacionados con esa apariencia formal y pueda centrarse, casi de forma exclusiva, en
la calidad semntica del mismo.
71

Para el caso del apartado anterior donde se instal el CMS gratuito de Wordpress en el
servicio de alojamiento de Miarroba, su edicin y administracin es posible digitando
directamente en la barra del navegador la siguiente direccin URL:
http://[nombre-del-dominio]/wp-admin
Se debe reemplazar [nombre-del-dominio] por el
nombre del dominio que se tenga registrado:
ejemplo:
ticmoquegua.webcindario.com
que
es
ingresar
otorgado gratuitamente por Miarroba.

a. En
cualquier
navegador
http://ticmoquegua.webcindario.com/wpadmin
b. Se solicitar el nombre del usuario y la
contrasea que se ingresaron durante la
instalacin de Wordpress.
c. Hacer clic en iniciar sesin para acceder a la administracin del sitio web creado.
d. Lo primero que se tiene es la pgina del panel con otras opciones de
administracin en un men a la izquierda.
e. Para poder acceder al panel de control se debe hacer clic en el botn omitir
ubicado en la parte superior izquierda de la pgina de panel.
f.
De aqu en adelante cuando se acceda a la administracin del sitio web se

mostrar el panel que como se observa en la imagen siguiente permite una serie
de acciones referidas a diferentes al manejo de contenidos dentro del sitio web.
72
g. En el apartado Eche un vistazo se puede ver cuantos artculos o entradas se

tiene, cuantas pginas, la cantidad de comentarios, la versin de Wordpress
utilizada, el nombre de la plantilla del sitio.
Desde el apartado de actividad se puede tener informacin sobre toda la
actividad reciente en el sitio por ejemplo la ltima publicacin hecha, informacin
de los comentarios que se encuentran pendientes, los aprobados entre otros.
Incluso, si se pasa el mouse por el ltimo comentario se ofrece las opciones para
aprobar, rechazar,
Al lado derecho se ubica la caja de edicin rpida que permite crear un artculo
y guardarlo como borrador de modo que si se tiene varios borradores se puede
decidir cuales publicar.
Debajo se ubica las noticias sobre el mundo de Wordpress para estar
actualizados sobre el software.
Para administrar el sitio Wordpress muestra un
men en el lado izquierdo con 3 secciones definidas:
Seccin del panel con el enlace al inicio, y a

las actualizaciones
Seccin de creacin de contenido desde

donde se publican los artculos y entradas,
insertar vdeos y moderar los comentarios
La seccin de funciones de Wordpress que

permite
administrar
la
apariencia,
los
plugins, los usuarios entre otras opciones.

73

Una
caracterstica
del
men
de
administracin es su diseo sensible que le

permite colapsar todo el men en el caso de
estar en una Tablet u otro dispositivo pequeo
y se observa que ocupa mucho espacio.
Para esto hacer clic en la opcin Plegar
Men ubicada en la parte baja del men. Al
hacer esto se muestra nicamente los conos
y las opciones en ventanas flotantes.
Al hacer pasar el cursor el cono de la casa

ubicado en la esquina superior izquierda se
ofrece la opcin de visitar el sitio que muestra
la versin pblica del sitio.
LA BARRA DE HERRAMIENTAS
Cada vez que se ingrese a la administracin del sitio web se observa en la parte
superior de la ventana una barra de herramientas de Wordpress, que siempre estar
visible independientemente del lugar donde se est trabajando. Sin embargo, sus
opciones cambian ligeramente dependiendo si se encuentra en el panel o en la vista
pblica del sitio.
Cuando se encuentra en el rea pblica (hacer clic en el nombre del sitio opcin
Visitar sitio) la barra de herramientas tendr el siguiente aspecto:
Como se observa en la imagen anterior al hacer clic en el nombre del usuario se

puede acceder directamente al panel, temas, widgets y mens. La opcin de
personalizar lleva a la ventana de administracin de la apariencia del sitio. Tambin
74

se muestra la cantidad de comentarios que esperan moderacin. En nueva se puede
crear una nueva entrada para el blog; un nuevo artculo multimedia, una nueva
pgina incluso crear un nuevo usuario. Asimismo se muestra la opcin para editar
la pgina actual.
En el panel, la barra de herramientas tiene las siguientes opciones:
PERSONALIZACIN
a. Para hacer modificaciones, aumentar elementos, colocar imgenes u otros

elementos en el sitio hacer clic en el botn en Personalice su sitio
b. Se muestra las opciones para personalizacin de la pgina web como la

identidad, los colores, imgenes de la cabecera, imagen de fondo, el men y los
widget que son los plugins en Wordpress.
75
c. Para personalizar la identidad del

sitio
hacer
clic
en
la
opcin
respectiva. Se muestra el recuadro

con el nombre actual del sitio y es
posible
cambiar.
Es
posible
desmarcar la opcin para que no se

muestre este texto, ttulo del sitio y
descripcin
del
mismo,
en
la
cabecera del sitio. De la misma

manera proceder para cambiar la
descripcin del sitio. Tambin se
puede cambiar el cono del sitio
haciendo
clic
en
el
botn
seleccionar fichero lo que muestra

un cuadro para poder subir el icono.
d. Hacer clic en el botn salvar y publicar. Ahora el sitio se muestra con los cambios
realizados.
76
CONFIGURACIN INICIAL
De acuerdo a muchos expertos en Wordpress, el primer paso luego de instalar
Wordpress es configurar sus funciones debido a que de esta manera podremos
administrar mejor el contenido del sitio web ahorrando tiempo dado que muchas
opciones pueden determinarse desde el inicio.
Para configurar las principales funciones en la versin de Wordpress instalada se
utilizar la Opciones del panel principal, tal como se muestra en la imagen siguiente, al
hacer clic en opciones e despliegan varios tems: General, escritura, lectura, discusin
multimedia y enlaces permanentes.
Entre las principales funciones que se deben configurar estn:

a. Ttulo y Descripcin del sitio.
77
Si bien ya se escribi un ttulo durante la instalacin de Wordpress es necesario

analizar los pros y contras de las palabras que lo componen dado que los
buscadores actualmente buscan en los ttulos de las pginas web para mostrar
resultados de sus bsquedas. Para modificar o mejorar el ttulo del sitio web se
procede de la siguiente manera:
En el panel principal de WordPress o Dashboard hacer clic en Opciones,

y luego en General. Esto muestra el ttulo que se coloc durante la
instalacin de WordPress. Es importante que incluya palabras clave para
posicionar bien el sitio en Google. Inserta tambin una descripcin para
Google.
Aqu tambin se puede cambiar la direccin de correo electrnico

asociada a esta instalacin de WordPress, es decir, a esta cuenta
llegarn todas las notificaciones de actualizaciones, mensajes desde el
formulario de contacto de la web, entre otro tipo de comunicaciones
propias de la administracin de un sitio web.
Otros aspectos a configurar son el formato de la fecha, la zona horaria,

entre otras.
Terminada la configuracin hacer clic en el botn Guardar cambio

ubicado al final de la pgina.
b. Comentarios
78

La caracterstica principal de un sitio web actual es esa propiedad dinmica
donde se da la posibilidad de la colaboracin por lo que los comentarios juegan
un papel importante en un sitio web y no slo en los blog.
Para ajustar o configurar las diferentes opciones de los comentarios en el sitio

web, en el panel principal hacer clic en Opciones y luego en Discusin. En esta
seccin puedes decidir diversas opciones clave de cara a la moderacin de los
comentarios de los usuarios en las entradas. Adems ofrece la posibilidad de
definir opciones por defecto para la publicacin de artculos. Se recomienda leer
las opciones y definir aquellas que se ajusten al tipo de CMS que se desea tener.
c. Enlaces permanentes.
Es importante definir cmo se van a crear las URL automticamente cada vez
que se publica una pgina o entrada en el sitio web. Para ello, hacer clic en
opciones y luego en Enlaces permanentes. Como se observa en la imagen
siguiente existen varias maneras comunes.
79
Se recomienda utilizar la opcin Nombre de Entrada. Esto hace que todas las
entradas, artculos o pginas tomen por defecto en la URL el ttulo que se les
hayas puesto. De esta manera se evitar que se generen URL complejas. En su
lugar, las URL tendrn las palabras clave que se ha colocado en el ttulo, lo cual
es ideal para posicionamiento SEO.
No olvidar de buscar el botn de guardar cambios ubicado al final de la pgina,
de lo contrario no se establecer las funciones configuradas.
Importante: aunque se haya automatizado las URL, cuando se est editando una
pgina o entrada se puede editar la URL, y aqu es recomendable simplificar al
mximo el slug dejando slo las palabras clave separadas por guiones medios
(no se usa guion bajo en las URL).
d. Actualizaciones
Peridicamente se lanzan nuevas versiones de Wordpress por lo que es
importante revisar estos cambios y actualizar la versin que se ha instalado a la
nueva versin pero considerando lo siguiente: verificar que los plugins instalados
en el sitio sean compatible con la nueva versin porque de lo contrario se podra
causar problemas diversos; esperar un tiempo desde que se publique la
actualizacin antes de proceder a actualizar el sitio web, para verificar los errores
que se reporten y las incompatibilidades encontradas por miembros de la
comunidad.
Para actualizar todo lo referido al software del CMS hacer clic en Panel y luego
en la opcin Actualizar.
80
Revisar regularmente las nuevas versiones de WordPress para mantener

actualizado el sitio.
Importante: antes de dar a actualizar la versin de WordPress, asegurarse de
que la nueva versin es compatible con todos los plugins (al menos los
principales). De no hacerlo, se puede tener alguna sorpresa desagradable.
Un consejo: no actualizar la versin en cuanto salga, esperar un tiempo por si
hay reportes de errores e incompatibilidades de la nueva versin y actualizar
slo cuando se est seguro de que no habr problemas.
e. Portada
Es necesario configurar que se mostrar cuando los usuarios digiten la URL del
sitio creado. Como se observa en la imagen anterior esto se denomina portada
y se puede elegir entre 2 opciones: Sus ltimas entradas mostrar esto y una
pgina esttica mostrar cualquiera de las pginas que se tengan creadas. Esto
se puede determinar luego de la creacin de las pginas que tendr el sitio. Para
ver las pginas y elegir alguna, desplegar el combo. Es posible tambin
determinar la pgina donde se colocarn las entradas.
CREAR ARTCULOS
Los artculos o entradas o post son el elemento ms importante de un sitio web dinmico
dado que permiten a los dems usuarios como estudiantes u otros comentar la
publicacin, completar una consigna, entre otras utilidades. Poder hacer publicaciones
de manera rpida, con aspecto profesional y sin tener mucho conocimiento de
81

informtica es una de las especialidades de Wordpress debido a que este software
comenz como una plataforma para blogs.
Para crear un nuevo artculo tenemos dos opciones:
1. La opcin Nuevo/Entrada de la barra de herramientas
2. En el men lateral, en el administrador opcin Entrada/Aadir Nueva
La creacin de artculos o entradas es uno de los procesos ms importantes al

administrar un sitio web.
FORMATO DE TEXTO
ENLACES
IMGENES Y GALERA DE IMGENES
ARCHIVOS EXTERNOS
ACCIONES MASIVAS
TEMAS
Un beneficio que otorga instalar Wordpress en un hosting es que se tiene acceso a todos
los aportes de la comunidad creada en torno al desarrollo del propio software que
permite poder adquirir temas y plugins que harn que el sitio tenga un aspecto
profesional con soporte de todo lo ltima generacin.
Los temas de Wordpress pueden ser gratuitos o
de pago y se accede directamente desde el sitio.
Para utilizar un tema se procede de la siguiente
manera:
a. Acceder desde cualquier navegador al
panel de control del sitio web como se
explic en el apartado anterior.
b. En el escritorio pasar el ratn por el elemento apariencia del men. Se mostrar
una serie de opciones para buscar temas, hacer clic en la opcin Temas.
82

c. A continuacin se muestra los tres temas instalados por defecto al haber
instalado el software de Worpress. Para poder visualizar otros temas hacemos
clic en el espacio con el smbolo ms.
d. Esto muestra otros temas en la parte inferior, pero adems muestra otras
opciones ubicadas en la parte superior. Una de ellas es la de agregar temas con
la opcin Cargar tema. El nmero ubicado a la izquierda es la cantidad de temas

mostrados en la pgina actual. Como se observa, est marcada la opcin
Destacado. Para ver los temas ms populares, hacer clic en la opcin
correspondiente as como ver los ms recientes.
e. La opcin Filtrar caracterstica permite el acceso a una ventana de filtro donde
es necesario marcar las preferencias en torno al color, diseo, caracterstica y
asunto. Para ver los temas con las caractersticas seleccionadas hacer clic en el
botn Aplicar Filtros.
83
f.
Ahora se muestra los temas que concuerdan con los filtros. Cada tema que se
muestra presenta las opciones de instalar para poder luego acceder y la de vista
previa para poder probar el tema sin instalar. Lo recomendable es hacer clic en
la vista previa.
g. Al hacer clic en la vista previa se muestra el tema y en la parte superior el botn

para instalar en tema en el hosting y se encuentre disponible para utilizarlo.
h. A continuacin se informa que el tema ha sido instalado y est disponible para
poder activarlo en el sitio. Para activarlo se hace clic en el enlace Activar.
84

i.
A continuacin se muestra la seccin de apariencia indicando que el nuevo tema

est activado y adems la opcin para visitar el sitio.
j.
A continuacin se muestra el tema como activo y la opcin de personalizar.

Hacer clic en este ltimo.
BUSCAR ELEGIR E INSTALAR TEMAS

Existen muchos sitios en internet que ofrecen temas para Wordpress, algunos de pago
y otros gratuitos con muchas prestaciones
85

1. Identifica los elementos o partes de los diferentes tipos de sitios web
educativos tratados.
2. Elabora un croquis de la estructura de tu sitio web.
CUESTIONARIO
4. Qu otros tipos de pginas web educativas has podido encontrar? Por
qu no pueden estar dentro de la clasificacin propuesta?
6. Es necesario contar con un sitio web propio?
86

6. ALOJAMIENTO
OBJETIVOS
Manejar software de transferencia de archivos con el protocolo FTP.
Alojar una pgina web en servidores gratuitos y de pago utilizando

software de transferencia de archivos diversos.
Utilizar el panel de control para administrar un sitio web y actualizarlo.
87

ALOJAMIENTO O HOSTING
Hosting o alojamiento es una palabra del ingls que
quiere decir dar hospedaje o alojar. Aplicado al Internet,
significa poner una pgina web en un servidor de Internet
para que pueda ser vista desde cualquier equipo
conectado a Internet por todo el mundo y en cualquier
lugar.
Existen muchos servicios de alojamiento o hosting, se
trata de empresas o compaas que poseen enormes y potentes computadoras
localizadas en diferentes lugares del mundo con una enorme capacidad de
almacenamiento y con software diseado para que pueda compartir la informacin
contenida en ellos a cualquiera que lo requiera. Los usuarios pueden comprar un
espacio en los discos de esos servidores para alojar all sus pginas web y de esta
manera tener presencia en la web.
La competencia por vender espacio en estos hosting ha provocado que muchas de esas
empresas ofrezcan servicios de alojamiento gratuito con la idea de que los usuarios
gratuitos migren a un plan pagado en el futuro, para que el usuario verifique las
bondades del servicio que ofrecen. Esto tambin ha generado que no slo se ofrezca
servicio de alojamiento gratuito sino que adems se brinden una serie de herramientas
que pueden ser aprovechadas por el usuario. Sin embargo, las cuentas gratuitas
presentan algunas limitaciones como el lmite en el
trfico, el tamao del espacio, entre otras. Por ello, es
recomendable la adquisicin de un hosting y evitar
cualquier tipo de restriccin.
Todo esto no limita el uso de hosting gratuito y uno de
los ms recomendable es el brindado por MIARROBA
cuya direccin es http://miarroba.es/ que permite
publicar una pgina web de forma rpida y sencilla. Te
da hasta 500MB con acceso FTP, transferencia
ilimitada, PHP5 y MySQL 5.x.
Las ventajas que ofrece tener un hosting en este sitio web es el tamao del espacio en
el servidor web con un total de 500 Mb, espacio suficiente para subir los archivos
necesarios para una pgina web de caractersticas ms que aceptables. Sin embargo
hay que aclarar que el tamao lmite por archivos es de 5 Mb.
88

El registro es gratuito:
a. Para
registrarse
en
miarroba.es
escribimos
en
el
navegador
la
URL
http://miarroba.es/
b. En la ventana de http://miarroba.es/ hacer

clic en Regstrate ubicado en la esquina
superior derecha de la pgina web.
c. Una vez registrado se debe iniciar sesin
haciendo clic en Entrar y escribiendo el
usuario y la contrasea.
d. En el recuadro MIS SERVICIOS, en el lado
derecho de la pgina, se observa una serie
de servicios gratuitos que ofrece Miarroba:
foros, blogs, fotologs, entre otras opciones.
El servicio espacios con el cono:

otorga la posibilidad de crear hasta 5 sitios
de 100Mb cada uno. Para crear una sitio nuevo hacer clic en el cono de espacios
sealado en la imagen anterior.
e. A continuacin se muestra la pgina de hosting, en ella hacer clic en Crear espacio
sealado en la imagen siguiente. Esto concede un espacio virtual en un servidor web
real a donde podemos subir diversos archivos que conforman una pgina web u
otros de cualquier tipo que se requiera subir.
89
f.
A continuacin se debe completar el formulario con los datos requeridos, nombre del
sitio nuevo, la contrasea personal y el cdigo de seguridad.
g. Inmediatamente se muestra el panel de control del sitio creado. Tambin se informa

que no hay una pgina de inicio correcta entre otros detalles.
h. Como se observa en la imagen anterior, en el panel de control del espacio creado

se tienen varias opciones como la de poder configurar una base de datos MySQL,
servicios PHP. Sin embargo la opcin que necesitamos conocer es la de WebFTP,
dado que es ah donde subiremos los archivos necesarios para por ejemplo, montar
una pgina web o cargar un software educativo, creado con algn software de autor
como Edilim, Constructor entre otros.
90

1. Regstrate en Miarroba y crea un sitio para subir material didctico digital
creado en el curso de paquetes informticos.
2. Elabora un MANUAL de la manera de incrustar y enlazar los materiales
digitales creados en un sitio o blog.
CUESTIONARIO
1. Qu usos se puede dar a un hosting o alojamiento?
2. Qu semejanzas y diferencias puedes encontrar entre un hosting y los
servicios como ONEDRIVE, DRIVE, BOX Y DROPBOX?
91

7. TRANSFERENCIA EN FTP
OBJETIVOS
Instalar y utilizar un cliente FTP para transmisin de datos mediante este

cdigo.
Utilizar un cliente FTP para transmisin de datos a un alojamiento o

hosting gratuito o de pago.
92

TRANSFERENCIA EN FTP
FTP es uno de los diversos protocolos de la red Internet, que significa Protocolo de
Transferencia de Archivos (File Transfer Protocol) y su funcin principal es transferir
grandes bloques de datos por la red. Es necesaria la existencia de un servidor y un
cliente FTP, adems pueden existir servidores que sean de libre acceso, a los que se
los conoce, como login annimo o FTP annimo.
Los objetivos del FTP son:
promocionar
el
uso
compartido
de
ficheros
(programas
y/o
datos),
animar al uso indirecto o

implcito
(a
travs
de
programas) de servidores
remotos,
hacer
transparente al usuario las

variaciones entre la forma
de almacenar ficheros en diferentes hosts y transferir datos fiable y eficientemente.
(Villavivencio & Yaez, 2006)
Para trasmitir datos (archivos) a un servicio de alojamiento remoto se usa un cliente
FTP. Existen en la web muchos software de clientes FTP algunos gratuitos y otros de
pago.
Filezilla es un cliente de trasmisin de datos FTP multiplataforma bajo Licencia Pblica
General de GNU. Sus caractersticas y facilidad de uso lo convierten en una de las
mejoras aplicaciones para realizar transferencia de datos a travs de este protocolo de
red de forma rpida y fiable.
Filezilla permite interrumpir la subida de un archivo y posteriormente reanudarla. La
conexin con el servidor FTP nunca se cerrar gracias al sistema Keep Alive y a la
deteccin de TimeOut. Por otro lado, la cola de descargas y subidas permite transferir
ficheros de forma desatendida.
Es capaz de trasmitir archivos de gran tamao, y su intuitivo sistema drag and drop
permite gestionar estructuras de archivos remotas como si estuviramos en un
explorador de archivos local. Adems, Filezilla permite administrar cuentas de usuario y
asignar diferentes rangos, editar determinados formatos de archivo remotamente y
limitar las tasas de trasferencia.
Para descargar e instalar Filezilla se procede de la siguiente manera:
93

1. Descargar desde el sitio oficial https://filezilla-project.org/ el cliente de Filezilla.
2. Hace doble clic sobre el instalador de Filezilla.

3. En el recuadro de advertencia hacer clic en ejecutar.
4. Aceptar los trminos de la licencia haciendo

clic en el botn I agree
5.
Clic en next e instalar y finalmente
en Finalizar
6. Hacer clic en Finish.
94

7. La interfaz de Filezilla presenta las siguientes reas:
A. La barra de herramientas donde el primer botn permite acceder al administrador
de sitios FTP que se visitan.
B. La barra de conexin rpida.
C. El registro de las acciones realizadas, tanto de transmisin como de la conexin.
D. El panel local que muestra el rbol de carpetas y archivos de la computadora
donde se instal el cliente.
E. El panel del servidor remoto con el rbol de carpetas y archivos del espacio de
alojamiento o hosting.
F. La cola de transferencia que lista los archivos en cola, los transferidos y fallos.
Para poder subir archivos usando el protocolo FTP se debe tener algunos datos
informativos referidos al nombre del servidor remoto al cual se transferirn, un nombre
de usuario, la contrasea (si el sitio FTP lo establece).
95

Para transferir archivos con Filezilla al servidor FTP de http://hosting.miarroba.es es
necesario buscar los datos requeridos, para ello se debe ingresar al espacio creado en
http://miarroba.es/ y hacer clic en Ficheros. En la parte inferior de esta ventana se
muestran los datos que se requieren.
Para iniciar la transferencia:

1. Abrir la aplicacin Filezilla. En la barra de conexin rpida completar con los
datos requeridos con los datos de del servidor FTP de Miarroba, escribir 21 en
puerto y hacer clic en el botn de Conexin rpida.
2. En el registro de acciones se debe mostrar que hay conexin y que se ha listado

el directorio remoto.
96
3. En el panel local se debe ubicar la carpeta donde se encuentran los archivos

para transferir al servidor FTP. Como se observa en la imagen siguiente se tiene
dos partes en este panel. En la parte superior los directorios y en la inferior el
contenido del directorio seleccionado.
4. En el panel del servidor remoto, para el caso de Miarroba hacer clic en la carpeta
web que es donde se deben subir los archivos.
97

5. Seleccionar todas las carpetas y archivos del directorio o carpeta que se quiere
trasferir al servidor remoto y arrastrar al espacio del contenido del directorio web
en panel del servidor remoto.
6. Se muestra en la cola de transferencia el listado de archivos a transferir y el
progreso en este trabajo. Se debe esperar a que se culmine. Si se muestran
transferencias fallidas se debe reintentar la transmisin. Tambin se muestran
las transferencias satisfactorias.
7. Si se ingresa al alojamiento o hosting de Miarroba se podr observar que los

archivos han sido transferidos.
98

1. Instala el cliente FTP de Filezilla.
2. Adquiere un alojamiento gratuito en un servidor FTP.
3. Transfiere los archivos del instalador del CMS Wordpress.
CUESTIONARIO
1. Qu ventajas tiene usar el cliente FTP de Filezilla con respecto al
WEBFTP de Miarroba?
2. Qu otros programas se pueden usar para transferir datos?
99

WEBGRAFIA
8. REFERENCIAS
Ardila, J., & Vargas, M. (2007). Creacin de la pgina Web de la Licenciatura en Educacin
Preescolar. Obtenido de http://elblogboyacense.com/.
Area, M. (2003). DE LOS WEBS EDUCATIVOS AL MATERIAL DIDCTICO WEB. Obtenido de
revista COMUNICACIN Y PEDAGOGA: http://webpages.ull.es/users/manarea
Bohorquez, V. (julio de 2015). Evolucin de los Sistemas de Gestin de Contenidos. Obtenido de
http://centrum.pucp.edu.pe/pdf/working_paper_series/CELIE_WP2015-07-0009.pdf
Gran, M., & Willen, C. (2010). Web 2.0: Nuevas Formas de Aprender y Participar. Espaa:
Laertes.
Medrano, B., & Villalba, M. (2009). maricelybetty.galeon.com.
Montoro, M. (2005). Sistemas de gestin de contenidos en la gestin del conocimiento.
Obtenido de http://bid.ub.edu/14monto2.htm#Nota6
Pazmio, P. (2010). El impacto de las redes sociales y el internet en la formacin de los jvenes
de la Universidad Politcnica Salesiana: Caso carrera de Comunicacin Social Sede
Quito. Obtenido de http://dspace.ups.edu.ec.
Ruz, G. (16 de 11 de 2012). Uso del Google Grupos y Web 2.0, por los docentes en el programa
cirricular por Competencias Profesionales de la Fac. de MED. Veterinaria y Zootecnia.
Obtenido de http://www.researchgate.net/publication/235917221
Ther, S. L. (2002). http://www.thuer.com.ar/.
Villavivencio, M., & Yaez, E. (2006). DESARROLLO DEL SOFTWARE PARA EL SERVICIO FTP
SOBRE IPV6. Obtenido de http://bibdigital.epn.edu.ec/bitstream/15000/81/1/CD0052.pdf
100
101

Manual Sitios Web PDF

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Manual Sitios Web PDF

Enviado por

Direitos autorais:

Formatos disponíveis

2015

Gestin de sitios web

Asistente Tecnolgico de Moquegua

Prof. Jhon Nelson Madueo Gonzales

Con cario para mis colegas de las

Prof. Jhon Nelson Madueo Gonzales

SITIOS WEB QU SON? .......................................................................................... 4

CREACIN DE PGINAS WEB ............................................................................... 19

CREACIN DE PGINAS WEB EN LNEA ............................................................ 34

SISTEMA DE MANEJO DE CONTENIDOS (CMS) ............................................... 58

EDICIN Y ADMINISTRACIN DE UN CMS ........................................................ 70

TRANSFERENCIA EN FTP ....................................................................................... 92

Prof. Jhon Nelson Madueo Gonzales

Utiliza el protocolo FTP para la transferencia de archivos a servidores remotos

Prof. Jhon Nelson Madueo Gonzales

Diferenciar los diferentes tipos de sitios web para definir su proyecto de

Identifica los elementos de un sitio web en diferentes ejemplos

Prof. Jhon Nelson Madueo Gonzales

cantidades de websites, basta

protocolos TCP/IP lo que garantiza que las

componen funcionen como una red lgica

Prof. Jhon Nelson Madueo Gonzales

El servicio que ms xito ha tenido en Internet ha sido la World Wide Web

Aunque pareciera que la web slo

Prof. Jhon Nelson Madueo Gonzales

cualquiera sea el sector en que

Prof. Jhon Nelson Madueo Gonzales

Las TIC, desde su infraestructura hasta sus aplicaciones, se distribuye y se

Prof. Jhon Nelson Madueo Gonzales

Myspace, Facebook entre otras

prosumer, productores y consumidores que es la caracterstica de la mayora de

colaborativa, desarrollar proyectos y

Prof. Jhon Nelson Madueo Gonzales

Un sitio web es un sitio (localizacin) en la World Wide Web que contiene

Prof. Jhon Nelson Madueo Gonzales

Prof. Jhon Nelson Madueo Gonzales

Pero de acuerdo a nuestra finalidad, consideramos ampliar el tema de los sitios

Prof. Jhon Nelson Madueo Gonzales

Prof. Jhon Nelson Madueo Gonzales

Webs de recursos o bases de datos

Prof. Jhon Nelson Madueo Gonzales

Webs entornos de formacin a distancia

Prof. Jhon Nelson Madueo Gonzales

Webs de materiales didcticos

7. BENEFICIOS Y VENTAJAS DE TENER UN SITIO WEB

Prof. Jhon Nelson Madueo Gonzales

Prof. Jhon Nelson Madueo Gonzales

Prof. Jhon Nelson Madueo Gonzales

Definir y disear la estructura de una pgina web bsica.

Crear una pgina web bsica en el bloc de notas y con el estndar

Prof. Jhon Nelson Madueo Gonzales

De acuerdo a lo definido por la RAE, una pgina web es un documento que

Prof. Jhon Nelson Madueo Gonzales

2. LAS PGINAS WEB POR DENTRO

b. En el men desplegado que nos ofrece una variedad de herramientas,

Prof. Jhon Nelson Madueo Gonzales

c. En una nueva pestaa, el navegador nos muestra la pgina web pero

d. Para crear una pgina web no es necesario mucho material. Es necesario

Prof. Jhon Nelson Madueo Gonzales

3. CREACIN DE PGINAS WEB

La primera etapa es la planificacin, en sta se debe analizar el contenido

La segunda etapa que es la estructuracin, como su nombre lo indica es

La tercera etapa es el diseo-diagramacin-implementacin, en esta