PRESENTACIÓN
La web 3.0 es la nueva evolución que han experimentado todos los navegadores
modernos, los cuales, permiten marcar el contenido de forma semántica, para así
poder ser indexado con mucha más fiabilidad y efectividad.
HTML5 es un nuevo lenguaje para el diseño de páginas web, que proporciona muchas
más etiquetas de marcado de contenido entre los que destaca los bloques de
contenidos, efectos multimedia, formularios, etc; y trabaja con lenguajes de
programación JavaScript para elaborar páginas mas interactivas.
Arquitectura de entornos Web pertenece a la línea de tecnología y se dicta en las
carreras de tecnología de la institución. El curso brinda un conjunto de herramientas
de diseño y programación para la creación de páginas web.
El manual para este curso ha sido diseñado bajo la modalidad de unidades de
aprendizaje, las que desarrollamos durante semanas determinadas. En cada una de
ellas, hallará los logros que se deberá alcanzar al final de la unidad; el tema tratado, el
cual será ampliamente desarrollado; y los contenidos, que debe desarrollar. Por último,
encontrará las actividades y trabajos prácticos que deberá desarrollar en cada sesión,
que le permitirán reforzar lo aprendido en la clase.
El curso es eminentemente práctico: consiste en el diseño de sitios web y
programación de páginas web utilizando HTML5 y JavaScript. La primera parte de este
manual explicamos acerca de los conceptos básicos de la Web y los fundamentos de
un proyecto web. Luego, vamos a aprender a diseñar y construir páginas web para un
sitio web aplicando las etiquetas HTML5, hojas de estilos CSS3, elementos de
multimedia y formularios. Acontinuación aprenderemos a diseñar y programar páginas
web utilizando el lenguaje de programación JavaScript; y por ultimo, aprenderemos a
publicar un proyecto web en un sitio web.

CIBERTEC

CARRERAS PROFESIONALES

CIBERTEC

ARQUITECTURA DE ENTORNOS WEB

RED DE CONTENIDOS

Arquitectura de Entornos Web

Unidad 1

Fundamentos
de un
proyecto web

Unidad 2

Elementos
gráficos
para la web

Estructura
HTML

CIBERTEC

Unidad 3

Creación
de bloques

Estilos
CSS

Unidad 4

Unidad 5

Unidad 6

Transición y
Animación

Creación
de menú

Elementos
Multimedia

Formularios

Publicación
de un sitio
web

CARRERAS PROFESIONALES

CIBERTEC

ARQUITECTURA DE ENTORNOS WEB

UNIDAD

1
FUNDAMENTOS DE UN
PROYECTO WEB Y ELEMENTOS
GRAFICOS
LOGRO DE LA UNIDAD DE APRENDIZAJE
Al término de la unidad, el alumno entiende el concepto de un proyecto web y diseña
los elementos gráficos necesarios para preparar un proyecto web.

TEMARIO
1.1.

Tema 1: Fundamentos de un proyecto web

1.1.1 Generalidades
1.1.1.1 Internet
1.1.1.2 Servidores web
1.1.1.3 Hosting y dominios
1.1.1.4 Navegadores
1.1.2 Etapas de un proyecto web
1.1.2.1 Arquitectura de un proyecto web
1.1.2.2 Mapa de sitio
1.1.2.3 Wireframes.

1.2.

Tema 2: Elementos gráficos para la web

1.2.1 Manejo de un editor de imágenes
1.2.1.1 Tipos de imagen, resolución, modos de color.
1.2.1.2 Tamaño, recorte, selección, etc.
1.2.2 Creación de banners, menús y botones.

ACTIVIDADES PROPUESTAS
 Los alumnos desarrollan los laboratorios de esta semana
 Los alumnos desarrollan diseñan el mapa de sitio de su proyecto
 Los alumnos desarrollan diseñan su wireframe de baja y alta fidelidad.

CIBERTEC

CARRERAS PROFESIONALES

CIBERTEC

ARQUITECTURA DE ENTORNOS WEB

1.1.

FUNDAMENTOS DE UN PROYECTO WEB
1.1.1 GENERALIDADES
En la era de la globalización, la Internet se ha convertido en una
herramienta indispensable para cualquier persona o profesional. Este
medio se ha constituido como una de las principales vías de consulta de
información, publicación y actualización de conocimientos y
comunicación entre profesionales.
En esta era, las empresas, organismos estatales, publicaciones,
programas de televisión o individuos no existen sino tienen su dirección
de correo electrónico o su sitio web; la triple W (www) y la @ (arroba) ya
forman parte de nuestras vidas, y se están haciendo cada vez más
imprescindibles.
Internet y Web son dos términos que a menudo se utilizan
indistintamente de forma que podemos caer en la confusión y mezcla
de conceptos. Internet es un conjunto de redes de comunicación
interconectadas entre sí, siguiendo el protocolo TCP/IP, que funcionan
como una red única mundial y siendo la web un servicio más de
Internet.
Acontinuación vamos a exponer los conceptos principales acerca de las
generalidades de la web.

1.1.1.1 Internet
Internet se le define como una red mundial de computadoras,
distribuidos por el todo el mundo, las cuales se encuentran
interconectadas a través de satélites, líneas telefónicas, fibra
óptica, etc., donde utilizando un protocolo de comunicaciones
común (TCP/IP), que permite a millones de usuarios estar
conectados para compartir, intercambiar, publicar y extraer
información.

Figura 1
Referencia: http://definicion.de/internet/

En la actualidad es un error considerar a Internet como si fuera
sólo una red de computadoras. En este caso Internet es una
gran fuente de información, donde podemos enviar mensajes,
descargar programas, archivos y ficheros de texto; consultar
catálogos de bibliotecas, solicitar libros, realizar compras.

CIBERTEC

CARRERAS PROFESIONALES

Hay que tener en cuenta que todos los recursos que se pueden
encontrar en Internet existen porque muchas personas en
forma voluntaria han dedicado su tiempo en generarlos.
Protocolo de Internet
El Protocolo de Internet es un conjunto de reglas formales que
permite la transmisión de los datos entre dos computadoras. El
ordenador conectado a una red usa protocolos para que envie
y reciba mensajes.

Figura 2
Referencia: http://www.hipertexto.info/documentos/internet_tegn.htm

El protocolo más utilizado es el TCP/IP (Protocolo de Control
de Transmision TCP y Protocolo de Internet IP). Este protocolo
especifica cómo las computadoras de puerta encaminan la
información desde la computadora emisor hasta el computador
receptor.

Figura 3
Referencia: http://www.taringa.net/posts/info/12588433/Protocolos-deInternet.html

Actualmente existen varios protocolos de Internet entre los que
explicamos los más utilizados:
IPv6, será la próxima generación de protocolos de Internet,
este protocolo se ha desarrollado para ampliar la capacidad de

CARRERAS PROFESIONALES

CIBERTEC

ARQUITECTURA DE ENTORNOS WEB

conexión debido al crecimiento de dispositivos y el aumento de
equipos portátiles.
FTP, es un protocolo de transferencia de archivos de un
ordenador a otro, de un servidor remoto a uno local y viceversa.
Se precisa de un servidor de FTP y un cliente de FTP, estos
pueden ser de acceso con una cuenta (login) o anónimo la cual
acceder sin ninguna contraseña.
HTTP, protocolo de transferencia de Hipertextos, es el
protocolo mas utilizado por los servidores de la World Wide
Web, el cual permite el intercambio de información
hipertextuales (enlaces) de las páginas web.
SMTP, protocolo de transmisión de correo simple, es el
protocolo que nos permite recibir correos electrónicos y, junto
con el protocolo POP (protocolo de oficinas de correo) es
usado por los ordenadores personales para administrar el
correo electrónico, nos permitirá bajarnos los mensajes a
nuestra computadora.
TELNET, es un protocolo que permite la conexión remota a
otro ordenador el cual nos permite manejarla como si
estuviéramos físicamente frente al ordenador.
Otros conceptos:
URLs, localizador uniforme de recursos, representa la dirección
electrónica para poder acceder a los recursos del servidor
remoto. El tipo más común es el de las paginas web, con la
dirección http://; también existen otras direcciones como ftp://
para ubicar un recurso FTP para transferir archivos.

1.1.1.2 Sitio Web
Se le conoce como Site, un sitio web es un conjunto de
páginas web, relacionadas a un dominio de Internet el cual se
puede visualizar a través de internet.

Figura 4
Referencia: https://materialesmarketing.wordpress.com/2012/12/24/

Generalmente, los sitios web poseen una estructura similar, lo
cual nos puede servir para encontrar fácilmente algo que
estamos buscando o para entender como funcionan los
enlaces de las páginas.

CIBERTEC

CARRERAS PROFESIONALES

En cada sitio web tiene una página de inicio (Home) que es el
primer documento que ve el usuario cuando ingresa en el sitio
web escribiendo su dirección URL en el navegador. Cada
página web perteneciente al sitio web será visible o no (algunas
pueden no ser visible al público en general), con el único objeto
de publicar contenido.
La persona encargada de administrar un sitio web es el
WebMaster. Esta persona es la responsable de todo el sitio
web: decide las tecnologías que se van a utilizar, los
servidores, la estructura de las páginas, el mapa de sitio. Es la
única persona autorizada que decide si va o no la estructura o
los contenidos del sitio.

Figura 5
Referencia: http://blogs.zemos98.org/lacolinadeperalias/2017/01/18/

Para ser un WebMaster no hay que estudiar ninguna carrera
universitaria, son personas altamente capacitadas en el ámbito
de la informática y la Internet, por lo cual conoce a fondo las
tecnologías del mercado, trabaja en equipo junto a
diseñadores, programadores, y otras personas para hacer
alguna publicación.
Los sitios web se pueden clasificar en dos tipos:
Sitios Estáticos: Se denomina sitio estático a aquella que es
básicamente informativa, donde el visitante y el administrador
Web no pueden interactuar con la página para modificar su
contenido. No acceden a una base de datos para obtener el
contenido ni se requiere programación. Por lo general un sitio
web estático es utilizado cuando el propietario del sitio no
requiere realizar un continuo cambio en la información que
contiene cada página.

Figura 6
Referencia: http://www.taringa.net/posts/info/11539616/Diferencia-entra-una-webestatica-y-una-web-dinamica.html

CARRERAS PROFESIONALES

CIBERTEC

ARQUITECTURA DE ENTORNOS WEB

Sitios Dinámicos: Son aquellos que pueden interactuar con el
visitante y/o administrador Web, pudiéndose modificar el
contenido de la página. Estos sitios acceden a una base de
datos y requieren de programación Web: Java, ASP, ASP.NET,
PHP, etc.

Figura 7
Referencia: http://www.taringa.net/posts/info/11539616/Diferencia-entra-una-webestatica-y-una-web-dinamica.html

El administrador del sitio web podrá agregar, modificar y
eliminar contenidos del sitio web a través de un “sistema web”
con acceso restringido al público mediante usuario y
contraseña, el cual se denomina BACK END.
Se asume a la hora de contratar el desarrollo de un sitio web,
que el administrador especificará al desarrollador la cantidad de
páginas discriminando si son dinámicas o estáticas que deberá
tener el sitio web para su correcto.
Ventajas de un Sitio Web
1. Alcance mundial de sus productos y servicios: a través del
sitio Web Usted sus productos o servicios podrán ser conocidos
por futuros clientes potenciales a nivel mundial. Las
limitaciones geográficas ya no existen.

Figura 8
Referencia: http://www.one-man-studio.com/ventajas-de-tener-una-pagina-webcomo-herramienta-estrategica-de-venta-47-noticia

2. Competir al lado de los más grandes: En la Internet su
imagen puede ser tanto o más atractivo que cualquier empresa;
por lo que podrá competir de igual a igual con las empresas
más grandes.

CIBERTEC

CARRERAS PROFESIONALES

3. Disponible las 24 horas, todos los días año: Un sitio web se
encuentra disponible 24 horas del día, los 7 días de la semana,
los 365 días del año, lo que permite que aún fuera del horario
de trabajo, la empresa siga produciendo y creciendo.
4. Menos Costos Operativos: Se ahorra en gastos de
publicidad, teléfono y personal, cualquier información que
necesita el cliente la podrá consultar en su página Web.
5. Imagen Profesional de su empresa: Actualmente toda
empresa debe tener presencia en la Web. No contar con una
dirección en Internet, puede dar una imagen poco seria y
profesional. Cada vez más el tener un sitio Web será definitivo
para seguir en carrera.

1.1.1.3 Servidores Web
Un servidor web es un programa que se ejecuta continuamente
en un computador, manteniéndose a la espera de peticiones de
ejecución que le hará un usuario de Internet. El servidor web se
encarga de contestar a estas peticiones de forma adecuada,
entregando como resultado una página web o información de
todo tipo de acuerdo a los comandos solicitados.

Figura 9
Referencia: http://trimestrecuatrodeamarelysmaita.blogspot.com/2013/06/

El funcionamiento de un servidor web básico basado en
ejecutar infinitamente el siguiente bucle:






Espera peticiones en el puerto TCP indicado (el estándar
por defecto para HTTP es el 80).
Recibe una petición.
Busca el recurso.
Envía el recurso utilizando la misma conexión por la que
recibió petición.
Vuelve al segundo punto.

Un servidor web que siga el esquema anterior cumplirá todos
los requisitos básicos de los servidores HTTP, aunque sólo
podrá servir ficheros estáticos.
En este punto es necesario aclarar lo siguiente: mientras que
comúnmente se utiliza la palabra servidor es para referirnos a
una computadora con un software servidor instalado, el cual se

CARRERAS PROFESIONALES

CIBERTEC

ARQUITECTURA DE ENTORNOS WEB

encargar de “alojar” los sitios web que visitamos en la Internet y
son estas computadoras las que proporcionan al usuario la
interacción con el sitio en cuestión.

