Pagsweb 2

GUÍA DIDÁCTICA
ELABORAR PÁGINAS WEB
MEDIANTE SOFTWARE DE
APLICACIÓN
UNIDAD 2. HTML5 Y CSS
PLANTEL: METEPEC II
ELABORÓ: ACADEMIA DE INFORMÁTICA

REVISÓ: SUBDIRECCIÓN ACADÉMICA

Formato 1.1
Elaborar Páginas Web mediante software de aplicación PÁGINA 2
Unidad 2. HTML5 y CSS CECYTEM METEPEC II. INFORMATICA
Actividad 25. HTML vs. HTML5 (AULA)
1. Lea el siguiente artículo publicado por Fundación wikimedia, Inc. extraído
desde http://es.wikipedia.org/wiki/HTML5#Web_Sem.C3.A1ntica el día
4 de Octubre de 2012.
HTML5
HTML5 (HyperText Markup Language, versión 5) es la quinta revisión
importante del lenguaje básico de la World Wide Web, HTML. HTML5 especifica
dos variantes de sintaxis para HTML: un «clásico» HTML (text/html), la variante
conocida como HTML5 y una variante XHTML conocida como sintaxis XHTML5
que deberá ser servida como XML (XHTML) (application/xhtml+xml).1 2 Esta es
la primera vez que HTML y XHTML se han desarrollado en paralelo.
Todavía se encuentra en modo experimental, lo cual indica la misma W3C;
aunque ya es usado por múltiples desarrolladores web por sus avances, mejoras
y ventajas.
Al no ser reconocido en viejas versiones de navegadores por sus nuevas
etiquetas, se le recomienda al usuario común actualizar a la versión más nueva,
para poder disfrutar de todo el potencial que provee HTML5.
El desarrollo de este lenguaje de marcado es regulado por el Consorcio W3C.
HTML5 establece una serie de nuevos elementos y atributos que reflejan el uso
típico de los sitios web modernos. Algunos de ellos son técnicamente similares a
las etiquetas <div> y <span>, pero tienen un significado semántico, como por
ejemplo <nav> (bloque de navegación del sitio web) y <footer>. Otros elementos
proporcionan nuevas funcionalidades a través de una interfaz estandarizada,
como los elementos <audio> y <video>.
Mejoras en el elemento <canvas>, capaz de renderizar en los navegadores más
importantes (Mozilla, Chrome, Opera, Safari e IE) elementos 3D.
Algunos elementos de HTML 4.01 han quedado obsoletos, incluyendo elementos
puramente de presentación, como <font> y <center>, cuyos efectos son
manejados por el CSS. También hay un renovado énfasis en la importancia del
scripting DOM para el comportamiento de la web.
NOVEDADES
• Incorpora etiquetas (canvas 2D y 3D, audio, video) con codecs para
mostrar los contenidos multimedia. Actualmente hay una lucha entre
imponer codecs libres (WebM + VP8) o privados (H.264/MPEG-‐4 AVC).
• Etiquetas para manejar grandes conjuntos de datos: Datagrid, Details,
Menu y Command. Permiten generar tablas dinámicas que pueden filtrar,
ordenar y ocultar contenido en cliente.
• Mejoras en los formularios. Nuevos tipos de datos (eMail, number, url,
datetime …) y facilidades para validar el contenido sin Javascript.
• Visores: MathML (fórmulas matemáticas) y SVG (gráficos vectoriales). En
general se deja abierto a poder interpretar otros lenguajes XML.
Actualizado el día: 18/10/12 a las: 20:16

• Drag & Drop. Nueva funcionalidad para arrastrar objetos como imágenes.

WEB SEMÁNTICA
• Añade etiquetas para manejar la Web Semántica (Web 3.0): header,
footer, article, nav, time (fecha del contenido), link rel=‘’ (tipo de
contenido que se enlaza).
• Estas etiquetas permiten describir cual es el significado del contenido. Por
ejemplo su importancia, su finalidad y las relaciones que existen. No
tienen especial impacto en la visualización, se orientan a buscadores.
• Los buscadores podrán indexar e interpretar esta meta información para
no buscar simplemente apariciones de palabras en el texto de la página.
• Permite incorporar a las páginas ficheros RDF / OWL (con meta
información) para describir relaciones entre los términos utilizados.
• Ademas de ofrecer versatilidad en el manejo y animación de objetos
simples, imágenes etc.
• NUEVAS APIS Y JAVASCRIPT
• API para hacer Drag & Drop. Mediante eventos.
• API para trabajar Off-‐Line. Permite descargar todos los contenidos
necesarios y trabajar en local.
• API de Geoposicionamiento para dispositivos que lo soporten.
• API Storage. Facilidad de almacenamiento persistente en local, con bases
de datos (basadas en SQLite) o con almacenamiento de objetos por
aplicación o por dominio Web (Local Storage y Global Storage). Se
dispone de una Base de datos con la posibilidad de hacer consultas SQL.
• WebSockets. API de comunicación bidireccional entre páginas. Similar a
los Sockets de C.
• WebWorkers. Hilos de ejecución en paralelo.
• System Information API. Acceso al hardware a bajo nivel: red, ficheros,
CPU, Memoria, puertos USB, cámaras, micrófonos … muy interesante pero
con numerosas salvedades de seguridad.

2. Ahora, elabore un resumen de una cuartilla de los puntos más
importantes del artículo.
3. Cree un cuestionario con 10 preguntas acerca de los conceptos que
desconozca de la lectura.
4. Investigue los conceptos y resuelva el cuestionario realizado en el paso
anterior.

Actividad 26. Vídeo (AULA / TAREA)
1. Lea el siguiente artículo publicado por Fundación wikimedia, Inc. extraído
desde http://es.wikipedia.org/wiki/Formato_de_archivo_informático el
día 4 de Octubre de 2012.
FORMATOS DE VÍDEO
Modo en el que los vídeos guardan los datos de un archivo de vídeo con el fin de
que puedan ser interpretados por el ordenador. Normalmente, un vídeo es una
colección de imágenes acompañada de sonido; la información de uno y otro tipo
se suele grabar en pistas separadas que luego se coordinan para su ejecución
simultánea.
Para transformar la información analógica de las imágenes en digital se usan los
códec (acrónimo de codificador/decodificador). En muchos casos estas
utilidades analizan los fotogramas y emplean algoritmos para comprimir sus
datos. La compresión puede ser temporal, en la que se analiza un fotograma y se
guarda la diferencia entre este y el que le precede, o espacial, en la que se
eliminan los datos de los píxeles que no cambian en cada fotograma.
Existen tres formatos de vídeo de gran implantación: el QuickTime Movie (MOV),
el AVI y el correspondiente al estándar MPEG. El formato QuickTime Movie
(MOV), creado por Apple, es multiplataforma y en sus versiones más recientes
permite interactuar con películas en 3D y realidad virtual. El AVI (Audio Video
Interleaved, audio vídeo intercalado) es un formato también multiplataforma.
Tanto *.avi como *.mov son contenedores de audio y vídeo con lo que son
formatos de archivo. A este archivo habría que especificarle el tipo de video o
audio que está conteniendo y que puede ser sin compresión o con la compresión
soportada por dicho fichero como pueden ser para los *.avi el divx, Dv-‐pal, etc y
para *.mov el sorenson, H264, etc. El formato correspondiente al estándar MPEG
(Moving Pictures Experts Group) produce una compresión de los datos con una
pequeña pérdida de la calidad; desde su creación, se ha definido el MPEG-‐1,
utilizado en CD-‐ROM y Vídeo CD, el MPEG-‐2, usado en los DVD de Vídeo y la
televisión digital, y el MPEG-‐4, que se emplea para transmitir vídeo e imágenes
en ancho de banda reducido; es un formato adecuado para distribuir multimedia
en la Web. El formato MPEG4 es la base de actuales formatos como el divx xvid o
el H264 siendo este último (H264) un codec tan potente que soporta vídeos de
gran formato y calidad excelente con anchos de banda muy reducidos.
El desarrollo de Internet ha propiciado formatos que permiten visualizar vídeos
a través de la red, sin tener que descargar previamente el archivo completo; para
esta finalidad, la empresa RealNetworks ha establecido RealVideo y Microsoft su
formato de vídeo correspondiente al Windows Media Player (Reproductor de
Windows Media), ambos con gran futuro en el desarrollo de la distribución de
vídeo en tiempo real a través de Internet.
Para ver los vídeos en el ordenador es necesario tener instalado el software de
reproducción adecuado. Actualmente suelen facilitarlo las distintas empresas,
bien con el sistema operativo, bien como una herramienta a la que se puede
acceder de forma gratuita.

2. Elabore una lista de los diferentes formatos de vídeo que menciona el
artículo anterior.
3. Posteriormente, lea el siguiente artículo que habla acerca de los cambios
en el vídeo en HTML5 escrito por Carlos Franco extraído desde
http://webstupendo.com/tecnologia/62-‐20120327-‐el-‐fabuloso-‐html5-‐el-‐
elemento-‐video el día 4 de Octubre de 2012.
EL NUEVO ELEMENTO <VIDEO> DE HTML5
Antes de la introducción de HTML5 no era posible reproducir video sobre una

página web sin la ayuda de software complementario instalado en el navegador
(plug-‐in), tal como Flash, QuickTime, RealPlayer, etc.
Hasta hace pocos años, aún en la llamada "Era de la PC" (de la cual
supuestamente estamos saliendo) esto no era un gran problema, ya que la
mayoría del contenido de video se encontraba en línea en FLV o F4V, formatos
desarrollados por Adobe para ser reproducidos utilizando Flash, plug-‐in
presente en más del 90% de las PC (Computadoras Personales) del mundo. Sin
embargo, con la llegada de dispositivos móviles, ligeros, de bajo consumo de
energía y gran poder gráfico, así como la necesidad de contar con un mejor y más
expresivo lenguaje estándar en web y conflictos de interés de grandes jugadores
de la industria tecnológica, la hegemonía de Flash como contenedor de video
comenzó a verse amenazada.
Además de las grandes virtudes que llevaron a Flash a la cima del desarrollo de
las RIA (Rich Internet Applications), también se ha caracterizado por algunos
problemas de desempeño, así como alta demanda de recursos computacionales.
Esto fue el pretexto ideal para que Apple decidiera no dar soporte a la tecnología
de Adobe en el sistema operativo (iOS) de sus nuevos dispositivos móviles,
comenzando en 2007 con el iPhone y en 2010 con la iPad. Apple argumentaba
que Flash no era una tecnología moderna y que arrastra problemas de eficiencia
de su plataforma de origen, la PC. Esto desató una guerra de descalificaciones por
parte de Adobe, la cual replicaba que la verdadera razón detrás de esta decisión
era puramente de negocios, ya que Flash atentaba contra la naciente App Store.
¿Tú qué piensas?
Ahora bien, si Apple no iba a incluír a Flash en sus dispositivos móviles, tenía que
contar con un reemplazo para cubrir los "huecos" que dejaría el no contar con el
plug-‐in de Adobe en el navegador de Internet de iOS, Safari. Este sustituto sería
HTML5.
El estándar HTML5 define varios elementos nuevos, entre los cuales se

