Manual 2023 01 Arquitectura de Entornos Web (SP1802)
Manual 2023 01 Arquitectura de Entornos Web (SP1802)
Manual 2023 01 Arquitectura de Entornos Web (SP1802)
Entornos Web
ARQUITECTURA DE ENTORNOS WEB 2
Índice
Presentación 6
Red de contenidos 7
Bibliografía 238
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 y formularios.
El manual para este curso ha sido diseñado bajo la modalidad de unidades de aprendizaje, las
que se desarrolla durante semanas determinadas. En cada una de ellas, se 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ás las actividades y trabajos
prácticos que se desarrollará en cada sesión, los cuales permitirán reforzar lo aprendido en la
clase.
Red de contenidos
Arquitectura de
Unidad 3 Estructuras y bloques
Entornos Web
Multimedia,
Unidad 4 transiciones y
animaciones
Programación básica
Unidad 5
en lenguaje JavaScript
UNIDAD
1
PROYECTO WEB
LOGRO DE LA UNIDAD DE APRENDIZAJE
Al término de la unidad, el alumno define qué es un proyecto web y elabora wireframes
de alta y baja fidelidad.
TEMARIO
ACTIVIDADES PROPUESTAS
Internet y Web son dos términos que a menudo se utilizan indistintamente de forma que se
puede caer en la confusión y mezclar 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.
1.1.1 Internet
Internet se 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), permite a millones de
usuarios estar conectados para compartir, intercambiar, publicar y extraer información.
Figura 1: Internet
Fuente. – Tomado de http://definicion.de/internet/
Hay que tener en cuenta que todos los recursos que se pueden encontrar en Internet existen
porque muchas personas, de 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 envíe y reciba
mensajes.
Figura 3: TCP / IP
Fuente. – Tomado de http://www.taringa.net/posts/info/12588433/Protocolos-de-Internet.html
HTTP, protocolo de transferencia de Hipertextos, es el protocolo más 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 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, permitirá descargar los
mensajes a la computadora.
TELNET, es un protocolo que permite la conexión remota a otro ordenador, el cual permite
manejarla como si se estuviera 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 páginas web, con la dirección
http://; también existen otras direcciones como ftp:// para ubicar un recurso FTP con la finalidad
de transferir archivos.
Una página web es un documento o información electrónica capaz de contener texto, sonido,
vídeo, programas, enlaces, imágenes, hipervínculos y muchas otras cosas, adaptada para la
llamada World Wide Web (WWW) y que puede ser accedida mediante un navegador web.
En Internet existen más de mil millones de páginas web de diversas índoles y contenido variado,
provenientes del mundo entero y en los principales idiomas hablados. Esto representa el
principal archivo de información de la humanidad que existe actualmente, almacenado a lo largo
de miles de servidores a lo largo del planeta, a los que son posible acceder velozmente gracias a
un sistema de protocolos de comunicación (HTTP).
Las páginas Web cumplen básicamente con la tarea de brindar información de cualquier índole
y en cualquier estilo o grado de formalidad. (Enciclopedia Concepto, 2013-2022)
Algunas, al mismo tiempo, permiten distintos grados de interacción entre usuarios o con alguna
institución, como son las páginas de foros, servicios de citas o redes sociales, las páginas de
compra y venta de bienes, las páginas de consulta o de contacto con empresas, instituciones
gubernamentales o con ONGs, e incluso las páginas de soporte técnico especializado.
En principio, las funciones de una página Web son tan amplias como la demanda de los usuarios
y la oferta de sus creadores.
Páginas Web dinámicas. A diferencia de las anteriores, las páginas Web dinámicas se generan
en el momento mismo del acceso del usuario, empleando para ello algún lenguaje interpretado
(como el PHP), lo cual le permite recibir solicitudes del usuario, procesarlas en bases de datos y
ofrecer una respuesta acorde a sus requerimientos.
1.1.3 Hipertexto
El hipertexto es una estructura no secuencial que permite crear, agregar, enlazar y compartir
información de diversas fuentes por medio de enlaces asociativos y redes sociales.
Aunque el término hipertexto fue acuñado por Ted Nelson en 1965 (Connolly 2000) para hacer
referencia a una estructura del texto no secuencial que permitiera al lector elegir aquello que
considerara más adecuado en una pantalla interactiva, lo que realmente se asocia en la
actualidad con hipertexto es el modelo creado por Tim Berners-Lee con el objetivo de compartir
documentos en internet, desarrollado en colaboración con Robert Cailliau en 1989, al que se le
dio el nombre de HTML Tags (HyperText Markup Language), lo cual dio origen a lo que hoy
conocemos como la Web (Coremans, 2015).
Este lenguaje de etiquetas, HTML, fue una simplificación de un metalenguaje, o marco general
para la descripción de lenguajes de marcado, denominado SGML (Standard Generalized Markup
Language), el cual, por su extrema complejidad, no era utilizable para el entorno Web (Lamarca
Lapuente 2013c).
Desde que vio la luz el primer documento en HTML en 1991 hasta la actualidad, se han llevado
a cabo sucesivas versiones de este estándar definido por el W3C como la “lengua franca” para
la publicación de hipertexto en el World Wide Web. En el año 1995 se hizo cargo de su desarrollo
el World Wide Web Consortium en la versión 3.0 de este lenguaje de marcas. En la actualidad,
a partir del año 2014, se encuentra disponible la versión 5.0 en la categoría de estándar, el cual
es ya soportado por la mayoría de los navegadores web que existen en el mercado.
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: comúnmente se utiliza la palabra servidor para
referirse a una computadora con un software servidor instalado, el cual se encarga de “alojar”
los sitios web que se visita en la Internet y son estas computadoras las que proporcionan al
usuario la interacción con el sitio en cuestión.
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: se trata de una computadora dedicada exclusivamente al sitio del cliente,
para aplicaciones de alta demanda. Entre las características se tiene:
Son de pago superior a fin de tener un servidor para sí.
Mayor capacidad en el disco duro, alta tasa de transferencia.
Servidor Compartido: se trata de un ordenador que aloja más de un sitio web. Entre las
características se tiene:
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 que divide todos sus recursos entre los
sitios web que aloja. Entre las características se tiene:
No son gratuitos y su precio no es muy caro.
Su manejo es sencillo, está casi todo hecho.
Si el procesador se sobrecarga, fallarán los sitios web.
Se comparte el HDD y la RAM pero no el procesador
Apache: es el más común y utilizado en todo el mundo. Además, 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.
Lighttpd: 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.
(Internetlab.es, 2010)
1.1.5 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 6: Hosting
Fuente. – Tomado de http://chiapashosting.com/hosting-o-alojamiento-web.html
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 las necesidades
Tener un servicio de hosting disminuye costos, 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.
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 mínima de tu servicio; y también hay otros servicios que incluyen seguramente
aplicaciones y servicios que no se necesita.
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 el servicio de alojamiento.
Para contratar un servicio hay que tener en cuenta una gran cantidad de factores:
La cantidad de espacio en GB que ofrece el servicio para alojar las páginas web
La capacidad de gestionar los archivos vía FTP
Soporte para scripts perl o, PHP, ASP, etc.
Tipo de dirección web que ofrecen
Tasa de transferencia de archivos mensuales
Dominio
Un dominio de Internet es un nombre de un sitio web. Cada dominio tiene que ser único, por
ejemplo “elcomercio.pe” es el nombre del dominio de la página web del diario El Comercio.
Figura 8: Dominio
Fuente. – Tomado de http://blog.ozongo.com/cuantas-extensiones-necesito-para-el-dominio-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 la necesidad de recordar las direcciones numéricas de
las páginas y servidores web. De forma que cuando se escribe en internet el dominio
elcomercio.pe, el servidor de DNS (Servidor de Nombres de Dominio) proveedor de web hosting
del dominio elcomercio.pe, proporciona la dirección IP 50.17.245.112 y el navegador se dirige
directamente a esa dirección numérica.
Elementos de un 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. Esta dirección 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, así como el tipo de organización o fin que tiene. Es aquí donde se distingue dos tipos de
extensiones:
Figura 9: Dominio
Fuente. – Tomado de 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 países y está compuesto por dos letras que corresponde a la abreviación del nombre del
país:
.es, España
.pe, Perú
.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 Descripción
.com Inicialmente empleado para organizaciones de tipo “comercial”, sin
embargo, con la aparición de otros dominios con similar propósito, sirve
para cualquier tipo de página web y temática, ahora es uno de los
dominios más extendidos en el mundo.
.biz Prevista para ser usado por negocios
.edu Servicios de educación
.gov y .gob Gobierno y entidades públicas
.info Información
.mil Departamento de Defensa de los Estados Unidos
.name Nombres de personas
.net Infraestructura de red e Internet
.org Organizaciones
.tel Servicios de comunicación por Internet
.travel Páginas de la industria de viajes y turismo
.aero Sector aeronáutico
.edu Universidades, educación
.jobs Empleo
1.1.6 HTML
El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las páginas web. Es
un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma
estructurada, y que está compuesto por etiquetas, que marcan el inicio y el fin de cada elemento
del documento. (Ocampo, s.f.)
Los documentos HTML deben tener la extensión html o htm, para que puedan ser visualizados
en los navegadores (programas que permiten visualizar las páginas web).
Actualmente se utiliza el HTML 5, está formado por muchos módulos distintos, cuyo grado de
especificación está en niveles dispares. Por tanto, muchas de las características de HTML 5 están
ya listas para ser implementadas, en un punto de desarrollo que se encuentra cercano al que
finalmente será presentado.
Las versiones recientes de casi todos los navegadores, incluido el polémico Internet Explorer 8,
implementan algunas de las características de HTML 5. Claro que, para que una web se vea bien
en todos los sistemas, hay que utilizar sólo aquellas partes que funcionan en todos los
navegadores, por lo que, hoy, pocas son las utilidades realmente disponibles del lenguaje, si
queremos hacer un sitio web compatible.
Novedades de HTML 5
Estructura del cuerpo: la mayoría de las webs tienen un formato común, formado por
elementos como cabecera, pie, navegadores, etc. HTML 5 permite agrupar todas estas
partes de una web en nuevas etiquetas que representarán cada una de las partes típicas
de una página.
Etiquetas para contenido específico: hasta ahora se utilizaba una única etiqueta para
incorporar diversos tipos de contenido enriquecido, como animaciones Flash o vídeo.
Ahora se utilizarán etiquetas específicas para cada tipo de contenido en particular, como
audio, vídeo, etc.
Canvas: es un nuevo componente que permitirá dibujar, por medio de las funciones de
un API, en la página todo tipo de formas, que podrán estar animadas y responder a
interacción del usuario. Es algo así como las posibilidades que nos ofrece Flash, pero
dentro de la especificación del HTML y sin la necesidad de tener instalado ningún plugin.
Bases de datos locales: el navegador permitirá el uso de una base de datos local, con la
que se podrá trabajar en una página web por medio del cliente y a través de un API
permitirá la creación de aplicaciones web que funcionen sin necesidad de estar
conectadas a Internet.
Web Workers: son procesos que requieren bastante tiempo de procesamiento por
parte del navegador, pero que se podrán realizar en un segundo plano, para que el
usuario no tenga que esperar que se terminen para empezar a usar la página. Para ello,
se dispondrá también de un API para el trabajo con los Web Workers.
Aplicaciones web Offline: existirá otro API para el trabajo con aplicaciones web, que se
podrán desarrollar de modo que funcionen también en local y sin estar conectados a
Internet.
Geolocalización: las páginas web se podrán localizar geográficamente por medio de un
API que permita la Geolocalización.
Nuevas APIs para interfaz de usuario: temas tan utilizados como el “drag & drop”
(arrastrar y soltar) en las interfaces de usuario de los programas convencionales, serán
incorporadas al HTML 5 por medio de un API.
Fin de las etiquetas de presentación: todas las etiquetas que tienen que ver con la
presentación del documento, es decir, que modifican estilos de la página, serán
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.
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 hipervínculos.
1- Chrome
Este navegador de internet es uno de los más populares y utilizados en la actualidad. Ofrece una
serie de ventajas que lo convierten en uno de los mejores, destacando que cuenta con una
Otro de los beneficios que brinda es su compatibilidad con todos los sistemas operativos y
adaptación con los servicios de Google, pudiendo ser personalizado según lo requiera el usuario.
Ofrece extensiones nativas que facilitan diversos procesos.
Por otro lado, entre sus desventajas se tiene su gran uso de memoria RAM y frecuentemente
realiza actualizaciones, lo cual puede ser un poco molesto para los usuarios de esta plataforma
web.
2- Mozilla Firefox
Otro de los navegadores que no se queda atrás en cuanto a funcionalidad es Firefox, ofreciendo
una gran variedad de extensiones de gran utilidad, así como una interfaz personalizable. Pero
esto no es todo, porque además dispone de software libre y es compatible con Smartphone.
Otra de sus ventajas es que consume menos memoria que Google Chrome, así como también
trae incluidos servicios gratuitos, como lo son capturador de pantalla, envió de archivos (Firefox
Send), Pocket, entre otros.
Entre sus desventajas se encuentran, menos atención de los diseñadores web, por ende, algunas
páginas pueden generar errores o cualquier detalle molesto.
Los usuarios solo tienen derecho a tener una cuenta asociada.
Sus actualizaciones son lentas.
Dispone de herramientas innecesarias
3- Microsoft Edge
Este navegador ha llegado a apoderarse y reemplazar a Internet Explorer, logrando ofrecer
mejores características que este último. Destacando como principal ventaja que ha sido
diseñado por la compañía de Microsoft, de este modo está integrado a Windows 10; de igual
manera cuenta con un excelente rendimiento de JavaScript.
Entre sus desventajas: sus funciones son similares a las de Chromium, cuenta con compatibilidad
para Windows y MacOS, es decir que no tiene relevancia para los demás sistemas operativos de
la actualidad y, por último, la mayor parte de su código es propietario.
4- Opera
Este navegador de internet dispone de un modo turbo, que lo convierte en el mejor para
conexiones lentas. Dispone de gran compatibilidad con Smartphone e incluye algunas funciones
como VPN, bloqueador de publicidad, entre otras. No obstante, se conoce que su código es
propietario, sus actualizaciones son muy pocas, entre otras.
5- Safari
Por último, safari sorprende con una interfaz limpia, clara y sencilla, excelente compatibilidad
con Mac OS X y iOS, sin embargo, sus extensiones y herramientas son muy básicas en
comparación de los demás, es compatible solo con Apple y su código es privado.
Debido a la transformación digital, las marcas necesitan estar cada vez más presentes full-time
en la vida de los consumidores. Actualmente, quien trabaja con desarrollo de sitios web o
aplicaciones móviles, han notado una demanda creciente. Y según se percibe en el mercado, la
inversión digital no es más un extra, sino por el contrario, es primordial para el posicionamiento.
El enfoque de proyecto web busca superar la visión de “diseñar una página web”. Se trata de
concebir el desarrollo de una solución web, como un proyecto que debe ser formulado,
gestionado y evaluado.
Desarrollar un sitio web efectivo requiere una planeación bien elaborada. Puede ahorrar tiempo
y dinero durante el proceso del proyecto si se 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.
Estrategia: Antes de tomar cualquier acción, se necesita decidir cuál 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
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.
Los contenidos bien planificados y bien estructurados ayudarán a crear tanto el sistema de
interacción como el diseño visual.
Se incorpora los diferentes estilos de diseño según lo especificado en la guía de estilos mediante
CSS3 y es importante asegurarse de que cumple con los estándares de W3C. Se usa JQuery y
JavaScript para eventos interactivos, en lugar de Flash o Silverlight. También se aplica las
mejores prácticas para facilitar la lectura online y la impresión de contenidos añadiendo el
código específico en CSS.
Realizar pruebas de usabilidad a la 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.
Publicación en la Web: este será el último paso, subir el proyecto a la Internet, para ello se debe
tener en cuenta lo siguiente:
Resumen
1. Internet se define como una red mundial de computadoras, distribuidos por 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), permite a
millones de usuarios estar conectados para compartir, intercambiar, publicar y extraer
información.
4. 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.
5. Un dominio de Internet es un nombre de un sitio web. Cada dominio tiene que ser único en
Internet, por ejemplo “elcomercio.pe” es el nombre del dominio de la página web del diario
El Comercio.
6. 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.
7. 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.
Recursos
Pueden revisar los siguientes enlaces para ampliar los conceptos vistos en esta unidad:
o http://www.hipertexto.info/documentos/internet_tegn.htm#IP
o http://docentesistemas.webnode.es/contenidos-programaticos/grado-11/pagina-web-
generalidades/que-es-un-hosting-/
o http://es.slideshare.net/josegregoriob/servidor-web-8451426
o http://www.duplika.com/que-es-el-hosting
o http://culturacion.com/como-escoger-un-servidor-para-alojar-mi-sitio-web/
o http://www.tiposde.org/internet/113-tipos-de-navegadores/
o http://spn314.blogspot.com/2013/11/cuantos-navegadores-de-internet-hay.html
o http://www.condo-consulting.com/test-de-usabilidad-que-son-y-para-que-me-sirven.b.aspx
o http://disenowebakus.net/pasos-clave-en-la-creacion-de-un-sitio-web.php
o http://novatosweb.blogspot.com/2010/12/etapas-que-debe-formar-tu-proyecto-web.html
o http://es.slideshare.net/cilp2884/etapas-de-un-proyecto-web
o http://es.slideshare.net/christian.bonner/arquitectura-de-la-informacin-de-sitios-web
Un Sitemap o Mapa del Sitio es una representación gráfica o textual de un sitio web. Se utiliza
para planificar el diseño de un sitio web, donde se listan todas o las más importantes páginas
web de este. Esta estructura de enlaces de páginas web 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).
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.
Importancia:
Un mapa de sitio es importante fundamentalmente porque ayuda a los buscadores a que
encuentren tu web y a que indexen sus páginas más rápidamente.
Es como si a un buscador se le diera un índice del libro (libro es web) y le ahorras 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.
Ventajas
Resumen de la información y accesibilidad en un enlace directo
Facilidad de navegación
El usuario permanece más en la Web
La navegación resulta una experiencia agradable
Una estructura clara y sencilla
Esta técnica se basa en la observación de cómo los usuarios agrupan y asocian entre sí un
número 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.
Nombre Ubicación
Lucidchart https://www.lucidchart.com
Creately https://app.creately.com/
Figura 22: Tabla de programas online para crear mapas de sitio
Fuente. – Elaboración Propia
1.2.3. Wireframe
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 los proyectos y para mostrarle al cliente una mejor
visualización del proyecto, nace la idea de los mockups, maquetas o wireframes.
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 mostrar al cliente un boceto rápido para
facilitar la comunicación entre cliente y desarrollador.
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.
Para ciertos proyectos se debe tener en cuenta 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.
Wireframe de baja fidelidad: son aquellos prototipos que representan cómo estarán
organizados los elementos en las páginas del sistema sin entrar en detalle.
un sitio web, pues permite trabajar ágilmente con varias ideas y esquematizar las
páginas.
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.
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 cómo responde
con el resto de la aplicación. (Arias, 2020)
Nombre Ubicación
Lucidchart https://www.lucidchart.com
Mockingbird https://gomockingbird.com/
MockFlow http://www.mockflow.com/
Moqups https://moqups.com
Wireframe.cc https://wireframe.cc
Figura 26: Tabla de programas online para wireframe
Fuente. – Elaboración Propia
LABORATORIO 1
Acceso a la plataforma
Para registrar una cuenta libre, presiona el botón Sign Up Free, para registrarte.
En la página register, ingresa con una cuenta de Google o el email de una compañía, en este caso
ingresa con una cuenta de Gmail.
En la ventana ingresa la cuenta de Gmail, en este caso selecciona una cuenta predefinida.
Una vez que te has registrado, la plataforma te direcciona a la pantalla para agregar documentos
(por ser un ingreso libre solamente puedes trabajar con tres documentos).
A continuación, la plataforma carga el aplicativo para crear mapa de sitios, tal como se muestra.
Cuadro de Herramientas
Para insertar la página de inicio, selecciona y arrastra Page Container al documento. Para asignar
un texto, selecciona la opción Edit Text, tal como se muestra.
Cuadro de
Opciones
Page Container
A continuación, escribe un texto al objeto (Home). Para cambiar el color de letra, primero
selecciona el texto, clic en la Paleta de colores y luego elige el color del texto.
Paleta de
Colores
Agrega tres page debajo del Page Container, los cuales representan las páginas principales del
sitio.
Page
Para darle estilo al Page, selecciona desde la opción Style, el estilo para dicho elemento.
Estilo Style.
Para realizar la conexión entre las páginas, selecciona la opción Draw Connector y luego arrastra
uno de los border hacia la página HOME, tal como se muestra, las cuales se encontrarán
conectadas.
Draw connector
Para cambiar el diseño del conector a tipo angular: selecciona el conector; luego, haz clic en la
opción Angled, el conector se visualiza en forma lineal y angular en sus bordes.
Selecciona el tipo
de conector:
Angled
Exportar el
documento
LABORATORIO 2
Proyecto a crear
Cargando la
página
Ingresa el nombre, al
presionar ENTER, se
crea una nueva página.
Selecciona 12 columnas
(960)
Para la búsqueda de un control, escribe en la opción Search, 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.
Buscando el elemento:
ban
Para colocar el elemento a la grilla del wireframe, arrástralo a la página y luego dimensiónalo
dentro de la cuadrícula.
Buscando elementos de
navegación: Button Bar
Para cambiar el color de fondo o BackGround, desde la lista de Propiedades, selecciona la opción
BackGround y haz clic al color que elijas como fondo. A continuación, extiende el control a lo
largo de la página. El menú diseñado se visualiza de esta forma:
Resumen
1. 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 mostrar al cliente un boceto rápido
para facilitar la comunicación entre cliente y desarrollador.
o Comunicación entre todos los componentes del equipo de desarrollo y los usuarios.
o Participación, para integrar activamente a los usuarios en el desarrollo.
o Permiten a los diseñadores explorar diversos conceptos del diseño antes de establecer
los definitivos.
o Permiten evaluar el sistema desde las primeras fases del desarrollo (facilitan la
exploración de ideas sobre nuevos conceptos tecnológicos).
o Son el primer paso para que ideas abstractas sean concretas, visibles y testeables.
4. Son herramientas de propósito general, pues sirven para comprobar la fiabilidad técnica de
una idea, clarificar requisitos que quedaron “indeterminados” o ver cómo responde con el
resto de la aplicación.
5. 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.
6. Un sketch es un boceto rápido e informal que se realiza en papel para transmitir una idea o
concepto con rapidez y claridad.
7. Un 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.
8. Wireframe de alta fidelidad, son prototipos que simulan o tienen implementadas partes del
sistema final a desarrollar. Pueden ser de muy distintos tipos, completo o parcial, horizontal
o vertical, etc.
Recursos
Revisa los siguientes enlaces para ampliar los conceptos vistos en esta unidad:
o http://tednologia.com/que-es-un-mockup-o-wireframe/
o http://olgacarreras.blogspot.com.es/2007/02/wireframes.html
o https://webdesdecero.com/wireframes-que-son-y-como-crearlos/
o https://rockcontent.com/es/blog/wireframe/
o https://neoattack.com/neowiki/wireframe/
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 aplicando etiquetas
HTML5, estilos CSS 3.
TEMARIO
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.
5.2.3 Definición
HTML es un lenguaje de marcado que permite indicar la estructura del documento mediante
etiquetas.
Este lenguaje ofrece una gran adaptabilidad, una estructuración lógica y es fácil de interpretar
tanto por humanos como por máquinas, ya que siguen un esquema de árbol donde existe un
elemento raíz y donde el resto de las etiquetas se insertan de manera lógica y estructurada.
Además, se trata de un fichero de texto, y solo se necesita un editor como el bloc de notas para
generar un documento HTML. (Ruiz, 2014)
2.1.2 Características
Para diseñar una página Web, los diseñadores de la WWW decidieron que se debían cumplir las
siguientes características:
Puede ser creado y editado con cualquier editor básico de textos.
Es multiplataforma, o sea, puede ser visualizado por cualquier navegador de cualquier
sistema operativo.
No diferencia entre mayúsculas y minúsculas.
Utiliza etiquetas o marcas, que consisten en breves instrucciones de comienzo y final,
mediante las cuales se determina la forma en la que debe aparecer en su navegador el
texto, así como también las imágenes y demás elementos en la pantalla del ordenador.
Cada elemento de un documento HTML consta de una etiqueta de comienzo, un bloque
de texto y una etiqueta de fin.
Lenguaje estático.
Es utilizado para la creación de páginas web.
Los documentos HTML son documentos de hipertexto que aparecen enlazando a otros
documentos.
Es un estándar reconocido por todo el mundo y cuyas normas define un organismo sin
ánimo de lucro llamado World Wide Web Consortium, más conocido como W3C.
(Castillo, 2017)
Un documento HTML no es más que un archivo de texto. La extensión de su nombre suele 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; por ejemplo, título e idioma. El cuerpo de la página incluye
todos sus contenidos, como párrafos de texto, imágenes, videos, audio, etc.
<DOCTYPE>
<html>
<head>
<body>
<DOCTYPE>
La etiqueta doctype declara el tipo de documento, por lo que está señalando que este es un
documento HTML.
<!doctype html>
<html>
A continuación, se comienza a construir la estructura del documento HTML definiendo las
etiquetas <html></html>.
Esta etiqueta delimita el documento HTML, indicando al navegador el comienzo y fin de la página
html. En esta etiqueta se utiliza el atributo lang que servirá para especificar el idioma del
documento, en este caso español; por tanto, se asigna el valor es.
<!doctype html>
<html lang="es">
</html>
<head>
La palabra head viene del inglés “cabeza” y su función es delimitar cabecera del documento.
Sus etiquetas son: <head> y </head>.
<!doctype html>
<html>
<head>
<meta charset=”utf-8”>
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
La directiva <title> sirve para especificar el título del documento y es visualizada en la barra de
título de la ventana correspondiente al programa navegador.
<!doctype html>
<html>
<head>
<meta charset=”utf-8”>
<title>Página Principal</title>
</head>
<body>
</body>
</html>
La directiva <meta> es utilizada en el documento, se emplea para identificar propiedades del
documento; por ejemplo: el autor, el título y la descripción que mostrarán los buscadores, etc.
<!doctype html>
<html>
<head>
<title>Página Principal</title>
<meta charset=”utf-8”>
<meta name="description" content="Mi página">
<meta name="keywords" content="HTML,CSS">
<meta charset=”utf-8”>
</head>
<body>
</body>
</html>
La directiva <link> es usada para incorporar estilos, códigos Javascript, imágenes o íconos
desde archivos externos. Uno de los usos más comunes para <link> es la incorporación de
archivos con estilos CSS:
<!doctype html>
<html>
<head>
<meta charset=”utf-8”>
<title>Página Principal</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
</body>
</html>
<body>
La etiqueta <body> 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 <body> es compatible con todos los navegadores.
<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
<meta charset=” utf-8”>
<meta name=”title” content=”Arquitectura Web”>
<meta name=”descripción” content=”Diseño de la Web”>
<link href=”css/estilos.css” rel=”stylesheet” />
</head>
<body>
Esto es una línea de texto
</body>
</html>
La etiqueta párrafo se define con la etiqueta <p>. Esta etiqueta permite definir los párrafos que
forma el texto de una página. El texto del párrafo lo puedes alinear con la etiqueta align
utilizando los parámetros “center”, “right”, “left” y “justify”.
La etiqueta <br> 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). (LibrosWeb.es, s.f.)
La etiqueta <!-- … se utiliza para insertar un comentario dentro del código que se está
escribiendo, el cual es ignorado por el navegador al momento de leerlo. Los comentarios sirven
para explicar mejor el código y son de gran ayuda en el momento de editarlo.
Las listas permiten ordenar o enumerar datos o elementos para facilitar su lectura. Existen tres
tipos de listas:
Listas ordenadas.
Listas no ordenadas.
Listas de definición.
Listas ordenadas:
La etiqueta <ol>, permite definir listas o viñetas ordenadas (“Ordered List”), bien con
numeración o alfabéticamente. Esta etiqueta es a su vez contenedora de otras etiquetas, siendo
estas últimas las que componen cada uno de los elementos de los que está compuesta la lista.
</ol>
type
Permite especificar el tipo de orden a aplicar en la lista, de esta forma la lista se representa
mediante diferentes tipos de numeración.
Los diferentes valores que puede recibir este atributo son los siguientes:
Valor Descripción
1 Valor por defecto. Realiza la numeración de las lista (1,2,3…)
a Establece que la numeración se realice minúscula: (a, b, c …)
A Establece que la numeración se realice mayúscula: (A, B, C …)
i Establece que la numeración se realice en romanos: (i, ii, iii …)
I Establece que la numeración se realice en romanos: (I, II, III …)
start
Indica el valor de inicio, por el cual ha de comenzar la lista ordenada, siendo este un valor
numérico En caso de ser la lista ordenada de forma alfabética, el valor de inicio que se exprese
corresponderá con el orden el abecedario ASCII. Sintaxis:
</ol>
reversed
Permite indicar que la numeración u orden que se haya establecido se represente de forma
inversa, si se tuviera una lista con valor de inicio 1, 2, 3, sucesivamente, su representación al
encontrarse este atributo seria 3,2,1.
Listas desordenadas:
Una lista no ordenada es un conjunto de elementos relacionados entre sí, pero no se indica un
orden o secuencia determinados. La etiqueta <ul> encierra todos los elementos de la lista y la
etiqueta <li> 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).
A continuación, se presenta un ejemplo utilizando listas no ordenadas.
Listas de definición:
Son listas que se utilizan en la mayoría de las 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 <dl> crea la lista de definición y las etiquetas <dt> y <dd> definen respectivamente
el término (título de la definición) y la etiqueta <dd> representa la descripción de cada elemento
de la lista.
Se emplea para destacar una parte del texto. Normalmente el texto incluido entre esas etiquetas
se representa en negrita.
Los enlaces o links (en inglés) permite conectar con otros documentos:
Una imagen
Un video
Un archivo de sonido
Una página de un determinado sitio web
Enviar un email
Los enlaces en HTML se crean mediante la etiqueta <a> (viene del inglés “anchor” traducido
literalmente sería “ancla”).
El atributo más importante de la etiqueta <a> 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 absoluta donde prescindimos 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:
<a href="http://www.cibertec.edu.pe">Cibertec</a>
Otro atributo de la etiqueta <a> 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.
<a name="ir_inicio"></a>
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 contenidos más utilizados son los siguientes:
A través del valor mailto, se abre automáticamente el programa de correo electrónico del
ordenador del usuario y se establece la dirección de envío al valor indicado después de mailto.
Una de las formas más simples e intuitivas de dotar de estilos al código HTML es usando estilos
en línea que admiten la mayoría de las etiquetas HTML.
Los estilos en línea son declaraciones CSS que se integran en las etiquetas HTML mediante el
atributo style. Este método tan solo afecta al elemento en el que se integra el código.
Para asignar color de texto a un elemento se aplica la propiedad color, utilizando el valor
hexadecimal (valor aplicable a todas las versiones de html).
Para alinear un elemento se aplica la propiedad text-align, cuyos valores son: left, right, justify,
center.
Para asignar el tamaño de la letra se aplica la propiedad -size, dicha propiedad se aplica en
pixeles como en expresión: large, larger, etc. Para decorar un elemento se aplica la propiedad
text-decoration, cuyos valores es underline, none, tachado, etc. Y para dar estilo a los elementos
aplica la propiedad -style, cuyos valores es italic, cursive, etc.
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.
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.
<p>Lorem ipsum dolor sit amet, consectetuer adipisc
ing elit. Mauris id ligula eu felis adipiscing ultr
ices.src="/imagenes/foto011.jpg"
<img Duis gravida leo ut lectus. Praesent
alt="Paisaje" condimen
width="30%"
tum mattis ligula.</p>
height="350" />
El atributo longdesc proporciona una descripción larga de la imagen, este atributo también es
muy importante para la accesibilidad de una página.
<p>Lorem ipsum dolor sit amet, consectetuer adipisc
ing permite
El atributo border elit. asignar
Mauris id ligula
un border eu sifelis
a la imagen, su valoradipiscing ultr
es cero la imagen no tendrá
borde. ices. Duis gravida leo ut lectus. Praesent condimen
tum mattis ligula.</p>
2.1.8 Etiquetas para figuras <figure> y <figcaption>
<a href="#inicio">Volver al inicio de la página</a>
Las etiquetas <figure> y <figcaption> permiten definir una mejor semántica (significado o
sentido) al contenido dentro de un documento HTML5.
Estos elementos en específico, permitirán anotar o resaltar ilustraciones, diagramas o fotos que
son referenciados directamente desde el contenido principal. Estas etiquetas podrían ser
utilizadas en diagramas, imágenes o fotos que acompañan el texto principal del contenido.
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.
Los enlaces directos a secciones también funcionan con el atributo id de cualquier elemento.
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.
<a href="/">Inicio</a>
LABORATORIO 1
Define una carpeta llamado SitioWeb_01, en ella crea las siguientes sub carpetas, tal como se
muestra.
Para crear una página web, abre el aplicativo Visual Studio Code.
Para trabajar con la carpeta llamada SitioWeb_01, arrastra la carpeta hacia la ventana del Visual
Studio Code, tal como se muestra.
Para crear una página web, primero crea un nuevo archivo, desde la opción File, selecciona la
opción New File, o simplemente utiliza la combinación de teclas Ctrl+N.
Selecciona la opción, aparece un archivo con una etiqueta “Untitled-1”. A continuación, guarda
el archivo para que sea de tipo html.
Para guardar el archivo, haz clic en la opción File, selecciona la opción Save, o también presiona
la combinación de teclas Ctrl+S.
En la ventana Save As, asigna el nombre del archivo: pagina1; y selecciona el tipo de archivo el
cual será HTML, tal como se muestra. Presiona el botón GUARDAR.
En la página, ya creada, agrega la estructura HTML. Para ello, escribe en la primera línea html,
y selecciona la lista html:5, y presiona ENTER.
Al presionar la tecla ENTER, se visualiza la estructura del html versión 5, tal como se muestra. A
partir de aquí se puede diseñar la página web.
A continuación, agrega etiquetas head <h1> tal como se muestra, asigna estilo: color de letra y
alineamiento.
Para incrustar una imagen en la página, define la etiqueta <img> indicando el origen de la
imagen: src, y los atributos width (ancho expresado en porcentaje) y height (altura), tal como
se muestra.
A continuación, define la etiqueta <p> para agregar los párrafos. Asigna estilos a los párrafos:
alineamiento (text-align) y tamaño (font-size), tal como se muestra.
Agregando listas
Define una lista ordenada <ol>, el cual inicia (start=1) y cuyo tamaño de letra de sus elementos
(font-size) es 16px; agrega sus elementos <li>, para mencionar los tipos de tecnología.
Para incrustar una imagen en el pie de la página, define la etiqueta <img> indicando el origen de
la imagen: src, así como su width (ancho al 100%) y su height (altura a 80px).
Para ejecutar la página, presiona la tecla F5 y selecciona desde Select Environment, Chrome
(preview), tal como se muestra.
LABORATORIO 2
Crea un nuevo documento y presiona la combinación de teclas Ctrl+N. Para guardar el archivo
con extensión html presiona la tecla Ctrl+S. Asigna el nombre y selecciona la extensión (html), y
presiona el botón Guardar.
En la página2.html, escribe el texto html, donde se visualiza las definiciones de este. Luego,
selecciona la opción html:5 para visualizar la estructura de la página.
Define la etiqueta <p> y el estilo: alineamiento justificado y tamaño de letra. Digita el texto
siguiente en la página, tal como se muestra.
Agregando imágenes
Para agregar un grupo de imágenes a la página, define el elemento <figure> para agrupar 4
imágenes, asigna el estilo margin: ”0px”, para que no tenga márgenes. Luego, define 4
elementos <img> cada uno con su respectivo origen (src) y sus atributos width y height. Dichos
atributos deben tener los mismos valores.
Para visualizar la página presiona la tecla F5, selecciona la opción Chrome (Preview) ejecutando
la página.
Resumen
1. 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.
5. La etiqueta párrafo se define con la etiqueta <p>. Esta etiqueta permite definir los párrafos
que forma el texto de una página. El texto del párrafo se alinea utilizando la etiqueta align
y empleando los parámetros “center”, “right”, “left” y “justify”.
6. La etiqueta <br> 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).
7. Los enlaces en HTML se crean mediante la etiqueta <a> (viene del inglés “anchor” traducido
literalmente sería “ancla”). El atributo más importante de la etiqueta <a> es href, que se
utiliza para indicar que apunta a ese enlace. Las URL de los enlaces pueden ser: absolutas,
relativas, internas y externas.
9. Las etiquetas <figure> y <figcaption> permiten definir una mejor semántica (significado o
sentido) al contenido dentro de un documento HTML5.
10. Las listas permiten ordenar o enumerar datos o elementos para facilitar su lectura. Existen
tres tipos de listas:
o Ordenadas
o Desordenadas
o De definición
11. 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 <table></table>. Entre esas dos etiquetas
se define las celdas, columnas y características de cada uno de estos parámetros.
Recursos
Pueden revisar los siguientes enlaces para ampliar los conceptos vistos en esta unidad:
o http://www.virtualnauta.com/html-formato-de-texto
o http://librosweb.es/xhtml/capitulo_3/marcado_avanzado_de_texto.html
o http://html.hazunaweb.com/103.php
o https://developer.mozilla.org/es/docs/HTML/HTML5/HTML5_lista_elementos
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. (Alvarez, 2008)
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.
Para definir las CSS, se realiza mediante una sintaxis especial, la cual se aplica a:
Un sitio web entero, de modo que se puede definir la forma de toda la 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 a la
programación.
La potencia de la tecnología salta a la vista. Si antes el HTML se quedaba corto para maquetar
las páginas y se tenía que utilizar trucos para conseguir efectos; ahora existen muchas más
herramientas que permiten definir esta forma:
Además, utilizando CSS se puede definir las dimensiones de los elementos de la página utilizando
muchas más unidades:
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 usuarios.
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
}
Donde:
h1 es el selector
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.
Estilo en línea
Es el estilo menos utilizado por que incluye la CSS en los mismos elementos de documento
HTML.
Estilo interno
Si desea crear definiciones de estilo solamente para una página del sitio web, crea un estilo
interno.
Los estilos se definen en una zona específica del propio documento HTML. Se emplea la etiqueta
<style> de HTML y solamente se pueden incluir en la cabecera del documento (sólo dentro de
la sección <head>).
Este método se emplea cuando se define un número pequeño de estilos o cuando se quieren
incluir estilos específicos en una determinada página HTML, que completen los estilos que se
incluyen por defecto en todas las páginas del sitio web.
El principal inconveniente es que, si se quiere hacer una modificación en los estilos definidos, es
necesario modificar todas las páginas que incluyen el estilo que se va a modificar.
Estilo externo
Si deseas que el sitio Web tenga un aspecto uniforme, utiliza una hoja de estilos externa y
vinculada a cada documento. Las hojas de estilo se pueden almacenar en archivos externos y
vincularlas a uno o más documentos.
Archivo estilo.css
Una hoja de estilo externa es un archivo que contiene únicamente especificaciones CSS. Puedes
utilizar hojas de estilo externas para asegurar una homogeneidad de diseño entre las páginas.
Un archivo de tipo CSS se podrá enlazar a una página HTML mediante la etiqueta <link>. Un
archivo de tipo CSS no es más que un archivo simple de texto cuya extensión es .css Se pueden
crear todos los archivos CSS que sean necesarios y cada página HTML puede enlazar tantos
archivos CSS como necesite.
La etiqueta <link> incluye los siguientes atributos cuando enlaza un archivo CSS:
rel: indica el tipo de relación que existe entre el recurso enlazado (en este caso, el
archivo CSS) y la página HTML. Para los archivos CSS, siempre se utiliza el valor
stylesheet.
type: indica el tipo de recurso enlazado. Sus valores están estandarizados y para los
archivos CSS su valor siempre es text/css.
href: indica la URL del archivo CSS que contiene los estilos. La URL indicada puede
ser relativa o absoluta y puede apuntar a un recurso interno o externo al sitio web.
Para incluir en la página HTML los estilos definidos en archivos CSS externos se utiliza una regla
especial de tipo @import. Las reglas de tipo @import siempre preceden a cualquier otra regla
CSS (con la única excepción de la regla @charset).
La URL del archivo CSS externo se indica mediante una cadena de texto encerrada con comillas
simples o dobles o mediante la palabra reservada url(). De esta forma, las siguientes reglas
@import son equivalentes:
@import ‘/css/estilos.css’;
@import “/css/estilos.css”;
@import url(‘/css/estilos.css’);
@import url(“/css/estilos.css”);
Se utiliza para seleccionar todos los elementos de la página. El selector universal se indica
mediante un asterisco (*).
A pesar de su sencillez, no se utiliza habitualmente, ya que es difícil que un mismo estilo se
pueda aplicar a todos los elementos de una página.
El siguiente ejemplo elimina el margen, el borde y el relleno de todos los elementos HTML.
*{
margin:0;
border:0px;
padding:0;
}
Este tipo de selector identifica a un tipo de elemento que conforma el código HTML modificando
el aspecto predeterminado de la etiqueta.
Para utilizar este selector, solamente es necesario indicar el nombre de una etiqueta HTML (sin
los caracteres < y >) correspondiente a los elementos que se quieren seleccionar. El siguiente
ejemplo selecciona todos los párrafos de la página:
p{
color:red;
text-align:justify;
font-style:italic;
}
Si se quiere aplicar los mismos estilos a dos etiquetas diferentes, se pueden encadenar los
selectores. En el siguiente ejemplo, los títulos de sección h1, h2 y h3 comparten los mismos
estilos:
En las hojas de estilo complejas, es habitual agrupar las propiedades comunes de varios
elementos en una única regla CSS y posteriormente definir las propiedades específicas de esos
mismos elementos.
Este tipo de selector, selecciona los elementos que se encuentran dentro de otros elementos.
Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de
cierre del otro elemento.
p > span{
color:green;
font-size:18px;
}
Se utiliza para seleccionar un elemento que es hijo de otro elemento y se indica mediante el
“signo de mayor que” (>).
Mientras que, en el selector descendente sólo importa que un elemento esté dentro de otro,
independientemente de lo profundo que se encuentre, en el selector de hijos el elemento debe
ser hijo directo de otro elemento.
Cuando se declara una regla en la hoja de estilo, esta regla se aplica a todos los elementos HTML
descritos por su selector.
¿Qué sucede si en ciertos casos se quiere usar un párrafo con características diferenciadas?
Este planteamiento se resuelve en utilizar el atributo class de HTML, para definir un nuevo
selector. El selector de clases consta de un punto (.) seguido por el nombre de la clase que se
haya creado.
A continuación, define una nueva regla llamada. Título con todos los estilos que se van a aplicar
al elemento. Para que el navegador no confunda este selector con los otros tipos de selectores,
se prefija el valor del atributo class con un punto (.).
.titulo{
color:black;
font-size:24px;
font-style:normal;
text-align:center;
}
Para aplicar el estilo de la clase CSS sobre un elemento se utiliza el atributo class junto con el
nombre de la regla:
2.2.2.5 Selector de id
#titulo{
color:black;
font-size:24px;
font-style:normal;
text-align:center;
}
La sintaxis de los selectores de ID es muy parecida a la de los selectores de clase, salvo que se
utiliza el símbolo de la almohadilla (#) en vez del punto (.), como prefijo del nombre de la regla
CSS:
CSS permite la combinación de uno o más tipos de selectores para restringir el alcance de las
reglas CSS. A continuación, se muestran algunos ejemplos habituales de combinación de
selectores.
.aviso .especial { … }
El selector selecciona aquellos elementos con un class=”especial” que se encuentren dentro de
cualquier elemento con un class=”aviso”.
Si se modifica el anterior selector:
div.aviso span.especial { … }
Ahora, el selector solamente selecciona aquellos elementos de tipo <span> con un atributo
class=”especial” que estén dentro de cualquier elemento de tipo <div>, que tenga un atributo
class=”aviso”.
La combinación de selectores puede llegar a ser todo lo compleja que sea necesario:
El anterior selector hace referencia al enlace con un atributo id igual a inicio que se encuentra
dentro de un elemento de tipo <li> con un atributo class igual a destacado, que forma parte de
una lista <ul> con un atributo id igual a menú Principal.
LABORATORIO 1
Direcciona a las
redes sociales
Logo (imagen)
Enlaces
Imágenes que
promociona
productos y
servicios
Pie de página
(imagen)
Figura 104: Captura de pantalla
Fuente. – Elaboración propia
En la página, ya creada, agrega la estructura HTML. Para ello, escribe en la primera línea html,
selecciona la lista html:5, y presiona ENTER.
Para ejecutar a través del navegador, primero guarda la página: CTRL+S y presiona la tecla F5
para ejecutar la página con el navegador.
LABORATORIO 2
Logo (imagen)
Texto <h1>
Imágenes y
párrafo
Imágenes y
párrafo
Imágenes de
redes sociales
Pie de página
(imagen)
Figura 117: Captura de pantalla
Fuente. – Elaboración propia
De igual modo, para el segundo párrafo, utiliza los selectores para los elementos de la página; y
de esta manera los dos párrafos de la página utilizan las mismas reglas.
Agregando las etiquetas <img> para las redes sociales y el pie de página
Agrega los elementos para las imágenes de las redes sociales y la imagen del pie de página, tal
como se muestra. Presiona la tecla F5 para visualizar el diseño.
Para ejecutar a través del navegador, primero guarda la página: CTRL+S y presiona la tecla F5
para ejecutar la página con el navegador.
Resumen
1. CSS es un lenguaje que 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.
2. 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.
3. 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.
4. Estilo interno, si se desea crear definiciones de estilo solamente para una página del sitio
web. Los estilos se definen en una zona específica del propio documento HTML. Se emplea
la etiqueta <style> de HTML y solamente se pueden incluir en la cabecera del documento
(sólo dentro de la sección <head>).
5. Estilo externo, si se desea que el sitio Web tenga un aspecto uniforme se debe utilizar una
hoja de estilos externa y vinculada a cada documento. Las hojas de estilo se pueden
almacenar en archivos externos y vincularlas a uno o más documentos.
6. Para incluir en la página HTML los estilos definidos en archivos CSS externos se utiliza una
regla especial de tipo @import. Las reglas de tipo @import siempre preceden a cualquier
otra regla CSS (con la única excepción de la regla @charset).
Recursos
Pueden revisar los siguientes enlaces para ampliar los conceptos vistos en esta unidad:
o http://librosweb.es/css_avanzado/capitulo_3.html
o http://www.mclibre.org/consultar/htmlcss/css/css_pseudoclases.html
o http://www.sidar.org/recur/desdi/traduc/es/css/selector.html
o http://html.conclase.net/w3c/css1-es.html
o https://kechy.files.wordpress.com/2012/11/manual-css-hojas-estilo.pdf
o http://librosweb.es/css/capitulo_2/selectores_basicos.html
UNIDAD
3
ESTRUCTURAS Y BLOQUES
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 y estructuras de bloques.
TEMARIO
3.1 Tema 5 : Modelo de cajas y posicionamiento CSS
3.1.1. : Modelo de cajas
3.1.2. : Posicionamiento de cajas: estático, relativo, absoluto, flotante;
visualización: display, visibility, overflow, z-index
3.1.3. : Etiquetas estructurales: header, nav, aside, main, section, article,
footer
3.1.4 : Etiquetas flexibles: box-sizing, flexible box layout, grid
ACTIVIDADES PROPUESTAS
Los alumnos diseñan páginas web con etiquetas HTML5, hojas de estilo CSS3 y
bloques de contenidos.
Los alumnos diseñan un menú en una página web.
El modelo de cajas es el comportamiento de estilo CSS que hace que todos los elementos de una
página se representen mediante cajas rectangulares. Este modelo es la característica más
importante del lenguaje de estilos CSS, ya que condiciona el diseño de todas las páginas web.
Cada vez que se inserta una etiqueta HTML, se crea una nueva caja rectangular que encierra los
contenidos de ese elemento. La siguiente imagen muestra las tres cajas rectangulares que crean
las tres etiquetas HTML que incluye la página:
Los navegadores crean y colocan las cajas de forma automática, pero CSS permite modificar
todas sus características. Cada una de las cajas está formada por seis partes, tal y como muestra
la siguiente imagen.
Las partes que componen una caja, desde el punto de vista del usuario, son las siguientes:
Componente Definición
Contenido (content) Se trata del contenido HTML del elemento (las palabras
de un párrafo, una imagen, el texto de una lista de
elementos, etc.)
Relleno (fading) Espacio libre opcional existente entre el contenido y el
borde
Borde (border) Línea que encierra completamente el contenido y su
relleno
Imagen de fondo Imagen que se muestra por detrás del contenido y el
(background imagen) espacio de relleno
Color de fondo (background Color que se muestra por detrás del contenido y el
color) espacio de relleno
Margen (margen) Separación opcional existente entre la caja y el resto de
cajas adyacentes
CSS define cuatro propiedades para controlar cada uno de los márgenes horizontales y verticales
de un elemento.
CSS define cuatro propiedades para controlar cada uno de los espacios de relleno: horizontales
y verticales de un elemento.
Propiedad Descripción
background-color Permite mostrar un color de fondo sólido en la caja de un
elemento.
Background-image Permite mostrar una imagen como fondo de la caja de
cualquier elemento.
Background-repeat Permite controlar la forma de repetición de las imágenes de
fondo. El valor no-repeat muestra una sola vez la imagen y
no se repite en ninguna dirección. El valor repeat-x repite la
imagen solo horizontalmente y el valor repeat-y repite la
imagen solamente de forma vertical.
Background-position Permite controlar la posición de la imagen dentro del fondo
del elemento mediante la propiedad.
Background-attachment. Opcionalmente, se puede indicar que el fondo permanezca
fijo cuando la ventana del navegador se desplaza mediante
las barras de scroll. Se trata de un comportamiento que en
general no es deseable y que algunos navegadores no
soportan correctamente.
La propiedad border permite modificar el aspecto de cada uno de los cuatro bordes de la caja
de un elemento. Para cada borde se puede establecer su anchura o grosor, su color y su estilo,
por lo que en total CSS define 20 propiedades relacionadas con los bordes.
El color de los bordes se controla con las cuatro propiedades siguientes: border-top-color,
border-right-color, border-bottom-color y border-left-color. Si se quiere establecer de forma
simultánea el color de todos los bordes de una caja, se utiliza la propiedad border-color.
El estilo de los bordes se controla con las cuatro propiedades siguientes: border-top-style,
border-right-style, border-bottom-style y border-left-style. Los bordes más utilizados son solid
y dashed, seguidos de doublé y dotted. Si se quiere establecer de forma simultánea el color de
todos los bordes de una caja, se utiliza la propiedad border-style.
La propiedad border-radius permite que las esquinas sean bordes redondeados. Esta propiedad
en este momento es experimental por lo que se debe usar los prefijos –moz- y –webkit para que
funcionen en navegadores basados en motores Gecko y WebKit, como Firefox, Safari y Google
Chrome. Si todas las esquinas tienen la misma curvatura se puede utilizar un solo valor.
Para aplicarla efectivamente a sus documentos, se debe declarar con los correspondientes
prefijos, para los navegadores más comunes son los siguientes:
-moz- para Firefox.
-webkit- para Safari y Chrome.
-o- para Opera.
-khtml- para Konqueror.
#principal {
display: block;
width: 500px;
margin: 50px auto;
padding: 15px;
text-align: center;
border: 1px solid #999999;
background: #DDDDDD;
-moz-border-radius: 20px 10px 30px 50px;
-webkit-border-radius: 20px 10px 30px 50px;
border-radius: 20px 10px 30px 50px;
}
Cuando los navegadores descargan el contenido HTML y CSS de las páginas web, aplican un
procesamiento muy complejo antes de mostrar las páginas en la pantalla del usuario.
Para cumplir con el modelo de cajas, los navegadores crean una caja para representar a cada
elemento de la página HTML. Los factores que se tienen en cuenta para generar cada caja son
los siguientes:
Los navegadores crean y posicionan de forma automática todas las cajas que forman cada página
HTML. No obstante, CSS permite al diseñador modificar la posición en la que se muestra cada
caja.
Utilizando las propiedades que proporciona CSS para alterar la posición de las cajas es posible
realizar efectos muy avanzados y diseñar estructuras de páginas que de otra forma no serían
posibles.
El estándar de CSS define cinco modelos diferentes para posicionar una caja:
Posicionamiento relativo
Desplaza una caja respecto de su posición original establecida mediante el posicionamiento
normal. El desplazamiento de la caja se controla con las propiedades top, right, bottom y left.
De la misma forma, el valor de las propiedades left, right y bottom indica respectivamente el
desplazamiento entre el borde izquierdo/derecho/inferior de la caja en su posición final y el
borde izquierdo/derecho/inferior de la caja original.
Por tanto, la propiedad top se emplea para mover las cajas de forma descendente, la propiedad
bottom mueve las cajas de forma ascendente, la propiedad left se utiliza para desplazar las cajas
hacia la derecha y la propiedad right mueve las cajas hacia la izquierda. Este comportamiento
parece poco intuitivo y es causa de errores cuando se empiezan a diseñar páginas con CSS. Si se
utilizan valores negativos en las propiedades top, right, bottom y left, su efecto es justamente
el inverso.
El desplazamiento relativo de una caja no afecta al resto de cajas adyacentes, que se muestran
en la misma posición que si la caja desplazada no se hubiera movido de su posición original.
Posicionamiento absoluto
Se emplea para establecer de forma exacta la posición en la que se muestra la caja de un
elemento. La nueva posición de la caja se indica mediante las propiedades top, right, bottom y
left. La interpretación de los valores de estas propiedades es mucho más compleja que en el
posicionamiento relativo, ya que en este caso dependen del posicionamiento del elemento
contenedor.
Cuando una caja se posiciona de forma absoluta, el resto de elementos de la página se ven
afectados y modifican su posición. Al igual que en el posicionamiento relativo, cuando se
posiciona de forma absoluta una caja es probable que se produzcan solapamientos con otras
cajas.
Posicionamiento flotante
La mayoría de estructuras de las páginas web complejas están diseñadas con el posicionamiento
flotante. Cuando una caja se posiciona con el modelo de posicionamiento flotante,
automáticamente se convierte en una caja flotante, lo que significa que se desplaza hasta la
zona más a la izquierda o más a la derecha de la posición en la que originalmente se encontraba.
La propiedad CSS que permite posicionar de forma flotante una caja se denomina float.
Si se indica un valor left, la caja se desplaza hasta el punto más a la izquierda posible en esa
misma línea. El resto de elementos adyacentes se adaptan y fluyen alrededor de la caja flotante.
img {
float:left;
}
El valor right tiene un funcionamiento idéntico, salvo que, en este caso la caja se desplaza hacia
la derecha. El valor none permite anular el posicionamiento flotante de forma que el elemento
se muestre en su posición original. La propiedad clear permite modificar el comportamiento por
defecto del posicionamiento flotante para forzar a un elemento a mostrarse debajo de cualquier
caja flotante.
La regla CSS que se aplica al segundo párrafo del ejemplo anterior es la siguiente:
Los valores más utilizados son inline, block y none. El valor block muestra un elemento como si
fuera un elemento de bloque, independientemente del tipo de elemento que se trate. El valor
inline visualiza un elemento en forma de elemento en línea, independientemente del tipo de
elemento que se trate. El valor none oculta un elemento y hace que desaparezca de la página.
La propiedad visibility permite hacer invisible un elemento, lo que significa que el navegador
crea la caja del elemento, pero no la muestra. En este caso, el resto de los elementos de la página
no modifican su posición, ya que, aunque la caja no se ve, sigue ocupando sitio.
Valor Descripción
hidden Convierte una caja en invisible para que no muestre sus contenidos.
Collapse Se utiliza en las filas, grupos de filas, columnas y grupos de columnas de
una tabla.
La propiedad overflow permite controlar la forma en la que se visualizan los contenidos que
sobresalen de sus elementos.
Valor Descripción
visible El contenido no se corta y se muestra sobresaliendo la zona reservada
para visualizar el elemento. Valor por defecto.
Hidden El contenido sobrante se oculta y sólo se visualiza la parte del contenido
que cabe dentro de la zona reservada del elemento.
Scroll Muestra una barra scroll para visualizar el contenido oculto.
Auto El comportamiento depende del navegador, aunque normalmente es
el mismo que la propiedad scroll.
La propiedad z-index, además de posicionar una caja de forma horizontal y vertical, CSS permite
controlar la posición tridimensional de las cajas posicionadas. De esta forma, es posible indicar
las cajas que se muestran delante o detrás de otras cajas cuando se producen solapamientos.
3.1.3 Etiquetas estructurales: header, nav, aside, main, section, article, footer
Para distribuir mejor el contenido de una página se han definido etiquetas estructurales. La
razón para trabajar con etiquetas estructurales es dividir una página Web en partes lógicas que
describan el tipo de contenido que incluyen.
HTML5 aporta una serie de etiquetas nuevas que permiten mejorar la semántica de la página.
Los elementos de HTML5 nuevos que se va a cubrir en este artículo son:
<header>
Es un contenedor que forma la cabecera de la página, generalmente con un logotipo o gráfico
de la compañía, el título de página principal, etc.
<header> puede ser utilizado varias veces en un documento, por lo general, contiene al menos
un elemento <h1>-<h6>.
<hgroup>
Notarás que, en el código anterior, el único contenido de la cabecera es un elemento <hgroup>,
que rodea dos encabezados. Lo que se pretende especificar es el encabezado de nivel superior
del documento, más un subtítulo o ‘tagline’. Si deseas que solo cuente el nivel superior de
encabezado en la jerarquía de encabezados del documento, es exactamente lo que hace
<hgroup>: que un grupo de encabezados cuente como un único encabezado a efectos de la
estructura del documento.
<nav>
Es utilizado para demarcar una sección que contiene los enlaces a otros contenidos o secciones.
Los enlaces se pueden anidar dentro de una lista, como una lista desordenada <ul>.
<section>
Se usa para representar un bloque de la página que tiene valor semántico, es decir, que aporta
un significado a la página. Realmente si se tiene que clasificar por la importancia del significado,
el ranking sería: article sería la etiqueta que contiene la información más relevante, section la
que contiene información menos relevante, y div que contiene información que no aporta
significado ninguno.
<article>
Se utiliza para contenidos independientes que tendrían sentido fuera del contexto de la página
actual, y podrían sindicarse perfectamente. Eso incluiría las entradas de un blog, un vídeo con
su transcripción, una noticia, o una parte de una historia por capítulos.
<main>
Sirve para definir el contenido principal o más destacado del DOM. Sólo puede haber una
etiqueta <main>.
Dentro de esta etiqueta se debe tener elementos, tales como: cabecera de la web, menú de
navegación, información de la web, pie de página, barras laterales, etc.
Nunca debe estar dentro de las etiquetas: header, footer, article, aside y nav.
<footer>
Se utiliza para contener el contenido de pie de página del sitio. El pie de página se utiliza para
colocar avisos de copyright, datos de contacto a las declaraciones de accesibilidad, información
de licencias y varios otros enlaces secundarios.
box-sizing
Permite cambiar el espacio total ocupado por un elemento en pantalla, esto será calculado
forzando a los navegadores a incluir en el ancho original los valores de las propiedades padding
y border.
Cada vez que el área total ocupada por un elemento es calculada, el navegador obtiene el valor
final por medio de la siguiente fórmula:
Por este motivo, si se declara la propiedad width igual a 100 píxeles, margin en 20 píxeles,
padding en 10 píxeles y border en 1 píxel, el área horizontal total ocupada por el elemento será:
100+40+20+2= 162 píxeles.
Esto significa que cada vez que declare el ancho de un elemento con la propiedad width, se
deberá recordar que el área real para ubicar el elemento en pantalla será seguramente más
grande.
A veces podría resultar útil forzar al navegador a incluir los valores de padding y border en el
tamaño del elemento. En este caso la nueva fórmula sería simplemente: tamaño + márgenes.
div {
width: 100px;
margin: 20px;
padding: 10px;
border: 1px solid;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
La propiedad box-sizing puede tomar dos valores. Por defecto es configurada como content-
box, lo que significa que los navegadores agregarán los valores de padding y border al tamaño
especificado por width y height. Usando el valor border-box en su lugar, este comportamiento
es cambiado de modo que padding y border son incluidos dentro del elemento.
En este sistema existe un elemento padre que es el contenedor y que tendrá en su interior cada
uno de los ítems flexibles y adaptables. Para activar el modo flexbox hay que utilizar sobre el
elemento contenedor la propiedad display y especificar el valor flex o inline-flex dependiendo
de cómo se quiere que se comporte el contenedor: si como un elemento en línea, o como un
elemento en bloque.
Los contenedores flexibles tendrán una orientación principal específica que por defecto es
horizontal (fila). Mediante la propiedad flex-direction se puede modificar esa dirección para que
sea horizontal o en vertical. También se puede incluir el sufijo -reverse para indicar que coloque
los ítems en orden inverso.
Existe otra propiedad llamada flex-wrap con la que se puede especificar el comportamiento del
contenedor cuando los ítems no caben en una línea y se desbordan. El valor wrap autoriza el
salto de fila o columna cuando los elementos no caben, nowrap (valor por defecto) lo impide y
wrap-reverse autoriza, pero en orden inverso.
Grid layout
contiene funciones de diseño dirigidas a los desarrolladores de aplicaciones web. El CSS grid se
puede utilizar para lograr muchos diseños diferentes. También se destaca por permitir dividir
una página en áreas o regiones principales, por definir la relación en términos de tamaño,
posición y capas entre partes de un control construido a partir de primitivas HTML.
Para activar la cuadrícula grid hay que utilizar sobre el elemento contenedor la propiedad
display y especificar el valor grid o inline-grid. Este valor influye en cómo se comportará la
cuadrícula con el contenido exterior. El primero de ellos permite que la cuadrícula aparezca
encima/debajo del contenido exterior (en bloque) y el segundo de ellos permite que la
cuadrícula aparezca a la izquierda/derecha (en línea) del contenido exterior.
Es posible crear cuadrículas con un tamaño explícito. Para ello, sólo se utiliza las propiedades
CSS grid-template-columns y grid-template-rows, que sirven para indicar las dimensiones de
cada celda de la cuadrícula, diferenciando entre columnas y filas.
Se utiliza la unidad especial de Grid CSS fr (fraction), que simboliza una fracción de espacio
restante en el grid.
.grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 2fr 1fr;
}
En este ejemplo, se crea una cuadrícula de 2x2, donde el tamaño de ancho de la cuadrícula se
divide en dos columnas (mismo tamaño de ancho para cada una), y el tamaño de alto de la
cuadrícula se divide en dos filas, donde la primera ocupará el doble (2 fr) que la segunda (1 fr):
.grid {
display: grid;
grid-template-columns: 100px repeat(2, 50px) 200px;
grid-template-rows: repeat(2, 50px 100px);
}
LABORATORIO 1
Bloque <header>
Bloque <nav>
Bloque <aside>
Bloque <article>
Bloque <section>
LABORATORIO 2
Se solicita diseñar una página de inicio del sitio web utilizando bloques y estilos CSS
Diseña una página de inicio HTML y utiliza las etiquetas <header>, <nav>, <section>, <aside>,
<footer> y estilos CSS, tal como se muestra en la gráfica.
Para ejecutar a través del navegador, primero guarda la página: CTRL+S y presiona la tecla F5
para ejecutar la página con el navegador.
LABORATORIO 3
Se solicita diseñar una página acerca de tecnología y educación. Explicando, en forma breve, las
aportaciones de la tecnología en diversas áreas. Utiliza bloques y estilos CSS.
Para ejecutar a través del navegador, primero guarda la página: CTRL+S y presiona la tecla F5
para ejecutar la página con el navegador.
Resumen
1. El modelo de cajas es el comportamiento de estilo CSS que hace que todos los elementos de
una página se representen mediante cajas rectangulares. Este modelo es la característica
más importante del lenguaje de estilos CSS, pues condiciona el diseño de todas las páginas
web.
2. HTML5 aporta una serie de etiquetas nuevas que permiten mejorar la semántica de nuestra
página. Los elementos de HTML5 nuevos: header, nav, section, article, aside, footer, hgroup,
figure.
3. Las partes que compone un bloque y su orden de visualización desde el punto de vista del
usuario son: content se trata del contenido HTML, width, controla el ancho de la caja, height,
controla la altura de la caja, border, línea que encierra completamente el contenido y su
relleno, margin, separación opcional entre la caja y el resto de cajas adyacentes.
4. Las nuevas propiedades CSS3 son extremadamente poderosas y deben ser estudiadas una
por una, pero para facilitar su aprendizaje, están son: padding, espacio libre opcional
existente entre el contenido y el borde, background-image, imagen que se muestra por
detrás del contenido y el espacio de relleno; background-color, color que se muestra por
detrás del contenido y el espacio de relleno; border-radius, efecto de las esquinas
redondeadas; float, establece el posicionamiento flotante de la caja; clear, modifica el
comportamiento de las cajas flotantes.
5. Para aplicar efectivamente estas propiedades a sus documentos, debes declararla con los
correspondientes prefijos, para los navegadores más comunes son los siguientes: -moz- para
Firefox; -webkit- para Safari y Chrome; -o- para Opera; -khtml- para Konqueror; -ms- para
Internet Explorer; -chrome- específico para Google Chrome
6. Las propiedades display y visibility controlan la visualización de los elementos. Las dos
propiedades permiten ocultar cualquier elemento de la página. Habitualmente se utilizan
junto con JavaScript para crear efectos dinámicos como mostrar y ocultar determinados
textos o imágenes cuando el usuario pincha sobre ellos.
7. La propiedad box-sizing permite cambiar cómo el espacio total ocupado por un elemento
en pantalla será calculado forzando a los navegadores a incluir en el ancho original los
valores de las propiedades padding y border. La propiedad box-sizing puede tomar dos
valores. Por defecto es configurada como content-box, lo que significa que los navegadores
agregarán los valores de padding y border al tamaño especificado por width y height.
Recursos
Pueden revisar los siguientes enlaces para ampliar los conceptos vistos en esta unidad:
o http://librosweb.es/css/capitulo_4.html
o http://www.desarrolloweb.com/articulos/aprende-html5-5-minutos.html
o http://blog.ikhuerta.com/css3-displaybox-maquetacion-con-el-modelo-de-caja-flexible
o https://lenguajecss.com/css/maquetacion-y-colocacion/grid-css/
HTML5 y CSS3 son dos recursos esenciales para diseñadores y desarrolladores en la actualidad
si lo que se busca es crear sitios web funcionales, así como estéticamente hermosos. Estos
lenguajes permiten crear páginas web con efectos realmente alucinantes e innovadores y
además son muy simples de usar.
Otro elemento bastante típico y común en muchas páginas web es la zona de navegación,
formada por enlaces a las zonas principales de la web, o por un menú de navegación,
desplegable de enlaces, etc. Por lo visto Html5 interpreta que es una zona que deberíamos
identificar, por ello, ha creado la nueva etiqueta <nav> </nav>. En internet Explorer, por
desgracia este elemento <nav> no es compatible, sin embargo, hay una solución sencilla que se
puede utilizar para corregir el problema y que el menú se despliegue sin errores de visualización.
No todos los enlaces de una página web han de pertenecer obligatoriamente a un nav. Los
enlaces de políticas, de datos de contacto, mapas del sitio, copy rights, enlaces a secciones
secundarias etc, que aparecen normalmente en un pie de página no es necesario que los
rodeemos con la etiqueta <nav>, pues la etiqueta <footer> ya recoge esos aspectos. Ésta
etiqueta es más bien para enlaces que favorezcan la navegación por la web, que dirijan a zonas
importantes.
El por qué HTML5 añade esta etiqueta es sencillo. Cada vez es más habitual que nuestras páginas
aparezcan no solo en los navegadores que usamos en el ordenador, sino también en dispositivos
móviles, teléfonos, iPads, etc. Al usar esta etiqueta el agente de usuario (llamado también
navegador) podría dar la opción al usuario de esconder el menú de navegación para no molestar,
para tener más espacio disponible para ver el contenido importante. También podría dar la
opción de hacerlo aparecer cuando el usuario quiera cambiar de sección. Esto solo sería posible
si se sabe dónde empieza y dónde termina ese menú de navegación y eso es precisamente lo
que se consigue con la etiqueta <nav>.
En la norma donde se dictan todas estas reglas del HTML5 no se indica que no pueda existir más
de un bloque del tipo <nav> dentro de una misma página. No obstante, en algunos sitios se
recomienda que solo exista uno.
Para diseñar un menú de navegación se utiliza listas, porque un menú básicamente es una lista,
no es un párrafo, ni un título, es una lista de vínculos.
Al cambiar el aspecto de las listas usando CSS permite se puede “convertir” en un menú sin que
deje de ser lista. Pero primero, observa en qué consisten los preformatos que trae de por sí una
lista.
Las listas se renderizan en el navegador con ciertas características, como el margen/relleno (los
cuales son interpretados de diferente manera en los distintos navegadores como opera,
Chrome, Internet, entre otros) de la lista completa, el margen / relleno (ídem) de cada ítem de
la lista y las viñetas, además de un salto de línea para cada ítem por ser elementos de bloque.
LABORATORIO 1
Se solicita diseñar una página de inicio, donde se implemente un menú de navegación utilizando
estilo CSS.
Guardar el archivo como página HTML. Abre el documento con el navegador Chrome, donde se
visualiza la página.
A continuación, define estilos directamente sobre los vínculos, <a> asignando: bloque, tamaño,
tipo de letra, colores, decoración, etc. Para seleccionar los vínculos dentro de los elementos de
lista, encadena los nombres de las etiquetas en el selector CSS como se ha realizado con los <li>:
Por último, define propiedades del evento hover de la etiqueta <a>, para cambiar el color de
letra y de fondo al acercar el cursor en el vínculo.
LABORATORIO 2
Guarda el archivo HTML. Luego, abre el documento con el navegador Chrome para visualizar la
página.
En las reglas de estilo define la primera lista <ul>; define las propiedades para quitar las viñetas
y márgenes de la lista en la etiqueta <ul> a través de la propiedad list-style-type: none. Para
ocultar los submenús (ul ul) define la propiedad visibility: hidden, position, márgenes y relleno.
Para que el menú sea horizontal, en la etiqueta <li> de la lista, agrega la propiedad float: left,
para hacer que los elementos de la lista se coloquen uno al lado del otro. También define los
bordes, posición, márgenes y relleno.
A continuación, define estilos directamente sobre los vínculos, <a> asignando: bloque, tamaño,
tipo de letra, colores, decoración, etc. Para seleccionar los vínculos dentro de los elementos de
lista, encadena los nombres de las etiquetas en el selector CSS como se realizó con los <li>.
Además, define propiedades del evento hover de la etiqueta <a>, para cambiar el color de letra
y de fondo al acercar el cursor en el vínculo.
Por último, define propiedades del evento hover de la etiqueta <li> para cada uno de los
subítems, donde al pasar el cursor sobre el elemento del menú, se visualiza los elementos del
subítem.
Resumen
1. HTML5 y CSS3 son dos recursos esenciales para diseñadores y desarrolladores en la
actualidad, si lo que se busca es crear sitios web funcionales, así como estéticamente
hermosos. Estos lenguajes permiten crear páginas web con efectos realmente alucinantes e
innovadores y además son muy simples de usar.
2. Otro elemento bastante típico y común en muchas páginas web es la zona de navegación,
formada por enlaces a las zonas principales de la web, o por un menú de navegación,
desplegable de enlaces, etc. Por lo visto Html5 interpreta que es una zona que deberíamos
identificar y ha creado para ello la nueva etiqueta <nav> </nav>.
3. Para diseñar un menú de navegación se utiliza listas, porque un menú básicamente es una
lista, no es un párrafo, ni un título, es una lista de vínculos.
4. Para cambiar el aspecto de las listas, CSS permite cambiar el aspecto de la lista, para
convertirla en el bonito menú que se desea, sin que deje de ser lista.
Recursos
Puede revisar los siguientes enlaces para ampliar los conceptos vistos en esta unidad:
o http://www.cristalab.com/tutoriales/crear-menus-de-navegacion-en-css-usando-listas-c130l/
o http://www.antocas.com/menu-desplegable-basico-html5-y-css3-drop-down-submenu/
UNIDAD
4
MULTIMEDIA, TRANSICIONES Y
ANIMACIONES
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 y multimedia.
TEMARIO
ACTIVIDADES PROPUESTAS
Los alumnos diseñan páginas web con etiquetas HTML5, hojas de estilo CSS3 y
bloques de contenidos.
Los alumnos diseñan una página web con audio, video y reproductor de video de
YouTube.
El soporte para usar video, manipular imágenes, y visualización de datos permitirá a los
diseñadores y desarrolladores crear experiencias ricas y atractivas que funcionen en múltiples
plataformas.
Hasta ahora, para incluir un elemento multimedia en un documento, se hacía uso del elemento
<object>, cuya función es incluir un elemento externo genérico. Debido a la incompatibilidad
entre navegadores, se hacía también necesario el uso del elemento <embed> y duplicar una
serie de parámetros.
HTML5 introduce soporte integrado para el contenido multimedia gracias a los elementos
<audio> y <video>, ofreciendo la posibilidad de insertar contenido multimedia en documentos
HTML.
En este caso, el elemento <audio> define el origen del archivo multimedia a través de la
propiedad src. Este atributo especifica la URL del archivo a ser reproducido. Este atributo,
normalmente será reemplazado por el elemento <source> para ofrecer diferentes formatos de
audio entre los que el navegador pueda elegir.
src:
URL/path del audio a reproducir.
Autoplay:
Este atributo especifica que el audio comience automáticamente. Se puede especificar de 2
maneras autoplay=” autoplay” o autoplay.
Preload:
En caso de omisión su valor es “auto”. Sirve para especificar si se desea que el audio se vaya
cargando independientemente si se da al play o no. Aumentaría el consumo de ancho de banda,
pero el usuario tendría menos cortes en la reproducción.
Controls:
Especifica si se muestran los típicos controles del audio (play, stop, volumen…). Tiene 2 posibles
sintaxis: controls=”controls” o controls.
Loop:
Especifica la reproducción continua del audio, es decir, una vez acabada la reproducción
comienza de nuevo a reproducirse. Tiene 2 posibles sintaxis: loop=”loop” o loop.
Muted:
Funcionalidad para quitar el volumen al audio.
Mediagroup:
Establece un grupo de reproducción al que pertenece el audio.
Formato de audio
Los archivos de audio están codificados mediante un códec específico, y es importante conocer
estos detalles para saber qué formatos están soportados por los diferentes navegadores.
<audio>
<source src=”audio.opus” />
<source src=”audio.ogg” />
<source src=”audio.mp3” />
</audio>
Para poder insertar videos en las páginas HTML se tiene que utilizar la etiqueta <video>, que
junto a la etiqueta <source> se puede utilizar estas capacidades multimedia de HTML5.
Poster:
URL/Path, muestra una imagen a modo de presentación. El atributo poster indica la imagen que
el navegador debe mostrar mientras el vídeo se está descargando, o hasta que el usuario
reproduce el vídeo. Si no se indica este atributo, el navegador muestra el primer fotograma del
vídeo.
Autoplay:
Este atributo especifica que el video comience automáticamente. Se puede especificar de estas
2 maneras autoplay=”autoplay” o autoplay.
Preload:
En caso de omisión su valor es “auto”. Sirve para especificar si se desea que el video se cargue
independientemente si se da al play o no. Aumentaría el consumo de ancho de banda pero el
usuario tendría menos cortes en la reproducción.
Existen 3 posibles valores para este atributo:
— preload = “none”: el video no comienza a descargarse hasta que el usuario seleccione play.
— preload = “metadata”: solo se cargan los metadatos del video (dimensiones, primer frame,
duración…).
— preload = “auto”: el video se descarga independientemente de la ejecución del play.
Controls:
Especifica si se muestran los típicos controles del video (play, stop, volumen…). Tiene 2 posibles
sintaxis: controls=”controls” o controls.
Loop:
Especifica la reproducción continua del video, es decir, una vez acabada la reproducción
comienza de nuevo a reproducirse. Tiene 2 posibles sintaxis: loop=”loop” o loop.
Muted:
Funcionalidad para quitar el volumen al video.
Mediagroup:
Establece un grupo de reproducción al que pertenece el video.
Width, height:
Los atributos height y width indican al navegador el tamaño del vídeo en píxeles. Si no se indican
estas medidas, el navegador utiliza las medidas definidas en el vídeo de origen, si están
disponibles. De lo contrario, utiliza las medidas definidas en el fotograma poster, si están
disponibles. Si ninguna de estas medidas está disponible, el ancho por defecto es de 300 píxeles.
Formato de video
Los archivos de video codificados mediante un códec específico, y es importante conocer estos
detalles para saber qué formatos están soportados por los diferentes navegadores.
La etiqueta <source> tiene como atributos src y type, establece un archivo de video o lo añade
como alternativa.
Height,
Altura que ocupará el iframe en el documento, se expresa en píxeles.
Width,
Ancho que ocupará el iframe en el documento, se expresa en píxeles.
Align,
Alineamiento del frame en la página.
Name,
Nombre que identifica al iframe.
Longdesc,
Dirección url en la que puede encontrarse una descripción larga del contenido del iframe.
Frameborder,
Especifica el grosor del border del frame, por defecto es cero.
Framespacing,
Especifica el espacio entre la caja y el contenido del frame.
Scrolling,
“yes | no | auto” – Indica si el iframe debe mostrar barras de scroll (horizontal y vertical) cuando
el contenido incluido no cabe en el iframe.
Para hacer un posicionamiento más específico o darle unas características más concretas a
los IFRAMES puedes utilizar la etiqueta style.
LABORATORIO 1
Se solicita diseñar una página HTML para la empresa Toshiba, en la cual se debe agregar videos
en la barra lateral de la página.
Para visualizar el diseño de la página html, presiona F5 y selecciona la opción Chrome (Preview).
LABORATORIO 2
Se solicita diseñar una página HTML para la empresa Toshiba, donde, utilizando la herramienta
VideoLightBox se agregue videos en el bloque footer.
Resumen
1. Algunos de los cambios más notables en HTML5 es la adición de etiquetas para soportar
elementos multimedia. Esto incluye la etiqueta <audio> para reproducir sonidos, <video>
para videos, todo esto dentro del web browser y sin depender de software externo.
2. El elemento <audio> trabaja del mismo modo y comparte varios atributos con el elemento
<video>. Src, especifica la URL del archivo a ser reproducido; controls. Activa la interface
que cada navegador provee por defecto para controlar la reproducción del audio; autoplay,
reproducción automática; loop, el navegador reproducirá el audio una y otra vez de forma
automática; preload, este atributo puede tomar tres valores diferentes: none, metadata o
auto.
3. Entre los atributos de la etiqueta <video>: poster, indica la imagen que el navegador debe
mostrar mientras el vídeo se está descargando, o hasta que el usuario reproduce el vídeo;
height, width: indican al navegador el tamaño del vídeo en píxeles. Si no se indican estas
medidas, el navegador utiliza las medidas definidas en el vídeo de origen, si están
disponibles.
4. Una vez que se dispone del vídeo o el audio en los distintos formatos, es necesario indicar
todas las ubicaciones de estos formatos, para que sea el navegador el que decida qué
formato reproducir. Para especificarlos se tiene que hacer de manera separada utilizando el
elemento <source>.
5. El elemento HTML inline frame (<iframe>) permite incorporar otra página HTML en la página
actual. Cada contexto de navegación tiene su propia historia, sesión y documento activo. El
contexto de navegación que incluye el contenido implícito se llama contexto de navegación
principal. El contexto de navegación de nivel superior (que no tiene padre) es típicamente
la ventana del navegador
</iframe>
7. Video Lightbox JS es un programa gratuito que te ayuda a integrar fácilmente vídeo al sitio
web, página web o blog, en unos pocos clics sin tener que escribir una sola línea de código.
Recursos
Revisa los siguientes enlaces para ampliar los conceptos vistos en esta unidad:
o https://developer.mozilla.org/es/docs/Web/HTML/UsandoaudioyvideoconHTML5
o http://ocw.uv.es/ingenieria-y-arquitectura/programacionmultimedia/t2-3-html5.pdf
o https://developer.mozilla.org/es/docs/Web/HTML/Elemento/iframe
o http://personales.upv.es/moimacar/download/html5.pdf
o https://desarrolladoresweb.org/html5/etiqueta-de-audio-html5/
o https://lenguajehtml.com/html/multimedia/etiquetas-html-de-audio/
o https://www.anerbarrena.com/atributos-audio-html5-5572/
o https://www.campusmvp.es/recursos/post/como-insertar-audio-en-html5.aspx
o https://lenguajehtml.com/html/multimedia/etiquetas-html-de-video/
CSS3 pretende estandarizar dos nuevas características: las transiciones y las animaciones que
actúan sobre el estado de un elemento transformándolo de manera gradual. Con esto se
consiguen efectos muy agradables que mejoran notablemente la experiencia del usuario al
interactuar con la página.
Estas nuevas características son muy modernas por lo que los navegadores las van incluyendo
poco a poco en sus nuevas versiones. De hecho, Internet Explorer todavía no las soporta en su
versión 9, aunque Microsoft asegura que las incluirá a partir de la versión 10.
En este capítulo se explica qué son las transiciones y animaciones en CSS; se menciona sus
características y aprenderá a transformar y animar elementos de las páginas web únicamente
con CSS. Un hecho que antes era impensable sin ayuda de Flash o JavaScript.
Las animaciones son bastante parecidas a las transiciones. Ambas tienen en común que actúan
sobre los valores de las propiedades de un elemento transformándolos gradualmente en otros
valores. Sin embargo, las animaciones ofrecen bastante más control que las transiciones en el
proceso de transformación del elemento.
Las animaciones son algo distintas, ya que se lanzan explícitamente. No se espera a que suceda
un cambio en el estado del elemento como pasaba con las transiciones. Es por ello por lo que,
para usar animaciones se necesita “keyframes”. Estos “keyframes” describirán el
comportamiento que tendrá la animación durante su periodo de ejecución.
Las transiciones únicamente son soportadas por los navegadores: Firefox, Chrome, Safari y
Opera. Internet Explorer (al menos hasta su versión 9) no las soporta. (Quilarque, s.f.)
visibility (visibilidad)
width (longitud y porcentaje)
word-spacing (longitud y porcentaje)
z-index (entero)
zoom (número)
Ejemplos:
En este ejemplo de transiciones se va a aplicar un zoom en un texto. Cuando un usuario pase el
ratón por encima de un texto contenido en un párrafo, el tamaño de letra se incrementa y
cambia el color de la letra.
Primero, define la clase zoom, en dicha clase define la transición del texto. Esta transición es
aplicada para los navegadores Firefox, Chrome, Safari.
Luego, define las propiedades al evento hover de la clase zoom, donde al pasar el cursor sobre
el texto aumenta el tamaño de la letra y cambia el color de la letra.
En la página, define la etiqueta <p> definiendo la clase zoom, para aplicar el zoom al texto
redactado dentro del párrafo <p>.
Etiqueta
<p>
Presentación inicial
El siguiente ejemplo de transición es aplicado a las imágenes. Produce una transición en las
propiedades de las imágenes: width, height y border cuando el usuario pase el mouse por
encima de la imagen.
A continuación, define las propiedades del evento hover de la imagen, tal como se muestra.
En la página, define la etiqueta <img> definiendo la clase growth, para aplicar el zoom a la
imagen.
Las transformaciones es uno de los elementos más interesantes que se introducen en CSS3 para
convertir el lenguaje de hojas de estilo en un sistema capaz de realizar todo tipo de efectos
visuales, incluido 2D y 3D, siendo estas últimas considerablemente más complejas al tener en
cuenta los tres ejes de coordenadas.
Ejemplo:
En este ejemplo de transición es aplicado a las imágenes. El objetivo es que se produzca una
transformación aumentando la escala de las imágenes 50% más cuando el usuario pase el mouse
por encima de la imagen.
A continuación, define las propiedades del evento hover de la imagen, donde al pasar el cursor
sobre la imagen, esta aumentara su tamaño 50% más.
En la página, define la etiqueta <img> definiendo la clase growth, para aplicar el zoom a la
imagen.
Al colocar el cursor
Presentación inicial sobre la imagen, esta
se agranda 50% más
LABORATORIO 1
Presiona F5 para visualizar el proceso de la animación, al pasar el mouse sobre las imágenes de
las redes sociales, éstas girarán en su eje Y.
En el CSS define las reglas para el selector de bloque <section>, en dicho bloque se visualiza
como una cuadrícula formada por dos filas y tres columnas. Define el selector de bloque
<article>, el cual oculta los elementos que estén fuera de su dimensión. Define el selector de
class: img-article y su evento hover para dar animación al elemento <img>.
Al pasar el mouse sobre el bloque <article>, la imagen se contrae y se muestra el texto, tal como
se muestra.
Resumen
1. CSS3 pretende estandarizar dos nuevas características: las transiciones y las animaciones
que actúan sobre el estado de un elemento transformándolo de manera gradual. Con esto
se consiguen efectos muy agradables que mejoran notablemente la experiencia del usuario
al interactuar con la página.
3. Para aplicar una transición sobre un determinado elemento, se debe tener en cuenta las
siguientes propiedades: transition-property: determina la(s) propiedad(es) a ser animadas;
puede ser cualquier propiedad CSS. Transition-duration: indica la duración de la animación
del inicio al fin en segundos. Por defecto el valor es 0. Transition-timing-function: especifica
la velocidad que se desarrollará la transición utilizando las llamadas curvas de Bézier. Así se
puede programar la transición para que empiece a una velocidad, luego frene y después
acelere o dar movimiento. Transition-delay: tiempo en que la animación debe pausarse
antes de comenzar. Por defecto es 0. Transition: permite unificar todas las propiedades
anteriores en una sola.
4. Las animaciones son bastante parecidas a las transiciones. Ambas tienen en común que
actúan sobre los valores de las propiedades de un elemento transformándolos
gradualmente en otros valores. Sin embargo, las animaciones ofrecen bastante más control
que las transiciones en el proceso de transformación del elemento. Las animaciones son
algo distintas, ya que se lanzan explícitamente. No se espera a que suceda un cambio en el
estado del elemento como pasaba con las transiciones. Es por ello por lo que, para usar
animaciones se necesita “keyframes”. Estos “keyframes” describirán el comportamiento
que tendrá la animación durante su periodo de ejecución.
6. De las transformaciones de CSS3 en 2D, las más usadas son: rotate, la cual permite rotar un
elemento dándole un ángulo de giro en grados. skew: desplazamiento de los ejes
horizontales. scale, permite escalar un elemento, toma valores positivos y negativos y se le
pueden poner decimales. translate, permite trasladar un elemento a la vez en el eje de las
X y de las Y, dándole las coordenadas iniciales y finales.
Recursos
Puede revisar los siguientes enlaces para ampliar los conceptos vistos en esta unidad:
o http://www.csslab.cl/2011/01/31/animaciones-y-transformaciones-con-css3/
o http://www.desarrolloweb.com/articulos/transiciones-css3.html
o http://www.esandra.com/transformaciones-css3-transiciones-animaciones-css3
o http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=CSS3TransicionesAnimacio
nes
UNIDAD
5
PROGRAMACIÓN BÁSICA EN LENGUAJE
JAVASCRIPT
LOGRO DE LA UNIDAD DE APRENDIZAJE
Al término de la unidad, el alumno diseña y construye páginas para un sitio web
incorporando el lenguaje JavaScript y librerías para realizar efectos y animaciones.
TEMARIO
5.1 Tema 9 : Fundamentos de JavaScript
5.1.1 : Introducción al JavaScript
5.1.2 : Entradas y salidas
5.1.3 : Manejo del DOM y selectores
5.1.4 : Creación de funciones
ACTIVIDADES PROPUESTAS
Los alumnos diseñan páginas web incorporando el lenguaje JavaScript para realizar
efectos y animación.
El lenguaje fue inventado por Brendan Eich en la empresa Netscape Communications, que es la
que fabricó los primeros navegadores comerciales de Internet. (WikiWebDesign, s.f.) Apareció
por primera vez en el producto de Netscape llamado Netscape Navigator 2.0. Los autores
inicialmente lo llamaron Mocha y más tarde LiveScript pero fue rebautizado como JavaScript en
un anuncio conjunto entre Sun Microsystems y Netscape, el 4 de diciembre de 1995.
Presentando las siguientes versiones:
En HTML, el código JavaScript se inserta entre las etiquetas <script> y </script> que pueden ser
colocadas tanto en el <head> como en la sección <body>. Se recomienda Colocar el script en la
parte inferior del elemento <body> pues mejora la velocidad de visualización, porque en algunos
casos la interpretación ralentiza la visualización.
Las instrucciones deben terminan con “;” aunque JavaScript es muy flexible al respecto.
Ejemplo:
El código a utilizar en nuestras páginas también se puede colocar en archivos externos los cuales
tendrán la extensión .js. siendo este uso recomendable cuando se usará el mismo código en
páginas web diferentes.
Para usar un archivo externo, se debe colocar el nombre y la ruta del archivo script en el atributo
src de la etiqueta <script>:
Esta función se utiliza para mostrar mensajes o datos en un cuadro de diálogo predefinido.
Figura 251: Código de resultado del uso de la instrucción write sobre una página
Fuente. – Elaboración propia
Esta función se utiliza para solicitar el ingreso de un valor mediante un cuadro de diálogo con
un mensaje.
El valor ingresado con esta función se captura como cadena o texto por lo que deberá ser
convertido usando las funciones parseInt(cadena) o parseFloat():
La instrucción confirm(cadena)
Muestra un diálogo muy útil para confirmar acciones con las opciones Aceptar y Cancelar, el
valor devuelto de cada botón será un valor booleano (true o false respectivamente)
Figura 254: Ejemplo del uso del diálogo confirm y muestra su resultado al pulsar uno de los botones
Fuente. – Elaboración propia
Acorde al W3C el DOM o Modelo de Objetos del Documento es una interfaz para documentos
validos HTML que define la estructura lógica de los documentos y el modo en que se accede y
manipula.
El Modelo de Objetos del Documento (DOM) permite ver el mismo documento de otra manera,
describiendo el contenido del documento como un conjunto de objetos que un programa
JavaScript puede actuar sobre ellos.
Una de las tareas habituales en la programación de aplicaciones web con JavaScript consiste en
la manipulación de las páginas web. De esta forma, es habitual obtener el valor almacenado por
algunos elementos (por ejemplo, los elementos de un formulario), crear un elemento (párrafos,
<div>, etc.) de forma dinámica y añadirlo a la página, aplicar una animación a un elemento (que
aparezca/desaparezca, que se desplace, etc.).
Todas estas tareas habituales son muy sencillas de realizar gracias a DOM. Sin embargo, para
poder utilizar las utilidades de DOM, es necesario “transformar” la página original. Una página
HTML normal no es más que una sucesión de caracteres, por lo que es un formato muy difícil de
manipular. Por ello, los navegadores web transforman automáticamente todas las páginas web
en una estructura más eficiente de manipular.
Esta transformación la realizan todos los navegadores de forma automática y nos permite
utilizar las herramientas de DOM de forma muy sencilla. El motivo por el que se muestra el
funcionamiento de esta transformación interna es que condiciona el comportamiento de DOM
y por tanto, la forma en la que se manipulan las páginas.
DOM transforma todos los documentos HTML en un conjunto de elementos llamados nodos,
que están interconectados y que representan los contenidos de las páginas web y las relaciones
entre ellos. Por su aspecto, la unión de todos los nodos se llama “árbol de nodos”. (Tutoriales
En Línea, 2021)
Figura 255: Ejemplo de una página HTML, su visualización y su estructura como DOM
Fuente. – Elaboración propia
En el esquema anterior, cada rectángulo representa un nodo DOM y las flechas indican las
relaciones entre nodos.
La raíz del árbol de nodos de cualquier página HTML siempre es la misma: un nodo de tipo
especial denominado “Documento”.
A partir de ese nodo raíz, cada etiqueta HTML se transforma en un nodo de tipo “Elemento”. La
conversión de etiquetas en nodos se realiza de forma jerárquica. De esta forma, del nodo raíz
solamente pueden derivar los nodos HEAD y BODY. A partir de esta derivación inicial, cada
etiqueta HTML se transforma en un nodo que deriva del nodo correspondiente a su “etiqueta
padre”.
La transformación de las etiquetas HTML habituales genera dos nodos: el primero es el nodo de
tipo “Elemento” (correspondiente a la propia etiqueta HTML) y el segundo es un nodo de tipo
“Texto” que contiene el texto encerrado por esa etiqueta HTML.
Si los elementos son anidados de manera inadecuada pueden generarse problemas, véase lo
siguiente:
El árbol que resulta de esto se encuentra incorrectamente anidado del todo, por tanto, generará
errores inesperados en los navegadores. Manteniendo su HTML válido se pueden evitar tales
problemas
El DOM permite un acceso a la estructura de una página HTML mediante el mapeo de los
elementos de esta página en un árbol de nodos. Cada elemento se convierte en un nodo y cada
porción de texto en un nodo de texto. Para comprender más fácilmente véase el siguiente
ejemplo:
<body>
<p>Esto es un párrafo que contiene <a href="#">un enlace<
/a> en el medio. </p> <ul>
<li>Primer punto en la lista</li>
<li>Otro punto en la lista</li>
</ul>
</body>
Como puede verse, el elemento <a> se encuentra localizado dentro de un elemento <p> del
HTML, convirtiéndose en un nodo hijo, o simplemente hijo del nodo <p>, de manera similar <p>
es el nodo padre. Los dos nodos li son hijos del mismo padre, llamándose nodos hermanos o
simplemente hermanos.
Afortunadamente, JavaScript permite acceder a cada uno de los elementos de una página
utilizando tan sólo algunos métodos y propiedades.
Método Descripción
getElementById Método que devuelve el elemento de la página XHTML
cuya etiqueta sea igual que el parámetro que se le pasa
a la función.
getElementsByTagName Método que devuelve todos los elementos de la página
XHTML cuya etiqueta sea igual que el parámetro que
se le pasa a la función.
getElementsByClassName Método que devuelve todos los elementos de la página
XHTML cuya clase sea igual que el parámetro que se le
pasa a la función.
querySelector Método que devuelve el primer elemento del
documento (utilizando un recorrido primero en
profundidad preordenado de los nodos del
documento) que coincida con el grupo especificado de
selectores.
<p>
<a id="contacto" href="contactos.html">Contáctenos</a>
</p>
<script>
var elementoContacto = document.getElementById("contacto"
);
</script>
<ul>
<li><a href="editorial.html">Editorial</a></li>
<li><a href="semblanza.html">Autores</a></li>
<li><a href="noticias.html">Noticias</a></li>
<li><a href="contactos.html">Contáctenos</a></li>
</ul>
<script>
var hipervinculos= document.getElementsByTagName("a");
</script>
El valor de la variable hipervínculos es una colección de elementos <a>. Las colecciones son
arreglos pudiéndose acceder a cada elemento a través de la ya conocida notación con corchetes.
Los elementos devueltos por getElementsByTagName serán ordenado según el orden que
aparezcan en el código fuente. Por tanto, para el caso anterior quedaría así:
Existen varios elementos en un documento HTML que pueden ser accedidos de otras maneras.
El elemento body de un documento puede accederse a través de la forma document.body,
mientras que el conjunto de todos los formularios en un documento puede encontrase en
document.forms, así mismo el conjunto de todas las imágenes sería mediante
document.images.
Actualmente la mayoría de los navegadores soportan esto métodos, aun así, es recomendable
el uso del método getElementsByTagName, véase el siguiente ejemplo para acceder al
elemento body:
<script>
var body = document.getElementsByTagName("body")[0];
</script>
<p class="prueba">...</p>
<p class="especial">...</p>
<p>...</p>
<script>
var parrafoEspecial = document.getElementsByClassName(
"especial");
</script>
Función querySelector() Devuelve el primer elemento del documento que coincida con el grupo
especificado de selectores, La cadena de caracteres que se pasa como argumento a
querySelector debe seguir la sintaxis CSS.
<script>
element = document.querySelector(selectores);
</script>
Una función no es más que un bloque de enunciados que componen un comportamiento que
puede ser invocado las veces que sea necesario.
Hay que poner especial atención a la hora de crear las funciones, para no repetir los nombres,
principalmente porque esto no genera errores en JavaScript, y solo funcionaría la última de
ellas.
Así también, al momento en que se invoca la función generaría un error si ésta aún no ha sido
definida.
Sintaxis general:
function nombre_de_la_función(){
// enunciados a ejecutar
}
Figura 256: Creación de 2 funciones que cambian la imagen y regresan a su valor original, asignando su ejecución a una etiqueta
<a> al pasar el puntero del mouse sobre el enlace y retirando el puntero
Fuente. – Elaboración propia
Figura 257: Creación de 2 funciones que cambian la imagen y regresan a su valor original, asignando su ejecución a una etiqueta
<a> al hacer clic
Fuente. – Elaboración propia
Funciones y argumentos
Podemos desear que una función ejecute enunciados usando una serie de valores que no
hayamos definido dentro de la misma, sino que los reciba de otra función o enunciado. Esos
valores son los argumentos o parámetros, que se especifican entre los paréntesis que van tras
el nombre de la función, y se separan por comas:
function sumar(x,y){
var total = x + y;
alert(total);
}
Sobre los argumentos hay que recordar las respuestas a tres preguntas:
¿Qué ocurre si se envía a una función menos argumentos que los que se han
especificado?
Los argumentos que no han recibido un valor adoptan el de undefined.
¿Qué ocurre si se envía a una función más argumentos que los que se han especificado?
Los argumentos que sobran son ignorados.
¿Cuántos argumentos se pueden especificar como máximo?
255.
Figura 258: Ejemplo de función con parámetros asignado al botón procesar que lee 2 valores
Fuente. – Elaboración propia
Esta función permite la ejecución de una función después de cierta cantidad de tiempo en
milisegundos.
Figura 259: Ejemplo de función que se ejecuta después de cierto intervalo de tiempo, cambiando el color del texto
Fuente. – Elaboración propia
LABORATORIO 1
Definiendo la programación.
Crea el archivo 208nímate.js, en la carpeta js y enlázalo usando la etiqueta de script
En dicho archivo implementamos el proceso para imprimir la fecha, declare variables para
almacenar la fecha, el día, mes y año; luego imprima los valores en el selector de id “pf”, tal
como se muestra.
Para ejecutar la página web, seleccionar la pestaña pagina2.html, y presiona la tecla F5, donde
se visualiza la fecha.
A continuación, implementamos el proceso para imprimir la hora. Defina la función reloj() el cual
imprima en el selector de id “ph” la hora por cada segundo, utilizando setTimeout, tal como se
muestra.
Ejecuta el método asignando al atributo “onload” el método reloj().
Para ejecutar la página web, seleccionar la pestaña pagina1.html y presiona la tecla F5.
LABORATORIO 2
Implementa una página web, donde al cargar la página (load), visualizamos una ventana de
Bienvenida, y al cabo de 5 segundos, la ventana se cierra.
Dada la página1.html, se debe mostrar una ventana cuyo título es Bienvenida y al cabo de 5
segundos se cierra.
Definiendo la programación
Crea el archivo codigo2.js, implementamos una función “onload” de Window para visualizar el
elemento <div> de id “ventana”.
Declare dos variables las cuales almacenan el espacio, en píxeles, que está ocupando la
ventana del navegador: outerWidth y outerHeight (Window).
Resumen
1. JavaScript es un lenguaje interpretado orientado a las páginas web, con una sintaxis
semejante a la del lenguaje Java.
2. Las instrucciones JavaScript para solicitar datos son prompt y el confirm. Las instrucciones
para mostrar datos son alert y document.write.
3. El DOM permite un acceso a la estructura de una página HTML mediante el mapeo de los
elementos de esta página en un árbol de nodos. Cada elemento se convierte en un nodo y
cada porción de texto en un nodo de texto.
4. Los atributos que le son asignados a las etiquetas HTML están disponibles como propiedades
de sus correspondientes nodos en el DOM. Las propiedades de estilo pueden ser aplicadas
a través del DOM.
5. Cada atributo CSS posee una propiedad del DOM equivalente, formándose con el mismo
nombre del atributo CSS pero sin los guiones y llevando la primera letra de las palabras a
mayúsculas.
6. Los principales métodos que permiten acceder a los elementos de una página HTML son:
Recursos
Puede revisar los siguientes enlaces para ampliar los conceptos vistos en esta unidad:
o http://librosweb.es/libro/javascript/capitulo_5/ejercicios_sobre_dom.html
o https://developer.mozilla.org/es/docs/HTML/HTML5/Forms_in_HTML5
o http://librosweb.es/libro/xhtml/capitulo_8.html
o http://www.genbetadev.com/desarrollo-web/introduccion-a-los-formularios-de-html5-ii
jQuery es software libre y de código abierto, posee un doble licenciamiento bajo la Licencia MIT
y la Licencia Pública General de GNU v2, permitiendo su uso en proyectos libres y privados.2
jQuery, al igual que otras bibliotecas, ofrece una serie de funcionalidades basadas en JavaScript
que de otra manera requerirían de mucho más código, es decir, con las funciones propias de
esta biblioteca se logran grandes resultados en menos tiempo y espacio.
jQuery es un conjunto de librerías JavaScript que han sido diseñadas específicamente para
simplificar el desplazamiento de un documento HTML, la animación, la gestión de eventos y las
interacciones Ajax.
Con CSS podemos hacer declaraciones de estilo sobre los elementos HTML, para esto el W3C
(World Wide Web Consortium) ha definido una serie de selectores los cuales siguen el siguiente
formato:
JQuery hace uso de estos selectores para interactuar con el DOM, por esta razón es importante
que el alumno comprenda CSS.
a[href^="mailto:"] { ... }
a[href$=".html"] { ... }
h1[title*="capítulo"] { ... }
Otro de los nuevos selectores de CSS 3 es el “selector general de elementos hermanos”, que
generaliza el selector adyacente de CSS 2.1. Su sintaxis es elemento1 ~ elemento2 y selecciona
el elemento2 que es hermano de elemento1 y se encuentra detrás en el código HTML. En el
selector adyacente la condición adicional era que los dos elementos debían estar uno detrás de
otro en el código HTML, mientras que ahora la única condición es que uno esté detrás de otro.
<h1>...</h1>
<h2>...</h2>
<p>...</p>
<div>
<h2>...</h2>
</div>
<h2>...</h2>
El primer selector (h1 + h2) sólo selecciona el primer elemento <h2> de la página, ya que es el
único que cumple que es hermano de <h1> y se encuentra justo detrás en el código HTML. Por
su parte, el segundo selector (h1 ~ h2) selecciona todos los elementos <h2> de la página salvo
el segundo. Aunque el segundo <h2> se encuentra detrás de <h1> en el código HTML, no son
elementos hermanos porque no tienen el mismo elemento padre.
Los pseudo-elementos de CSS 2.1 se mantienen en CSS 3, pero cambia su sintaxis y ahora se
utilizan :: en vez de : delante del nombre de cada pseudo-elemento:
Las mayores novedades de CSS 3 se producen en las pseudo-clases, ya que se añaden 12 nuevas,
entre las cuales se encuentran:
Elemento:empty, selecciona el elemento indicado pero con la condición de que no tenga ningún
hijo. La condición implica que tampoco puede tener ningún contenido de texto.
/* Las siguientes reglas alternan cuatro estilos diferentes para los párrafos */ p:nth-child(4n+1)
{ … } p:nth-child(4n+2) { … } p:nth-child(4n+3) { … } p:nth-child(4n+4) { … }
Otro de los nuevos selectores que incluirá CSS 3 es :not(), que se puede utilizar para seleccionar
todos los elementos que no cumplen con la condición de un selector:
Software necesario
Para descargar la librería más actual de jQuery, vaya a la siguiente dirección url:
https://jquery.com/
Una vez descargada y copiada a nuestro proyecto, lo siguiente es incluir la librería en nuestros
documentos HTML, esto lo hacemos, agregando el script dentro de la cabecera del documento.
Teniendo en cuenta, que se debe llamar a la librería antes de cualquier código que utilice JQuery
Además de la descargar podemos utilizar las CDN (Redes de distribución de contenido) que
pueden ofrecer un beneficio de rendimiento al alojar jQuery en servidores repartidos por todo
el mundo. Esto también ofrece la ventaja de que, si el visitante de su página web ya ha
descargado una copia de jQuery desde el mismo CDN, no tendrá que volver a descargarla.
Selectores
Por un selector entendemos en jQuery lo mismo que en CSS: una forma de permitirnos elegir un
elemento (o varios) entre todos los que tenemos en nuestro documento HTML. ¿Para qué? Para
luego poder aplicar sobre los elementos seleccionados diversas funciones.
$('selector')
Es decir, jQuery utiliza el poder de los selectores para acceder de una manera rápida y sencilla a
un elemento o grupo de elementos del DOM (Document Object Model) y luego poder aplicar
sobre los mismos cualquier tipo de instrucción, evento, animación, etc. Por ejemplo, para aplicar
la clase “enlace” a todos los elementos “a” que se encuentren dentro de un elemento “p”.
Haríamos:
$('p a').addClass('enlace');
No importa qué tipo de selector usemos en jQuery: siempre comenzaremos con $().
Prácticamente todo lo que se pueda usar en CSS se puede también incluir entre esos paréntesis
de esta forma $(‘selectores’). De tal manera que por ejemplo podríamos hacer:
Eventos
window.onload = function () {
alert("cargado...");
}
Pero esta sentencia, que carga una funcionalidad en el evento onload del objeto Window, sólo
se ejecutará cuando el navegador haya descargado completamente TODOS los elementos de la
página, lo que incluye imágenes, iFrames, banners, etc. Lo que puede tardar bastante,
dependiendo de los elementos que tenga esa página y su peso.
Pero en realidad no hace falta esperar todo ese tiempo de carga de los elementos de la página
para poder ejecutar sentencias JavaScript que alteren el DOM de la página. Sólo habría que
hacerlo cuando el navegador ha recibido el código HTML completo y lo ha procesado al
renderizar la página. Para ello, jQuery incluye una manera de hacer acciones justo cuando ya
está lista la página, aunque haya elementos que no hayan sido cargados del todo. Esto se hace
con la siguiente sentencia.
$(document).ready(function(){
//código a ejecutar cuando el DOM está listo para reci
bir instrucciones.
});
Por dar una explicación a este código, digamos que con $(document) se obtiene una referencia
al documento (la página web) que se está cargando. Luego, con el método ready() se define un
evento, que se desata al quedar listo el documento para realizar acciones sobre el DOM de la
página.
Existe una forma abreviada para $(document).ready() la cual podrá encontrar algunas veces; sin
embargo, es recomendable no utilizarla en caso de que este escribiendo código para gente que
no conoce jQuery.
$(function() {
console.log('el documento está preparado');
});
function readyFn() {
// código a ejecutar cuando el documento esté listo
}
$(document).ready(readyFn);
Iteración implícita
Los métodos de jQuery que realizan consultas trabajan con iteración implícita, por ejemplo, la
consulta.
$(‘h2’)
Nos devuelve el conjunto de los títulos nivel 2 (h2), ahora si por ejemplo quisiéramos cambiarle
el color a un rojo (#F00), esto lo podríamos hacer de la siguiente manera.
$.each($('h2'), function() {
$(this).css("color", "#F00");
});
En este caso estamos ocupando el método each, en el cual para cada título en la selección se
ejecuta una función la cual le cambia el color.
Existe una forma de hacer esto más “fácil” y es ocupando el comportamiento de iteración
implícita de jQuery (o acción sobre el conjunto), en este caso la función css puede trabajar sobre
toda una selección:
$('h2').css('color','#F00');
Recuerde que la etiqueta <script> debe estar insertada en el <body> después de insertar las
etiquetas h1 y h2. De lo contrario no funcionará.
La habilidad de utilizar métodos en cadena nos permite realizar una gran cantidad de actividades
en una sola sentencia, ahorrando líneas y redundancia de lógica en nuestro código.
Esta capacidad de encadenamiento no sólo nos facilita escribir y realizar de manera concisa
operaciones poderosas que llegan a tener gran alcance, sino que también nos concede una
mejora en la eficiencia, porque los conjuntos envueltos no tienen que ser recalculados cada vez
que deseemos aplicar múltiples comandos o realizar operaciones sobre ellos.
$('h2').css('color','red');
$('h2').text('Cambiando el contenido a todos los elemento
s h2');
Para evitar esta repetición, se puede usar encadenamiento y el nuevo código seria así:
$('h2').css('color','red')
.text('Cambiando el contenido a todos los elementos h2');
$("#box_prueba")
.css("backgroundColor", "red")
.slideUp(2000)
.slideDown(2000);
slideUp y slideDown son métodos para hacer animaciones de desplazamiento con una duración
de 2 segundos.
El siguiente ejemplo aplica diversos formatos css con encadenamiento a todas las etiquetas h1
ubicadas dentro del div con id content, selecciona tercer elemento h1 con el método eq(2), y le
cambia el texto con el método html y el color azul:
$('#content')
.find('h1')
.css('color','red')
.eq(2)
.css('color','blue')
.html('nuevo texto para el tercer elemento h1');
jQuery define una lista de eventos y funciones para la administración de estos, la sintaxis por
defecto para un manejador de evento es de la siguiente forma:
$('Selector').nombreEvento( function(event){
//funcion que administra el evento.
//this es el elemento que disparo el evento.
}
$('Selector').on( function(event){
//funcion que administra el evento.
//this es el elemento que disparo el evento.
}
Aquí es importante resaltar que this contendrá la instancia del elemento que disparo el evento,
por ejemplos si a los enlaces <a> le agregamos el evento click, this contendrá la instancia del
enlace específico sobre del cual hallamos hecho click:
$('a.testClick').click(function(event){
$('.log').
html('<strong>Resultado:</strong> ' + $(this).text());
$('.log').css('color','#F00');
event.preventDefault();
});
jQuery define varios eventos. Para agregar un manejador de dicho evento basta con agregar una
función en la llamada de dicho evento. Esta función puede recibir un argumento, el cual sirve
para obtener información de dicho evento o para cambiar el comportamiento de este. Por
ejemplo, el siguiente código al hacer clic en cualquier enlace con nombre de class testClick,
muestra su mismo texto de enlace en un elemento con class llamado log.
Al hacer clic en el enlace 1, se muestra en el párrafo llamado log el texto del enlace. El método
preventDefault() evita que el enlace habrá la dirección url.
$('p').click(function(){
console.log('click'); //muestra mensaje en la consola
});
$('a.testClick').click(function(){
$('.log').html( '<strong>Resultado:</strong> ' + $(th
is).text());
$('.log').css('color','#F00');
event.preventDefault();
});
$('a.testClick').on('click',function(){
$('.log').html( '<strong>Resultado:</strong> ' + $(t
his).text());
$('.log').css('color','#F00');
event.preventDefault();
});
$('a.testClick').bind('click',function(){
$('.log').html( '<strong>Resultado:</strong> ' + $(th
is).text());
$('.log').css('color','#F00');
event.preventDefault();
});
Manejadores de eventos
JQuery maneja un listado con los distintos manejadores eventos ordenados por los tipos eventos
de ratón, eventos de teclado o cualquiera de los dos.
A continuación, podemos ver una lista de los eventos que se pueden definir en jQuery que tienen
que ver con el mouse. Es decir, cómo definir eventos cuando el usuario realiza diferentes
acciones con el ratón sobre los elementos de la página.
Evento Acción
click() Sirve para generar un evento cuando se produce un clic en un elemento de
la página.
Dblclick() Para generar un evento cuando se produce un doble clic sobre un elemento.
Hover() Esta función en realidad sirve para manejar dos eventos, cuando el ratón
entra y sale de encima de un elemento. Por tanto, espera recibir dos
funciones en vez de una que se envía a la mayoría de los eventos.
Mousedown() Para generar un evento cuando el usuario hace clic, en el momento que
presiona el botón e independientemente de si lo suelta o no. Sirve tanto
para el botón derecho como el izquierdo del ratón.
Mouseup() Para generar un evento cuando el usuario ha hecho clic y luego suelta un
botón del ratón. El evento Mouseup se produce sólo en el momento de
soltar el botón.
Mouseout() Este evento sirve para lo mismo que el evento Mouseout de JavaScript. Se
desata cuando el usuario sale con el ratón de la superficie de un elemento
Mouseover() Sirve para lo mismo que el evento Mouseover de Javascript. Se produce
cuando el ratón está sobre un elemento, pero tiene como particularidad que
puede producirse varias veces mientras se mueve el ratón sobre el
elemento, sin necesidad de haber salido
Toggle() Sirve para indicar dos o más funciones para ejecutar cosas cuando el usuario
realiza clics, con la particularidad que esas funciones se van alternando a
medida que el usuario hace clics.
A continuación, podemos ver una lista de los eventos que se pueden definir en jQuery como
respuesta a la pulsación de teclas del teclado.
Evento Acción
keydown() Este evento se produce en el momento que se presiona una tecla del
teclado, independientemente de si se libera la presión o se mantiene. Se
produce una única vez en el momento exacto de la presión.
Keypress() Este evento ocurre cuando se digita un carácter, o se presiona otro tipo de
tecla. Es como el evento keypress de JavaScript, por lo que se entiende que
keypress() se ejecuta una vez, como respuesta a una pulsación e inmediata
liberación de la tecla, o varias veces si se pulsa una tecla y se mantiene
pulsada.
Keyup() El evento Keyup se ejecuta en el momento de liberar una tecla, es decir, al
dejar de presionar una tecla que teníamos pulsada.
Ahora mostramos varios eventos que pueden producirse tanto por el ratón como por el teclado,
es decir, como resultado de una acción con el ratón o como resultado de presionar teclas en el
teclado.
Evento Acción
Focusin() Evento que se produce cuando el elemento gana el foco de la aplicación,
que puede producirse al hacer clic sobre un elemento o al presionar el
tabulador y situar el foco en ese elemento.
Focusout() Ocurre cuando el elemento pierde el foco de la aplicación, que puede ocurrir
cuando el foco está en ese elemento y pulsamos el tabulador, o nos
movemos a otro elemento con el ratón.
Focus() Sirve para definir acciones cuando se produce el evento focus de JavaScript,
cuando el elemento gana el foco de la aplicación.
Las funciones de efectos son los métodos jQuery que realizan un cambio en los elementos de la
página de manera suavizada, es decir, que alteran las propiedades de uno o varios elementos
progresivamente, en una animación a lo largo de un tiempo.
Por poner un ejemplo, tenemos el método fadeOut(), que realiza un efecto de opacidad sobre
uno o varios elementos, haciendo que éstos desaparezcan de la página con un fundido de opaco
a transparente. El complementario método fadeIn() hace un efecto de fundido similar, pero de
transparente a opaco. Como éstos, tenemos en jQuery numerosos métodos de efectos
adicionales como animate(), sliceUp() y sliceDown(), etc. En la propia documentación del
framework, en el apartado Effects de la referencia del API, podremos ver una lista completa de
estas funciones de efectos.
Cuando invocamos varias funciones de efectos de las disponibles en jQuery, éstas se van
introduciendo en una cola de efectos predeterminada, llamada “fx”. Cada elemento de la página
tiene su propia cola de efectos predeterminada y funciona de manera automática. Al invocar los
efectos se van metiendo ellos mismos en la cola y se van ejecutando automáticamente, uno
detrás de otro, con el orden en el que fueron invocados.
Las funciones de efectos, una detrás de otra, se invocan en un instante, pero no se ejecutan
todas a la vez, sino que se espera que acabe la anterior antes de comenzar la siguiente. Por
suerte, jQuery hace todo por su cuenta para gestionar esta cola.
Como decimos, cada elemento de la página tiene su propia cola de efectos y, aunque incluso
podríamos crear otras colas de efectos para el mismo elemento, en la mayoría de los casos
tendremos suficiente con la cola por defecto ya implementada.
Método fadeOut()
Este método hace que el elemento que lo recibe desaparezca de la página a través del cambio
de su opacidad, haciendo una transición suavizada que acaba con el valor de opacity cero.
Método fadeIn()
El método fadeIn() hace que el elemento que lo recibe aparezca en la página a través del cambio
de su opacidad, haciendo una transición suavizada que acaba con el valor de opacity 1. Este
método sólo podremos observarlo si el elemento sobre el que lo invocamos era total o
parcialmente transparente, porque si era opaco al hacer un fadeIn() no se advertirá ningún
cambio de opacidad.
Método fadeTo()
El tercer método para hacer efectos de fundidos es fadeTo() y es el más versátil de todos, puesto
que permite hacer cualquier cambio de opacidad, a cualquier valor y desde cualquier otro valor.
Este método recibe la duración deseada para el efecto, el valor de opacidad al que queremos
llegar y una posible función callback.
<ul id="milista">
<li id="e1">Elemento 1</li>
<li id="e2">Segundo elemento</li>
<li id="e3">Tercer LI</li>
</ul>
Como vemos, tanto la lista (etiqueta UL) como los elementos (etiquetas LI) tienen
identificadores (atributos id) para poder referirnos a ellos desde jQuery.
Ahora veamos cómo hacer que la lista desaparezca con un fundido hacia transparente, a partir
de una llamada a fadeOut().
$("#milista").fadeOut();
Como se puede ver, fadeOut() en principio no recibe ningún parámetro. Aunque luego veremos
que le podemos pasar un parámetro con una función callback, con código a ejecutarse después
de finalizado el efecto.
Este sería el código para que la lista vuelva a aparecer, a través de la restauración de su opacidad
con una llamada a fadeIn().
$("#milista").fadeIn();
LABORATORIO 1
Definiendo la programación.
Crea el bloque script y llama a la librería JQuery
Para ejecutar la página web, seleccionar la pestaña pagina1.html y presiona la tecla F5.
LABORATORIO 2
En este laboratorio vamos a manejar eventos a los selectores JQuery para dar una mejor
apariencia y dinamismo de la página html.
Dada la página2.html, se debe mostrar una ventana cuyo título es Bienvenida y al cabo de 5
segundos se cierra.
Definiendo la programación
Llama a la librería de JQuery y crea el archivo codigos.js en la carpeta js y enlaza dicho archivo al
proyecto.
En el sector del header hemos agregado tres imágenes cuyo nombre de clase es “rs”, referente
a las redes sociales. Programe los eventos mouseover() y mouseout() para cambiar la imagen al
pasar el cursor sobre la clase
Programando el carrusel
En el sector del header hemos agregado un grupo de imágenes dentro del bloque <div>
llamado baner. Programe el evento cycle del selector “baner”, para generar el carrusel de las
imágenes.
Resumen
1. JQuery es un conjunto de librerías JavaScript que han sido diseñadas específicamente para
simplificar el desplazamiento de un documento HTML, la animación, la gestión de eventos.
2. Si queremos utilizar JQuery en nuestra página web lo primero será declarar el uso de la
librería.
3. La iteración implícita de JQuery (o acción sobre el conjunto), trabaja sobre toda una
selección.
4. Los métodos para realizar consultas o selección de tipo transversal son find y filter.
Recursos
Puede revisar los siguientes enlaces para ampliar los conceptos vistos en esta unidad:
o http://www.arquitecturajava.com/jquery-find-vs-filter/
o http://www.genbetadev.com/desarrollo-web/introduccion-a-los-formularios-de-html5-ii
Bibliografía
Acera García, M. Á. (2012). CSS3. Anaya Multimedia
Lenguaje CSS. (s.f.). Animaciones CSS. Propiedades para crear animaciones en CSS.
https://lenguajecss.com/css/animaciones/animaciones/
Luján Castillo, J. D. (2016). HTML5, CSS y JAVASCRIPT: crea tu web y apps con el estándar
de desarrollo. Alfaomega. RC Libros.
Rubiales Gómez, M. (2017). Curso de desarrollo web: HTML, CSS y JavaScript. Anaya
Multimedia.