Figura 10
Referencia:http://valbuena.wikispaces.com/FUNCIONAMIENTO+DE+UN+SERVID
OR+WEB

Porqué son necesarios los servidores
Los servidores son como la columna vertebral de la estructura
de Internet. La industria del Web hosting es simplemente la
forma de alquilar esos espacios de memoria y administración
de datos.
Sin este sistema de leasing, la Internet sería sólo una pequeña
parte de lo que es hoy por hoy, ya que sería imposible para la
mayoría de los dueños de sitios Web comprar un servidor para
uso propio.
Tipos de servidores
Servidor Dedicado: que trata de una computadora dedicada
exclusivamente al sitio del cliente, para aplicaciones de alta
demanda. Entre las características tenemos:
 Son de pago superior a fin de tener un servidor para sí.
 Mayor capacidad en el disco duro, alta tasa de
transferencia
 Son más difícil de manejar
Servidor Conjuntamente: se trata de tipo de servidor similar al
dedicado. La diferencia es que usted es dueño del servidor, es
decir, lo compra en lugar de alquilarlo de una empresa de
servicio hosting. Entre las características tenemos:
 No son gratuito se paga una tarifa por el ancho de banda y
tasas de mantenimiento
 Se beneficia por contar con una alta tasa de velocidad.
 El servidor se encuentra ubicado físicamente en un centro
de datos

CIBERTEC

CARRERAS PROFESIONALES

Servidor Compartido: se trata de un ordenador dentro del cual
aloja más de un sitio web. Entre las características tenemos:
 La mayoría de los servidores de este tipo son gratuitos
 Todos los sitios web deben compartir recursos de una
misma computadora, de manera desigual
 Se controlan fácilmente
 Uno de los inconvenientes es que algunos sitios web
requieren de más recursos por ser de más rendimientos
que las otras
Servidor Virtual Privado (VPS): se trata de un ordenador el cual
divide todos sus recursos entre los sitios web que aloja. Entre
las características tenemos:
 No son gratuito y su precio no es muy caro
 Su manejo es sencillo, te lo dan casi todo hecho
 Si el procesador se sobrecarga, fallarán los sitios web
 Se comparte el HDD y la RAM pero no el procesador
Tipos de servidores Web
Apache: Este es el más común y mas utilizado en todo el
mundo. Ademas, es gratuito y de código abierto, lo que implica
que corre en cualquier plataforma.

Microsoft IIS: Solamente funciona sobre la plataforma Windows.
Para que trabaje sobre otro sistema tendrás que utilizar una
máquina virtual.

Ngnix: es un servidor web ligero y corre sobre un sistema Unix
y Windows.
Lighttp: Está especialmente pensado para hacer cargas
pesadas sin perder balance, utilizando poca memoria RAM y
poca de CPU.
Sun Java System Web Server: Es multiplataforma y se
distribuye con licencias de código abierto.

CARRERAS PROFESIONALES

CIBERTEC

ARQUITECTURA DE ENTORNOS WEB

1.1.1.4 Hosting y Dominios
Hosting
El alojamiento web (en inglés web hosting) es el servicio que
provee a los usuarios de Internet un sistema para poder
almacenar información, imágenes, vídeo, o cualquier contenido
accesible vía web.
Esta palabra es una analogía de “hospedaje o alojamiento en
hoteles o habitaciones” donde uno ocupa un lugar específico,
en este caso la analogía alojamiento de páginas web, se refiere
al lugar que ocupa un sitio web, sistema, correo electrónico,
archivos etc. en un servidor que por lo general hospeda varias
aplicaciones o páginas web.

Figura 11
Referencia: http://chiapashosting.com/hosting-o-alojamiento-web.html

Principales Ventajas de un Hosting




CIBERTEC

Tener un servicio de hosting disminuye los costos a los
usuarios, puesto que un grupo de usuarios (los cuales
acceden al mismo servicio) se encargará de compartir los
gastos del servidor, mantenimiento y sus actualizaciones
Algunos de los servidores de web hosting no cuentan con
un administrador determinado, hecho que también se
encarga de disminuir los costos de manera significativa;
también existen otros servidores de web hosting que
cuentan con equipos de profesionales y con personal de
servicio al cliente, especialmente dedicados a responder las
necesidades más específicas de los clientes.
Los servicios de web hosting son indispensables para todo
tipo de empresas que surgen en la web, no importa si son
servicios de web hosting gratuitos, dedicados o
compartidos, lo importante es acceder al hosting adecuado
para nuestras necesidades.

CARRERAS PROFESIONALES

Qué debo tener en cuenta antes de contratar un servicio
hosting
Como en la mayoría de los distintos servicios, todo depende de
lo que precises. Hay servicios de hosting muy económicos, que
no poseen ningún tipo de garantía sobre tus datos, ni te
aseguran una estabilidad minima de tu servicio; y también hay
otros servicios que incluyen seguramente aplicaciones y
servicios que no necesitemos.
Por supuesto, los servidores de pago prestan un mejor servicio,
más personalizado y ofrecen soporte técnico, paneles de
control amigables, así como plantillas y demás comodidades
completamente instaladas en nuestro servicio de alojamiento.

Figura 12
Referencia: https://hosting-peru.pe/alojamiento-web/

Para contratar un servicio hay que tener en cuenta una gran
cantidad de factores, como:
 La cantidad de espacio en MB que ofrece el servicio para
alojar nuestras páginas web
 La capacidad de gestionar los archivos vía FTP
 Soporte para scripts perl y python, php, ASP, etc
 Tipo de dirección web que ofrecen
 Tasa de transferencia de archivos mensuales

CARRERAS PROFESIONALES

CIBERTEC

ARQUITECTURA DE ENTORNOS WEB

Dominio
Un dominio de Internet es un nombre de un sitio web. Cada
dominio tiene que se único en Internet, por ejemplo
“elcomercio.pe” es el nombre del dominio de la página web del
diario El Comercio.

Figura 13
Referencia: http://blog.ozongo.com/cuantas-extensiones-necesito-para-eldominio-de-mi-empresa/

Todos los servidores y páginas de Internet tienen una dirección
numérica que se conoce como dirección IP (Protocolo de
Internet), por ejemplo 50.17.245.112
Los dominios fueron creados para evitar el que tuviéramos que
recordar las direcciones numéricas de las páginas y servidores
web. De forma que cuando escribimos en internet el dominio
elcomercio.pe, el servidor de DNS (Servidor de Nombres de
Dominio) del proveedor de web hosting del dominio
elcomercio.pe nos proporciona la dirección IP 50.17.245.112 y
nuestro navegador se va directamente a esa dirección
numérica.
Elementos de un dominio
Un dominio de Internet está compuesto por 2 elementos:
 Nombre del dominio
 Extension o terminación del dominio
El nombre hace referencia a la marca o una palabra resumen
que indique el tipo de actividad o información que brinda la
web, por ejemplo www.pepsi.com.ar. Esta direccion hace
referencia al nombre de una marca mundial de refrescos.
La terminación o extensión de los dominios, indica la ubicación
geográfica donde se ubica el sitio web asi como el tipo de
organización o fin que tiene. Es aquí donde podemos distinguir
dos tipos de extensiones:

CIBERTEC

CARRERAS PROFESIONALES

Figura 14
Referencia: http://www.quees.info/que-es-un-dominio.html

Territoriales: indican a que país o región pertenece la página,
actualmente existen un total de 243 paises y está compuesto
por dos letras que corresponde a la abreviación del nombre del
país:
.es, España
.pe, Peru
.us, Estados Unidos
Internacionales: hacen referencia al tipo de actividad que
ofrece el sitio web. A diferencia de los territoriales, éstos están
compuestos por más de dos letras.
Dominio
.biz
.com

.edu
.gov y .gob
.info
.mil
.name
.net
.org
.tel
.travel
.aero
.edu
.jobs

Descripcion
Prevista para ser usado por negocios
Son los dominios más extendidos en el
mundo. Sirven para cualquier tipo de página
web, temática
para servicios de Educación
para gobierno y entidades públicas
para información
para el Departamento de Defensa de los
Estados Unidos
para nombres de personas
para infraestructura de red e Internet
para organizaciones
para servicios de comunicación por internet
para páginas de la industria de viajes y
turismo
Sector aeronáutico
Universidades, educación
Empleo

1.1.1.5 Navegadores
Un navegador o navegador web (del inglés, web browser) es
un programa que permite visualizar la información que contiene
una página web la cual puede estar alojada en un servidor
dentro de la World Wide Web o en uno local.

CARRERAS PROFESIONALES

CIBERTEC

ARQUITECTURA DE ENTORNOS WEB

El navegador interpreta el código, HTML generalmente, en el
que está escrita la página web y lo presenta en pantalla
permitiendo al usuario interactuar con su contenido y navegar
hacia otros lugares de la red mediante enlaces o hipervinculos.

Figura 15
Referencia:
http://www.adrformacion.com/cursos/dreamcs3/leccion1/tutorial3.html

La funcionalidad básica de un navegador web es permitir la
visualización de documentos de texto, reproducir recursos
multimedia incrustados y ejecutar acciones. Los documentos
pueden estar ubicados en la computadora en donde está el
usuario, pero también pueden estar en cualquier otro
dispositivo que esté conectado a la computadora del usuario o
a través de Internet, y que tenga los recursos necesarios para
la transmisión de los documentos (un software servidor web).
Navegadores más utilizados

Figura 16
Referencia: http://quelaptopcomprar.blogspot.com/

Google chrome: Creado por la empresa Google. Se lo puede
obtener de forma gratuita, y se caracteriza por tener una
interfaz de usuario que resulta eficiente y de gran sencillez.
Este navegador es valorado por sus usuarios debido a la
seguridad, claridad, sencillez, rapidez y estabilidad que
proporciona. Además, le otorga a los usuarios privacidad en
sus navegaciones al borrar los archivos cookies y no registrar
las actividades.

CIBERTEC

CARRERAS PROFESIONALES

Internet Explorer: Integrado al sistema operativo Windows, lo
que trae como consecuencia que no pueda ser borrado por el
usuario. A diferencia del Google chrome, este navegador no es
considerado demasiado seguro, aunque presenta avanzadas
opciones en cuanto a privacidad y seguridad.
Mozilla Firefox: Incluye, corrector ortográfico, pestañas, sistema
de búsqueda integrado que usa el motor de búsqueda que
quiera el usuario. Se caracteriza por su estabilidad, sencillez,
seguridad y rapidez, y permite al usuario modificar su
apariencia y estilo.
Opera Browser: Posee soporte estándar, gran velocidad y es
de fácil uso. Una de las grandes ventajas que posee es que se
lo actualiza y mejora constantemente. También contiene un
buscador y pestañas. Una ventaja que tiene es que eliminó la
presencia de avisos publicitarios. Opera Browser está integrado
a las consolas Nintendo y a teléfonos celulares.
Safari: Fue creado por Apple. Una de las ventajas que presenta
es la posibilidad de enviar por mail páginas web y almacenarlas
a pesar de que estas hayan sido eliminadas de la red. Se
caracteriza por ofrecer controles parentales muy eficientes,
proporcionar seguridad y proteger los datos.

Figura 17
Referencia: https://www.genbeta.com/a-fondo/asi-esta-el-ranking-de-losnavegadores-y-sistemas-operativos-mas-utilizados-al-empezar-2017

CARRERAS PROFESIONALES

CIBERTEC

ARQUITECTURA DE ENTORNOS WEB

1.1.2

ETAPAS DE UN PROYECTO WEB
Desarrollar un sitio web efectivo requiere una planeación bien
elaborada. Puede ahorrar tiempo y dinero durante el proceso del
proyecto si logra entenderlo en su totalidad antes de comenzarlo.
A pesar de que los sitios varían en rango de contenido, desde unas
cuantas páginas hasta sitios mucho más complejos con características
sofisticadas, el proceso de desarrollo se mantiene igual.

Figura 18
Referencia: http://www.n4gash.com/2016/infografa-pasos-diseno-pagina-web/

Las etapas de un proyecto de diseño de sitios Web son:
1. Estrategia: Es la primer a etapa a definir antes de tomar cualquier
acción. Se necesita decidir cual es el propósito del sitio web, cuáles
son las necesidades del negocio que motivan el proyecto.
Es importante definir:
 Objetivos y metas.
 Analizar y recoger la información
 Lista de puntos para producción (tecnología, servidor web,
presupuesto)
 Designar un editor del sitio
2. BenchMarking: conocer qué está haciendo la competencia y como
está posicionado su negocio en la Internet. Se analizan sitios web
relacionados con el área del proyecto, determinando elementos y
funcionalidades destacados que puedan ser utilizados para ofrecer
un sitio web más competitivo.

Figura 19
Referencia: http://www.addwebproactive.com/

CIBERTEC

CARRERAS PROFESIONALES

Es recomendable enfocarse en aquellas que tengan un mayor
tamaño e imagen de marca que la de nuestro cliente, incluso a
los líderes del mercado.
3. Arquitectura de la información: Con toda la información que se va
a contar de las reuniones realizadas con los clientes, creamos un
mapa del sitio (SiteMap) para el proyecto donde mostramos cómo
será la estructura de secciones de su nueva web.
Este proceso ayuda a comprender qué y cómo vamos a comunicar y
establecer las funcionalidades que los usuarios necesitarán.
Los contenidos bien planificados y bien estructurados nos ayudarán
a crear tanto el sistema de interacción como el diseño visual.

Figura 20
Referencia: http://informaticayserviciosdeinternet.blogspot.com/2012/05/mapade-sitio.html

4. Diseño de prototipos: A partir de la priorización de contenidos,
trabajamos con el cliente a través de un proceso iterativo para
diseñar un prototipado o boceto muy esquemático (en inglés,
wireframe) de las principales páginas de la web.