encuentra <video>, el cual brinda la enorme ventaja de incrustar video en una
página web sin depender de la instalación de software de terceros en el
navegador.
El elemento <video> cuenta con un "sistema de detección de soporte" propio,

basado en fallbacks (reservas). Este funciona declarando dentro del elemento
varios formatos del mismo video, los cuales serán revisados uno a uno y en
orden hasta que el navegador encuentre uno para el cual cuente con el soporte y
así poderlo reproducir. Al agotar estas opciones, incluso es posible incrustar un

objeto que contenga el reproductor de Flash. Si el navegador no es capaz de
reproducirlo, se puede (o más bien, se debe) incluír un mensaje que avise al
usuario de esta situación.
Por ejemplo, el siguiente fragmento de HTML5 representado por el elemento de
<video> mostrará dentro de la página que lo contiene un video 720p. Primero
intentará reproducirlo en su formato OGG; si el navegador no soporta el formato,
tratará con WebM. De no ser capaz de entender el formato, probará con MPEG-‐4.
Por último, si el navegador no reconoce a ninguno de los contenedores (la única
forma de que esto suceda, es que el navegador no soporte HTML5), se mostrará
la leyenda "Tu navegador no soporta reproducción de video.".

<VIDEO WIDTH=”1280” HEIGHT=”720” CONTROLS=”CONTROLS”>
<SOURCE SRC=”VIDEO/MOVIE.OGG” TYPE=”VIDEO/OGG” />
<SOURCE SRC=”VIDEO/MOVIE.WEBM” TYPE=”VIDEO/WEBM” />
<SOURCE SRC=”VIDEO/MOVIE.MP4” TYPE=”VIDEO/MP4” />

TU NAVEGADOR NO SOPORTA REPRODUCCIÓN DE VIDEO.
</VIDEO>

ATRIBUTOS DE LA ETIQUETA VIDEO.
El elemento <video> puede utilizar cualquiera de los siguientes atributos
específicos:
Atributo Valor Descripción

width pixeles Define el ancho del reproductor de video.
height pixeles Define el alto del reproductor de video.
Establece si los controles de reproducción deben de ser
controls controls
mostrados.
Define si el video debe de comenzar su reproducción tan
autoplay autoplay
pronto esté listo.
Especifica que el video debe de reproducirse de forma
loop loop
cíclica.
muted muted Establece que el audio debe de estar en silencio.
auto
Preload Especifica si el video debe de ser cargado al momento de
meta
carga de la página y de qué forma debe de hacerlo.
none
Especifica la imagen que debe de mostrarse antes de que
poster URL
el video comience su reproducción.


"ANATOMÍA" DE UN VIDEO DIGITAL
Un video digital está compuesto de diversas pistas o tracks, de las cuales una es
de video y una o más de audio. Pistas de audio y video se encuentran
encapsuladas en contenedores que definen el formato del video y son codificadas
mediante algoritmos llamados codecs. La palabra codec proviene de la
contracción de las palabras coder y decoder (codificador y decodificador),
aunque algunos autores mencionan que proviene de compresor y descompresor.
También se denomina codec al software o hardware encargado de realizar la
codificación y decodificación de la pista.
Probablemente has visto alguna vez archivos de video de tipo AVI, MOV, MP4,
M4V u otro similar; estos formatos son contenedores de video. Existen diversas
aplicaciones reproductoras de video que dan soporte a uno o más de estos
formatos (por ejemplo, Windows Media Player da soporte principalmente a AVI
y QuickTime de Apple que es capaz de reproducir videos en MOV, MP4 y otros),
sin embargo eso no es suficiente para poder reproducir un video, y para esto, es
necesario que la aplicación cuente también con el codec apropiado, es decir, con
el mismo con el cual fue codificado.
CONTENEDORES
Como se mencionó antes, un contenedor define el formato y contiene las pistas
de video y audio.
MP4 (MPEG-‐4 Part 14)

Especificado por el MPEG (Moving Picture Experts Group), este estándar se
encuentra presente en diversos medios, desde sistemas de TV por cable,
reproductores de discos Blu-‐ray, smartphones, en películas y series de TV de
compra y renta en la tienda iTunes de Apple, entre otros. HTML5 soporta este
contenedor en varios de los navegadores principales (ver tabla Eligiendo
Formatos y Codecs), generalmente con una extensión .mp4 o .m4v.
OGG
Este estándar abierto está soportado por HTML5 en varios navegadores bajo la
extensión .ogv. OGG soporta video codificado con Theora y audio con Vorbis.
WebM
La especificación de este contenedor, apoyada por Google, es abierta y utiliza
también Vorbis para codificar sus pistas de audio y el codec VP8 para video.
WebM es soportado por HTML5 en varios navegadores modernos, utilizando la
extensión .webm.
Con HTML5 se presentan nuevas opciones que abren más la web, al permitir que
desde el código de html se pueda agregar un video con la etiqueta <video> y que
este se reproduzca sin necesidad de conectores (plugins) adicionales en el
navegador.
El problema que surge con esta nueva implementación es que se debe defirnir un
formato estándar para los videos, para que cualquier navegador pueda dar

soporte al códec del video y reproducir cualquier video que se incruste con en
una página.
Así los candidatos eran el códec H.264 y el Theora, el primero de desarrollo
privado, apoyado por Apple, Microsoft y soportado por sus navegadores al igual
que por Chrome. El segundo es de desarrollo abierto, apoyado por Opera y
Firefox.
H.264 se postulaba como una mejor opción que Ogg Theora, por su calidad, no
obstante el hecho de que su ideología es de desarrollo privado dejaba a todos a
merced de los gustos y caprichos de los que controlan el códec. Ogg Theora era la
opción abierta que proporciona un mundo de desarrollo más apegado a
estándares y libre.
Pero con el anuncio en la Conferencia Google I/O 2010 de la liberación del códec
VP8 y bajo el formato Webm, llegan buenas noticias para una web abierta
apegada a los estándares que no esté bajo las disposiciones de los poderosos y
sus imposiciones
FLV
Estándar propiedad de Adobe Systems, utilizado por Flash para aplicaciones
standalone y web. Gran cantidad de sitios web utilizan esta tecnología, entre
otras cosas, para reproducir video; claros ejemplos de esto son Vimeo y
YouTube. Es importante mencionar que con la gran penetración de dispositivos
móviles y ligeros capaces de reproducir video y que no soportan Flash, sitios
como los antes mencionados han extendido su oferta de contenido a otros
formatos, MPEG-‐4 principalmente. FLV no es soportado por HTML5.
AVI
El contenedor AVI (Audio Video Interleave) es propiedad de Microsoft

Corporation. AVI es un formato antiguo que no cuenta con varias de las
características de los contenedores modernos, por ejemplo, el uso de metadatos
estandarizados. Utiliza la extensión .avi y no está soportado por HTML5 en
ningún de los principales navegadores, ni siquiera en Internet Explorer de
Microsoft.
MKV
El estándar MKV (.mkv) o Matroska Video es un formato abierto de contención
de video. No fue diseñado para streaming, por lo tanto no está soportado en
HTML5 por ningún navegador.

PROCESO DE REPRODUCCIÓN
De forma simplista, al intentar reproducir un video, la aplicación reproductora
hará lo siguiente:
Intentará interpretar el formato del contenedor.

Si es capaz de entender el formato, buscará las pistas disponibles de audio y
video.
Adicionalmente, extrae metadatos que indican título, carátula, tamaño de video,
duración, información de sincronización entre audio y video, lenguaje, etc.
Identificará cuáles fueron los codecs que fueron utilizados originalmente para
codificar las pistas de audio y video.
Si la aplicación cuenta con los codecs apropiados, comenzará a aplicarlos sobre
las pistas para decodificarlas. Este último proceso se realiza en tiempo de
reproducción.
Envía la secuencia de imágenes a la pantalla y el audio a los altavoces o
audífonos.

CODECS DE VIDEO PARA HTML5
Los siguientes codecs de video son válidos en HTML5. No todos ellos son
soportados en cada uno de los principales navegadores para PC (Linux,
Windows, OS X) o dispositivos móviles (Android, iOS, Windows Phone).
H.264 (MPEG-‐4 Part 10 o MPEG-‐4 AVC)
El estándar de codificación de video H.264 fue desarrollado por el MPEG (Moving
Picture Experts Group) y es uno de los formatos más utilizados actualmente en
diversas aplicaciones, desde video en sitios web, consolas de videojuegos,
sistemas de TV por cable, películas y series de TV en renta y compra en la tienda
de iTunes, reproductores de Blu-‐ray, etc.
Se encuentra dividido en "perfiles" (profiles) que definen distintas
configuraciones, de acuerdo al objetivo del video. Al jugar con los parámetros de
estas configuraciones, se pueden obtener resultados adhoc para cada dispositivo,
sin embargo, al igual que con cualquier compresor, más calidad significa mayor
peso de archivo y viceversa.
En una PC, la decodificación se realiza mediante software, sin embargo, en otros
dispositivos, esta función la lleva a cabo un procesador dedicado a ello.
La utilización de este códec requiere licencia del MPEG LA Group.
Theora
Basado en VP3, este estándar fue cedido en 2002 a Xiph.org por parte de On2 con
licencia de uso libre (royalty-‐free). Theora está soportado por HTML5 en Mozilla
Firefox, Google Chrome y Opera en un contenedor OGG.
VP8
Al igual que VP3 (después Theora), VP8 fue desarrollado por On2 Technologies,
empresa adquirida por Google en 2010. VP8 es un codec de estándar abierto
utilizado para codificar video usualmente contenido en el formato WebM.

CODECS DE AUDIO PARA HTML5
Los siguientes codecs de audio son válidos en HTML5. No todos ellos son
soportados en cada uno de los principales navegadores para PC (Linux,
Windows, OS X) o dispositivos móviles (Android, iOS, Windows Phone).
AAC (Advanced Audio Coding)
AAC es un estándar de codificación de audio digital utilizado en una gran
variedad de dispositivos, desde reproductores de música, teléfonos, consolas de
videojuegos, tabletas, entre otros. Su impulso más grande vino cuando Apple lo
eligió como el codec para los archivos de audio que vende a través de la tienda de
iTunes. Soporta hasta 48 pistas o canales de sonido a cualquier bit-‐rate. Puede
ser utilizado como pista de audio en un video en conjunto con el codec H.264 en
un contenedor MP4. AAC requiere licencia para su uso.
Vorbis
Vorbis es un codec de estándar libre que se utiliza comúnmente para codificar
sonido dentro de videos de formato OGG y WebM, aunque es más habitual que
sea encontrado en el primero. Vorbis no limita la cantidad de canales que puede
contener.
MP3 (MPEG-‐1 Audio Layer 3)

El estándar de codificación de audio MP3 es uno de los más populares dentro del
mundo de la música digital. Este codec puede ser utilizado también en conjunto
con el H.264 en un contenedor MP4 para reproducir video mediante HTML5 en
ciertos navegadores. Acepta hasta dos pistas de audio y una gran variedad de bit-‐
rates, siendo el máximo 320. El estándar requiere licencia de uso.