Figura 21
Referencia: http://teamddm.com/articles/wireframes-getting-a-sharedunderstanding

Esto ayudará al cliente a conocer cómo se organizará y será
mostrado el contenido en dispositivos móviles, tablets y
ordenadores de sobremesa.

CARRERAS PROFESIONALES

CIBERTEC

ARQUITECTURA DE ENTORNOS WEB

5. Construcción: En este punto comenzamos a crear la plantilla de la
web con HTML5.

Figura 22
Referencia: http://laminaliagalicia.es/?p=1

Este paso es a menudo un trabajo de colaboración estrecha entre
diseñadores y desarrolladores. La codificación adaptativa empezará
con el diseño web y usaremos la lista de priorización de contenidos
o el prototipado como mapa de ruta para priorizar los contenidos.
Incorporaremos los diferentes estilos de diseño según lo
especificado en la guía de estilos mediante CSS3 y nos
aseguraremos de que cumple con los estándares de W3C.
Usaremos JQuery y JavaScript para eventos interactivos, en lugar
de Flash o Silverlight. También aplicaremos las mejores prácticas
para facilitar la lectura online y la impresión de contenidos
añadiendo el código específico en CSS.
6. Pruebas de usabilidad y refinamiento: Las pruebas de usabilidad
son evaluaciones que se realizan a sitios web con el objeto de
determinar si son intuitivos y fáciles de navegar.
Estas pruebas se realizan con usuarios reales y con usuarios
expertos.

Figura 23
Referencia: http://www.condo-consulting.com/test-de-usabilidad-que-son-y-paraque-me-sirven.b.aspx

Realizar pruebas de usabilidad a su página web permitirá saber si la
información está bien estructurada y si generará una experiencia
positiva al usuario en cada visita. Al realizar esta prueba se evalúa
la navegabilidad, arquitectura de la información, entradas y datos,
formularios, credibilidad y confianza de su página web.

CIBERTEC

CARRERAS PROFESIONALES

7. Publicación en la Web: Este será el último paso, subir el proyecto a
la Internet, para ello debemos tener en cuenta lo siguiente:
 Contratar un hosting, la empresa dispone de distintas
alternativas: alojamiento virtual, tener servidor propio, servidor
dedicado.
 Si quiere genera tráfico hacia el sitio web, la empresa debe
iniciar una labor de promoción del sitio.
 Para que el sitio se visitado en forma continua, la empresa
deberá realizar continuas actualizaciones y revisiones de sus
paginas.

Figura 24
Referencia: http://www.callegranvia.com/empresariales/info/promover-sunegocio-con-la-publicacion-de-articulos/

1.1.2.1 Arquitectura de un proyecto Web
Se utiliza el término arquitectura web, para definir una tarea
que requiere conocimientos técnicos de construcción,
funcionales y de diseño para sitios o páginas web. Con base en
las preferencias del contenido se crea un mapa de la
arquitectura del sitio para demostrar visualmente cómo se
organizan el contenido y la estructura del sitio.
El objetivo de esta fase es poder generar un mapa detallado de
las secciones que se deberán construir y los elementos con los
que estas deberían contar. Es muy importante poder incluir en
estos esquemas información del tipo de dato a trabajar y la
jerarquía del contenido.una vez que se generen los esquemas
que deberán ser entregados al proceso de diseño.

1.1.2.2 Mapa de Sitio
Un Sitemap o Mapa del Sitio es la estructura de enlaces de
páginas web que definirá la buena o mala navegación de un
sitio web.
El mapa de un sitio web puede ser un documento que se utiliza
para planificar el diseño de la web, o puede ser una página web
donde se listan todas -o las más importantes- páginas web de
un sitio (generalmente organizadas de alguna manera).

CARRERAS PROFESIONALES

CIBERTEC

ARQUITECTURA DE ENTORNOS WEB

Figura 25
Referencia: http://marketinges.es/tag/sitemap/

Empezando por la página de Inicio hasta la página de
contacto, todo sitio web debe tener un mapa para que la
navegación del usuario web sea lo más fácil posible.

Figura 26
Referencia: http://es.slideshare.net/christian.bonner/arquitectura-de-lainformacin-de-sitios-web

Importancia
Un mapa de sitio es importante fundamentalmente para
ayudar a los buscadores a que encuentren nuestra web y a
que indexen sus páginas más rápidamente.
Es como si a un buscador le dieramos un índice de nuestro
libro (nuestro libro es nuestra web) y le ahorraramos el
esfuerzo de tener que buscar él mismo donde está cada
cosa.
Características
 Consistentes: el sistema debe ser similar en todo el sitio,
en lo referido a su ubicación y disposición en las páginas.
Esto se aplica también a aquellas instituciones que
pueden tener más de un sitio web.
 Uniforme: el sistema debe utilizar similares términos con
el fin de que el usuario que lo vea en las páginas, confíe
en que sus opciones llevan siempre hacia los mismos
lugares dentro del sitio.
 Visible: debe ser una guía permanente en el área en que
se encuentre el usuario dentro del sitio.

CIBERTEC

CARRERAS PROFESIONALES

Ventajas
 Resumen de la información y accesibilidad en un enlace
directo
 Facilidad de navegación
 El usuario permanece mas en la Web
 La navegación resulta una experiencia agradable
 Una estructura clara y sencilla
Técnica para construir un sitio web
Una de las técnicas más populares utilizadas por los
arquitectos de información es la conocida card sortung
(tarjetas ordenadas).

Figura 27
Referencia: http://es.slideshare.net/christian.bonner/arquitectura-de-lainformacin-de-sitios-web

Esta técnica se basa en la observación de como los usuarios
agrupan y asocian entre sí un numero predeterminado de
tarjetas etiquetadas con las diferentes categorías del sitio
web.
De esta forma, partiendo del comportamiento de los propios
usuarios, es posible organizar y clasificar la información de
un sitio web conforme a su modelo mental.

1.1.2.3

Wireframe
Como desarrolladores o diseñadores web, cuando nos
enfrentamos a un nuevo proyecto con un cliente es de vital
importancia lograr una buena comunicación con el cliente y
detectar realmente sus necesidades; pero esto es un
problema cuando en algunos casos el cliente no sabe lo que
necesita realmente o no puede explicarlo de manera
adecuada.
Para evitar el tener que volver atrás en nuestros proyectos y
para mostrarle al cliente una mejor visualización del
proyecto, nace la idea de los mockups, maquetas o
wireframes.

CARRERAS PROFESIONALES

CIBERTEC

ARQUITECTURA DE ENTORNOS WEB

Un wireframe básicamente es un boceto básico y de baja
calidad del desarrollo de una página web o el diseño de una
interfaz, cuya finalidad es el mostrar al cliente un boceto
rápido para facilitar la comunicación entre cliente y
desarrollador.

Figura 28
Referencia: http://tednologia.com/que-es-un-mockup-o-wireframe/

El wireframe tiene como objetivo proporcionar la
visualización del diseño o las funcionalidades de un site de
manera netamente referencial y poder definir objetivos en
una etapa temprana del proyecto, incluso hacer
modificaciones de manera rápida, para evitar hacer estos
cambios sobre un site o diseño real.
A ellos debe sumarse, para ciertos proyectos en que tan
relevante como ubicar los elementos en pantalla es simular
el funcionamiento, los wireframes funcionales, que no se
limitan a una estructura estática, sino que también permiten
la navegación.
Existe una variedad de software que nos permite crear estos
tipos de wireframes:
Nombre
Balsamig
Mockingbird
Lovely
Charts
Mockflow
Gliffy

CIBERTEC

Ubicación
http://www.balsamiq.com/products/mockups
https://gomockingbird.com/
http://lovelycharts.com/
http://www.mockflow.com/
http://www.gliffy.com/uses/wireframesoftware/

CARRERAS PROFESIONALES

Tipos de Wireframe
Podemos tener distintos tipos de prototipos, que en ningún
caso incluyen el diseño gráfico puesto que este se aplica en
una etapa posterior.
1. Wireframe de baja calidad: son aquellos prototipos que
representan cómo estarán organizados los elementos en
las páginas del sistema sin entrar en detalle.
a. Sketching: un sketch es un boceto rápido e informal
que se realiza en papel para transmitir una idea o
concepto con rapidez y claridad. Suele realizarse
durante las entrevistas iniciales como técnica eficaz
para comunicar al cliente conceptos o proponer
alternativas a un problema; también es muy útil
durante un brainstorming o en las reuniones con el
equipo de trabajo. Es una forma eficaz de comenzar
el prototipado de un sitio web, pues permite trabajar
ágilmente con varias ideas y esquematizar las
páginas.

Figura 29
Referencia: http://tednologia.com/que-es-un-mockup-o-wireframe/

b. Wireframe: permite crear una referencia visual
de la estructura de una página web, definiendo al
detalle el contenido y su distribución visual,
organizando así la información a nivel de página.

Figura 30
Referencia:
http://olgacarreras.blogspot.com.es/2007/02/wireframes.html

CARRERAS PROFESIONALES

CIBERTEC

ARQUITECTURA DE ENTORNOS WEB

2. Wireframe de alta fidelidad: son prototipos o maquetas
dinámicas, normalmente en (X)HTML, que simulan o
tienen implementadas partes del sistema final a
desarrollar. Pueden ser de muy distintos tipos, completo
o parcial, horizontal o vertical, etc.

Ventajas de crear Wireframes











CIBERTEC

Comunicación entre todos los componentes del equipo
de desarrollo y los usuarios
Participación, para integrar activamente a los usuarios
en el desarrollo.
Dan soporte a los diseñadores a la hora de escoger
entre varias alternativas.
Permiten a los diseñadores explorar diversos conceptos
del diseño antes de establecer los definitivos.
Permiten evaluar el sistema desde las primeras fases del
desarrollo (facilitan la exploración de ideas sobre nuevos
conceptos tecnológicos).
Son esenciales para la documentación, tanto de
conceptos funcionales del sistema como de tareas
concretas del mismo.
Son el primer paso para que ideas abstractas sean
concretas, visibles y testables.
Fomentan la iteratividad.
Mejoran la calidad y la completitud de las
especificaciones funcionales del sistema.
Son herramientas de propósito general, pues sirven para
comprobar la fiabilidad técnica de una idea, clarificar
requisitos que quedaron “indeterminados” o ver como
responde con el resto de la aplicación.

CARRERAS PROFESIONALES

LABORATORIO 1.1
Creando un mapa de sitio con ADOBE MUSE
Se pide diseñar un mapa de sitio utilizando el aplicativo Adobe MUSE.

Pasos a seguir:
Para crear un sitio Web, inicie el aplicativo Adobe MUSE

Para crear un nuevo
sitio, hacer click en la
opción Crear nuevo
Sitio, tal como se
muestra.

Selecciona Sitio

Configura el nuevo
sitio, selecciona el
diseño Inicial del sitio:
Ordenador, tal como
se muestra.

Tipo de diseño:
Ordenador

Al finalizar selecciona
la opción OK.

Click para
Finalizar

CARRERAS PROFESIONALES

CIBERTEC

ARQUITECTURA DE ENTORNOS WEB

IDE del aplicativo

Menú de sitio

Al crearse el
sitio, se
muestra la
siguiente
ventana, tal
como se
muestra.
Para
visualizar el
diseño de las
páginas,
selecciona la
opción
Miniatura.

Página de inicio

Página maestra

Diseñando una página
Para diseñar
una página,
desde el
menú de
contexto
seleccionar la
opción Abrir
página, o bien
hacer click en
la opción
Diseño, tal
como se
muestra.

CIBERTEC

Seleccionar

CARRERAS PROFESIONALES

Para asignar color a la
página, seleccione
desde la paleta de
colores, donde al
seleccionar se
muestra en el diseño
de la página, tal como
se muestra.

Paleta de
colores

Para regresar al sitio
Web, presiona la
opción Plan.

Agregando páginas a siguiente nivel.
Para agregar
páginas en el
siguiente nivel
(páginas
secundarias)
desde el menú
contextual
selecciona la
opción Nueva
página
secundaria tal
como se
muestra.

Seleccionar

Asigne el
nombre a la
página
haciendo doble
click al nombre.

CARRERAS PROFESIONALES

CIBERTEC

ARQUITECTURA DE ENTORNOS WEB

Cambie el nombre de la página y diseñe su
contenido

Cambie el nombre

Agregando páginas al mismo nivel
Para agregar
paginas al mismo
nivel, presione el
botón (mas) del lado
derecho de la página
y se agrega una
página en el mismo
nivel, tal como se
muestra.

Presione el botón para
agregar una página a la
derecha

Duplicando páginas
Para crear
páginas con el
mismo diseño,
debemos
“duplicarlas”;
para ello
seleccione una
página y
seleccione,
desde el menú
contextual, la
opción Duplicar
página, tal
como se
muestra

CIBERTEC

Seleccionar

CARRERAS PROFESIONALES

Grabando el sitio
Para guardar el
sitio, seleccione
desde la opción
ARCHIVO, la
opción Guardar
Sitio

Seleccionar

Selecciona la
carpeta donde se
guardará el sitio y
presione el botón
GUARDAR

Nombre del Sitio
Click
para
Guardar

CARRERAS PROFESIONALES

CIBERTEC

ARQUITECTURA DE ENTORNOS WEB

LABORATORIO 1.2
Creando un mapa de sitio con LOVELY CHARTS
Se pide diseñar un mapa de sitio utilizando el aplicativo Lovely Charts.

ACCESO A LA PLATAFORMA
Ingresar a la plataforma. Para ingresar al LOVELY CHARTS, escriba la siguiente
dirección URL http://www.lovelycharts.com/web

Si no tienes una cuenta, presiona el botón Try It Now, para registrarte.

CIBERTEC

CARRERAS PROFESIONALES

Registras tus datos para ingresar al alplicativo, tal como se muestra.