ELIGIENDO FORMATOS Y CODECS
La siguiente tabla muestra una relación de los formatos y codecs más
importantes, su aplicación y soporte actual en HTML5:
Extensión Licencia Soporte Nativo
Licencia
Contene de
Codec Tipo de
dor Contene
HTML5 Otros Codec HTML5 Otros
dor
Requier Requier Chrome (3.0+) Reproductores

MP4 .mp4 e AAC Audio e de discos Blu-‐
.mov licencia licencia Safari (3.1+) ray
IE (9.0) iTunes
Requier
.m4v H.264 Video e Android QuickTime
licencia Player
iOS
TV por cable
Safari (3.1+)
MP3 AUDIO Requier Apple TV
e

MP3 AUDIO licencia PS3
Requier IE (9.0) Xbox 360

H.264 Video e
licencia
Vorbis Audio Gratuita Firefox (3.5+)

VLC
OGG .ogv -‐-‐ Gratuita Opera (10.5+)
Theora Video Gratuita XMMS (Linux)
Chrome (3.0+)
Vorbis Audio Gratuita Firefox (4.0+)
Opera (10.6+)
WebM .webm -‐-‐ Gratuita VLC
VP8 Video Gratuita Chrome (3.0+)
Android (2.3+)
Requier
AAC Audio e
licencia
Requier
H.264 Video e
Sin .flv Requier licencia
FLV soport e Sin soporte Adobe Flash
e licencia Requier
MP3 AUDIO e
.f4v licencia
Requier
H.264 Video e
licencia
Depende
Varios Audio Windows
Sin Requier de codec
Media Player
AVI soport .avi e Sin soporte
e licencia Depende
Varios Video Otros
de codec
Depende
Varios Audio
Sin de codec VLC
MKV soport .mkv Gratuita Sin soporte
e Depende MPlayer
Varios Video
de codec
Es importante hacer notar que no existe una sola combinación formato/codec de
video/codec de audio a la cual todos los navegadores modernos le den soporte,
es por ello que es necesario realizar la codificación en varios formatos.
TIP: Algunos navegadores (Firefox, por ejemplo) no son capaces de "entender"
los formatos de video, aún cuando den soporte al mismo. Para solucionar esto,
sólo hay que agregar los siguientes MIME Types al archivo .htaccess del servidor:
# Video AddType video/ogg ogv AddType video/mp4 mp4 m4v AddType

video/webm webm

SOFTWARE PARA CODIFICACIÓN (ENCODING)
El siguiente software **gratuito** puede ser utilizado para codificar video
soportado en HTML5 para los distintos navegadores principales:
Software Tipo Descarga Codecs soportados en HTML5
Aplicación
MP4 (H.264 + AAC)
standalone
HandBrake handbrake.fr MP4 (H.264 + MP3)
(Windows,
Implementado, pero no codifica
OS X,
la pista de audio
Linux)
Extensión OGG (Theora + Vorbis)

Firefogg para firefogg.org
Firefox WebM (VP8 + Vorbis)

4. Elabore un resumen de una cuartilla de los puntos más importantes del
artículo.
5. Elabore un cuestionario con 20 preguntas acerca del contenido del
artículo.
6. Resuelva correctamente el cuestionario.


Actividad 27. Caricaturas (TAREA)
1. Busque en YouTube.com, 5 vídeos de episodios de su caricatura favorita y
descargüelos usando el formato MPG mediante el siguiente convertidor.
http://www.keepvid.com
2. Busque nuevamente en YouTube, 5 vídeos de música clásica y
descargüelos usando el formato MP3 mediante el convertidor usado en el
paso anterior.
3. Verifique que cada vídeo y canción pese menos de 50MB. En caso de que
pese más, busque otro vídeo o canción según sea el caso, y descargüelo
nuevamente hasta que pese menos de 50MB. Evite buscar vídeos o
canciones con larga duración.
4. Ahora, busque 10 imágenes de los personajes que aparecen en su
caricatura favorita.
5. Guarde sus 20 archivos en una carpeta llamada “Caricaturas” dentro de su
portafolio de evidencias.


Actividad 28. Caricaturas (PRÁCTICA)
1. Asegúrese de tener instalado Internet Explorer 9 ó superior. Puede
utilizar otro explorador de Internet sí usted lo desea siempre y cuando
tenga soporte para HTML5.
2. Abra bloc de notas y escriba la estructura básica de una página HTML5.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>CARICATURAS </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

3. Guarde la página como caricatura.html dentro de la carpeta “Caricatura”
creada en la actividad anterior.
4. Coloque un encabezado en la página con el texto: “Caricaturas” tal y como
se muestra a continuación. Los encabezados se colocan al igual que todos
los demás elementos HTML5 dentro de BODY.
<H1>Caricaturas</H1>
5. Ahora centre el encabezado de la página usando la etiqueta P, tal y como
se muestra a continuación.
<P ALIGN = “CENTER”> <H1> Caricaturas </H1> </P>
6. Inserte un salto de línea <BR/> después del encabezado, y
posteriormente, inserte una tabla de 3 columnas con 3 filas con una
imagen diferente en cada celda, de los personajes que aparecen en su
caricatura favorita. Las imágenes las encontrará dentro de la carpeta
“Caricaturas”.
7. Debajo de la tabla, inserte una etiqueta de AUDIO que reproduzca una
melodía de música clásica la cual debe extraer de la carpeta “Caricaturas”.
Vea el siguiente ejemplo para insertar un sonido en una página WEB.
<AUDIO CONTROLS="CONTROLS">
<SOURCE SRC="CANCION.MP3">
ESCRIBA AQUÍ UN MENSAJE EN CASO DE QUE EL EXPLORADOR DE INTERNET
NO ACEPTE AUDIO.
</AUDIO>

8. En caso de que no escuche la canción, consulte la tabla de las actividades
anteriores para comprobar la compatibilidad de MP3 con el explorador de
Internet que esté usando. Puede utilizar otro formato de audio sí lo desea
para que su página WEB funcione correctamente.
9. Guarde su página nuevamente y verifique que funcione correctamente.


<!DOCTYPE HTML>
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>

2. Guarde la página como caricaturasfotos.html dentro de la carpeta
“Caricaturas”.
se muestra a continuación. Los encabezados se colocan al igual que todos
los demás elementos HTML5 dentro de BODY.
<H1> Caricaturas <H1>

4. Cree 3 DIVs debajo del encabezado de la página con una imagen de un
personaje de su caricatura preferida, las cuales están almacenadas en la
carpeta “Caricaturas”. Cada imagen debe ser diferente tal y como se
muestra a continuación.
<DIV ID= “CUADRO1”>
<IMG SRC= “BOB.PNG”/>
</DIV>
<IMG SRC= “PATRICIO.PNG”/>
</DIV>
<IMG SRC= “ARENITA.PNG”/>
</DIV>

5. Los DIVs son contenedores de objetos similares a las celdas de una tabla,
aunque la diferencia es que los DIVs pueden ubicarse en cualquier parte
de la página WEB mediante una hoja de estilo CSS. Puede crear una hoja
de estilo CSS dentro de la etiqueta HEAD de una página WEB usando la
etiqueta STYLE. Modifique la ubicación de los 3 DIVs que ha hecho hasta
el momento dentro de su página, de modo que se vea como la siguiente
imagen.


El siguiente código ejemplifica únicamente cómo mover 2 DIVs, por lo tanto,
usted debe modificar el código para que se vean los 3 DIVs de acuerdo a la
imagen anterior. Recuerde modificar las coordenadas del DIV mediante TOP y
LEFT.
<!DOCTYPE HTML >
<HTML >
<HEAD>
<TITLE>CARICATURAS</TITLE>
<STYLE TYPE="TEXT/CSS">
#CUADRO1 {
POSITION: ABSOLUTE;
LEFT:130PX;
TOP:41PX;
WIDTH:79PX;
HEIGHT:44PX;
}
#CUADRO2 {
POSITION: ABSOLUTE;
LEFT:230PX;
TOP:75PX;
WIDTH:79PX;
HEIGHT:44PX;
}
</STYLE>
</HEAD>
<BODY>
<DIV ID="CUADRO1">
<IMG SRC= “BOB.PNG”/>
</DIV>
<DIV ID="CUADRO2">
<IMG SRC= “PATRICK.PNG”/>
</DIV>
</BODY>
</HTML>

6. Busque en un diccionario de inglés o en el traductor de Google, el
significado de las siguientes palabras: POSITION, LEFT, TOP, WIDTH,
HEIGHT, TYPE, ID; con la finalidad de que comprenda el contenido de la
página. Anote el significado de las palabras en el siguiente espacio.

7. Guarde nuevamente su página y verifique que la página funcione
correctamente.

<!DOCTYPE HTML>
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>

2. Guarde la página como caricaturasvideos.html dentro de la carpeta
“Caricaturas”.
se muestra a continuación.
<H1>CARICATURAS </H1>
4. Coloque como subtítulo Vídeos debajo del encabezado de la página

usando la etiqueta H2 tal y como se muestra a continuación.
<H2>Vídeos</H2>
5. Cree 4 DIVs debajo del subtítulo de la página, con un vídeo de episodios
de su caricatura favorita, los cuales están almacenados en la carpeta
“Caricaturas”. Observe el siguiente ejemplo para saber cómo insertar un
vídeo en HTML5 dentro de DIVs.
<VIDEO WIDTH="320" HEIGHT="240" CONTROLS="CONTROLS">
<SOURCE SRC="EPISODIO.MP4" TYPE="VIDEO/MP4" />
ESCRIBA UN MENSAJE AQUÍ EN CASO DE QUE EL EXPLORADOR
NO ADMITA VIDEO.
</VIDEO>
</DIV>

6. En caso de que no visualice los vídeos, consulte la compatibilidad del
formato de vídeo MP4 con el explorador de Internet que esté empleando.
Puede cambiar el formato de vídeo sí lo desea, verificando evidentemente
que sea compatible con sus recursos informáticos con los que cuenta.
7. Acomode los DIVs mediante una hoja de estilo CSS para que se visualicen
de acuerdo a la siguiente distribución.

8. Guarde nuevamente su página y verifique que funcione correctamente.

Actividad 31. Olimpiadas (AULA)
1. Redacte en su cuaderno en forma de lista, 6 deportes diferentes jugados
en las olimpiadas pasadas.
2. Sin ayuda de la computadora, escriba el código HTML de una página WEB
en su cuaderno de apuntes, que muestre una tabla de 3 columnas por 2
filas con la imagen de cada deporte en cada celda.
3. Coloque borde a la tabla usando el atributo BORDER de la etiqueta
TABLE, tal y como se muestra a continuación.
<TABLE BORDER = “3”>
<TR>
<TD> <IMG SRC = “TRIATLON.PNG”/> </TD>
<TD> … </TD>
</TR>
<TR>
…

4. Solicite a su profesor la revisión de su trabajo.


Actividad 32. Los pecados capitales (AULA)
1. Redacte en su cuaderno 5 pecados capitales.
2. Sin ayuda de la computadora, escriba el código HTML de una página WEB
en su cuaderno de apuntes, que muestre los 5 pecados capitales escritos
en el paso anterior, dentro de DIVs ubicados en forma de estrella como se
muestra en la siguiente imagen.