Una vez que te has registrado, la plataforma te envía un código por tu correro. Ingresa
el código que le envía el sitio, e ingresaras a la aplicación web.
Selecciona SiteMaps de la opción Create New.

CARRERAS PROFESIONALES

CIBERTEC

ARQUITECTURA DE ENTORNOS WEB

A continuación la plataforma carga el aplicativo para crear mapa de sitios, tal como se
muestra

Para insertar una objeto a la plantilla, siga los pasos que se muestra a continuación.

CIBERTEC

CARRERAS PROFESIONALES

A continuación escribimos un texto al objeto incrustado en la plantilla.

Asignar colores de fondo a las páginas, para resaltar su presentación en el mapa de
sitio

Conexión entre páginas: 1. Selecciona desde la opción TOOLS, la opción conect.
2. Selecciona la línea de conexión, tal como se muestra

CARRERAS PROFESIONALES

CIBERTEC

ARQUITECTURA DE ENTORNOS WEB

Para realizar la conexión entre las páginas, arrastre la página HOME, hacia las
páginas que se encuentra en la parte inferior, tal como se encuentra, las cuales se
encontrarán conectadas.

Para diseñar la conexión lineal: 1. Selecciona el TOOLS la opción Arrastrar; 2. Las
líneas de conexión se arrastrarán por los extremos (puntos rojos)

CIBERTEC

CARRERAS PROFESIONALES

Exportando el mapa de Sitio
Seleccionar la opción Export, donde se visualiza una ventana. Indicas el nombre del
archivo y selecciona su formato: PNG o JPG y presionas el botón CONTINUE

Acontinuación se muestra la ventana de dialogo para guardar el archivo. Ingresar el
nombre de la imagen y presionas el botón GUARDAR

CARRERAS PROFESIONALES

CIBERTEC

ARQUITECTURA DE ENTORNOS WEB

LABORATORIO 1.3
Diseñando un WireFrame con MOCKINGBIRD
Se pide diseñar un WIREFRAME utilizando el aplicativo MOCKING BIRD
Para ingresar al Mockingbird:

Desde la URL
ingresamos la
siguiente dirección:
https://gomockingbird.c
om/

Hacer click para
ingresar

Cargando la página
MockingBird.

CIBERTEC

CARRERAS PROFESIONALES

IDE del MockingBird
Al cargar el aplicativo se visualiza el siguiente IDE, tal como se muestra

Barra de menú

Cuadro de
herramienta
s

Página para el
diseño del
prototipo

Para configurar la vista del wireframe en cuadrículas, desde la opción VIEW:
1. selecciona la opción Show grid
2. selecciona desde Show columns la opción 960gs (12 columns), para visualizar
12 columnas en la cuadrícula

1. Selecciona la
opción Show grid

2. Selecciona
desde Show
columns la opción
960 gs (12
columnas)

CARRERAS PROFESIONALES

CIBERTEC

ARQUITECTURA DE ENTORNOS WEB

Para iniciar un nuevo diseño, selecciona, desde la opción FILE, la opción New, tal
como se muestra.

Para iniciar un
nuevo diseño

Para la búsqueda de un control, escriba en la opción WIDGET, las iniciales del nombre
del control, y el buscador mostrará los controles que coincidan con la búsqueda, tal
como se muestra en la figura.

Búsqueda de
controles

Control

CIBERTEC

CARRERAS PROFESIONALES

Para colocar un control a la grilla del wireframe, debemos arrastrarlo a la página.

Control arrastrado
desde el cuadro de
herramientas

Ubicar y dimensionar el control agregado. Para dimensionar el control, hacer doble
click sobre dicho control y definir su ancho y su alto (anchoxalto), tal como se
muestra.

Escriba ancho y alto y luego dar
ENTER

Para buscar más controles, estos se pueden buscar por su categoría

Para buscar datos, por categorías,
hacer click en la flecha

CARRERAS PROFESIONALES

CIBERTEC

ARQUITECTURA DE ENTORNOS WEB

Si queremos agregar un menú de navegación, selecciona la categoría NAVEGACION,
tal como se muestra.

Selecciona la categoría “Navegacion”
para agregar un menú de navegación

Arrastre, desde el cuadro de herramientas, el control (Button bar) Barra de menú, tal
como se muestra.

Arrastre el
control

Controles de
Navegación

CIBERTEC

CARRERAS PROFESIONALES

Una vez que lo sueltas, se edita el menú bar. A continuación escribimos la lista de los
elementos, los cuales se separan por una coma, tal como se muestra. Al finalizar
presionar ENTER.

Escribir la lista de
opciones, separados por
una coma

Extienda el control a lo largo de la página, diseñado el menú se visualiza de esta forma

Extiende el menú
a lo largo de la
página

CARRERAS PROFESIONALES

CIBERTEC

ARQUITECTURA DE ENTORNOS WEB

Acontinuación termine el diseño del wireframe tal como se muestra

Al finalizar exportar el WireFrame, desde la opción FILE, selecciona la opción
EXPORT en formato PNG

Vamos a exportar el
wireframe en formato png

CIBERTEC

CARRERAS PROFESIONALES

A continuación el proyecto solicita el nombre del proyecto para descargarlo a tu pc.

CARRERAS PROFESIONALES

CIBERTEC

ARQUITECTURA DE ENTORNOS WEB

Resumen
 Internet se le define como una red mundial de computadoras, distribuidos por el
todo el mundo, las cuales se encuentran interconectadas a través de satélites,
líneas telefónicas, fibra óptica, etc., donde utilizando un protoco de
comunicaciones común (TCP/IP), que permite a millones de usuarios estar
conectados para compartir, intercambiar, publicar y extraer información.
 Sitio Web, Se le conoce como Site, un sitio web es un conjunto de páginas web,
relacionadas a un dominio de Internet el cual se puede visualizar a través de
internet.
 Un servidor web es un programa que se ejecuta continuamente en un computador,
manteniéndose a la espera de peticiones de ejecución que le hará un usuario de
Internet. El servidor web se encarga de contestar a estas peticiones de forma
adecuada, entregando como resultado una página web o información de todo tipo
de acuerdo a los comandos solicitados.
 El alojamiento web (en inglés web hosting) es el servicio que provee a los usuarios
de Internet un sistema para poder almacenar información, imágenes, vídeo, o
cualquier contenido accesible vía web.
 Un dominio de Internet es un nombre de un sitio web. Cada dominio tiene que se
único en Internet, por ejemplo “elcomercio.pe” es el nombre del dominio de la
página web del diario El Comercio
 Un navegador o navegador web (del inglés, web browser) es un programa que
permite visualizar la información que contiene una página web la cual puede estar
alojada en un servidor dentro de la World Wide Web o en uno local.
 Etapa de un proyecto web permite desarrollar un sitio web efectivo requiere una
planeación bien elaborada. Puede ahorrar tiempo y dinero durante el proceso del
proyecto si logra entenderlo en su totalidad antes de comenzarlo. A pesar de que
los sitios varían en rango de contenido, desde unas cuantas páginas hasta sitios
mucho más complejos con características sofisticadas, el proceso de desarrollo se
mantiene igual.
 Arquitectura web es una tarea que requiere conocimientos técnicos de
construcción, funcionales y de diseño para sitios o páginas web. Con base en las
preferencias del contenido se crea un mapa de la arquitectura del sitio para
demostrar visualmente cómo se organizan el contenido y la estructura del sitio.
 Un Sitemap o Mapa del Sitio es la estructura de enlaces de páginas web que
definirá la buena o mala navegación de un sitio web.
 Un wireframe básicamente es un boceto básico y de baja calidad del desarrollo de
una página web o el diseño de una interfaz, cuya finalidad es el mostrar al cliente
un boceto rápido para facilitar la comunicación entre cliente y desarrollador.
 Si desea saber más acerca de estos temas, puede consultar las siguientes
páginas.
 http://www.hipertexto.info/documentos/internet_tegn.htm#IP
http://docentesistemas.webnode.es/contenidos-programaticos/grado-11/pagina-webgeneralidades/que-es-un-hosting-/
 http://es.slideshare.net/josegregoriob/servidor-web-8451426
 http://www.servicio-hosting.com/tipos-de-web-hosting.php
 http://www.duplika.com/que-es-el-hosting

CIBERTEC

CARRERAS PROFESIONALES

 http://culturacion.com/como-escoger-un-servidor-para-alojar-mi-sitio-web/
 http://www.quees.info/que-es-un-dominio.html
 http://www.tiposde.org/internet/113-tipos-de-navegadores/
 http://spn314.blogspot.com/2013/11/cuantos-navegadores-de-internet-hay.html
http://www.condo-consulting.com/test-de-usabilidad-que-son-y-para-que-mesirven.b.aspx
 http://disenowebakus.net/pasos-clave-en-la-creacion-de-un-sitio-web.php
 http://novatosweb.blogspot.com/2010/12/etapas-que-debe-formar-tu-proyecto-web.html
 http://es.slideshare.net/cilp2884/etapas-de-un-proyecto-web
 http://es.slideshare.net/christian.bonner/arquitectura-de-la-informacin-de-sitios-web
 http://tednologia.com/que-es-un-mockup-o-wireframe/
 http://olgacarreras.blogspot.com.es/2007/02/wireframes.html

CARRERAS PROFESIONALES

CIBERTEC

ARQUITECTURA DE ENTORNOS WEB

UNIDAD

TEMARIO
1.1.

Tema 1: Fundamentos de un proyecto web

1.2.

Tema 2: Elementos gráficos para la web

1.2.1 Manejo de un editor de imágenes
1.2.1.1 Tipos de imagen, resolución, modos de color.
1.2.1.2 Tamaño, recorte, selección, etc.
1.2.2 Creación de banners, menús y botones.

CIBERTEC

CARRERAS PROFESIONALES

CIBERTEC

ARQUITECTURA DE ENTORNOS WEB

1.2.

ELEMENTOS GRAFICOS PARA LA WEB
Los elementos gráficos son una parte fundamental del diseño en todas sus
modalidades, introduciendo en las composiciones información visual que
complementa en gran medida el mensaje que se desea transmitir, y que a
veces es tan importante en el diseño como los contenidos textuales del mismo.
A la hora de realizar la ilustración de páginas web, podemos optar bien por
dibujarlas a mano, escanearlas y retocarlas si es preciso, bien por empezar el
dibujo directamente en un programa gráfico adecuado.
Los programas gráficos son de gran ayuda a la hora de trabajar con
ilustraciones, ya que en ellos se realizan fácilmente operaciones que en dibujo
o pintura son muy laboriosas (tareas repetitivas, copiar una imagen entera o
parte de ella, dibujar trazados geométricos prefectos, aplicar filtros o efectos,
etc.).

Figura 1
Referencia: https://play.google.com/store/apps/details?id=com.creapp.photoeditor

Para crear una ilustración podemos, en principio, usar cualquier programa
gráfico, aunque dependiendo del tipo de ilustración buscada habrá unos más
adecuados que otros. Así, si en nuestra ilustración van a predominar los trazos
limpios y geométricos resultan especialmente indicados los programas de
gráficos vectoriales, como Adobe Ilustrator o Macromedia Freehand. En
cambio, si lo que buscamos es una ilustración que parezca más natural, con
trazos difuminados, juegos de colores o luces, degradados o tonos concretos,
serán más indicados programas de retoque, como Adobe Photoshop o Paint
Shop Pro.

1.2.1. MANEJO DE UN EDITOR DE IMAGENES
Los editores de imágenes son aplicaciones informáticas que permiten el
tratamiento y manipulación de imágenes, fotografías, vídeos, etc., de la
forma más simple (reducir, ampliar, retocar, recortar...) hasta la más

CIBERTEC

CARRERAS PROFESIONALES

compleja (hacer montajes y arreglos, animar vídeos y figuras...) para
mejorar su presentación.

Figura 2
Referencia: http://mashable.com/2010/07/15/wireframing-tools/

Una de las metas puede ser eliminar las fallas que pueden haberse
producido durante el escanéo o al fotografiar, por ejemplo sobre
exposición, bajaexposición, falta de contraste, ruido en la imagen,
efecto de los ojos rojos, paradoja de las líneas paralelas en perspectiva,
etc. Estas fallas se producen por defectos técnicos en los aparatos
fotográficos, escáner, condiciones de trabajo precarias, fallas en la
operación u originales defectuosos.
Un editor de gráficos vectoriales es una aplicación informática que
permite al usuario crear y editar imágenes de graficos vectoriales
(imagen digital formada por objetos geométricos independientes, cada
uno de ellos definido por distintos atributos matemáticos de forma, de
posición, de color, etc.), de forma interactiva en la pantalla de la
computadora y guardarlas en uno de los tantos formatos de graficos
como pdf. Entre los editores vectoriales tenemos:
 Adobe Illustrator
 Corel Draw
 Inkscape
 OpenOffice.orgDraw
Y de editors de mapa de bits es una aplicación informática que permite
al usuario crear y editar imágenes de mapa de bits (imagen que esta
formada por pixeles). Entre los editores de mapa de bits tenemos;
 Adobe Photoshop
 Paint
 Gimp
 FireWork

1.2.1.1 Tipos de imagen, resolución, modos de color
1. Tipos de imagen
A la hora de trabajar con imágenes se pueden distinguir dos
tipos de imágenes. Por una parte, se encuentran las imágenes
vectoriales, las cuales se componen de líneas y curvas
definidas matemáticamente, y por otra las imágenes de mapa
de bits que están compuestas por una rejilla o mapa de
pequeños cuadrados denominados píxeles.

CARRERAS PROFESIONALES

CIBERTEC

ARQUITECTURA DE ENTORNOS WEB

Los programas de dibujo generan imágenes de tipo vectorial. A
veces se llaman "programas de dibujo orientado a objeto", ya
que las imágenes comprenden objetos independientes, líneas
definidas matemáticamente y figuras.
Los programas de pintura generan imágenes de tipo mapa de
bits, si se dibuja una línea, la aplicación la convierte en unos
pequeños puntos cuadrados llamados pixeles.
Entre los formatos de archivos de imagen tenemos:







BMP. Formato nativo de Paint de Microsoft y soportado por
gran cantidad de aplicaciones Windows y DOS.
GIF. de CompuServe, utilizado en los viejos tiempos para la
compresión de archivos.
PCX. Formato nativo de PC PaintBrush.
PDF. Variación del lenguaje de impresión PostScript.
JPEG. Formato de compresión más eficiente y esencial
actualmente disponible.
TIFF. Formato de impresión de imágenes ampliamente
soportado tanto en Macintosh como en PC.

2. Resolución
El término resolución se refiere al número de unidades de
imagen por pulgada. En los monitores y los escáneres estas
unidades se llaman píxeles; en impresoras y fotocomponedoras
se denominan puntos.
Cuando se decide la resolución necesaria para escanear una
imagen, el objetivo es reunir suficiente información para que se
vea bien, pero de tal modo que el archivo no sea tan grande
que no se pueda trabajar.
3. Modos de color
La propiedad más básica de una imagen es su modo. Hay tres
modos posibles: RGB, escala de grises e indexado. RGB son
las iniciales en inglés de rojo, verde y azul, e indica que cada
punto de la imagen está representado por un nivel de “rojo”, un
nivel de “verde” y un nivel de “azul”, representando una imagen
a todo color. Cada canal de color tiene 256 niveles de
intensidad posibles. Para más detalles, consulte modelos de
color. En una imagen de escala de grises, cada punto está
representado por un valor de brillo, que va desde el 0 (negro)
hasta el 255 (blanco), con valores intermedios que representan
diferentes niveles de gris.

1.2.1.2 Tamaño, recorte, selección, etc.
1. Tamaño
Cuando modificas el tamaño de una foto, creas una copia
nueva con una resolución de imagen ajustada (número de
píxeles) y con todos los cambios aplicados.
La foto original del disco duro permanece intacta en todo
momento.

CIBERTEC

CARRERAS PROFESIONALES

Puedes modificar el tamaño de las fotos al exportarlas,
enviarlas por correo electrónico o almacenarlas.
2. Recorte
Hay muchas razones para recortar una imagen; por ejemplo,
ajustar una imagen para rellenar un marco, quitar una parte del
fondo para resaltar el sujeto, etc. Para realizar este proceso,
debes seleccionar la herramienta recorte y abrir la foto para
iniciar el proceso. Al terminar el proceso, la sección recortada
podrá ser almacenada en otra página.
3. Selección
Todo editor de imágenes tiene una herramienta para
seleccionar partes concretas de la imagen, sobre la cual
actuaremos posteriormente con otras herramientas.
Las
herramientas de selección pueden ser de marco rectangular,
elíptico, fila y columna.
4. Varita Magica
Es una opción donde podremos realizar selecciones
basándonos en la similitud de color de los píxeles próximos al
lugar pulsado. Es decir, donde se pulse con la herramienta,
quedará seleccionada toda la zona próxima a ese color.

1.2.2 Creación de banners, menús y botones.
Crear un banner o logo con un editor de imágenes es una tarea sencilla,
incluso se pueden utilizar herramientas muy básicas como Paint y luego
mejorar su diseño con otros programas como por ejemplo el Photoshop.

Figura 3
Referencia: http://www.todopatuweb.net/news/como-crear-un-banner-depublicidad-para-tu-web/

Lo cierto es que si quieres que tus banners y logos cuenten con efecto
flash, deberás utilizar otras herramientas algo más complejas o recurrir
a los generadores online.
Si optas por crear tus logos y banners con alguno de los programas
antes mencionados, solo deberás tener en cuenta las medidas, las
cuales suelen ser estándar. Los generadores de banners y logos online
precisamente se basan en dichas dimensiones, verás que se muestran
entre las opciones de fuente y selección de colores.

CARRERAS PROFESIONALES

CIBERTEC

ARQUITECTURA DE ENTORNOS WEB

Un editor de imágenes dispone de un Editor de botones el cual puede
crear botones personales arrastrando formas, importando imágenes de
gráficos o arrastrando objetos en la ventana de documento. Después el
Editor de botones le guiará por los pasos que permiten controlar el
comportamiento del botón.

Figura 4
Referencia: aprendeenlinea.udea.edu.co/lms/ova/mod/resource/view.php?id=1559

Una barra de navegación, también denominada bar nav, es un grupo de
botones que ofrece vínculos a otras áreas de un sitio Web.
Normalmente, no cambia de aspecto en el sitio, de modo que ofrece un
método coherente de navegación sin importar el lugar en que se
encuentre el usuario en el sitio Web. La barra de navegación tiene el
mismo aspecto de una página Web a otra, pero los enlaces pueden ser
específicos para el funcionamiento de cada página.
En un editor de imágenes como Fireworks, puede crear un bar nav
creando un símbolo en el Editor de botones y luego poniendo instancias
de dicho símbolo en el lienzo.

CIBERTEC

CARRERAS PROFESIONALES

LABORATORIO 2.1
Trabajando con FIREWORKS
Se pide diseñar un wireframe de alta fidelidad utilizando el aplicativo FireWorks.

Pasos a seguir:
Para crear un sitio Web, inicie el aplicativo FIREWORKS
A continuación se muestra el siguiente IDE.

Caja de Herramientas

Abrir un archivo
Ventana de capas

Ventana de propiedades

Para iniciar con el diseño del wireFrame de alta fidelidad, primero creamos un nuevo
documento. Hacer click en la opción Nuevo, para crear un documento

Crear nuevo
documento

CARRERAS PROFESIONALES

CIBERTEC

ARQUITECTURA DE ENTORNOS WEB

En el nuevo documento, configurar el tamaño del lienzo, tal como se muestra. Al
finalizar presiona el botón ACEPTAR.

Cambiar el ancho y
altura

Presiona el botón
ACEPTAR

A continuación se visualiza el documento a continuación:

Ventana de capas:
Capa 1

Barra de
herramienta

Lienzo

Propiedades

CIBERTEC

CARRERAS PROFESIONALES

A continuación vamos a abrir el archivo
wireframe. Desde la opción Archivo
selecciona la opción ABRIR, tal como se
muestra.
Seleccionar

Selecciona el archivo wireFrame y presiona el boton ABRIR, tal como se muestra

Hacer click seleccionar
archivo

Abrir y visualizar
el archivo

El archivo wireFrame-inicio, se visualiza en una capa “Fondo”, tal como se muestra
Archivo Imagen

CARRERAS PROFESIONALES

CIBERTEC

ARQUITECTURA DE ENTORNOS WEB

AGREGAR EL WIREFRAME AL DOCUMENTO
A continuación vamos a copiar la imagen y pegarla en el nuevo documento:
1. Seleccionar la imagen agregada: presionamos Ctrl + A y Ctrl + C.
2. Selecciona la pestaña inicial del nuevo documento,
3. Selecciona la capa “Capa 1” y presionas Ctrl + V para pegar, nos debe quedar
de esta manera

Pestaña donde se
agrega la imagen

Capa donde se
pega la imagen

Dimension de la
imagen: CAMBIAR

Cambiar el Ancho, Altura y las coordenadas X e Y, donde el wireframe ocupará toda la
dimensión del lienzo, tal como se muestra

Cambiar las dimension de
la imagen

CIBERTEC

CARRERAS PROFESIONALES

AGREGAR UNA IMAGEN AL DOCUMENTO
A continuación vamos a abrir una imagen
para diseñar el wireframe de alta
fidelidad. Desde la opción Archivo
selecciona la opción ABRIR, tal como se
muestra.
Seleccionar

Selecciona el archivo de imagen, tal como se muestra y presiona el botón ABRIR

Seleccionar

Presionar botón
ABRIR

Se agrega la pestaña donde se visualiza el archivo de la imagen, tal como se muestra

Pestaña del archivo
de la imagen

CARRERAS PROFESIONALES

CIBERTEC

ARQUITECTURA DE ENTORNOS WEB

Para agregar la imagen en el nuevo
documento:
1. Agregar una nueva capa: presionar el
boton capa Nueva y creamos la Capa 2,
tal como se muestra.

Presionar para
crear Nueva Capa

Agregada la nueva capa, vamos a copiar la imagen y pegarla en el nuevo documento:
1. Desde la pestana de la imagen: presionamos Ctrl + A y Ctrl + C.
2. Seleccionar la pestaña del nuevo documento
3. Selecciona la nueva capa: Capa 2
4. Luego presionar Ctrl + V para pegar la imagen en la capa 2, nos debe quedar
de esta manera

Pestaña donde se
agrega la imagen

CIBERTEC

CARRERAS PROFESIONALES

Para ubicar la imagen en la sección Advertisement del wireframe:
Selecciona la herramienta selección, para desplazar la imagen en el borde superior
izquierdo del marco Advertisement

Seleccionar la
herramienta

Desplazar la imagen al
borde superior izquierdo

Para dimensionar la imagen, presiona la herramienta Escala (ver imagen), a
continuación proceder a dimensar la imagen hasta completar el tamaño del cuadro, tal
como se encuentra.
Al terminar presiona la Herramienta seleccionar (flecha)

Seleccionar la
herramienta

CARRERAS PROFESIONALES

CIBERTEC

ARQUITECTURA DE ENTORNOS WEB

GUARDAR EL ARCHIVO
Terminado el proceso de diseño del wireframe de alta fidelidad,
debemos guardar el archivo. Presiona el botón GUARDAR.

Selecciona la carpeta y asigne el nombre del archivo. Presiona el botón GUARDAR

CIBERTEC

CARRERAS PROFESIONALES

LABORATORIO 2.2
Trabajando con FIREWORKS
Diseña un wireframe de baja fidelidad, tal como se muestra

Se pide diseñar un wireframe de alta fidelidad utilizando el aplicativo FireWorks

CARRERAS PROFESIONALES

CIBERTEC

ARQUITECTURA DE ENTORNOS WEB

LABORATORIO 2.3
Trabajando con FIREWORKS
Diseña un wireframe de baja fidelidad, tal como se muestra

Se pide diseñar un wireframe de alta fidelidad utilizando el aplicativo FireWorks

CIBERTEC

CARRERAS PROFESIONALES

Resumen
 Los elementos gráficos son una parte fundamental del diseño en todas sus
modalidades, introduciendo en las composiciones información visual que
complementa en gran medida el mensaje que se desea transmitir, y que a veces es
tan importante en el diseño como los contenidos textuales del mismo.
 Los programas gráficos son de gran ayuda a la hora de trabajar con ilustraciones,
ya que en ellos se realizan fácilmente operaciones que en dibujo o pintura son muy
laboriosas (tareas repetitivas, copiar una imagen entera o parte de ella, dibujar
trazados geométricos prefectos, aplicar filtros o efectos, etc.).
 Los editores de imágenes son aplicaciones informáticas que permiten el
tratamiento y manipulación de imágenes, fotografías, vídeos, etc., de la forma más
simple (reducir, ampliar, retocar, recortar...) hasta la más compleja (hacer montajes
y arreglos, animar vídeos y figuras...) para mejorar su presentación
 Un editor de gráficos vectoriales es una aplicación informática que permite al
usuario crear y editar imágenes de graficos vectoriales (imagen digital formada por
objetos geométricos independientes, cada uno de ellos definido por distintos
atributos matemáticos de forma, de posición, de color, etc.), de forma interactiva
en la pantalla de la computadora y guardarlas en uno de los tantos formatos de
graficos como pdf.
 Y de editors de mapa de bits es una aplicación informática que permite al usuario
crear y editar imágenes de mapa de bits (imagen que esta formada por pixeles).
 Si desea saber más acerca de estos temas, puede consultar las siguientes
páginas.
 http://www.desarrolloweb.com/articulos/2063.php
 http://www.desarrollomultimedia.es/teoria-del-diseno/manual-photoshop.html
http://support.microsoft.com/kb/307205/es
http://msdn.microsoft.com/es-es/library/ms173152.aspx

CARRERAS PROFESIONALES

CIBERTEC

ARQUITECTURA DE ENTORNOS WEB

UNIDAD

2
HTML5 Y CSS3
LOGRO DE LA UNIDAD DE APRENDIZAJE
Al término de la unidad, el alumno diseña y construye páginas web para un sitio web
aplicando etiquetas HTML5, estilos CSS 3.

TEMARIO
2.1 Tema 3: Estructura HTML y aplicación de estilos CSS
2.1.1 Entorno del programa (Editor HTML)
2.1.2 Creación de un sitio web (estructura de carpetas)
2.1.3 Estructura de un documento HTML
2.1.3.1 Estructura del documento
2.1.3.2 Etiquetas básicas: encabezados (H1...H6), párrafos, listas, enlaces
internos y externos, imagen.

2.2 Tema 4: Estilos CSS
2.2.1 Estilos CSS
2.2.1.1 Tipos de Estilos: En línea e internos.
2.2.1.2 Estilos aplicados a etiquetas y de clase.

ACTIVIDADES PROPUESTAS



Los alumnos diseñan páginas web con etiquetas HTML5 y hojas de estilo
CSS3.
Los alumnos diseñan páginas web utilizando bloques de contenidos.

CIBERTEC

CARRERAS PROFESIONALES

CIBERTEC

ARQUITECTURA DE ENTORNOS WEB

1.4

ESTRUCTURA HTML Y APLICACIÓN DE ESTILOS CSS
Desde hace más de dos décadas HTML ejerce una función primordial en el
proceso de publicar información a través de la Internet.
Ante las necesidades de los usuarios y productores de contenido se ha lanzado
la versión HTML5. Esta nueva versión del lenguaje Web simplifica el trabajo y
agrupa las nuevas tecnologías de desarrollo de aplicaciones web: CSS3 y
Javascript.