Soberbia

Avaricia Ira

Gula Pereza

3. Recuerde emplear hojas de estilo CSS para distribuir los objetos.
4. Solicite a su profesor la revisión de su trabajo.


Actividad 33. Lugares turísticos en México (AULA)
1. En su cuaderno, redacte el nombre de 5 lugares turísticos en México de su
agrado.
2. Sin ayuda de la computadora y en su cuaderno de apuntes, cree una
página WEB con código HTML5 que contenga un vídeo de cada uno de los
lugares turísticos de su agrado, usando la etiqueta VIDEO. Los videos
deben estar organizados dentro de una tabla como se muestra a
continuación.

VIDEO 1 VIDEO 2 VIDEO 3

VIDEO 4 VIDEO 5

3. Solicite a su profesor que revise su trabajo.


Actividad 34. Palabras con Ñ (PRÁCTICA)
1. Busque 10 palabras con Ñ en Internet.
2. Cuando usted crea una página y posteriormente la sube a Internet, las
letras Ñ o las vocales acentuadas suelen tener dificultades para que el
Explorador de Internet las lea. Investigue en Internet las características
de la etiqueta META, la cual le ayuda a evitar este problema; y redáctelo
en ½ cuartilla en su cuaderno.
3. Cree una página WEB que contenga una lista con viñetas de las 10
palabras que investigó anteriormente.
4. Utilice el atributo CHARSET de la etiqueta META cuando tenga problemas
al utilizar ENCODING. Ejemplo:
<META ENCODING = “ISO-‐8859-‐1”/>
o bien,
<META CHARSET = “ISO-‐8859-‐1” />

5. Agregue la etiqueta META en el HEAD de su página, y emplee el atributo
ENCODING para utilizar la codificación ISO-‐8859-‐1 utilizada para admitir
caracteres del idioma español. Observer el siguiente ejemplo:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<META ENCODING = “ISO-‐8859-‐1” />
<TITLE>PALABRAS CON Ñ </TITLE>
</HEAD>
<BODY>
<OL>
<LI> CAÑA </LI>
<LI> PIÑA </LI>
<LI> … </LI>
</OL>
</BODY>
</HTML>

6. Guarde su página como palabras.html en su portafolio de evidencias y
ejecútela para verificar que funcione correctamente.
7. Finalmente investigue las codificaciones admitidas más importantes para
META ENCODING y descríbalas en otra ½ cuartilla.


Actividad 35. Enfermedades de transmisión sexual (TAREA)
1. Busque en YouTube, 5 vídeos que hablen acerca de las enfermedades de
transmisión sexual, y posteriormente descargüelos en formato MPG
mediante el siguiente convertidor en línea.
2. Posteriormente, descargue un convertidor de audio y vídeo, y convierta
sus 5 vídeos en los formatos OGV y WEB-‐M
3. Descargue 10 canciones en formato MP3 de su agrado sin importar el
genero musical.
4. Verifique que cada vídeo y canción pese menos de 50MB. En caso de que
pese más, busque otro vídeo o canción según sea el caso, y descargüelo
nuevamente hasta que pese menos de 50MB. Evite buscar vídeos o
canciones con larga duración.
5. Utilizando el convertidor de audio y vídeo descargado en los pasos
anteriores, convierta sus 10 canciones al formato de audio WAV.
6. Ahora, busque y descargue 10 fotografías de enfermedades de
transmisión sexual.
7. Cree en un nuevo documento de Microsoft Word, una lista de 10
enfermedades de transmisión sexual y su descripción de cada una de
ellas, en máximo 5 cuartillas. Guarde el documento como
enfermedades.docx.
8. Imprima el documento enfermedades.docx y utilizando un marcatextos,
subraye lo más importante de cada una de las enfermedades.
9. Guarde sus 41 archivos en una carpeta llamada “Enfermedades” dentro de
su portafolio de evidencias.

Actividad 36. Independencia de México (PRÁCTICA)
Además en todas las prácticas posteriores, utilice la etiqueta META para
definir la codificación de los caracteres que se empleará.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>INDEPENDENCIA DE MÉXICO </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

2. Guarde la página como independencia.html dentro de una carpeta
llamada “Independencia” ubicada en su portafolio de evidencias.
3. Busque en Internet información referente a la Independencia de México y
cópiela en un nuevo documento de Microsoft Word.
4. Utilice la etiqueta P para organizar los párrafos. Ejemplo:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>INDEPENDENCIA DE MÉXICO </TITLE>
</HEAD>
<BODY>
<P>
LA INDEPENDENCIA DE MÉXICO INICIÓ …
</P>
<P>
LAS CAUSAS DE LA GUERRA DE INDEPENCIA FUERÓN…
</P>
<P>
LOS PERSONAJES MÁS IMPORTANTES QUE PARTICIPARÓN…
</P>
</BODY>
</HTML>

5. Cambie el color del fondo de la página, y el color y tamaño de letra de todo
el texto usando una hoja de estilo CSS, tal y como se muestra a
continuación.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>INDEPENDENCIA DE MÉXICO</TITLE>
<STYLE TYPE = “TEXT/CSS”>

BODY {
BACKGROUND-‐COLOR:BLACK;
}
P {
COLOR:YELLOW;
FONT-‐SIZE:12PX;
}
</STYLE>
</HEAD>
<BODY>
<P>
LA INDEPENDENCIA DE MÉXICO INICIÓ …
</P>
<P>
LAS CAUSAS DE LA GUERRA DE INDEPENCIA FUERÓN…
</P>
<P>
LOS PERSONAJES MÁS IMPORTANTES QUE PARTICIPARÓN…
</P>
</BODY>
</HTML>

6. Inserte 2 DIVs con una imagen alusivaa a la independencia de México y en
cada una empleando Hojas de estilo CSS.
7. Guarde los cambios realizados y verifique que funcione correctamente la
página.

Actividad 37. Enfermedades de transmisión sexual (PRÁCTICA)
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>ENFERMEDADES DE TRANSMISIÓN SEXUAL </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

2. Guarde la página como enfermedadesvideo.html dentro de la carpeta
llamada “Enfermedades” ubicada en su portafolio de evidencias.
3. Inserte un vídeo relacionado con las enfermedades de transmisión sexual
mediante HTML5 dentro de la página WEB, de modo que se ejecute
cuando cargue la página automáticamente. Recuerde copiar el vídeo en la
misma carpeta donde se encuentra almacenada la página. Vea el siguiente
ejemplo.
<VIDEO SRC = “VIDEO1.OVG” AUTOPLAY> </VIDEO>

Noté que en el ejemplo anterior, la extensión OVG se refiere a un formato de
vídeo que admiten los exploradores de Internet.
4. Ahora, modifique su código del vídeo realizado en el paso anterior con el
fin de que el vídeo se repita automáticamente cuando termine. Vea el
siguiente ejemplo.
<VIDEO SRC = “VIDEO1.OVG” AUTOPLAY LOOP> </VIDEO>
5. Ahora cree un segundo vídeo con las mismas características del vídeo
creado en los pasos anteriores. Recuerde que los vídeos deben ser
relacionados a las enfermedades de transmisión sexual.
6. Guarde nuevamente su página y verifique que los 2 vídeos estén
funcionando correctamente.
7. Abra nuevamente su página con bloc de notas y cambie la ruta del
segundo vídeo por “ejemplo.mp4”, con la finalidad de que el explorador
no encuentre el vídeo y NO lo muestre.
8. Abra el explorador de Internet y pruebe su página. Verifique que el
segundo vídeo no se visualice.
9. Abra nuevamente bloc de notas y agregue el atributo POSTER al segundo
vídeo. El atributo POSTER le permite colocar una imagen cuando un vídeo
no se vea, tenga algún problema con la ruta, o no haya datos disponibles
por el servidor. Coloque una imagen relacionada a las enfermedades de
transmisión sexual que tenga almacenada en su carpeta para que sea
mostrada cuando haya problemas con el vídeo. Vea el siguiente ejemplo.
<VIDEO SRC= “VIDEO1.OVG” POSTER= “GONORREA.JPG” AUTOPLAY LOOP>

10. Finalmente, muestre los controles de ambos vídeos de su página WEB con
el fin de que el usuario pueda controlar el volumen, pausarlo,
reproducirlo, etc. Observer el siguiente ejemplo.
<VIDEO SRC= “VIDEO1.OVG” POSTER= “GONORREA.JPG” CONTROLS AUTOPLAY

LOOP>

Actividad 38. Terror (TAREA)
1. Busque en YouTube un trailer de una película de terror.
2. Descargue el vídeo utilizando el siguiente convertidor en línea en el
formato MP4.
3. Guarde el vídeo descargado como videoterror.mp4 en una carpeta
llamada “Terror” que deberá crear en su portafolio de evidencias.
4. Convierta el vídeo a los formatos de vídeo WEBM y OGV utilizando un
convertidor. Si no cuenta con algún convertidor instalado, descargüelo.
Los 2 vídeos guárdelos como videoterror.webm y videoterror.ogv
respectivamente en la carpeta “Terror”.
5. Ahora busque una imagen relacionada con la película que eligió.
Descargüela y guárdela como imagenterror.jpg
6. Descargue de Internet e instale los siguientes exploradores de Internet:
Firefox, Safari, Opera, Google Chrome.
7. Cree la siguiente página WEB y guárdela como Terror.html dentro de la
carpeta “Terror”.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> TERROR </TITLE>
</HEAD>
<BODY>
<H1>
ESCRIBA SU NOMBRE COMPLETO AQUÍ
</H1>
<BR/>
<VIDEO POSTER = “IMAGENTERROR.JPG” CONTROLS>
<SOURCE SRC = “VIDEOTERROR.MP4” TYPE=”VIDEO/MP4;
CODECS=’AVC1.42E01E, MP4A.40.2’ ”>
<SOURCE SRC = “VIDEOTERROR.WEBM”
TYPE=”VIDEO/WEBM; CODECS= ‘VP8, VORBIS’ ”>
<SOURCE SRC = “VIDEOTERROR.OGV”
TYPE=”VIDEO/OGG; CODECS= ‘THEORA, VORBIS’ ”>
</VIDEO
</BODY>
</HTML>

8. Ejecute su página WEB en cada uno de los exploradores de Internet que
instaló. Imprima la pantalla de cada explorador de Internet mientras el
vídeo se esté reproduciendo. En todos los exploradores se debe ver el
vídeo sin problema alguno. Imprima los 5 casos en hojas reciclables
preferentemente por motivos ecológicos.
9. Cree una segunda página WEB llamada Terror2.html con el siguiente
código:


<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> TERROR </TITLE>
</HEAD>
<BODY>
<H1>
ESCRIBA SU NOMBRE COMPLETO AQUÍ
</H1>
<BR/>
<VIDEO SRC = “VIDEOTERROR.MP4” CONTROLS>
</VIDEO
</BODY>
</HTML>