Entre los principales cambios del HTML5, tenemos
 Cambios en el etiquetado, elementos más semánticos, formularios más
potentes.
 Cambios en el estilo, nuevos selectores, uso de tipografías, columnas,
rejillas, y mejoras visuales
 Mejor soorte multimedia, soporte de video y audio, canvas, webGL, SVG,
etc.
 Interactividad, geolocalizacion, almacenamiento local, sockets, acceso a
hardware, etc.
 Mejor Javascript, una API mejorada para acceder a los elementos de un
modo mas eficiente
 Nuevo estilo, mejor CSS tenemos nuevos selectores que permiten
seleccionar mejor los elementos HTML
Para construir una pagina web, no necesitas más que un editor de texto básico
como Bloc de Nota o Notepad (Windows), o Text Edit (Mac), pero no son
programas mejor preparados para trabajar con páginas web.
Existen multitud de programas gratuitos para editar páginas web. Aqui tiene
algunos:






CIBERTEC

WebFacil: editor gratuito y sencillo para editar paginas web, se encuentra
en castellano
NVU, es un editor grafico HTML, similar al Front Page, está basado en el
código de Mozilla Compose y que permite crear contenidos web como si
trabajásemos con un procesador de textos.
CoffeCup Free Editor, es un editor multiplataforma (Windows, Mac) y
gratuito con soporte para multitud de características: ayuda contextual a la
escritura de código, vista previa del resultado a medida que escribimos,
etc.
SublimeText, Un editor de texto avanzado para programadores,
multiplataforma. Aunque es bastante espartano lo cierto es que todo el que
invierte tiempo en aprender a dominarlo luego no lo quiere dejar, ya que
aumenta mucho la productividad a la hora de escribir código. No ofrece
muchas de las características de ayuda al programador web que sí ofrecen

CARRERAS PROFESIONALES



la mayoría de los otros entornos, por lo que es recomendable sobre todo si
vamos a trabajar mucho directamente con código, especialmente
JavaScript. Lo podemos descargar y utilizar gratuitamente, pero si lo
vamos a usar a menudo para trabajar sus creadores nos solicitan que les
paguemos una licencia (es lo justo).
Komposer, Archiconocido editor de HTML y CSS que es gratuito y
multiplataforma (Windows Mac y Linux). Ofrece vista previa de la página
mientras se escribe código, múltiples pestañas, edición específica de CSS,
etc.

Existen programas comerciales, muy potentes que disponen de un entorno
visual, y generan automáticamente el codigo de las paginas. Al poder ver en
todo momento como quedara la pagina en el navegador, se facilita la creacion
de las páginas, y el uso de menus permite ganar rapidez.
Dreamweaver es el mejor editor para crear páginas we, permite crear
avanzadas web que se pueden visualizar también en dispositivos móviles, sin
tener que dominar el código html, cambina las últimas tecnologías en
desarrollo web como Javascript, CSS, AJAX, XHTM, Adobe AIR, Smart Objects
de Photoshop, subversiones (SVN), frameworks Javascript y más. Es
compatible con Google Chrome, Internet Explorer, Opera, Safaril, Firefox y el
resto de navegadores, además soporta CMS como WordPress, Joomla! y
Drupal.
Para asegurar que pueda experimentar todos estos nuevos recursos, se
recomienda que instale en su sistema las últimas versiones de los siguientes
navegadores Web, cuando esté desarrollando aplicaciones HTML5 y CSS3:





Mozilla Firefox (versión 3.5+)
Apple Safari (versión 4.0+)
Opera (versión 10.0+)
Google Chrome (versión 3.0+)

1.6.1 Entorno del programa
Dreamweaver tiende a ser el software de diseño de sitios web elegido
por muchos diseñadores con experiencia moderada y también por
expertos. Es mucho más que un editor de HTML, Dreamweaver logra
integrar completamente el diseño visual con las herramientas de
codificación. También es compatible con una variedad de diferentes
lenguajes de scripting, incluyendo PHP, ASP y CSS.

CARRERAS PROFESIONALES

CIBERTEC

ARQUITECTURA DE ENTORNOS WEB

Dreamweaver proporciona a los usuarios un alto nivel de control a lo
largo de todo el proceso de diseño. El nivel de personalización que
ofrece el software es prácticamente inigualable. Dreamweaver te
permite crear funciones interactivas avanzadas, como menús
desplegables, imágenes de sustitución, diseños de la red de fluidos,
aplicaciones sencillas para dispositivos móviles y paneles plegables.
Gracias a la avanzada capacidad de WYSIWYG, la creación de un sitio
web sencillo con Dreamweaver es, en realidad, bastante fácil.
Dreamwaver desarrollará código HTML por ti; también otros programas
de software WYSIWYG lo harán por ti, por lo que no tienes que ser un
genio de la codificación para crear un sitio web. El Design View de
Dreamweaver te proporcionará el editor de WYSIWYG más avanzado
disponible en el mercado hoy.
Debido a que Dreamweaver ofrece edición híbrida, si tienes
conocimientos de codificación, puedes trabajar en un entorno de doble
panel y así aprovechar la codificación de WYSIWYG y la codificación
manual al mismo tiempo. Y si ya eres un experto en codificación,
puedes trabajar exclusivamente en código, sólo haciendo el cambio a
modo visual para ver el producto final. Para terminar, Dreamweaver es
compatible con docenas de plug-ins, por lo que el diseño web resulta
aún más fácil.

Para un programador que inicia aprender a diseñar páginas web con
Dreamweaver, debes tener en cuenta que es un programa muy
complejo, sobre todo si apenas estás empezando con el diseño de sitios
web. Te convendría tomar un curso acerca de Dreamweaver. También
puedes instruirte en otras herramientas de diseño de Adobe en este
curso acerca de Adobe Muse.

1.6.2 Creación de un sitio web
Un sitio Web ofrecerá tanto a clientes como a proveedores y
empleados, un canal de comunicación abierto las 24 hrs. del día con
información completa y actualizada sobre la organización, para que
realicen consultas, pedidos o sugerencias.

CIBERTEC

CARRERAS PROFESIONALES

Creando un sitio web en Dreamweaver
Para que Dreamweaver le ayude eficazmente en la confección de un
sitio web, se debe seguir una serie de pasos, como comunicarle a
Dreamweaver dónde se encuentran en su ordenador los componentes
del sitio, por ejemplo, hojas de estilo CSS, imágenes o documentos
HTML.

Carpeta del sitio
web

SubCarpetas

Estos archivos deben estar organizados en subcarpetas dentro de una
carpeta principal. Con una estructura ordenada, Dreamweaver podrá
controlar los cambios que se produzcan en los archivos y mantendrá
actualizados los enlaces de su sitio web. Sin esta organización de datos
a través de Dreamweaver, el cambio de una sola imagen podría
provocar una serie de errores en su sitio web.
Para crear un sitio web por Dreamweaver
1. Abrir el aplicativo Dreamweaver

Aplicativo

CARRERAS PROFESIONALES

CIBERTEC

ARQUITECTURA DE ENTORNOS WEB

2. Desde la opción Sitio del menú principal selecciona Nuevo sitio

Seleccionar
Nuevo sitio

3. Ingrese el nombre del sitio Web, tal como se muestra

Ingrese el nombre del
sitio

CIBERTEC

CARRERAS PROFESIONALES

4. Seleccionar la carpeta del sitio web Local, tal como se muestra,
luego presiona el botón GUARDAR

1. Hacer click para
buscar la carpeta
2. buscar y
seleccionar
la carpeta

3. Hacer click para
seleccionar carpeta

5. Al finalizar el sitio web se visualiza en la ventana “Archivos”, donde
aparece el nombre del Sitio Web y su lista de sub carpetas, tal como
se muestra.

Nombre del sitio
Web

CARRERAS PROFESIONALES

CIBERTEC

ARQUITECTURA DE ENTORNOS WEB

1.6.3 Estructura de un documento HTML
Un documento HTML no es más que un archivo de texto. La extensión
de su nombre sule ser .html o .htm.

Las páginas HTML se dividen en dos partes: la cabecera y el cuerpo. La
cabecera incluye información sobre la propia página, como por ejemplo
su título y su idioma. El cuerpo de la página incluye todos sus
contenidos, como párrafos de texto, imágenes, videos, audio, etc.

Figura 1
Referencia: http://librosweb.es/xhtml/capitulo_2/el_primer_documento_html.html

2.1.3.1 Elementos de una página html
Elemento doctype
La estructura de un documento en HTML5 inicia con la declaración del
tipo de documento que vamos a utilizar, esto lo hacemos definiendo la
etiqueta doctype de la siguiente forma:

Elemento html
A continuación comenzamos a construir la estructura del documento
HTML definiendo las etiquetas .

CIBERTEC

CARRERAS PROFESIONALES

Esta etiqueta delimita el documento HTML, indicando al navegador el
comienzo y fin de la página html. En esta etiqueta vamos utilizar el
atributo lang que nos servirá para especificar el idioma del documento,
en este caso español por tanto le asignamos el valor es.

Elemento head
La palabra head viene del inglés “cabeza” y su función es delimitar
cabecera del documento. Sus etiquetas son: y .
La cabecera es la sección apropiada para incluir información sobre el
documento, la mayoría de la cual no será mostrada a los lectores. Para
incluir esta información tenemos diversos elementos, de momento solo
comentaremos el más importante:

Untitled Document

La directiva sirve para especificar el titulo del documento y es
visualizada en la barra de titulo de la ventana correspondiente al
programa navegador.

<!doctype html>
<html>
<head>
<meta charset=”utf-8”>
<title>Página Principal

La directiva es utilizada en el documento, donde indicamos (a
través del atributo charset) al navegador que tipo de codificado es el
documento html, de preferencia usamos el UTF-8.
CARRERAS PROFESIONALES
CIBERTEC
ARQUITECTURA DE ENTORNOS WEB
83
Utilizando la etiqueta podemos describir el documento, a
través del atributo name la palabra clave description indica que es la
descripción del documento y en el atributo content el texto que
conforma la descripción del documento.

Pagina Principal

Continuando con las etiquetas definiremos las palabras clave
keywords que describen el contenido de nuestro documento esto para
ayudar a los buscadores a identificar sobre que trata nuestro documento
HTML.

Pagina Principal

La directiva es usado para incorporar estilos, códigos Javascript,
imágenes o iconos desde archivos externos. Uno de los usos más
comunes para es la incorporación de archivos con estilos CSS:

Pagina Principal

CIBERTEC
CARRERAS PROFESIONALES
84
Elemento body
La etiqueta delimita el cuerpo del documento HTML. Este
elemento contiene todo el contenido visible de un documento HTML
(párrafos de texto, imágenes, tablas). La etiqueta es
compatible con todos los navegadores.
2.3.1.2 Etiquetas básicas: encabezados (H1...H6), párrafos,
listas, enlaces internos y externos, imagen.
Etiquetas Headings
Nos definen el tamaño de un título o cabecera
nos dá el tipo de letra más grande
nos dá el tipo de letra más pequeño.
HTML agrega automáticamente un espacio antes y después de cada
título.
al ser usado como título de una página web, es de suma
importancia ya que es uno de los parámetros de Google y demás
buscadores tiene en cuenta a la hora de indexa un sitio web.
Etiqueta párrafo
La etiqueta párrafo se define con la etiqueta . Esta etiqueta permite
definir los párrafos que forma el texto de una página. El texto del párrafo
lo puedes alinear utilizando la etiqueta align utilizando los parámetros
“center”, “right”, “left” y “justify”
CARRERAS PROFESIONALES
CIBERTEC
ARQUITECTURA DE ENTORNOS WEB
85
Etiqueta salto de línea
La etiqueta
incluye una nueva línea y fuerza a que el texto se
muestre en la siguiente línea. Es el equivalente a presionar la tecla
ENTER (o Intro).
Etiqueta trazo de línea
La etiqueta
nos permite trazar una línea horizontal.
Etiqueta comentario
La etiqueta se utiliza para insertar un comentario dentro del
código que estamos escribiendo. El mismo es ignorado por el
navegador al momento de leerlo. Los comentarios nos sirven para
explicar mejor el código y son de gran ayuda en el momento que
necesitemos editarlo.
Etiquetas de marcado
Una vez estructurado el texto en párrafos y secciones, el siguiente paso
es el marcado de los elementos que componen el texto. Los textos
habituales están formados por elementos como palabras en negrita o
cursiva, anotaciones y correcciones, citas a otros documentos externos,
etc. HTML proporciona varias etiquetas para marcar cada uno de los
diferentes tipos de texto.
Etiqueta

CIBERTEC
Descripción
Marca un texto indicando que su importancia es
mayor que la del resto del texto
Indica que un determinado texto es de la mayor
importancia dentro de la página
CARRERAS PROFESIONALES
86