10. Se sugiere que todos los vídeos que coloque en una página WEB, los tenga
en los formatos MP4, OGV y WEBM; y use la etiqueta VIDEO con el
elemento SOURCE para garantizar el 100% de funcionalidad en la WEB.
Hay exploradores de Internet que no soportan algunos formatos, por lo
que la etiqueta VIDEO de HTML5 brinda la ventaja de incluir archivos
alternativos a través del elemento SOURCE para garantizar la
compatibilidad desde cualquier explorador de Internet que utilice el
usuario. Ejecute terror2.html en cada explorador de Internet y observe
que hay problema para ejecutar el vídeo en algunos exploradores, dado
que no se incluyó alternativas mediante SOURCE para evitar este
problema.
11. Ahora, investigue la compatibilidad de los formatos de vídeo acorde a
cada explorador de Internet y llene finalmente el siguiente cuadro
comparativo.
EXPLORADOR DE OGV WEBM MPEG

INTERNET
Internet Explorer

Google Chrome

Firefox

Safari

Opera

Nota: Cambie la extensión del vídeo de la página terror2.html y ejecútela en cada
explorador de Internet para llenar el cuadro comparativo. Llene la tabla usando
SI o NO según corresponda.

Actividad 39. Poemas de amor (PRÁCTICA)
1. Busque en Internet 3 poemas de amor diferentes que contengan mínimo 5
estrofas.
2. Es posible crear una hoja de estilo CSS independiente de la página WEB
con la finalidad de que le pueda servir el mismo diseño para varias
páginas. Para crear una hoja de estilo, abra un nuevo archivo en Bloc de
Notas y escriba el siguiente código.
BODY {
BACKGROUND-‐COLOR:YELLOW;
}
P {
COLOR:RED;
FONT-‐SIZE:12PX;
}

3. Guarde el archivo como estructura.css y ciérrelo al terminar. La extensión
de la hoja de estilo es CSS.
4. Abra un nuevo archivo en bloc de notas y escriba la estructura básica de
una página HTML5.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>POEMAS </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

5. Posteriormente, copie y pegue uno de los poemas en la página WEB con la
finalidad de crear una página que contenga su poema. Obligatoriamente
utilice la etiqueta P para separar párrafos tal y como se muestra a
continuación.

<!DOCTYPE HTML>
<HTML>
<HEAD>
</HEAD>
<BODY>
<P>
ESCRIBA AQUÍ LA PRIMERA ESTROFA
</P>
<P>
ESCRIBA AQUÍ LA SEGUNDA ESTROFA

</P>
<P>
ESCRIBA AQUÍ LA TERCERA ESTROFA
</P>
</BODY>
</HTML>

6. Ahora, agregue la siguiente línea dentro del HEAD de la página con la
finalidad de importar la hoja de estilo estructura.css creada en los pasos
anteriores.
<LINK REL= “STYLESHEET” TYPE = “TEXT/CSS” HREF= “ESTRUCTURA.CSS”/>

7. Asegúrese de que el código de su página WEB sea como el que se muestra
a continuación.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<LINK REL= “STYLESHEET” TYPE = “TEXT/CSS” HREF=
“ESTRUCTURA.CSS”/>
</HEAD>
<BODY>
<P>
ESCRIBA AQUÍ LA PRIMERA ESTROFA
</P>
<P>
ESCRIBA AQUÍ LA SEGUNDA ESTROFA
</P>
<P>
ESCRIBA AQUÍ LA TERCERA ESTROFA
</P>
</BODY>
</HTML>

8. Guarde su página como poemas1.html en una nueva carpeta llamada
“Poemas” en su portafolio de evidencias.
9. Cree 2 páginas WEB adicionales con los 2 poemas restantes que encontró
en Internet utilizando la misma hoja de estilo, nombradas como
poemas2.html y poemas3.html respectivamente.
10. Note que las páginas lucen idénticas aunque con contenido diferente. Este
fenómeno es gracias al uso de las hojas de estilo.


Actividad 40. Bebidas calientes (AULA)
1. En su cuaderno, cree una página WEB que contenga 5 imágenes
distribuidas de la siguiente manera.

a. Elabore una Stylesheet que contenga los 5 estilos de cada DIV para
distribuirlos como indica la imagen. La Stylesheet no debe estar
dentro de la página WEB (Anótela en otra hoja para simular otro
archivo diferente).
b. En cada estilo debe utilizar las propiedades WIDTH, HEIGHT, TOP
Y LEFT; con el fin de modificar el tamaño y ubicación de las
imágenes.
c. En la página WEB, invoque a la hoja de estilo mediante la etiqueta
LINK dentro del HEAD, tal y como se hizo en la actividad anterior.
d. En cada DIV, debe insertar una imagen referente a bebidas
calientes.
2. Solicite a su profesor que le revise su página WEB para verificar que esté
funcionando correctamente.

Actividad 41. Caperucita Roja (PRÁCTICA)
1. Busque en Internet el cuento de Caperucita Roja y cópielo. Asegúrese que
el cuento contenga al menos 5 párrafos.
2. Cree una página WEB con la estructura básica de una página HTML5 y
guárdela como caperucita.html
3. Cree la siguiente hoja de estilo (Cada estilo inicia con el símbolo . ) y
guárdela como estilocaperucita.css
. PARRAFO1 {
TEXT-‐ALIGN: CENTER;
TEXT-‐DECORATION: UNDERLINE;
VERTICAL-‐ALIGN: TOP;
FONT-‐FAMILY: ARIAL;
FONT-‐SIZE: 150%;
FONT-‐STYLE: ITALIC;
FONT-‐WEIGHT: BOLDER;
COLOR: ORANGE;
BACKGROUND: BLACK;
}
. PARRAFO2 {
TEXT-‐ALIGN: LEFT;
TEXT-‐DECORATION: OVERLINE;
VERTICAL-‐ALIGN: BOTTOM;
FONT-‐FAMILY: ARIAL;
FONT-‐SIZE: 180%;
FONT-‐STYLE: ITALIC;
COLOR: BLUE;
BACKGROUND: BLACK;
}
. PARRAFO3 {
TEXT-‐ALIGN: RIGHT;
TEXT-‐DECORATION: LINE-‐THROUGH;
VERTICAL-‐ALIGN: TOP;
FONT-‐SIZE: 120%;
COLOR: WHITE;
FONT-‐WEIGHT: BOLDER;
BACKGROUND: BLACK;
}

4. Ahora, cierre su hoja de estilo y abra su página WEB desde bloc de notas.
5. Añada la etiqueta LINK para conectar su hoja de estilo con la página WEB.
<LINK HREF= “ESTILOCAPERUCITA.CSS” REL= “STYLESHEET” TYPE =
“TEXT/CSS” />
6. Copie su cuento en el BODY de la página. Separe los párrafos mediante la
etiqueta P tal y como se muestra a continuación.


<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>CAPERUCITA ROJA </TITLE>
<LINK HREF= “ESTILOCAPERUCITA.CSS” REL= “STYLESHEET”
TYPE = “TEXT/CSS” />
</HEAD>
<BODY>
<P >
ESCRIBA AQUÍ EL PRIMER PARRAFO
</P>
<P >
ESCRIBA AQUÍ EL SEGUNDO PARRAFO
</P>
<P >
ESCRIBA AQUÍ EL TERCER PARRAFO
</P>
…
</BODY>
</HTML>

7. Utilice el atributo CLASS que contienen casi todas las etiquetas HTML,
para utilizar una de las clases de estilo de su hoja CSS creada
anteriormente, tal y como se muestra a continuación. Además como se
dará cuenta, se pueden repetir las clases para que tengan el mismo
formato varios párrafos, ya que en su Stylesheet que creó, solo tiene
creado 3 estilos (PARRAFO1, PARRAFO2 Y PARRAFO3).
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>CAPERUCITA ROJA </TITLE>
<LINK HREF= “ESTILOCAPERUCITA.CSS” REL= “STYLESHEET”
TYPE = “TEXT/CSS” />
</HEAD>
<BODY>
<P CLASS= “PARRAFO1” >
ESCRIBA AQUÍ EL PRIMER PARRAFO
</P>
<P CLASS= “PARRAFO2”>
ESCRIBA AQUÍ EL SEGUNDO PARRAFO
</P>
ESCRIBA AQUÍ EL TERCER PARRAFO
</P>
ESCRIBA AQUÍ EL CUARTO PARRAFO

</P>
ESCRIBA AQUÍ EL QUINTO PARRAFO
</P>

</BODY>
</HTML>

8. Guarde los cambios y abra su página desde el Explorador de Internet.

Note que hay párrafos que tienen el mismo formato ya que se usó la clase
CSS en varias ocasiones.
9. Lea y comprenda la siguiente conclusión.
Cuando usted redacte un estilo,

Use # cuando quiera utilizar ID en las etiquetas y solo se aplicará para un
único objeto en particular.
Use . cuando quiera utilizar CLASS en las etiquetas y se puede aplicar para
cualquiera

Actividad 42. Sexshop (TAREA)
1. Basándose en el diseño del siguiente ejemplo capturado desde el sitio
oficial de Liverpool, S.A. de C.V., el día 4 de Octubre de 2012; elabore un
sitio WEB de una Sexshop bajo los siguientes requerimientos.

a. Debe utilizar DIVs que funja como contenedor de todos los objetos
que se muestren en la página
b. La página NO debe contener hipervínculos ya que solo se evaluará
el diseño del index.html. Recuerde que el index.html de una página
WEB es la página principal del sitio.
c. Las imágenes que incluya deben ser alusivas a una Sexshop
d. Recuerde que todos los menús son simulados por lo que no es
necesario que funcionen.
e. Cree una hoja de estilo que manipule el diseño de su página WEB.
2. Imprima su código de su página WEB.
3. Imprima su código de su hoja de estilo.
4. Imprima la captura de pantalla de su página WEB funcionando desde el
explorador de Internet de su agrado.
5. Elabore una carátula desde Microsoft Word 2010 con sus datos escolares
e imprímala.
6. Finalmente, engrape su tarea para mostrársela al profesor.

Actividad 43. Colores (AULA)
1. Lea el siguiente artículo titulado “Varias maneras, sintaxis o notaciones
para definir colores con CSS de los elementos de la página” extraído desde
http://www.desarrolloweb.com/articulos/notacion-‐colores-‐css.html el
día 4 de Octubre de 2012 publicado por Miguel Ángel Álvarez .
VARIAS MANERAS, SINTAXIS O NOTACIONES PARA DEFINIR COLORES CON CSS
DE LOS ELEMENTOS DE LA PÁGINA.
Con CSS se puede especificar colores para cada elemento HTML de la página,
incluso hay elementos que podrían admitir varios colores, como el color de fondo
o el color del borde. Pero bueno, vamos a ver ahora es las distintas maneras de
escribir un color en una declaración CSS.
Porque lo más habitual es que especifiquemos un color con su valor RGB, de una
manera similar a como aprendimos a definir colores en HTML. Pero en CSS
tenemos otras maneras de declarar colores que pueden interesarnos, como
mínimo para poder entender el código CSS cuando lo veamos escrito.
NOTACIÓN HEXADECIMAL RGB