_{^{Se emplea para indicar que el texto que encierra
es una cita textual de otro texto externo
Define un texto subrayado
Define un texto subíndice
Define un texto superíndice
Define un texto pequeño
Define un texto grande
Define un texto tachado
Define el texto en itálica
Define el texto en negrita
Etiquetas de Enlace
Los enlaces o links (en inglés) nos permite conectar con otros
documentos:
 Una imagen
 Un video
 Un archivo de sonido
 Una pagina de un determinado sitio web
 Enviar un email
Los enlaces en HTML se crean mediante la etiqueta (viene del
inglés “anchor” traducido literalmente sería “ancla”).
El atributo más importante de la etiqueta es href, que se utiliza
para indicar que apunta a ese enlace. Las URL de los enlaces pueden
ser: absolutas, relativas, internas y externas.
Un Enlace externo apunta a páginas de otros sitios web; es decir, el
navegador abandona el sitio web para acceder a páginas que se
encuentran en otros sitios. Un Enlace interno apunta a páginas del
propio sitio web. Las URL absolutas incluyen todas las partes de la
URL (protocolo, servidor y ruta) por lo que no se necesita más
información para obtener el recurso enlazado. Las URL relativas se
construyen a partir de la URL absolutam donde prescindimo de la parte
del protocolo, del nombre del servidor e incluso de parte o toda la ruta
del recurso enlazado.
Para crear un enlace que apunte a la página principal de Cibertec
solamente habría que incluir lo siguiente en un documento HTML:
Cibertec
Otro atributo de la etiqueta es name, permite definir enlaces dentro
de una misma página web. Es útil cuando la página es muy larga, donde
se puede mostrar enlaces como: "Ir hasta la segunda sección", "Volver
al principio de la página", etc.

CARRERAS PROFESIONALES
CIBERTEC
ARQUITECTURA DE ENTORNOS WEB
87
La sintaxis que se utiliza con estos enlaces es la misma que con los
enlaces normales, salvo que se añade el símbolo # seguido del
nombre de la sección a la que se apunta.
Ir al Inicio
Los enlaces directos a secciones también funcionan con el atributo id
de cualquier elemento.
Título de la página
Volver al inicio de la página
El atributo type se utiliza para notificar al navegador sobre el tipo de
contenido que se enlaza. Se indica mediante una cadena de texto cuyos
posibles valores también están estandarizados. Los valores de los
Lorem más
ipsum
dolor sit
amet,
consectetuer adipiscing elit
contenidos
utilizados
son los
siguientes:
.
Mauris
id
ligula
eu
felis
adipiscing
ultrices. Duis gravi
 "text/html" (páginas HTML),
da leo ut lectus. Praesent condimentum mattis ligula.
 "image/png" (imágenes con formato PNG),

href="#inicio">Volver
al inicio
 "text/css" (hojas de estilo CSS),
 "application/rss+xml" (archivos RSS).
Imagen Principal
Para definir un enlace desde cualquier página web, se vuelve
directamente a la página de inicio o página principal del sitio web.
Lorem ipsum dolor sit amet, consectetuer adipiscing e
lit.
Mauris id ligula eu felis adipiscing ultrices. Duis
Inicio
gravida leo ut lectus. Praesent condimentum mattis ligul
a.
A través del valor mailto, se abre automáticamente el programa de
Volver
laestablece
página
correo
electrónico del ordenadoral
delinicio
usuariode
y se
la dirección
de envio al valor indicado después de mailto:
Lorem ipsum dolor sit amet, consectetuer adipisc
ing elit. Mauris id ligula eu felis adipiscing ultr
Solicita más información
tum mattis ligula.
Volver al inicio de la página
Aunque el uso de mailto: puede parecer una ventaja, su uso está
desaconsejado. Si incluimos nuestro email directamente en una página
web, en poco tiempo ese email estará lleno de correo electrónico basura
dolor sit
amet, automáticos
consectetuer
adipiscde
o Lorem
"spam", yaipsum
que existen
programas
encargados
rastrear
sistemáticamente
laseupáginas
de Internet
para
ing elit.
Mauris id todas
ligula
felis web
adipiscing
ultr
encontrar
direcciones
de
correo
electrónico
válidas.
ices. Duis gravida leo ut lectus. Praesent condimen
tum mattis ligula.
Volver al inicio de la página
CIBERTEC
CARRERAS PROFESIONALES
88
El atributo target se utiliza para definir donde queremos que se abra el
documento al presionar sobre el enlace, utiliza los siguientes valores:
 _blank: Indica una nueva ventana.
 _parent: Especifica el marco matriz que contiene el vínculo de
origen.
 _self: El significado es muy evidente. El nuevo documento se carga
en el mismo marco.
 _top: Esto indica una nueva ventana de documento.
Acontinuación presentamos un ejemplo utilizando enlaces.
Enlaces internos
y externos
Enlace interno al
id=”inicio”
Etiquetas de Imagen
Las imágenes de contenido son las que proporcionan información y
complementan la información textual. Las imágenes de adorno son las
que se utilizan para hacer bordes redondeados, para mostrar pequeños
iconos en las listas de elementos, para mostrar fondos de página, etc.
Las imágenes de contenido se incluyen directamente en el código
HTML mediante la etiqueta y las imágenes de adorno no se
deberían incluir en el código HTML, sino que deberían emplearse hojas
de estilos CSS para mostrarlas.
Los dos atributos requeridos son src y alt. El atributo src representa la
dirección URL de la imagen; la URL pueden ser absoluta o relativa. El
atributo alt permite describir el contenido de la imagen mediante un
texto breve. Las descripciones deben tener una longitud inferior a 1024
caracteres y son útiles para las personas y dispositivos discapacitados
que no pueden acceder a las imágenes.

CARRERAS PROFESIONALES
CIBERTEC
Lorem ipsum dolor sit amet, consectetuer adipisc
ing elit. Mauris id ligula eu felis adipiscing ultr
ARQUITECTURA DE ENTORNOS WEB
89
Los atributos width y height se utilizan para indicar la anchura y altura
con la que se muestran las imágenes. Como ya se ha comentado,
HTML estructura de forma correcta los contenidos de la página y CSS
define el aspecto gráfico con el que se muestran los contenidos.

Si el valor del atributo width o height se indica mediante un número
entero, el navegador supone que hace referencia a la unidad de medida
píxel;
tambiénipsum
es posible
indicar
la anchura
y altura en forma adipisc
de
Lorem
dolor
sit
amet, consectetuer
porcentaje.
En Mauris
este caso,id
el porcentaje
referencia
a la
ing elit.
ligula euhace
felis
adipiscing
ultr
altura/anchura
del
elemento
en
el
que
está
contenida
la
imagen.
ices. Duis gravida leo ut lectus. Praesent condimen
tum mattis ligula.
El atributo border permite asignar un border a la imagen, si su valor es
cero
imagen no tendrá borde. al inicio de la página
Volver
Acontinuación presentamos un ejemplo utilizando imágenes.
Propiedades de :
ancho, altura y borde
Etiquetas figure
Las etiquetas y permiten definir una mejor
semántica (significado o sentido) a nuestro contenido dentro de un
documento HTML5.
En el caso de estos elementos en específico nos permitirán anotar o
resaltar ilustraciones, diagramas o fotos que son referenciados
directamente desde el contenido principal. Estas etiquetas podríamos
utilizarlas en Diagramas, imágenes, fotos que acompañan el texto
principal de nuestro contenido.
CIBERTEC
CARRERAS PROFESIONALES
90
Etiquetas de Lista
Las listas nos permiten ordenar o enumerar datos o elementos para
facilitar su lectura. Tenemos tres tipos de listas:
 No ordenadas.
 Ordenadas.
 De definición.
Listas no ordenadas. Son las más sencillas y las que más se utilizan.
Una lista no ordenada es un conjunto de elementos relacionados entre
sí, pero no se indica un orden o secuencia determinados. La etiqueta
encierra todos los elementos de la lista y la etiqueta
representa cada uno de sus elementos.
Para definir un determinado símbolo, por ejemplo: cuadrados, se define
a través del atributo type. Los símbolos para las listas son: disc (puntos
negros), circle (círculos), square (cuadrado). Acontinuación
presentamos un ejemplo utilizando listas no ordenadas
Lista no ordenada, su
tipo es cuadrado (type)
Listas ordenadas. Son casi idénticas a las listas no ordenadas, con la
diferencia en que sus elementos se muestran siguiente un orden
determinado. La etiqueta encierra todos los elementos de la lista y
la etiqueta representa cada uno de sus elementos.
En las listas ordenadas podemos hacer que el primer punto comience
con un determinado número, esto se logra a través del atributo “value”.
Acontinuación presentamos un ejemplo utilizando listas ordenadas.
Lista ordenada, su
tipo es numérico (1)
La lista inicia con el
valor de 10 (value)
CARRERAS PROFESIONALES
CIBERTEC
ARQUITECTURA DE ENTORNOS WEB
91
Listas de definición. Son listas que se utilizan en la mayoría de páginas
HTML. Su funcionamiento es similar al de un diccionario, ya que cada
elemento de la lista está formado por términos y definiciones.
La etiqueta crea la lista de definición y las etiquetas y

definen respectivamente el término (titulo de la definición) y la etiqueta
representa la descripción de cada elemento de la lista.
Acontinuación presentamos un ejemplo utilizando listas de definición
Término o Titulo de lista
Descripción de lista
Etiqueta table
Las tablas son herramientas muy útiles para presentar datos en una
estructura de filas y columnas, para el diseño de páginas y ubicación de
textos y gráficos dentro de las mismas.
Una tabla en html viene marcada por las etiquetas .
Entre esas dos etiquetas definiremos las las celdas, las columnas y las
características de cada uno de estos parámetros.
En la etiqueta podemos definir el fondo; el parámetro
“bgcolor” corresponde al color de fondo y el parámetro “background"
coloca una imagen de fondo.
Otro aspecto que podemos definir de la tabla es el borde. Esto lo
haremos con el parámetro "border". Si no ponemos borde, escribimos
"0". Para darle color al borde, utilice la etiqueta "bordercolor" e
indicando el color que queramos para nuestro borde.
El parámetro "width" indicará el ancho de la tabla. Este parámetro
recibe valores en píxeles o con porcentaje.
CIBERTEC
CARRERAS PROFESIONALES
92
Dos parámetros más son cellspacing (que define el espacio entre las
celdas de la tabla) y cellpadding (que le marca a la tabla el espacio que
debe dejar alrededor del texto dentro de una celda).
Etiqueta fila:
El encabezado las filas se escriben a través de las etiquetas .
El contenido de las columnas que están dentro de la fila lo podemos
alínear tanto horizontal como verticalmente.
Para alinear verticalmente utilizaremos el atributo "valign": alinear arriba
de la celda ("top"), en el centro ("middle") o debajo ("bottom").
Para alinear horizontalmente utilizaremos el atributo "align": alinear el
contenido de las celdas en el centro ("center"), a la izquierda ("left"), a
la derecha ("right") o justificado ("justify").
Etiqueta celdas .
Al igual que en las filas, en las celdas podemos definir la alineación del
contenido que está dentro con los atributos "valign" y "align". Las
celdas poseen atributos que nos ayudan a agrupar celdas o columnas.
Para agrupar celdas utilizaríamos el atributo "colspan" y para agrupar
filas el atributo "rowspan".
Etiqueta de encabezado está considerado como el encabezado de la tabla,
por lo que se creará en negrita y centrado.
Etiqueta “caption”
Permite colocar un título o encabezado a la tabla. Puedes colocar el
encabezado arriba o abajo mediante la etiqueta "align": "align=top" para
arriba y "align=bottom" abajo.
Acontinuación presentamos un ejemplo utilizando tablas.
CARRERAS PROFESIONALES
CIBERTEC
ARQUITECTURA DE ENTORNOS WEB
93
LABORATORIO 3.1
Trabajando con Etiquetas
Se pide diseñar una página web, tal como se muestra, que permita describir la misión
de la Escuela de Tecnologia del Instituto Superior Cibertec.
1. Creando el Sitio Web
Defina una carpeta llamado sitioWeb, en ella crea las siguientes sub carpetas, tal
como se muestra.
CIBERTEC
CARRERAS PROFESIONALES
94
En el aplicativo DreamWeaver, configuramos un sitio web, tal como se muestra
1. Asignar el nombre
del sitio
2. Seleccionar la
carpeta del sitio
3. Presionar el botón
Configurado el sitio web, este se visualice en la ventana Archivos, tal como se muestra
en la figura.
Sitio Web
CARRERAS PROFESIONALES
CIBERTEC
ARQUITECTURA DE ENTORNOS WEB
95
Acontinuación creamos un nuevo documento. Desde la opción Archivo selecciona
Nuevo Documento. Selecciona el tipo de página: HTML, y presiona el botón CREAR.
Seleccionar la opción
Presiona el botón
CREAR
Añadiendo etiquetas header
Acontinuación agregamos etiquetas head y
, tal como se muestra. Presiona
la tecla F5 para visualizar la vista de la página
Agregar etiquetas
header en la página
CIBERTEC
CARRERAS PROFESIONALES
96
Agregando la imagen de la Escuela
Para incrustar una imagen en la página, defina la etiqueta indicando el origen
de la imagen: src, tal como se muestra, definida la etiqueta presiona la tecla F5 para
visualizarla.
Defina la etiqueta y
sus propiedades
Agregando texto a la página
Acontinuación defina la etiqueta (párrafo de alineamiento justificado), digite el
texto siguiente en la página, tal como se muestra.
Defina la etiqueta
y
escriba el texto
CARRERAS PROFESIONALES
CIBERTEC
ARQUITECTURA DE ENTORNOS WEB
97
Agregando listas
A continuación defina una lista no ordenada
y sus elementos , para mencionar
las carreras de la Escuela, tal como se muestra para
Defina una lista no ordenada y
sus elementos
Agregando texto a la página
Acontinuación defina la etiqueta (párrafo de alineamiento justificado), digite el
texto siguiente en la página, tal como se muestra
Defina la etiqueta
y
escriba el texto
CIBERTEC
CARRERAS PROFESIONALES
98
Agregando la imagen del pie de página
Para incrustar una imagen en la página, defina la etiqueta indicando el origen
de la imagen: src, tal como se muestra, definida la etiqueta presiona la tecla F5 para
visualizarla.
Defina la etiqueta
para el pie de página
Para visualizar la página presiona la tecla F12, ejecutando la página en un navegador
seleccionado.
CARRERAS PROFESIONALES
CIBERTEC
ARQUITECTURA DE ENTORNOS WEB
99
LABORATORIO 3.2
Trabajando con Etiquetas
Se pide diseñar una página web que permita describir la carrera de Administracion y
Sistemas de la Escuela de Tecnologia del Instituto Superior Cibertec, tal como se
muestra en la figura.
Redirecciona a las
redes sociales
Direcciona al titulo de
la pagina.
Agregar una página HTML y guardarla
Acontinuación creamos un nuevo documento. Desde la opción Archivo selecciona
Nuevo Documento. Selecciona el tipo de página: HTML, y presiona el botón CREAR.
Seleccionar la
opción
Presiona el botón
CREAR
CIBERTEC
CARRERAS PROFESIONALES
100
Para guardar el documento, presiona la combinación de las teclas CTRL + S:
selecciona la carpeta paginas, y asigne el nombre del archivo: AS.html. presiona la
tecla Guardar.
Seleccionar la
carpeta paginas
Nombre de la página:
AS.html
Agregando enlaces
Para mostrar los enlaces a las redes sociales a través de imágenes, primero defina la
referencia a la página y dentro de la etiqueta , agrega la etiqueta .
Al colocar los enlaces a las redes sociales, coloque una línea:

Definicion del enlace
incrustando una imagen
CARRERAS PROFESIONALES
CIBERTEC
ARQUITECTURA DE ENTORNOS WEB
101
Agregando header e imagen
A continuación, defina una etiqueta headering cuyo id=”inicio”, lo utilizaremos
para redireccionar la pagina de manera interna; luego agregar la etiqueta la cual
representa a la carrera de Administracion y Sistemas.
Definicion del
asignarle un id
Definicion del
asignar el atributo align
Agregando texto a la página
Acontinuación defina la etiqueta (párrafo de alineamiento justificado), digite el
texto siguiente en la página, tal como se muestra
Definicion de utilizar el
atributo align: justificado
CIBERTEC
CARRERAS PROFESIONALES
102
Agregando referencia de página e imagen del pie de página
Acontinuación agregamos una etiqueta para hacer una referencia de pagina hacia
la etiqueta
(ver al inicio del ejercicio). Para incrustar una imagen en la página,
defina la etiqueta indicando el origen de la imagen: src, tal como se muestra,
definida la etiqueta presiona la tecla F5 para visualizarla
Enlace de pagina: etiqueta

Definicion de para
colocar el pie de página
Para visualizar la página presiona la tecla F12, ejecutando la página en un navegador
seleccionado
CARRERAS PROFESIONALES
CIBERTEC
ARQUITECTURA DE ENTORNOS WEB
103
Resumen
 Ante las necesidades de los usuarios y productores de contenido se ha lanzado la
versión HTML5. Esta nueva versión del lenguaje Web simplifica el trabajo y agrupa
las nuevas tecnologías de desarrollo de aplicaciones web: CSS3 y Javascript.
 Dreamweaver es el mejor editor para crear páginas we, permite crear avanzadas
web que se pueden visualizar también en dispositivos móviles, sin tener que
dominar el código html, cambina las últimas tecnologías en desarrollo web como
Javascript, CSS, AJAX, XHTM, Adobe AIR, Smart Objects de Photoshop,
subversiones (SVN), frameworks Javascript y más.
 Un sitio Web ofrecerá tanto a clientes como a proveedores y empleados, un canal
de comunicación abierto las 24 hrs. del día con información completa y actualizada
sobre la organización, para que realicen consultas, pedidos o sugerencias.
 Un documento HTML no es más que un archivo de texto. La extensión de su
nombre sule ser .html o .htm. Las páginas HTML se dividen en dos partes: la
cabecera y el cuerpo. La cabecera incluye información sobre la propia página,
como por ejemplo su título y su idioma. El cuerpo de la página incluye todos sus
contenidos, como párrafos de texto, imágenes, videos, audio, etc.
 La estructura de un documento en HTML5 inicia con la declaración del tipo de
documento que vamos a utilizar, esto lo hacemos definiendo la etiqueta doctype.
Para construir la estructura del documento HTML definimos las etiquetas
. La palabra head viene del inglés “cabeza” y su función es delimitar
cabecera del documento. Sus etiquetas son: y . La etiqueta
delimita el cuerpo del documento HTML. Este elemento contiene todo el
contenido visible de un documento HTML (párrafos de texto, imágenes, tablas).
 HTML agrega automáticamente un espacio antes y después de cada título.
al ser usado como título de una página web, es de suma importancia ya que es
uno de los parámetros de Google y demás buscadores tiene en cuenta a la hora
de indexa un sitio web.
 La etiqueta párrafo se define con la etiqueta . Esta etiqueta permite definir los
párrafos que forma el texto de una página. El texto del párrafo lo puedes alinear
utilizando la etiqueta align utilizando los parámetros “center”, “right”, “left” y
“justify”.
 La etiqueta
incluye una nueva línea y fuerza a que el texto se muestre en la
siguiente línea. Es el equivalente a presionar la tecla ENTER (o Intro).
 Los enlaces en HTML se crean mediante la etiqueta (viene del inglés “anchor”
traducido literalmente sería “ancla”). El atributo más importante de la etiqueta
es href, que se utiliza para indicar que apunta a ese enlace. Las URL de los
enlaces pueden ser: absolutas, relativas, internas y externas.
 Las imágenes de contenido se incluyen directamente en el código HTML mediante
la etiqueta y las imágenes de adorno no se deberían incluir en el código
HTML, sino que deberían emplearse hojas de estilos CSS para mostrarlas. Los dos
atributos requeridos son src y alt. El atributo src representa la dirección URL de la
imagen; la URL pueden ser absoluta o relativa. El atributo alt permite describir el
contenido de la imagen mediante un texto breve.
 Las etiquetas
y permiten definir una mejor semántica
(significado o sentido) a nuestro contenido dentro de un documento HTML5.
 Las listas nos permiten ordenar o enumerar datos o elementos para facilitar su
lectura. Tenemos tres tipos de listas:
 No ordenadas.
CIBERTEC
CARRERAS PROFESIONALES
104
 Ordenadas.
 De definición.
 Las tablas son herramientas muy útiles para presentar datos en una estructura de
filas y columnas, para el diseño de páginas y ubicación de textos y gráficos dentro
de las mismas. Una tabla en html viene marcada por las etiquetas

Las celdas que van dentro de cada fila se definen con la etiqueta

La etiqueta
.
Entre esas dos etiquetas definiremos las las celdas, las columnas y las
características de cada uno de estos parámetros.
 Si desea saber más acerca de estos temas, puede consultar las siguientes
páginas.
 http://www.virtualnauta.com/html-formato-de-texto
 http://librosweb.es/xhtml/capitulo_3/marcado_avanzado_de_texto.html
 http://html.hazunaweb.com/103.php
 https://developer.mozilla.org/es/docs/HTML/HTML5/HTML5_lista_elementos
CARRERAS PROFESIONALES
CIBERTEC
ARQUITECTURA DE ENTORNOS WEB
105
UNIDAD
2
HTML5 Y CSS3
LOGRO DE LA UNIDAD DE APRENDIZAJE
Al término de la unidad, el alumno diseña y construye páginas web para un sitio web
aplicando etiquetas HTML5, estilos CSS 3.
TEMARIO
2.1 Tema 3: Estructura HTML y aplicación de estilos CSS
2.1.1 Entorno del programa (Editor HTML)
2.1.2 Creación de un sitio web (estructura de carpetas)
2.1.3 Estructura de un documento HTML
2.1.3.1 Estructura del documento
2.1.3.2 Etiquetas básicas: encabezados (H1...H6), párrafos, listas, enlaces internos y
externos, imagen.
2.2 Tema 4: Estilos CSS
2.2.1 Estilos CSS
2.2.1.1 Tipos de Estilos: En línea e internos.
2.2.1.2 Estilos aplicados a etiquetas y de clase.
ACTIVIDADES PROPUESTAS


Los alumnos diseñan páginas web con etiquetas HTML5 y hojas de estilo
CSS3.
Los alumnos diseñan páginas web utilizando bloques de contenidos.
CIBERTEC
CARRERAS PROFESIONALES
106
CARRERAS PROFESIONALES
CIBERTEC
ARQUITECTURA DE ENTORNOS WEB
1.7
107
ESTILOS CSS
CSS es un lenguaje para definir el estilo o la apariencia de las páginas web, las
cuales están escritas con código HTML o de los documentos XML. CSS se
creó para separar el contenido de la forma, a la vez que permite a los
diseñadores mantener un control mucho más preciso sobre la apariencia de las
páginas.
Al crear una página web, se utiliza en primer lugar el lenguaje HTML para
marcar los contenidos, es decir, para designar la función de cada elemento
dentro de la página: párrafo, titular, texto destacado, tabla, lista de elementos,
etc.
Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el
aspecto de cada elemento: color, tamaño y tipo de letra del texto, separación
horizontal y vertical entre elementos, posición de cada elemento dentro de la
página, etc.
Caracteristicas y ventajas de las CSS
Para definir las CSS éstas se hacen mediante una sintaxis especial, la cual se
aplica a:
 Un sitio web entero, de modo que se puede definir la forma de todo el web
de una sola vez.
 Un documento HTML o página, se puede definir la forma, en una pequeña
porción de código en la cabecera, a toda la página.
 Una porción del documento, aplicando estilos visibles en una porción de la
página.
 Una etiqueta en concreto, llegando incluso a poder definir varios estilos
diferentes para una sola etiqueta. Esto es muy importante ya que ofrece
potencia en nuestra programación.
La potencia de la tecnología salta a la vista. Si antes el HTML se nos quedaba
corto para maquetar las páginas y teníamos que utilizar trucos para conseguir
nuestros efectos, ahora tenemos muchas más herramientas que nos permiten
definir esta forma:
• Podemos definir la distancia entre líneas del documento.
• Se puede aplicar identado a las primeras líneas del párrafo.
• Podemos colocar elementos en la página con mayor precisión, y sin lugar a
errores.
CIBERTEC
CARRERAS PROFESIONALES
108
• Y mucho más, como definir la visibilidad de los elementos, margenes,
subrayados, tachados.
Además, utilizando CSS podemos definir las dimensiones de los elementos de
la página utilizando muchas más unidades como:
•
•
•
•
Pixels (px) y porcentaje (%), como antes.
Pulgadas (in)
Puntos (pt)
Centímetros (cm)
Soporte de CSS en los Navegadores
El trabajo del diseñador web siempre está limitado por las posibilidades de los
navegadores que utilizan los usuarios para acceder a sus páginas. Por este
motivo es imprescindible conocer el soporte de CSS en cada uno de los
navegadores más utilizados del mercado.
Internamente los navegadores están divididos en varios componentes. La parte
del navegador que se encarga de interpretar el código HTML y CSS para
mostrar las páginas se denomina motor. Desde el punto de vista del diseñador
CSS, la versión de un motor es mucho más importante que la versión del
propio navegador. En la siguiente tabla se muestra el soporte de CSS 2.1 y
CSS 3 de los cinco navegadores más utilizados por los navegadores.
Navegador
Google Chrome
Motor
WebKit
CSS 2.1
Completo
Internet Explorer
Trident
Completo
FireFox
Gecko
Completo
Safari
WebKit
Completo
Opera
Presto
Completo
CSS 3
Todos los selectores, pseudoclases y muchas propiedades
Todos los selectores, pseudoclases y muchas propiedades
a partir de la versión 10.0 del
navegador
Todos los selectores, pseudoclases y muchas propiedades
Todos los selectores, pseudoclases y muchas propiedades
Todos los selectores, pseudoclases y muchas propiedades
Referencia: http://librosweb.es/css/capitulo_1/soporte_de_css_en_los_navegadores.html
Funcionamiento de las CSS
CSS funciona en base a declaraciones sobre el estilo de uno o más elementos.
Las hojas de estilo están compuestas por una o más de esas reglas aplicadas
a un documento HTML. La regla tiene dos partes: un selector y la declaración.
A su vez la declaración está compuesta por un selector, una propiedad y el
valor que se le asigne.
h1{
color: black;
font-style: italic
}
CARRERAS PROFESIONALES
CIBERTEC
ARQUITECTURA DE ENTORNOS WEB
109
Donde:
h1
es el selector
{color: black;} es la declaración, color es la propiedad y black es el valor
Figura 1
Referencia: http://tejedoresdelweb.com/w/CSS
El selector funciona como enlace entre el documento y el estilo, especificando
los elementos que se van a ver afectados por esa declaración. La declaración
es la parte de la regla que establece cuál será el efecto.
En el ejemplo anterior, el selector h1 indica que todos los elementos de tipo h1
se verán afectados por la declaración donde se establece que la propiedad
color va a tener el valor red (rojo) para todos los elementos h1 del documento o
documentos que estén vinculados a esa hoja de estilos.
1.9.1 Tipos de Estilos
Estilo en línea
Es el estilo menos utilizado por que incluye la CSS en los mismos
elementos de documento HTML.
Definir estilo al selector

Este estilo no es muy utilizado por cuanto la regla solamente se aplica a
un selector específico dentro del mismo documento.
Estilo interno
Si deseamos crear definiciones de estilo solamente para una página del
sitio web debemos crear un estilo interno.
CIBERTEC
CARRERAS PROFESIONALES
110
Los estilos se definen en una zona específica del propio documento
HTML. Se emplea la etiqueta}}

Manual 2018 01 Arquitectura De Entornos Web (1802)

nos dá el tipo de letra más grande

nos dá el tipo de letra más pequeño. HTML agrega automáticamente un espacio antes y después de cada título.

Título de la página

y

cuyo id=”inicio”, lo utilizaremos para redireccionar la pagina de manera interna; luego agregar la etiqueta la cual representa a la carrera de Administracion y Sistemas. Definicion del

asignarle un id Definicion del asignar el atributo align Agregando texto a la página Acontinuación defina la etiqueta (párrafo de alineamiento justificado), digite el texto siguiente en la página, tal como se muestra Definicion de