Esta notación es la que ya conocemos. Se especifican los tres valores de color
(rojo, verde y azul) con valores en hexadecimal entre 00 y FF.
background-‐color: #ff8800;
NOTACIÓN HEXADECIMAL ABREVIADA
Esta notación es muy parecida a la anterior, pero permite abreviar un poco la
declaración del color, indicando sólo un número para cada valor rojo, verde y
azul. Por ejemplo, para especificar el color de antes (#ff8800) podríamos haber
escrito:
background-‐color: #f80;
NOMBRE DEL COLOR
También podemos definir un color por su nombre. Los nombres de colores son
en inglés, los mismos que sirven para especificar colores con HTML.
color: red; border-‐color: Lime;
NOTACIÓN DE COLOR CON PORCENTAJES DE RGB
Se puede definir un color por los distintos porcentajes de valores RGB. Si todos
los valores están al 100% el color es blanco. Si todos están al 0% obtendríamos
el negro y con combinaciones de distintos porcentajes de RGB obtendríamos
cualquier matiz de color.
color: rgb(33%, 0%, 0%);


NOTACIÓN POR VALORES DECIMALES DE RGB, DE 0 A 255
De una manera similar a la notación por porcentajes de RGB se puede definir un
color directamente con valores decimales en un rango desde 0 a 255.
color: rgb(200,255,0);
De entre todas estas notaciones podemos utilizar la que más nos interese o con
la que nos sintamos más a gusto. Nosotros en nuestros ejemplos venimos
utilizando la notación hexadecimal RGB por habernos acostumbrado a ella en
HTML.
COLOR TRANSPARENTE
Para finalizar, podemos comentar que también existe el color transparente, que
no es ningún color, sino que específica que el elemento debe tener el mismo
color que el fondo donde está. Este valor, transparent, sustituye al color.
Podemos indicarlo en principio sólo para fondos de elementos, es decir, para el
atributo background-‐color.
background-‐color: transparent;
2. Ahora, lea el siguiente artículo titulado “Modelo de color RGB” publicado
por Wikimedia Foundation, Inc.; extraído el día 4 de Octubre de 2012
desde http://es.wikipedia.org/wiki/Modelo_de_color_RGB.
MODELO DE COLOR RGB
La descripción RGB (del inglés Red, Green, Blue; "rojo, verde, azul") de un color
hace referencia a la composición del color en términos de la intensidad de los
colores primarios con que se forma: el rojo, el verde y el azul. Es un modelo de
color basado en la síntesis aditiva, con el que es posible representar un color
mediante la mezcla por adición de los tres colores luz primarios. El modelo de
color RGB no define por sí mismo lo que significa exactamente rojo, verde o azul,
por lo que los mismos valores RGB pueden mostrar colores notablemente
diferentes en diferentes dispositivos que usen este modelo de color. Aunque
utilicen un mismo modelo de color, sus espacios de color pueden variar
considerablemente.
Para indicar con qué proporción mezclamos cada color, se asigna un valor a cada
uno de los colores primarios, de manera, por ejemplo, que el valor 0 significa que
no interviene en la mezcla y, a medida que ese valor aumenta, se entiende que
aporta más intensidad a la mezcla. Aunque el intervalo de valores podría ser
cualquiera (valores reales entre 0 y 1, valores enteros entre 0 y 37, etc.), es
frecuente que cada color primario se codifique con un byte (8 bits). Así, de
manera usual, la intensidad de cada una de las componentes se mide según una
escala que va del 0 al 255.
Por lo tanto, el rojo se obtiene con (255,0,0), el verde con (0,255,0) y el azul con
(0,0,255), obteniendo, en cada caso un color resultante monocromático. La
ausencia de color —lo que nosotros conocemos como color negro— se obtiene
cuando las tres componentes son 0, (0,0,0).

La combinación de dos colores a nivel 255 con un tercero en nivel 0 da lugar a
tres colores intermedios. De esta forma el amarillo es (255,255,0), el cian
(0,255,255) y el magenta (255,0,255).
Obviamente, el color blanco se forma con los tres colores primarios a su máximo
nivel (255,255,255).
El conjunto de todos los colores se puede representar en forma de cubo. Cada
color es un punto de la superficie o del interior de éste. La escala de grises estaría
situada en la diagonal que une al color blanco con el negro.
EL COLOR EN LAS PANTALLAS DE COMPUTADORA
En las pantallas de computadoras, la sensación de color se produce por la mezcla
aditiva de rojo, verde y azul. Hay una serie de puntos minúsculos llamados
píxeles. Cada punto de la pantalla es un píxel y cada píxel es, en realidad, un
conjunto de tres subpíxeles; uno rojo, uno verde y uno azul, cada uno de los
cuales brilla con una determinada intensidad.
Al principio, la limitación en la profundidad de color de la mayoría de los
monitores condujo a una gama limitada a 216 colores, definidos por el cubo de
color. No obstante, el predominio de los monitores de 24-‐bit, posibilitó el uso de
16,7 millones de colores del espacio de color HTML RGB.
La gama de colores de la Web consiste en 216 combinaciones de rojo, verde y
azul, donde cada color puede tomar un valor entre seis diferentes (en
hexadecimal): #00, #33, #66, #99, #CC o #FF.
Podemos ver que 63 nos da el número de combinaciones, 216. Estos valores en
decimal se corresponden con 0, 51, 102, 153, 204 y 255, que tienen un
porcentaje de intensidad de 0%, 20%, 40%, 60%, 80% y 100%, respectivamente.
Esto nos permite dividir los 216 colores en un cubo de dimensión 6.
Se procura que los píxeles sean de un color cuanto más saturado mejor, pero
nunca se trata de un color absolutamente puro. Por tanto la producción de
colores con este sistema tiene una doble limitación:
La derivada del funcionamiento de las mezclas aditivas: sólo podemos obtener
los colores interiores del triángulo formado por las tres fuentes luminosas.
La derivada del hecho que los colores primarios usados no son absolutamente
monocromáticos.
Además, las diversas pantallas no son iguales exactamente, además de ser
configurables por los usuarios, con lo cual varios parámetros pueden variar.
Esto implica que las codificaciones de los colores destinadas a las pantallas se
deben interpretar como descripciones relativas, y entender la precisión de
acuerdo con las características de la pantalla.


CODIFICACIÓN HEXADECIMAL DEL COLOR
La codificación dodeccadesimal del color permite expresar fácilmente un color
concreto de la escala RGB, utilizando la notación hexadecimal. Se utiliza, por
ejemplo, en el lenguaje HTML y en JavaScript.
Este sistema utiliza la combinación de tres códigos de dos dígitos para expresar
las diferentes intensidades de los colores primarios RGB (Red, Green, Blue, rojo,
verde y azul).
El blanco y el negro
Negro #000000 Los tres canales están al mínimo 00, 00 y 00
Blanco #FFFFFF Los tres canales están al máximo FF, FF y FF

En el sistema de numeración hexadecimal, además de los números del 0 al 9 se
utilizan seis letras con un valor numérico equivalente; a=10, b=11, c=12, d=13,
e=14 y f=15. La correspondencia entre la numeración hexadecimal y la decimal u
ordinaria viene dada por la siguiente fórmula:
decimal = primera cifra hexadecimal * 16 + segunda cifra hexadecimal
La intensidad máxima es ff, que se corresponde con (15*16)+15= 255 en
decimal, y la nula es 00, también 0 en decimal. De esta manera, cualquier color
queda definido por tres pares de dígitos.
Los tres colores básicos
Rojo #ff0000 El canal de rojo está al máximo y los otros dos al mínimo
Verde #00ff00 El canal del verde está al máximo y los otros dos al mínimo
Azul #0000ff El canal del azul está al máximo y los otros dos al mínimo
Las combinaciones básicas
Amarillo #ffff00 Los canales rojo y verde están al máximo
Cian #00ffff Los canales azul y verde están al máximo
Magenta #ff00ff Los canales rojo y azul están al máximo
Gris claro #D0D0D0 Los tres canales tienen la misma intensidad
Gris #5e5e5e
Los tres canales tienen la misma intensidad
oscuro
A partir de aquí se puede hacer cualquier combinación de los tres colores.
Colores definidos por la especificación HTML 4.01

Color Hexadecimal Color Hexadecimal Color Hexadecimal Color Hexadecimal
cyan #00ffff black #000000 blue #0000ff fucsia #ff00ff
gray #808080 green #008000 lime #00ff00 marrón #800000
navy #000080 olive #808000 purple #800080 red #ff0000
silver #c0c0c0 teal #008080 white #ffffff yellow #ffff00
LOS COLORES MÁS SATURADOS Y LOS MÁS LUMINOSOS

Supongamos tres fuentes luminosas, r, g y b, de las características indicadas en el
gráfico adjunto:
Cualquier color que se pueda obtener a partir de esos tres colores primarios
tendrá la forma:
(ir, ig, ib)
donde ir, ig y ib son los coeficientes de las intensidades correspondientes a cada
color primario.
Si situamos los colores obtenidos en el gráfico, tenemos que:
Si dos de los coeficientes son nulos, el color se sitúa en el vértice correspondiente
al color de coeficiente no nulo.
Si un coeficiente es nulo, el color se sitúa en uno de los lados del triángulo: el
conjunto de todos ellos son los colores más saturados.
Si ninguno de los coeficientes es nulo, el color se sitúa en un punto del interior;
cuanto más parecidos sean los tres coeficientes, más cerca estará del blanco (en
el centro).
Al representar combinaciones de tres valores independientes en un diagrama

que sólo tiene dos, resulta que a cada punto del diagrama le corresponde toda
una familia de colores. Por ejemplo, los siguientes colores tienen la misma
proporción de rojo, verde y azul, y por tanto les corresponde el mismo punto del
gráfico. Sólo se diferencian en la intensidad.
Variación de las intensidades
100, 50, 0 #643200 Marrón oscuro
200, 100, 0 #c86400 Marrón claro
150, 75, 0 #964b00 Marrón

Si las intensidades ir, ig y ib tienen un límite superior (255), la condición
necesaria y suficiente para que un color sea el más intenso de la familia (es decir,
de los representados por el mismo punto) es que al menos uno de sus
coeficientes sea 255.
Los colores que presentan la máxima saturación y la máxima luminosidad a la
vez, son los que reúnen dos requisitos: al menos uno de los coeficientes es 255 y
al menos uno de los coeficientes es 0. De esto se deduce que los colores más
saturados y más luminosos siguen la siguiente secuencia:

PERCEPCIÓN Y SENSACIÓN DE COLOR
Nuestros ojos tienen dos tipos de células sensibles a la luz o fotorreceptores: los
bastones y los conos. Estos últimos son los encargados de aportar la información
de color.
Para saber cómo percibimos un color, hay que tener en cuenta que existen tres
tipos de conos con respuestas frecuenciales diferentes, y que tienen máxima
sensibilidad a los colores que forman la terna RGB, rojo, verde y azul. Mientras
que los conos, que reciben información del verde y el rojo, tienen una curva de
sensibilidad similar, la respuesta al color azul es una veinteava (1/20) parte de la
respuesta a los otros dos colores. Este hecho lo aprovechan algunos sistemas de
codificación de imagen y vídeo, como el JPEG o el MPEG, "perdiendo" de manera
consciente más información de la componente azul, ya que nuestros ojos no
percibirán esta pérdida.
La sensación de color se puede definir como la respuesta de cada una de las

curvas de sensibilidad al espectro radiado por el objeto observado. De esta
manera, obtenemos tres respuestas diferentes, una por cada color.
El hecho de que la sensación de color se obtenga de este modo, hace que dos
objetos observados, radiando un espectro diferente, puedan producir la misma

sensación. Y en esta limitación de la visión humana se basa el modelo de síntesis
del color, mediante el cual podemos obtener a partir de estímulos visuales
estudiados y con una mezcla de los tres colores primarios, el color de un objeto
con un espectro determinado.
SEÑAL DE LUMINANCIA
La sensación de luminosidad viene dada por el brillo de un objeto y por su
opacidad, pudiendo producir dos objetos con tonalidades y prismas diferentes la
misma sensación lumínica. La señal de luminancia es la cuantificación de esa
sensación de brillo. Para mantener la compatibilidad entre las imágenes en
blanco y negro y las imágenes en color, los sistemas de televisión actuales (PAL,
NTSC, SECAM) transmiten tres informaciones: la luminancia y dos señales
diferencia de color.
De esta manera, los antiguos modelos en blanco y negro pueden obviar la
información relativa al color, y reproducir solamente la luminancia, es decir, el
brillo de cada píxel aplicado a una imagen en escala de grises. Y las televisiones
en color obtienen la información de las tres componentes RGB a partir de una
matriz que relaciona cada componente con una de las señales diferencia de color.
Para cada uno de los sistemas de televisión se transmiten de diferente manera,
motivo por el cual podemos tener problemas al reproducir una señal NTSC en un
sistema de reproducción PAL.

3. Elabore un resumen de una cuartilla de los puntos más importantes de
ambos artículos.

Actividad 44. Colores (AULA / TAREA)
1. En su cuaderno de apuntes, elabore una página WEB que contenga 6 DIVs
con colores diferentes de fondo cada uno.
a. Manipule el diseño mediante CSS usando la etiqueta STYLE para
incorporar estilos dentro de la misma página WEB, es decir, NO
use la etiqueta LINK.
b. Revise los artículos de la actividad anterior para analizar el código
de colores.
2. Solicite a su profesor que revise su página WEB para verificar que esté
correctamente realizada.
3. Investigue de tarea cómo convertir un número de decimal a hexadecimal
y realice 10 ejemplos resueltos con procedimiento incluido para
corroborar el aprendizaje adquirido.

Actividad 45. Novedades en CSS3 (AULA)
1. Lea los siguiente ejemplos basados en CSS3.
Ejemplo de un DIV con esquinas redondeadas.

DIV{
BORDER:2PX SOLID;
BORDER-‐RADIUS:25PX;
-‐MOZ-‐BORDER-‐RADIUS:25PX;
}
Ejemplo de un DIV con sombra.
DIV{
BOX-‐SHADOW: 10PX 10PX 5PX #888888;
}
Ejemplo de un DIV con un margen con imágenes en miniatura. (No es compatible
en Internet Explorer).
DIV{
BORDER-‐IMAGE:URL(“FOTO1.PNG”) 30 30 ROUND;
-‐MOZ-‐BORDER-‐IMAGE:URL(“FOTO1.PNG”) 30 30 ROUND; /* FIREFOX */
-‐WEBKIT-‐BORDER-‐IMAGE:URL(“FOTO1.PNG”) 30 30 ROUND; /* SAFARI
Y GOOGLE CHROME */
-‐O-‐BORDER-‐IMAGE:URL(“FOTO1.PNG”) 30 30 ROUND; /* OPERA */
}
Ejemplo del texto de un párrafo con sombra de color rojo.
P{
TEXT-‐SHADOW: 5PX 5PX 5PX #FF0000;
}
Ejemplo para colocar el tipo de letra que quiera usted en un párrafo o DIV,
teniendo el archivo TTF en la carpeta de su proyecto.
@FONT-‐FACE{
FONT-‐FAMILY: CUALQUIERNOMBRE;
SRC: URL('SANSATION_LIGHT.TTF'),
URL('SANSATION_LIGHT.EOT'); /* INTERNET EXPLORER 9+ */
}

DIV{
FONT-‐FAMILY:CUALQUIER NOMBRE;
}
</STYLE>

Ejemplo para rotar 30º un DIV.
DIV{
TRANSFORM: ROTATE(30DEG);

-‐MS-‐TRANSFORM: ROTATE(30DEG); /* INTERNET EXPLORER 9+ */
-‐WEBKIT-‐TRANSFORM: ROTATE(30DEG); /* SAFARI Y CHROME */
-‐O-‐TRANSFORM: ROTATE(30DEG); /* OPERA */
-‐MOZ-‐TRANSFORM: ROTATE(30DEG); /* FIREFOX */
}

Ejemplo para rotar en 2 ejes un DIV.
DIV{
TRANSFORM: SKEW(30DEG,20DEG);
-‐MS-‐TRANSFORM: SKEW(30DEG,20DEG); /* INTERNET EXPLORER 9+ */
-‐WEBKIT-‐TRANSFORM: SKEW(30DEG,20DEG); /* SAFARI Y CHROME */
-‐O-‐TRANSFORM: SKEW(30DEG,20DEG); /* OPERA */
-‐MOZ-‐TRANSFORM: SKEW(30DEG,20DEG); /* FIREFOX */
}

Ejemplo para voltear horizontalmente el contenido de un DIV. (No es compatible
en Opera e Internet Explorer).
DIV{
TRANSFORM: ROTATEX(120DEG);
-‐WEBKIT-‐TRANSFORM: ROTATEX(120DEG); /* SAFARI Y CHROME */
-‐MOZ-‐TRANSFORM: ROTATEX(120DEG); /* FIREFOX */
}

Ejemplo para voltear verticalmente el contenido de un DIV. (No es compatible en
Opera e Internet Explorer).
DIV{
TRANSFORM: ROTATEY(130DEG);
-‐WEBKIT-‐TRANSFORM: ROTATEY(130DEG); /* SAFARI AND CHROME */
-‐MOZ-‐TRANSFORM: ROTATEY(130DEG); /* FIREFOX */
}

Ejemplo de un DIV que cambia de tamaño cuando el usuario pasa el Mouse sobre
él. (No es compatible en Internet Explorer).
DIV{
WIDTH:100PX;
HEIGHT:100PX;
BACKGROUND:RED;
TRANSITION:WIDTH 2S;
-‐MOZ-‐TRANSITION:WIDTH 2S; /* FIREFOX 4 */
-‐WEBKIT-‐TRANSITION:WIDTH 2S; /* SAFARI AND CHROME */
-‐O-‐TRANSITION:WIDTH 2S; /* OPERA */
}

DIV:HOVER{
WIDTH:300PX;

}
</STYLE>

Ejemplo de un DIV que gira con el fin de quedar volteado el contenido de éste,
cuando el usuario pasa el Mouse sobre él. (No es compatible en Internet
Explorer).
DIV{
WIDTH:100PX;
HEIGHT:100PX;
BACKGROUND:RED;
TRANSITION:WIDTH 2S, HEIGHT 2S;
-‐MOZ-‐TRANSITION:WIDTH 2S, HEIGHT 2S, -‐MOZ-‐TRANSFORM 2S; /*
FIREFOX 4 */
-‐WEBKIT-‐TRANSITION:WIDTH 2S, HEIGHT 2S, -‐WEBKIT-‐TRANSFORM
2S; /* SAFARI AND CHROME */
-‐O-‐TRANSITION:WIDTH 2S, HEIGHT 2S, -‐O-‐TRANSFORM 2S; /* OPERA */
}

DIV:HOVER{
WIDTH:200PX;
HEIGHT:200PX;
TRANSFORM:ROTATE(180DEG);
-‐MOZ-‐TRANSFORM:ROTATE(180DEG); /* FIREFOX 4 */
-‐WEBKIT-‐TRANSFORM:ROTATE(180DEG); /* SAFARI AND CHROME */
-‐O-‐TRANSFORM:ROTATE(180DEG); /* OPERA */
}
</STYLE>

Ejemplo de un DIV que cambia de tamaño cuando el usuario pasa el Mouse sobre
éste con un retardo de 2 segundos. (No es compatible en Internet Explorer)
DIV{
WIDTH:100PX;
HEIGHT:100PX;
BACKGROUND:RED;
TRANSITION-‐PROPERTY:WIDTH;
TRANSITION-‐DURATION:1S;
TRANSITION-‐TIMING-‐FUNCTION:LINEAR;
TRANSITION-‐DELAY:2S;
/* FIREFOX 4 */
-‐MOZ-‐TRANSITION-‐PROPERTY:WIDTH;
-‐MOZ-‐TRANSITION-‐DURATION:1S;
-‐MOZ-‐TRANSITION-‐TIMING-‐FUNCTION:LINEAR;
-‐MOZ-‐TRANSITION-‐DELAY:2S;
/* SAFARI Y CHROME */
-‐WEBKIT-‐TRANSITION-‐PROPERTY:WIDTH;
-‐WEBKIT-‐TRANSITION-‐DURATION:1S;

-‐WEBKIT-‐TRANSITION-‐TIMING-‐FUNCTION:LINEAR;
-‐WEBKIT-‐TRANSITION-‐DELAY:2S;
/* OPERA */
-‐O-‐TRANSITION-‐PROPERTY:WIDTH;
-‐O-‐TRANSITION-‐DURATION:1S;
-‐O-‐TRANSITION-‐TIMING-‐FUNCTION:LINEAR;
-‐O-‐TRANSITION-‐DELAY:2S;
}

DIV:HOVER{
WIDTH:200PX;
}
</STYLE>

Ejemplo de un DIV que cambia de Rojo a Amarillo cuando el usuario desliza el
Mouse sobre éste. (No es compatible en Internet Explorer).
DIV{
WIDTH:100PX;
HEIGHT:100PX;
BACKGROUND:RED;
ANIMATION:MYFIRST 5S;
-‐MOZ-‐ANIMATION:MYFIRST 5S; /* FIREFOX */
-‐WEBKIT-‐ANIMATION:MYFIRST 5S; /* SAFARI AND CHROME */
-‐O-‐ANIMATION:MYFIRST 5S; /* OPERA */
}

@KEYFRAMES MYFIRST{
FROM {BACKGROUND:RED;}
TO {BACKGROUND:YELLOW;}
}

@-‐MOZ-‐KEYFRAMES MYFIRST /* FIREFOX */
{
}

@-‐WEBKIT-‐KEYFRAMES MYFIRST /* SAFARI Y CHROME */
{
}

@-‐O-‐KEYFRAMES MYFIRST /* OPERA */
{

}
</STYLE>

Ejemplo de un DIV que cambia de colores y se mueve automáticamente haciendo
un recorrido en un cuadro imaginario, cuando el usuario desliza el Mouse sobre
éste. (No es compatible en Internet Explorer).
DIV{
WIDTH:100PX;
HEIGHT:100PX;
BACKGROUND:RED;
POSITION:RELATIVE;
ANIMATION:MYFIRST 5S LINEAR 2S INFINITE ALTERNATE;
/* FIREFOX: */
-‐MOZ-‐ANIMATION:MYFIRST 5S LINEAR 2S INFINITE ALTERNATE;
/* SAFARI Y CHROME: */
-‐WEBKIT-‐ANIMATION:MYFIRST 5S LINEAR 2S INFINITE ALTERNATE;
/* OPERA: */
-‐O-‐ANIMATION:MYFIRST 5S LINEAR 2S INFINITE ALTERNATE;
}

@KEYFRAMES MYFIRST{
0% {BACKGROUND:RED; LEFT:0PX; TOP:0PX;}
25% {BACKGROUND:YELLOW; LEFT:200PX; TOP:0PX;}
50% {BACKGROUND:BLUE; LEFT:200PX; TOP:200PX;}
75% {BACKGROUND:GREEN; LEFT:0PX; TOP:200PX;}
}

@-‐MOZ-‐KEYFRAMES MYFIRST /* FIREFOX */
{
}

@-‐WEBKIT-‐KEYFRAMES MYFIRST /* SAFARI Y CHROME */
{
}

@-‐O-‐KEYFRAMES MYFIRST /* OPERA */

{
}
</STYLE>

2. Ahora discuta con sus compañeros en coordinación con el docente, las
ventajas de utilizar los diferentes exploradores de Internet para CSS3.
3. Finalmente, realice las anotaciones pertinentes en cada uno de los
ejemplo vistos anteriormente, con la finalidad de que aclare todas sus
dudas acerca de cómo utilizar cada una de las propiedades que se
muestran en los códigos.

Actividad 46. Independencia de México (AULA)
1. En su cuaderno de apuntes, elabore la siguiente página WEB bajo los
requerimientos que a continuación se le solicitan.

a. Coloque sombra a los 5 DIVs como lo muestra la imagen.

b. Coloque una fotografía de cada uno de los insurgentes de la
Independencia de México en cada DIV.
c. Rote los DIVs utilizando ángulos diferentes.
d. Cambie el color de fondo de cada DIV.
e. Recuerde contemplar la ubicación y tamaño de los DIVs cuando
elabore los estilos CSS.
2. Pregunte a su profesor en caso de que tenga dudas para la elaboración de
su página. Recuerde leer la actividad anterior para recuperar el
aprendizaje adquirido.
3. Solicite a su profesor que verifique su trabajo.

Actividad 47. Hola en diferentes idiomas (AULA)
1. En su cuaderno de apuntes, elabore la siguiente página WEB bajo los
requerimientos que a continuación se le solicitan.

HOLA HELLO BONJOUR

HALLO CIAO

a. Cada DIV debe contener un tipo de letra diferente (TIPO1.TTF,
TIPO2.TTF, TIPO3.TTF, TIPO4.TTF y TIPO5.TTF)
b. Voltee el texto de la palabra HELLO y CIAO.
c. Cambie el color de fondo de cada DIV.
d. Coloque una animación de movimiento lateral cuando se deslice el
Mouse sobre cada uno de los DIVs mediante CSS3.
e. Recuerde contemplar la ubicación y tamaño de los DIVs cuando
elabore los estilos CSS.
2. Pregunte a su profesor en caso de que tenga dudas para la elaboración de
su página. Recuerde leer la actividad anterior para recuperar el
aprendizaje adquirido.
3. Solicite a su profesor que verifique su trabajo


Actividad 48. Ecosistemas (PRÁCTICA)
1. Descargue de Internet 6 imágenes referentes a los diferentes ecosistemas
que existen en el mundo, y guárdelas en una carpeta llamada Ecosistemas
ubicada en su portafolio de evidencias.
2. Cree una página WEB con la estructura básica de una página HTML5
llamada ecosistemas y guárdela en su carpeta de los Ecosistemas.
3. Inserte 6 DIVs que se vean como en la siguiente imagen. Considere los
siguientes requerimientos.

a. Coloque sombra a los 6 DIVs como lo muestra la imagen anterior.
b. Rote los DIVs para que se visualicen como la imagen anterior.
c. Utilice hojas de estilo CSS para fijar la ubicación y tamaño de los
DIVs.
d. Pregunte a su profesor en caso de que tenga dudas para la
elaboración de su página. Recuerde leer la actividad anterior para
recuperar el aprendizaje adquirido.
4. Solicite a su profesor que verifique su trabajo.

Actividad 49. Los aztecas (PRÁCTICA)
1. Asegúrese de que el equipo de cómputo con el que vaya a trabajar tenga
instalado el explorador Google Chrome, Safari, Opera o Firefox. Las
etiquetas que se estudiarán en esta práctica no son compatibles con
Internet Explorer y por tanto, no funcionará.
2. Cree una página WEB HTML5 y guárdela en una carpeta llamada
“Aztecas”.
3. Dentro de la página, cree 3 DIVs en posiciones aleatorias con un ancho de
100px y un alto de 100px, cuidando que no se encimen.
4. Dentro de cada DIV inserte una imagen alusiva a los Aztecas. La imagen
debe descargarla de Internet.
5. Agregue un efecto de transición a los DIVs mediante CSS de modo que
cada DIV cambie su tamaño cuando el usuario mueva el cursor del mouse
sobre éste, tal y como se muestra a continuación.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>LOS AZTECAS </TITLE>
DIV{
WIDTH:100PX;
HEIGHT:100PX;
BACKGROUND:RED;
TRANSITION:WIDTH 2S, HEIGHT 2S;
-‐MOZ-‐TRANSITION:WIDTH 2S, HEIGHT 2S;
-‐WEBKIT-‐TRANSITION:WIDTH 2S, HEIGHT 2S;;
-‐O-‐TRANSITION:WIDTH 2S, HEIGHT 2S;;
}

DIV:HOVER{
WIDTH:300PX;
HEIGHT:300PX;
}
</STYLE>

</HEAD>
<BODY>
<IMG SRC= “AZTECAS1.JPG” WIDTH= “100PX”
HEIGHT =”100PX”/>
</DIV>
</DIV>

</DIV>
</BODY>
</HTML>

6. Ejecute su página WEB en el explorador que desee excepto en Internet
Explorer. Verifique que su animación se ejecute cuando mueva el cursor
del mouse sobre cada DIV.
7. Noté que el estilo está diseñado para que todos los DIVs que estén dentro
de la página tengan la animación realizada. Esto le ayuda a evitar estar
elaborando el estilo de cada DIV.

Actividad 50. Historia del teléfono (PRÁCTICA)
1. Asegúrese de que el equipo de cómputo con el que vaya a trabajar tenga
instalado el explorador Google Chrome, Safari, Opera o Firefox. Las
etiquetas que se estudiarán en esta práctica no son compatibles con
Internet Explorer y por tanto, no funcionará.
2. Cree una página WEB con la estructura básica de HTML5 y guárdela en
una carpeta llamada “Teléfono” con el nombre “telefono.html”.
3. Busque y descargue de Internet, 5 imágenes de teléfonos en diferentes
épocas de su historia y organícelas dentro de la carpeta “Teléfono”.
4. Inserte dentro de la página WEB, 5 DIVs con sus extremos redondeados
que contenga dentro de éstos, las imágenes descargadas del paso anterior.
Los DIVs deben estar acomodados de la siguiente manera:

5. Agregue un efecto de transición a los DIVs mediante CSS de modo que los
DIVs estén rotando en forma circular cuando se deslice el cursor del
mouse sobre alguno de estos.


Pagsweb 2

Cargado por

Copyright:

Formatos disponibles

Pagsweb 2

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Pagsweb 2

Cargado por

Copyright:

Formatos disponibles

UNIDAD 2. HTML5 Y CSS

PLANTEL: METEPEC II

ELABORÓ: ACADEMIA DE INFORMÁTICA

Actualizado el día: 18/10/12 a las: 20:16

Actualizado el día: 18/10/12 a las: 20:16

Actualizado el día: 18/10/12 a las: 20:16

Antes de la introducción de HTML5 no era posible reproducir video sobre una

El estándar HTML5 define varios elementos nuevos, entre los cuales se

El elemento <video> cuenta con un "sistema de detección de soporte" propio,

Actualizado el día: 18/10/12 a las: 20:16

<SOURCE SRC=”VIDEO/MOVIE.MP4” TYPE=”VIDEO/MP4” />

Atributo Valor Descripción

Actualizado el día: 18/10/12 a las: 20:16

MP4 (MPEG-­‐4 Part 14)

Actualizado el día: 18/10/12 a las: 20:16

El contenedor AVI (Audio Video Interleave) es propiedad de Microsoft

Actualizado el día: 18/10/12 a las: 20:16

Actualizado el día: 18/10/12 a las: 20:16

MP3 (MPEG-­‐1 Audio Layer 3)

Requier Requier Chrome (3.0+) Reproductores

Actualizado el día: 18/10/12 a las: 20:16

Requier IE (9.0) Xbox 360

Vorbis Audio Gratuita Firefox (3.5+)

Vorbis Audio Gratuita Firefox (4.0+)

# Video AddType video/ogg ogv AddType video/mp4 mp4 m4v AddType

Actualizado el día: 18/10/12 a las: 20:16

Software Tipo Descarga Codecs soportados en HTML5

Extensión OGG (Theora + Vorbis)

Actualizado el día: 18/10/12 a las: 20:16

Actualizado el día: 18/10/12 a las: 20:16

Actualizado el día: 18/10/12 a las: 20:16

<H1> Caricaturas <H1>

Actualizado el día: 18/10/12 a las: 20:16

Actualizado el día: 18/10/12 a las: 20:16

4. Coloque como subtítulo Vídeos debajo del encabezado de la página

Actualizado el día: 18/10/12 a las: 20:16

4. Solicite a su profesor la revisión de su trabajo.

Actualizado el día: 18/10/12 a las: 20:16

Actualizado el día: 18/10/12 a las: 20:16

3. Solicite a su profesor que revise su trabajo.

Actualizado el día: 18/10/12 a las: 20:16

<META CHARSET = “ISO-­‐8859-­‐1” />

Actualizado el día: 18/10/12 a las: 20:16

Actualizado el día: 18/10/12 a las: 20:16

Actualizado el día: 18/10/12 a las: 20:16

Actualizado el día: 18/10/12 a las: 20:16

<VIDEO SRC = “VIDEO1.OVG” AUTOPLAY> </VIDEO>

Actualizado el día: 18/10/12 a las: 20:16

<VIDEO SRC= “VIDEO1.OVG” POSTER= “GONORREA.JPG” CONTROLS AUTOPLAY

Actualizado el día: 18/10/12 a las: 20:16

Actualizado el día: 18/10/12 a las: 20:16

EXPLORADOR DE OGV WEBM MPEG

Actualizado el día: 18/10/12 a las: 20:16

Actualizado el día: 18/10/12 a las: 20:16

<LINK REL= “STYLESHEET” TYPE = “TEXT/CSS” HREF= “ESTRUCTURA.CSS”/>

Actualizado el día: 18/10/12 a las: 20:16

Actualizado el día: 18/10/12 a las: 20:16

Actualizado el día: 18/10/12 a las: 20:16

MP4 (MPEG-‐4 Part 14)

MP3 (MPEG-‐1 Audio Layer 3)

<META CHARSET = “ISO-‐8859-‐1” />