Guia 1

UNIVERSIDAD DON BOSCO
FACULTAD DE ESTUDIOS TECNOLÓGICOS

COMPUTACIÓN
GUIA DE LABORATORIO #1
Nombre de la Practica: Repaso HTML5 y CSS3.
Lugar de Ejecución: Centro de Cómputo.
CICLO: 02/2015 Tiempo Estimado: 2 horas con 30 minutos.
MATERIA: Desarrollo de Aplicaciones Web con Software Interpretado
en el Cliente.
DOCENTES: Ing. Karens Medrano/Ing. Ricardo Elías.
I. OBJETIVOS
Que el estudiante:
 Repase la creación de documentos HTML5 con una estructura correcta de acuerdo a los estándares y
buenas prácticas dictadas por la W3C.
 Perfeccione la sintaxis de los distintos tipos de selectores CSS y la forma correcta de aplicarlos a los
elementos, identificadores y clases de un documento HTML5 bien estructurado.
 Cree formularios HTML5 incorporando los nuevos elementos de formulario y aplique los nuevos
atributos definiendo estilos para que su visualización sea la mejor posible mediante el uso de CSS3.
 Cree estructuras de navegación sofisticadas mediante técnicas de listas.
 Aplique diseño web adaptativo en todos los niveles, desde la propia estructura del sitio web, menús de
navegación, imágenes y tablas.
 II. INTRODUCCION TEORICA
Estructura semántica básica de HTML5

El lenguaje utilizado para la creación de sitios web es el HTML. En la actualidad se trabaja con HTML5 que
pone a disposición una nueva serie de elementos, representados por etiquetas, con un significado semántico.
Los documentos realizados con este lenguaje para que estén bien construidos deben seguir una estructura
básica. Los nuevos elementos propuestos en HTML5 son similares a los conocidos elementos DIV o SPAN,
con la diferencia que poseen nombres más semánticos que los hacen más entendibles a los seres humanos,
como HEADER, NAV, SECTION, ARTICLE, FOOTER, AUDIO, VIDEO, CANVAS, etc. Sin embargo, como
los nuevos elementos no son reconocidos por navegadores antiguos, es recomendable que los usuarios
actualicen sus navegadores por versiones más modernas. Examinemos algunos de los elementos HTML de la
estructura básica de un documento.
Empecemos con el DOCTYPE, es muy sencillo de escribir y ha sido recortado con respecto a los definidos
para HTML4 y XHTML 1. Después se utiliza la etiqueta HTML la cual engloba todo el documento. Este
elemento posee el atributo lang para indicar el idioma de todo el documento.
1 / 65
Guía # 1: Repaso HTML5 y CSS3.
Ahora toca el turno del título, este sigue siendo el mismo, con diferencia de la etiqueta META, donde le
decimos al navegador que tipo de codificado es el documento html, de preferencia usemos el UTF-8 que
acepta nuestros acentos y ñ con más compatibilidad.
En realidad es algo demasiado corto y que no quita mucho tiempo, todo esto sigue estando en la
etiqueta HEAD que no ha cambiado para nada, es algo muy parecido a XHTML, la cuestión es resumir
el código.
Pasemos a las etiquetas link, son las que enlazan nuestros estilos CSS entro otros. Estas son muy cortas ahora
usaremos algo que ya existía, el atributo REL que usamos en los links para cuestiones de SEO(Search Engine
Optimization).
REL es para decir, que estamos enlazando, ya que el atributo TYPE no se utiliza a menos que usemos para
enlazar el FEED.
Ya terminamos con la parte no visible de la página web, es el turno del cuerpo o BODY, esta etiqueta sigue
siendo útil para lo mismo, pero a continuación empieza algo interesante que son las etiquetas de la estructura
del sitio visual.
La etiqueta HEADER es la cabecera donde va el nombre del sitio, el logotipo y descripción de la página
web, ejemplo.
Recomiendo que solo se use un H1 en una cabecera por cuestiones de SEO, pero es posible poner más de
un H1 y HEADER.
Como pueden ver, la etiqueta HEADER es muy equivalente a crear un DIV con ID=”header”, pero ahora
tenemos una etiqueta especial para ello.
Pasamos con el contenido o SECTION usando H2 de título y el contenido en etiquetas Adentró de una
etiqueta llamada ARTICLE para artículos o post, esto por cuestiones de SEO que es muy recomendable
también, ejemplo.
SECTION es el equivalente a un DIV con ID="contenido" y ARTICLE a un DIV con ID="post" o "articulo"
Otra etiqueta interesante es la etiqueta ASIDE, lo que viene siendo nuestro SIDEBAR o barra lateral y es muy
fácil de implementar con H3 de título y P de contenido dentro de ella.
ASIDE es nuestro equivalente a un DIV con ID="sidebar" o "barra"

Y finalizando con el pie de la página con la etiqueta muy obvia FOOTER , un ejemplo.
Lenguajes Interpretados en el Cliente 2

FOOTER es nuestro equivalente a un DIV con ID="footer" o "pie".

Ahora el código debería tener la siguiente estructura.

Explicación de algunos atributos CSS
font-size
La propiedad font-size establece el tamaño del texto en puntos (pt), pulgadas (in), centímetros (cm), o pixels
(px).
Ejemplos:
{font-size: 12pt}
{font-size: 1in}
{font-size: 5cm}
{font-size: 24px}
font-family
La propiedad font-family establece la fuente del texto. Se puede especificar una única fuente, como por
ejemplo:
{font-family: Arial}
u otras fuentes alternativas, separadas por una coma, como por ejemplo:
{font-family: Arial, Helvetica}
En el ejemplo anterior, nos aseguramos que los sistemas que no soporten la fuente Arial, uticen la fuente
Helvetica. Es muy aconsejable especificar, como útimo recurso, un nombre genérico de familia de fuentes.
Ejemplo:
{font-family: Arial, Helvetica, sans-serif}
Estos nombres genéricos de familia de fuentes (serif, sans-serif, cursive, fantasy, o monospace) tienen la
ventaja de que son representados como las fuentes que tenga instaladas el usuario.
Si se hace referencia a una fuente cuyo nombre consiste en varias palabras (separadas por espacios en
blanco), hay que englobarla entre comillas. Ejemplo:
{font-family: "Courier New"}
font-weight
La propiedad font-weight establece el espesor de la fuente:
{font-weight: medium}
{font-weight: bold}
Los valores aceptados (extra-light, light, demi-light, medium, demi-bold, bold, y extra-bold) dependen en las
fuentes que tenga instaladas el usuario. (Por ejemplo, el sistema del usuario puede que sólo permita
medium y bold para una determinada fuente).
font-style
La propiedad font-style establece la fuente como cursiva:
{font-style: italic}
En el borrador de la W3C se contemplan además otros posibles estilos (minúsculas, oblicuas, etc.)

line-height
Este atributo establece la separación entre líneas, que se puede expresar en puntos (pt), pulgadas (in),
centÌmetros (cm), pixels (px) o porcentaje (%). Ejemplo:
{line-height: 20pt}
También se puede expresar como un porcentaje del valor por defecto:
{line-height: 150%}
En el Explorer 3.0, el espaciado se añade antes de las líneas, no después de ellas. Además este atributo se
comporta de forma impredecible con texto que usa diferentes tamaños de texto en la misma línea.
color
Este atributo establece el color del texto de acuerdo con su valor hexadecimal, o usando los nombres de
colores:
{color: #33CC00}
{color: red}
Los nombres de algunos de los colores son:
Text-decoration
Este atributo permite remarcar el texto. Los valores soportados son underline (subrayado), line-through
(tachado), none (ninguno) e italic (cursiva). Ejemplos:
{text-decoration: underline}
{text-decoration: line-through}

text-align
Este atributo permite justificar los elementos HTML a la izquierda, al centro o a la derecha. Ejemplos:
{text-align: left}
{text-align: center}
{text-align: right}
text-indent
Además de establecer los márgenes, se puede provocar una indentación del texto (es decir, que la primera
palabra del párrafo se desplace una cantidad deseada). Se puede expresar en puntos, pulgadas, centímetros
o pixels. Por ejemplo:
P {text-indent: 0.5cm}
Hace que los párrafos que se crean con la etiqueta <P>, empiecen con su primera línea indentada 0.5
centímetros.
Se pueden usar valores negativos, que sacan el texto hacia los márgenes.
background
Se utiliza este atributo para destacar secciones de una página, estableciendo un color de fondo o una imagen
de fondo. Para la primera se especifica con la propiedad background-color, mientras que para la segunda se
especifica con la propiedad background-image.
Para establecer un color de fondo, se especifica su valor hexadecimal, o un nombre de color HTML (ver La
propiedad color visto anteriormente).
Ejemplos:
/* Para colores */
BODY {background-color:red}
BODY {background-color:#6633FF}
También se puede colocar una imagen de fondo en el ámbito de la etiqueta. Es decir, se puede poner, por
ejemplo, una imagen de fondo en un párrafo determinado.
Para colocar una imagen, se especifica el URL entre paréntesis (no entre comillas, como es lo habitual). Por
ejemplo:
{background-image: URL(http://www.wmaestro.com/webmaestro/docs/nubes.jpg)}
En este caso se ha puesto el URL absoluto, es decir, la referencia completa en el servidor. Pero es más
conveniente hacerlo de forma relativa, es decir con respecto al documento HTML. Si el fichero de imagen y
el documento HTML están en el mismo directorio, no hay que poner ningún URL, sino el nombre del fichero
de imagen directamente. En el ejemplo anterior sería:
{background-image: URL(nubes.jpg)}
Vamos a ver una aplicación práctica: poner esta imagen de fondo a un párrafo, utilizando el método de
incluir el estilo en la etiqueta <P>:

<P STYLE="background: URL(nubes.jpg)"> Este párrafo tiene un fondo con imágenes, al igual que con el
HTML convencional se consigue para toda una página, pero en este caso está limitado al ámbito de esta
etiqueta.
<P> En cambio, este otro párrafo no tiene imagen de fondo, porque no se le ha incluido este atributo.
Este es el resultado:
Este párrafo tiene un fondo con imágenes, al igual que con el HTML convencional se consigue para toda una
página, pero en este caso está limitado al ámbito de esta etiqueta.
En cambio, este otro párrafo no tiene imagen de fondo, porque no se le ha incluido este atributo.
Valores y unidades de medida

Como se ha podido observar en algunos de los ejemplos es necesario especificar en algunas propiedades
medidas mediante valores y unidades de medida. Por ejemplo, para tamaños de fuente, para márgenes,
para grosor de bordes, etc.
El valor de medida está constituido por un signo opcional (+ | -) seguido por un número (con o sin punto
decimal).
La unidad de medida puede ser relativa o absoluta. Las unidades relativas son: em, ex, px. Las unidades
absolutas son: in, cm, mm, pt, pc (picas).
Ejemplo:
P{
font-size:12pt;
text-indent:10px;
margin-left:1in;
margin-right:1in;
}
Acerca de los colores y fondos

En hojas de estilo se pueden especificar los colores de tres formas diferentes. Dos de ellas ya se mostraron
en la sección anterior. En esta sección se explicarán las tres formas:
La primera forma es utilizando el nombre de color predefinido. Debe tener cuidado que sea un nombre
válido. No debe de llevar espacios en blanco.
Ejemplo:
H1 {color:red;}
La segunda forma es utilizando el valor hexadecimal del color precedido del símbolo de numeral (#).
Ejemplo:
H1 {color:#FF3333;}
La tercera forma, que es la novedosa, es utilizando notación rgb, como se muestra a continuación:
H1 {color:rgb(255,0,0);}
Note que en esta última forma debe especificar los valores de color dentro de un rango que va desde 0 hasta
255 en base decimal.
Las propiedades de estilo en las que se pueden establecer colores son todos los elementos para
presentación de texto y los elementos para colocar fondos. Por ejemplo:
P {background-color:rgb(0,0,64); color:rgb(255,0,0);

III. MATERIALES Y EQUIPO
Para la realización de la guía de práctica se requerirá lo siguiente:

No. Requerimiento Cantidad
1 Guía de práctica #0: Repaso HTML5 - CSS3. 1
2 Computadora con navegadores y editor de texto instalado 1
3 Memoria USB o disco flexible 1
IV. PROCEDIMIENTO
Indicaciones: Para todos los ejemplos de esta guía de práctica utilizaremos el Notepad++ o Sublime Text 3. Se
pide que cuando guarde el archivo lo haga con extensión .html, En todo caso, la única extensión diferente que
se utilizará en esta práctica será la extensión .css, para cuando se requiera crear un script con los estilos de
manera independiente.
Ejercicio 1: Creación de página web con cuadrícula flexible con html y css.
En este ejercicio seguiremos un proceso para lograr la realización de una página web con diseño flexible. Lo
primero será crear el marcado HTML de la página como se ilustra en el siguiente código que debe digitar sin
errores. Cree una carpeta y denomínela flexible, junto a esta cree otras carpetas y denomínelas css, img y site.
La estructura de carpetas del proyecto debe ser la siguiente:
Carpeta flexible
Script html: cuadricula-flexible.html

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="DC.creator" content="Ethan Marcotte - http://unstoppablerobotninja.com/"
/>
<meta name="DC.language" content="es" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cuadrícula flexible</title>
<link rel="stylesheet" href="css/flexible-grid.css" />
</head>
<body>
<div id="page">
<div class="inner">
<div class="mast">
<h1 id="logo">
<a href="#">
<img src="img/logo.png" alt="The Baker Street Inquirer" />
</a>
</h1>
<ul class="nav">
<li class="first">
<a href="#"><i>El</i> Weblogue</a>
</li>
<li>
<a href="#"><i>Ediciones</i> Anteriores</a>
</li>
<li class="last">
<a href="#"><i>Acerca de</i> Nuestro papel</a>

</li>
</ul>
</div>
<div class="section intro">
<div>
<h2>“Dame problemas, me dan <em>trabajo</em>”.</h2>
<p>
En el año 1878 obtuve mi grado de Doctor en Medicina
en la Universidad de Londres, y viajé a Netley para
tomar el curso prescrito para los cirujanos en el ejército.
Después de haber completado mis estudios allí, yo estaba
debidamente acreditado para ejercer como cirujano auxiliar
en la «Fifth Northumberland Fusiliers». El regimiento
estaba ubicado en la India en aquel momento, y antes de
que pudiera unirme a ella, estalló la segunda guerra
afgana. Al desembarcar en Bombay, me enteré de que mi
cuerpo había avanzado a través de las estaciones, y estaba
inmerso en el territorio enemigo.
</p>
</div>
</div>
<div class="section main">
<h2>
<b>Victors <abbr class="amp" title="And">&</abbr> Villains</b>
</h2>
<ol>
<li id="f-holmes" class="figure">
<a href="#">
<img src="img/f-holmes.jpg" alt="" />
<span class="figcaption">Sherlock
<b>Holmes</b></span>
</a>
</li>
<li id="f-watson" class="figure">
<a href="#">
<img src="img/f-watson.jpg" alt="" />
<span class="figcaption"><abbr title="Professor">
Dr.</abbr> John Hemish <b>Watson</b></span>
</a>
<li id="f-mycroft" class="figure">
<a href="#">
<img src="img/f-mycroft.jpg" alt="" />
<span class="figcaption">Mycroft
</a>
<li id="f-moriarty" class="figure">
<a href="#">
<img src="img/f-moriarty.jpg" alt="" />
<span class="figcaption"><abbr
title="Professor">Prof.</abbr> James <b>Moriarty</b></span>
</a>
<li id="f-adler" class="figure">
<a href="#">
<img src="img/f-adler.jpg" alt="" />
<span class="figcaption">Irene <b>Adler</b></span>
</a>
<li id="f-winter" class="figure">
<a href="#">
<img src="img/f-winter.jpg" alt="" />
<span class="figcaption">James
<b>Winter</b></span>

</a>
</ol>
</div>
<div class="footer">
<p>
Ilustraciones de
<a href="http://en.wikipedia.org/wiki/Sidney_Paget">
Sidney Paget</a>, palabras de
<a href="http://en.wikipedia.org/wiki/Arthur_Conan_Doyle">
Sir Arthur Conan Doyle</a>.
</p>
<p>
Lo que resta es gracias a
<a href="http://unstoppablerobotninja.com/">Ethan Marcotte</a>.
</p>
</div>
</div>
</div>


</body>
</html>
Script css: flexible-grid.css (Guardar script en carpeta con nombre css)

/******************************************************************
* Archivo: estilos.css *
* Descripción: Hoja de estilos para la página cuadricula-flexible.html *
* Creador(a): Karens Medrano *
* Materia: Lenguajes Interpretados en el Cliente *
******************************************************************/
.section:after,
ul.nav:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Resetear todos los estilos en los navegadores */

html, body, div,span,
applet, object, iframe,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre, a,
abbr, acronym, address,
big, cite, code, del, dfn,
em, font, img, ins, kbd, q, s,
samp, small, strike, strong,
sub, sup, tt, var, b, u, i,
center, dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody,
tfoot, thead, tr, th, td {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
ol,ul {
list-style:none;
}
blockquote,q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';content:none;
}
ins {
text-decoration:none;
}
del {
text-decoration:line-through;
}
table {
border-collapse:collapse;
border-spacing:0;
}
body {
background: #E4E4E4 url("../img/bg.png");
color: #292929;
color: rgba(0, 0, 0, 0.82);
font: normal 100% Cambria, Georgia, serif;
-moz-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
-webkit-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
-webkit-text-size-adjust: none;
}
a {
color: #890101;
text-decoration: none;
-moz-transition: 0.2s color linear;
-webkit-transition: 0.2s color linear;
transition: 0.2s color linear;
}
a:hover {
color: #DF3030;
}

#page {
background: url("../img/rag.png") repeat-x;
padding: 2em 0;
}
.inner {
margin: 0 auto;
width: 93.75%; /* 960px - 1024px */
}
img {
max-width: 100%;
}
.amp {
font-family: Baskerville,Garamond,Palatino,"Palatino Linotype","Hoefler Text","Times
New Roman",serif;
font-style: italic;
font-weight: normal;
}
.mast {
float: left;
width: 31.875%; /* 306px / 960px */
}
h1 {
background: url("../img/logo-bg.png") no-repeat 50% 0;
}
h1 a {
padding-top: 117px;
height: 162px;
display: block;
text-align: center;
}
.intro,
.main,
.footer {
float: right;
width: 65.9375%; /* 633px - 960px */
}
.intro {
margin-top: 117px;
}
.intro div {
line-height: 1.4;
}
ul.nav {
border-top: 1px solid #888583;
margin: 2em auto 0;
width: 64.379%;
}
ul.nav a {
background: url("../img/ornament.png") no-repeat 0 100%;
font: bold 14px/1.2 "Book Antiqua","Palatino Linotype",Georgia,serif;
display: block;
text-align: center;
letter-spacing: 0.1em;
padding: 1em 0.5em 3em;

margin-bottom: -1em;
text-transform: uppercase;
}
ul.nav a:hover {
background-position: 50% 100%;
}
li.first a {
border-top: 1px solid #FFF9EF;
padding-top: 1.25em;
}
ul.nav i {
font: normal 10px Baskerville, Garamond, Palatino, "Palatino Linotype", "Hoefler
Text", "Times New Roman", serif;
display: block;
}
.intro h2 {
color: #890101;
font: normal 2em "Hoefler Text","Baskerville old face",Garamond,"Times New
Roman",serif;
text-align: center;
margin-bottom: 0.25em;
}
.main h2 {
font-size: 1.4em;
text-transform: lowercase;
text-align: center;
margin: 0.75em 0 1em;
}
.main h2 b {
background: url("../img/bg.png");
padding: 0 1em;
}
.figure {
float: left;
font-size: 10px;
line-height: 1.1;
margin: 0 3.317535545023696682% 1.5em 0; /* 21px - 633px */
text-align: center;
width: 31.121642969984202211%; /* 197px - 633px */
}
.figure b {
display: block;
font-size: 14px;
font-family: "Book Antiqua","Palatino Linotype",Georgia,serif;
}
.figure img {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);

-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);;

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);;
display: block;
margin: 0 auto 1em;
}
li#f-mycroft,
li#f-winter {
margin-right: 0;
}
.footer {
background: url("../img/ornament.png") 50% 0 repeat-x;
font-size: 12px;
text-align: center;
padding: 40px 0 20px;
}
.footer p {
}
Resultado al visualizarlo en varios navegadores (Firefox, Chrome, Internet Explorer y Opera):

Visualización en pantallas amplias
Visualización en pantallas medias, como tablets o mini laptops.

Visualización en dispositivos como smartphones:
Puede notarse que en la vista para dispositivos smartphones se monta el menú lateral dentro del contenido.
Esto es lógico, porque no se pensó el diseño para un dispositivo con un área de visualización tan pequeña. Es
aquí donde conviene hacer modificaciones para que el contenido se adapte a las características de un
dispositivo para el que no estaba diseñada la página. Haremos uso de media-queries y de las nuevas
propiedades de CSS3 que lo harán posible.

Ejercicio 2: Creación de página web adaptable con HTML5 y CSS3.

Ahora convertiremos mediante propiedades CSS3 la página web en adaptable a distintos tipos de dispositivos
atendiendo a la cantidad de pixeles del área de visualización usando para ello media-queries.
Script HTML: cuadricula-adaptable.html

<!DOCTYPE html>
<html lang="es">
<head>
<meta name="DC.creator" content="Ethan Marcotte - http://unstoppablerobotninja.com/"
/>
<meta name="DC.language" content="es" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cuadrícula adaptable</title>
<link rel="stylesheet" href="css/responsive-grid.css" />
</head>
<body>
<div id="page">
<div class="inner">
<div class="mast">
<h1 id="logo">
<a href="#"><img src="img/logo.png" alt="The Baker Street Inquirer" /></a>
</h1>
<ul class="nav">
<li class="first">
<a href="#"><i>El</i> Weblogue</a>
</li>
<li>
<a href="#"><i>Ediciones</i> Anteriores</a>
</li>
<li class="last">
<a href="#"><i>Acerca de</i> Nuestro papel</a>
</li>
</ul>
</div>
<div class="section intro">
<div>
<h2>“Dame problemas, me dan <em>trabajo</em>”.</h2>
<p>
En el año 1878 obtuve mi grado de Doctor en Medicina
en la Universidad de Londres, y viajé a Netley para
tomar el curso prescrito para los cirujanos en el ejército.
Después de haber completado mis estudios allí, yo estaba
debidamente acreditado para ejercer como cirujano auxiliar
en la «Fifth Northumberland Fusiliers». El regimiento
estaba ubicado en la India en aquel momento, y antes de
que pudiera unirme a ella, estalló la segunda guerra
afgana. Al desembarcar en Bombay, me enteré de que mi
cuerpo había avanzado a través de las estaciones, y estaba
inmerso en el territorio enemigo.
</p>
</div>
</div>
<div class="section main">

<h2>
<b>Victors <abbr class="amp" title="And">&</abbr> Villains</b>
</h2>
<ol>
<li id="f-holmes" class="figure">
<a href="#">
<img src="img/f-holmes.jpg" alt="" />
<span class="figcaption">Sherlock

</a>
<li id="f-watson" class="figure">
<a href="#">
<img src="img/f-watson.jpg" alt="" />
<span class="figcaption"><abbr title="Professor">
Dr.</abbr> John Hemish <b>Watson</b></span>
</a>
<li id="f-mycroft" class="figure">
<a href="#">
<img src="img/f-mycroft.jpg" alt="" />
<span class="figcaption">Mycroft
</a>
<li id="f-moriarty" class="figure">
<a href="#">
<img src="img/f-moriarty.jpg" alt="" />
<span class="figcaption"><abbr
title="Professor">Prof.</abbr> James <b>Moriarty</b></span>
</a>
<li id="f-adler" class="figure">
<a href="#">
<img src="img/f-adler.jpg" alt="" />
<span class="figcaption">Irene <b>Adler</b></span>
</a>
<li id="f-winter" class="figure">
<a href="#">
<img src="img/f-winter.jpg" alt="" />
<span class="figcaption">James
<b>Winter</b></span>
</a>
</ol>
</div>
<div class="footer">
<p>
Ilustraciones de
<a href="http://en.wikipedia.org/wiki/Sidney_Paget">
Sidney Paget</a>, palabras de
<a href="http://en.wikipedia.org/wiki/Arthur_Conan_Doyle">
Sir Arthur Conan Doyle</a>.
</p>
<p>
Lo que resta es gracias a
<a href="http://unstoppablerobotninja.com/">Ethan Marcotte</a>.
</p>
</div>
</div>
</div>


</body>
</html>
Hoja de estilo CSS: responsive-grid.css

.section:after,
ul.nav:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Resetear todos los estilos en los navegadores */

html, body, div, span,
applet, object, iframe,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre, a, abbr,
acronym, address, big, cite,
code, del, dfn, em,
font, img, ins, kbd, q, s,
samp, small, strike, strong,
sub, sup, tt, var, b, u, i,
center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead,
tr, th, td {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
ol,ul {
list-style:none;
}
blockquote,q {
quotes:none;
}
blockquote:before,
blockquote:after,
q:before, q:after {
content:'';content:none;
}
ins {
}
del {
text-decoration:line-through;

table {
border-collapse:collapse;border-spacing:0;
}
body {
background: #E4E4E4 url("../img/bg.png");
color: #292929;
color: rgba(0, 0, 0, 0.82);
font: normal 100% Cambria, Georgia, serif;
-moz-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
-webkit-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
-webkit-text-size-adjust: none;
}
a {
color: #890101;
-moz-transition: 0.2s color linear;
-webkit-transition: 0.2s color linear;
transition: 0.2s color linear;
}
a:hover {
color: #DF3030;
}
#page {
background: url("../img/rag.png") repeat-x;
padding: 2em 0;
}
.inner {
margin: 0 auto;
width: 93.75%; /* 960px - 1024px */
}
img {
max-width: 100%;
}
.amp {
font-family: Baskerville,Garamond,Palatino,"Palatino Linotype","Hoefler
Text","Times New Roman",serif;
font-style: italic;
}
.mast {
float: left;
width: 31.875%; /* 306px - 960px */
}
h1 {
background: url("../img/logo-bg.png") no-repeat 50% 0;
}
h1 a {
padding-top: 117px;
height: 162px;
display: block;
text-align: center;
}

.intro,
.main,
.footer {
float: right;
width: 65.9375%; /* 633px - 960px */
}
.intro {
margin-top: 110px;
}
.intro div {
line-height: 1.4;
}
ul.nav {
border-top: 1px solid #888583;
margin: 2em auto 0;
width: 64.379%;
}
ul.nav a {
font: bold 14px/1.2 "Book Antiqua","Palatino Linotype",Georgia,serif;
display: block;
text-align: center;
padding: 1em 0.5em 3em;
margin-bottom: -1em;
}
ul.nav a:hover {
background-position: 50% 100%;
}
li.first a {
border-top: 1px solid #FFF9EF;
padding-top: 1.25em;
}
ul.nav i {
font: normal 10px Baskerville,Garamond,Palatino,"Palatino Linotype","Hoefler
Text","Times New Roman",serif;
display: block;
}
.intro h2 {
color: #890101;
font: normal 2em "Hoefler Text","Baskerville old face",Garamond,"Times New
Roman",serif;
text-align: center;
}
.main h2 {
font-size: 1.4em;
text-transform: lowercase;
text-align: center;
margin: 0.75em 0 1em;
}

.main h2 b {
background: url("../img/bg.png");
padding: 0 1em;
}
.figure {
float: left;
font-size: 10px;
line-height: 1.1;
margin: 0 3.317535545023696682% 1.5em 0; /* 21px / 633px */
text-align: center;
width: 31.121642969984202211%; /* 197px / 633px */
}
.figure b {
display: block;
font-size: 14px;
font-family: "Book Antiqua","Palatino Linotype",Georgia,serif;
}
.figure img {
border-radius: 4px;
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);;
display: block;
margin: 0 auto 1em;
}
li#f-mycroft,
li#f-winter {
margin-right: 0;
}
.footer {
background: url("../img/ornament.png") 50% 0 repeat-x;
font-size: 12px;
text-align: center;
padding: 40px 0 20px;
}
.footer p {
}
@media (max-width: 600px) {

/* 633px grid (88x6 col, 21x5 gut; 88+21+88+21+88+21+88+21+88+21+88) */
.inner {
position: relative;
}
.mast,
.intro,
.main,
.footer {
float: none;
width: auto;
}
.intro {
margin-top: 46px;

}
}
@media (max-width: 400px) {

.intro {
margin-top: 32px;
}
.figure,
li#f-mycroft {
margin-right: 3.317535545023696682%; /* 21px - 633px */
width: 48.341232227488151658%; /* 306px - 633px */
}
li#f-watson,
li#f-moriarty {
margin-right: 0;
}
}
@media (min-width: 1300px) {

.figure,
li#f-mycroft {
margin-right: 3.317535545023696682%; /* 21px - 633px */
width: 13.902053712480252764%; /* 88px - 633px */
}
}
El resultado visualizado en su navegador es el siguiente:

En pantallas más anchas de 1300px:
En pantallas de 600px a 1299px:

En pantallas mayores o iguales a 400px pero menores de 600px:

En pantallas menores de 400px:

Ejercicio 3: Página web adaptable usando archivos separados de estilos según la dimensión de la pantalla
del dispositivo utilizado para visualizar la página. Se trabajan cuatro dimensiones: a) pantallas superiores
a los 1280px, b) pantallas menores a los 769px y superiores a los 769px, c) pantallas menores o iguales a los
760px y meyores a los 481px, y d) pantallas menores o iguales a los 480px. En cada caso se aplicará una hoja
de estilos distinta denominadas: extrabig.css, big.css, medium.css y mini.css, respectivamente.
Script html: inicio.html

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Diseño Web Adaptable</title>
<link rel="stylesheet" media="screen" href="css/base.css">
<link rel="stylesheet" media="screen" href="css/color.css">
<link rel="stylesheet" media="screen and (min-width: 1281px)" href="css/extrabig.css">
<link rel="stylesheet" media="screen and (min-width: 769px) and (max-width: 1280px)"
href="css/big.css">
<link rel="stylesheet" media="screen and (min-width: 481px) and (max-width: 768px)"
href="css/medium.css">
<link rel="stylesheet" media="screen and (max-width: 480px)" href="css/mini.css">
</head>
<body>
<header>
<h1>El título de sitio web</h1>
<h2 class="display-extrabig">Extra grande</h2>
<h2 class="display-big">Grande</h2>
<h2 class="display-medium">Mediano</h2>
<h2 class="display-mini">Pequeño</h2>
</header>
<div id="wrapper">
<nav id="main-nav">
<h2>Mi menú</h2>
<ul class="menu display-extrabig display-big display-medium">
<li>
<a href="#" title="Inicio">Inicio</a>
</li>
<li>
<a href="#" title="Institucional">Institucional</a>
</li>
<li>
<a href="#" title="Carreras">Carreras</a>
</li>
<li>
<a href="#" title="Nuevo Ingreso">Nuevo Ingreso</a>
</li>
<li>
<a href="#" title="Contacto">Contacto</a>
</li>
</ul>
<select class="display-mini">
<option value="Inicio">Inicio</option>
<option value="Institucional">Institucional</option>
<option value="Carreras">Carreras</option>
<option value="Nuevo Ingreso">Nuevo Ingreso</option>
<option value="Contacto">Contacto</option>
</select>
</nav>
<section id="main-section">
<h2>El contenido principal</h2>
<article>
<h3>
<a href="#" title="Contenido uno">Contenido uno</a>

</h3>
<p class="display-extrabig display-big display-medium">
La Universidad Don Bosco es una institución educativa de nivel superior,
de utilidad pública, apolítica, de inspiración cristiana y sin fines de
lucro.
Pertenece y es respaldada por la Institución Salesiana, por fundación y
arisma.
</p>
</article>
<article>
<h3>
<a href="#" title="Contenido dos">Contenido dos</a>
</h3>
La actividad académica de la Universidad encuentra una base de soporte
y
desarrollo dinámico a través de una serie de Escuelas y Departamentos
especializados que garantizan la calidad educativa de sus programas.
</p>
</article>
<article>
<h3>
<a href="#" title="Contenido tres">Contenido tres</a>
</h3>
Con la apertura del Centro de Estudios de Postgrados (CEP), la
Universidad Don Bosco promueve un nuevo horizonte de las posibilidades
educativas con el propósito de responder objetivamente a necesidades
concretas del país.
</p>
</article>
<article>
<h3>
<a href="#" title="Contenido cuatro">Contenido cuatro</a>
</h3>
El proceso de inscripción para el ciclo 01-2014 inicia a partir del 17
de septiembre del 2013. El proceso inicia con la adquisición del
paquete
informativo, luego por una asesoría en la oficina de Nuevo Ingreso y
la
presentación del cuestionario socio-económico en el Departamento de
Gestión
Social y Estudiantil.
</p>
</article>
<article>
<h3>
<a href="#" title="Contenido cinco">Contenido cinco</a>
</h3>
Universidad Don Bosco<br>
Departamento de Publicidad y Relaciones Públicas<br>
relacionespublicas@udb.edu.sv<br>
Tel. 2251-8200 ext. 1620 <br>
</p>
</article>
</section>
<aside class="display-extrabig display-big">
<ul id="menusec">
<li>
<a href="#" title="Proyección Social">Proyección Social</a>
</li>
<li>
<a href="" title="Investigación">Investigación</a>

</li>
<li>
<a href="#" title="CITT">CITT</a>
</li>
<li>
<a href="#" title="Biblioteca">Biblioteca</a>
</li>
</ul>
</aside>
</div>
<footer>
<p>
Universidad Don Bosco © Derechos reservados 2013. Tel. (503)2251-8200.
Apartado postal: 1874.
</p>
<select class="display-mini">
<option value="Inicio">Inicio</option>
<option value="Institucional">Institucional</option>
<option value="Carreras">Carreras</option>
<option value="Nuevo Ingreso">Nuevo Ingreso</option>
<option value="Contacto">Contacto</option>
</select>
</footer>
</body>
</html>
Hoja de estilos 1: base.css

.display-extrabig {
display: none;
}
.display-big {
display: none;
}
.display-medium {
display: none;
}
.display-mini {
display: none;
}
aside ul,
nav ul {
list-style: none;
padding-left: 10px;
}
.menu {
padding-left: 0;
}
Hoja de estilos 2: color.css

body {
color: #000;
}
nav a, nav a:link {

color: #fff;
}

nav a:visited {
color: #dcdcdc;
}
nav a:active {
color: #fc3;
}
nav a:hover {
color: #ff0;
text-decoration: underline;
}
header {
background-color: #7094FF;
}
header h1 {
color: #fff;
}
header h2 {
color: #fff;
}
nav {
background-color: #00C24E;
}
section {
background-color: #B061FF;
}
#main-section article h3 a {
color: #e0e0e0;
}
#main-section article h3 a:hover {

color: #fff;
}
aside {
background-color: #FF5757;
}
aside a, aside a:link {

color: #ff6;
}
aside a:visited {
color: #dcdcdc;
}
aside a:active {
color: #C28547;
}
aside a:hover {
color: #75D1D1;
text-decoration: underline;

footer {
background-color: #FF8B3D;
padding: 8px 6px;
}
footer p {
color: #e9e9e9;
}
Hoja de estilos 3: extrabig.css

.display-extrabig {
display: inherit !important;
}
header, footer, #wrapper {

clear: both;
margin-left: auto;
margin-right: auto;
max-width: 1800px;
width: 90%;
}
header h1 {
font-size: 2.2em;
text-align: center;
}
header h2 {
font-size: 1.6em;
text-align: center;
}
p.display-extrabig {
font-size: 0.9em;
text-align: justify;
}
.menu ul li {
display:block;
padding: 6px 10px;
}
#main-nav {
float: left;
max-width: 240px;
padding-left: 10px;
width: 19%;
}
#main-section {
float: left;
max-width: 1280px;
padding: 2px 8px;
width: 64%;
}
aside.display-extrabig {
float: right;
max-width: 280px;
width: 14%;
}

#menusec li {
display: block;
padding: 6px 2px;
}
Hoja de estilos 4: big.css

.display-big {
}
header, footer, #wrapper {

clear: both;
margin-left: auto;
margin-right: auto;
max-width: 1020px;
width: 86%;
}
h1, h2 {
text-align: center;
font-size: 1.4em;
}
p.display-big {
font-size: 0.9em;
text-align: justify;
}
.menu ul li {
display:block;
padding: 4px 8px;
}
#main-nav {
float: left;
max-width: 280px;
padding-left: 10px;
width: 18%;
}
#main-section {
margin-left: 20%;
max-width: 1024px;
padding: 16px 20px;
width: 76%;
}
aside.display-big {
width: 100%;
}
Hoja de estilos 5: medium.css

.display-medium {
}
body {
font-family: Arial,sans-serif;
font-size: 18px;
}
.menu li {
display: inline-block;

padding: 6px 10px;

}
#main-nav {
width: 100%;
}
select.display-mini {
font-size: 1.2em;
width: 100%;
}
Hoja de estilos 6: mini.css

.display-mini {
}
h1, h2 {
font-size: 1.25em;
}
body {
font-family: "Lucida Sans",sans-serif;
font-size: 1.1em;
}
select.display-mini {
font-size: 1.25em;
}
Ejercicio 4: Formulario con ayudas visuales usando sólo las nuevas características de CSS que facilitan al
usuario su correcto llenado.
Script html: formcss.html

<!DOCTYPE html>
<html lang="es">
<head>
<title>HTML5 - Formulario de contacto</title>
<link rel="stylesheet" href="css/forms.css" />
</head>
<body>
<section id="main-content">
<article id="form-content">
<form class="contact_form" action="#" method="post" name="contact_form">
<ul>
<li>
<h2>Contáctanos</h2>
<span class="required_notification">* Indica que el campo es
obligatorio</span>
</li>
<li>
<label for="name">Nombre:</label>
<input type="text" placeholder="John Doe" required />
<span class="form_hint">Formato aceptado "Juan Pérez"</span>
</li>
<li>
<label for="email">Correo electrónico:</label>
<input type="email" name="email" placeholder="john_doe@example.com" required
/>
<span class="form_hint">Formato aceptado "name@something.com"</span>

</li>
<li>
<label for="website">Sitio web:</label>
<input type="url" name="website" placeholder="http://johndoe.com" required
pattern="(http|https)://.+"/>
<span class="form_hint">Formato aceptado "http://someaddress.com"</span>
</li>
<li>
<label for="message">Mensaje:</label>
<textarea name="message" cols="40" rows="6" required ></textarea>
</li>
<li>
<button class="submit" type="submit">Registrar</button>
</li>
</ul>
</form>
</article>
</section>
</body>
</html>
Hoja de estilo css: forms.css

/* Remueve la característica autofocus de webkit */
*:focus {
outline: none;
}
/* Definiendo tipografía */
body {
font: 14px/21px "Lucida Sans","Lucida Grande","Lucida Sans Unicode",sans-serif;
}
#main-content {
margin: 24px auto;
max-width: 1340px;
width: 58%;
}
#main-content #form-content {
/* IE10+ */
background-image: -ms-linear-gradient(top left, #FFFFD9 0%, #F5F3AB 40%, #FFF787
100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top left, #FFFFD9 0%, #F5F3AB 40%, #FFF787
100%);
/* Opera */
background-image: -o-linear-gradient(top left, #FFFFD9 0%, #F5F3AB 40%, #FFF787 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0,
#FFFFD9), color-stop(40, #F5F3AB), color-stop(100, #FFF787));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top left, #FFFFD9 0%, #F5F3AB 40%, #FFF787
100%);
/* W3C Markup */
background-image: linear-gradient(to bottom right, #FFFFD9 0%, #F5F3AB 40%, #FFF787
100%);
border: 1px solid #D45252;
border-radius: 12px 12px;
-moz-box-shadow:2px 2px 5px #1D2B1F;
-webkit-box-shadow:2px 2px 5px #1D2B1F;
-o-box-shadow:2px 2px 5px #1D2B1F;
-ms-box-shadow:2px 2px 5px #1D2B1F;
box-shadow:2px 2px 5px #1D2B1F;
padding: 0 4px;

.contact_form h2,
.contact_form label {
color: #50911E;
font-family: Georgia,Times,"Times New Roman",serif;
}
.form_hint, .required_notification {
font-size: 11px;
}
/* Estilo para las listas */

.contact_form ul {
list-style-type:none;
list-style-position:outside;
margin:0px;
padding:0px;
width:750px;
}
.contact_form li{
border-bottom:1px solid #eee;
padding:12px;
position:relative;
}
.contact_form li:first-child,
.contact_form li:last-child {
border-bottom:1px solid #777;
}
/* Estilos para el encabezado del formulario */

.contact_form h2 {
display: inline;
margin:0;
}
.required_notification {
color:#d45252;
display:inline;
float:right;
margin:5px 0 0 0;
}
/* Estilos para los elementos de formulario */

.contact_form label {
display:inline-block;
float:left;
margin-top: 3px;
padding:3px;
width:150px;
}
.contact_form input {
height:20px;
padding:5px 8px;
width:220px;
}
.contact_form textarea {
padding:8px;
width:300px;
}
.contact_form button {

margin-left:156px;
}
/* Estilos visuales para los elementos de formulario */

.contact_form input, .contact_form textarea {
border:1px solid #aaa;
box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
border-radius:2px;
padding-right:30px;
-moz-transition: padding .25s;
-webkit-transition: padding .25s;
-o-transition: padding .25s;
transition: padding .25s;
}
.contact_form input:focus, .contact_form textarea:focus {

background: #fff;
border:1px solid #555;
box-shadow: 0 0 3px #aaa;
padding-right:70px;
}
/* Aplicacando validación con estilos aprovechando las características del HTML5 */

.contact_form input:required, .contact_form textarea:required {
background: #fff url(../images/red_asterisk.png) no-repeat 98% center;
}
.contact_form input:required:valid, .contact_form textarea:required:valid {

background: #fff url(../images/valid.png) no-repeat 98% center;
box-shadow: 0 0 5px #5cd053;
border-color: #28921f;
}
.contact_form input:focus:invalid, .contact_form textarea:focus:invalid {

background: #fff url(../images/invalid.png) no-repeat 98% center;
box-shadow: 0 0 5px #d45252;
border-color: #b03535
}
/* Estilos para mostrar sugerencias mientras se llena el campo de formulario */

.form_hint {
background: #d45252;
border-radius: 3px 3px 3px 3px;
color: white;
margin-left:8px;
padding: 1px 6px;
/* Mantiene las sugerencias siempre en primer plano */
z-index: 999;
/* Permite que la sugerencias mantengan formato aún cuando sean de más líneas */
position: absolute;
display: none;
}
.form_hint::before {
content: "\25C0";
color:#d45252;
position: absolute;
top:1px;
left:-6px;
}
.contact_form input:focus + .form_hint {

display: inline;
}

.contact_form input:required:valid + .form_hint {

background: #28921f;
}
.contact_form input:required:valid + .form_hint::before {color:#28921f;}
/* Estilos para el botón de envío */

button.submit {
background-color: #68b12f;
background: -webkit-gradient(linear, left top, left bottom, from(#68b12f),
to(#50911e));
background: -webkit-linear-gradient(top, #68b12f, #50911e);
background: -moz-linear-gradient(top, #68b12f, #50911e);
background: -ms-linear-gradient(top, #68b12f, #50911e);
background: -o-linear-gradient(top, #68b12f, #50911e);
background: linear-gradient(top, #68b12f, #50911e);
border: 1px solid #509111;
border-bottom: 1px solid #5b992b;
border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
box-shadow: inset 0 1px 0 0 #9fd574;
-webkit-box-shadow: 0 1px 0 0 #9fd574 inset ;
-moz-box-shadow: 0 1px 0 0 #9fd574 inset;
-ms-box-shadow: 0 1px 0 0 #9fd574 inset;
-o-box-shadow: 0 1px 0 0 #9fd574 inset;
color: white;
font-weight: bold;
padding: 6px 20px;
text-align: center;
text-shadow: 0 -1px 0 #396715;
}
button.submit:hover {
cursor: pointer;
opacity:.85;
}
button.submit:active {
border: 1px solid #20911e;
box-shadow: 0 0 10px 5px #356b0b inset;
-webkit-box-shadow:0 0 10px 5px #356b0b inset ;
-moz-box-shadow: 0 0 10px 5px #356b0b inset;
-ms-box-shadow: 0 0 10px 5px #356b0b inset;
-o-box-shadow: 0 0 10px 5px #356b0b inset;
}
El resultado que podrá observar utilizando cualquier navegador (Firefox, Chrome, Internet Explorer, Opera o
Safari) será el siguiente. Puede hacer uso de todos ellos para que observe que si son las últimas versiones de
los mismos el formulario funcionará correctamente en todos ellos:

Ejercicio 5: Menú avanzado con las nuevas propiedades CSS3 aplicado a un documento HTML5.
html: menuavanzado.html
<!DOCTYPE html">
<html lang="es">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menú desplegable avanzado</title>
<link rel="stylesheet" href="css/menuav.css">
</head>
<body>
<nav>
<div id="nav">
<ul id="menuHorizontal">
<li>Inicio</li>
<li>Deportes
<ul class="submenu">
<li>Fútbol</li>
<li>Motor</li>
<li>Baloncesto</li>
<li>Tenis</li>
</ul>
</li>
<li>Cultura
<li>Cine</li>
<li>Teatro</li>
<li>Literatura</li>
<li>Premios</li>
</ul>
</li>
<li>Sociedad
<li>Educación</li>
<li>Comunicación</li>
<li>Blogs</li>
</ul>
</li>
<li>Economía
<li>Empresas</li>
<li>Mercado</li>
<li>Bolsa</li>
</ul>
</li>
<li>Tecnología
<li>Programas</li>

<li>Redes sociales</li>
<li>Gadgets</li>
<li>Seguridad</li>
</ul>
</li>
</ul>
</div>
</nav>
</body>
</html>
css: menuav.css
/* Estilos del elemento nav que contiene el menú */
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
/* Estilos de las opciones principales del menú */

#nav li {
background-color: #375F85;
border: 1px outset #375F85;
color: white;
cursor: pointer;
font-family: Tahoma,Helvetica,sans-serif;
font-size: 1em;
margin: -2px;
padding: 5px;
position: relative;
text-align: center;
vertical-align: top;
width: 110px;
}
#nav #menuHorizontal {
margin: 0 auto;
width: 58%;
}
/* Estilos de los elementos de submenú */

#menuHorizontal .submenu {
animation-duration: 0.8s;
-moz-animation-duration: 0.8s;
-webkit-animation-duration: 0.8s;
-o-animation-duration: 0.8s;
-ms-animation-duration: 0.8s;
border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
-o-border-radius: 0 0 10px 10px;
-ms-border-radius: 0 0 10px 10px;
box-shadow: 0 0.5px 5px #000;
-moz-box-shadow: 0 0.5px 5px #000;
-webkit-box-shadow: 0 0.5px 5px #000;
-o-box-shadow: 0 0.5px 5px #000;
-ms-box-shadow: 0 0.5px 5px #000;
display: none;
left: 1px;
position: absolute;
top: 36px;
z-index: 10;
}

/* Estilos para las opciones de submenú */

#menuHorizontal .submenu>li {
display: block;
animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
-webkit-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
-ms-animation-duration: 0.5s;
}
/* Efectos de animación para las opciones

de submenú cuando se posicione el puntero
del ratón encima de una de estas subopciones */
#menuHorizontal .submenu>li:hover {
animation-name: botonsubmenu;
-moz-animation-name: botonsubmenu;
-webkit-animation-name: botonsubmenu;
-o-animation-name: botonsubmenu;
-ms-animation-name: botonsubmenu;
background-color: #c9d7e6;
text-shadow: 2px 2px 2px #375f85;
transform: scale(1.05);
-moz-transform: scale(1.05);
-webkit-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
z-index: 2;
}
/* Media-queries que se aplicarán para animar

el menú transformándolo en etapas controlando
en varios pasos la secuencia de animación deseada */
@keyframes botonsubmenu {
0% {
}
50% {
border-radius: 5px;
}
100%{
}
}
@-moz-keyframes botonsubmenu {
0% {
-moz-text-shadow: 200px 2px 20px #375f85;
}
50% {
}
100%{
-moz-text-shadow: 2px 2px 1px #375f85;
}

@-webkit-keyframes botonsubmenu {
0% {
-webkit-text-shadow: 200px 2px 20px #375f85;
}
50% {
}
100%{
-webkit-text-shadow: 2px 2px 1px #375f85;
}
}
@-o-keyframes botonsubmenu {
0% {
-o-text-shadow: 200px 2px 20px #375f85;
}
50% {
}
100%{
-o-text-shadow: 2px 2px 1px #375f85;
}
}
@-ms-keyframes botonsubmenu {
0% {
-ms-text-shadow: 200px 2px 20px #375f85;
}
50% {
}
100%{
-ms-text-shadow: 2px 2px 1px #375f85;
}
}
/* Estableciendo bordes redondeados para

las opciones de submenú */
#menuHorizontal .submenu li:last-child {
border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
-o-border-radius: 0 0 10px 10px;
-ms-border-radius: 0 0 10px 10px;
}

#menuHorizontal li:hover ul {
animation-name: submenu;
-moz-animation-name: submenu;
-webkit-animation-name: submenu;
-o-animation-name: submenu;
-ms-animation-name: submenu;
display: block;
}
/* Animación del submenú .submenu */

@keyframes submenu {
0% {
opacity: 0;
left: -150px;
}
50% {
box-shadow: -10px 4px 8px 5px #000;
}
100% {
opacity: 1;
left: 1px;
}
}
@-moz-keyframes submenu {
0% {
opacity: 0;
left: -150px;
}
50% {
-moz-box-shadow: -10px 4px 8px 5px #000;
}
100% {
opacity: 1;
left: 1px;
}
}
@-webkit-keyframes submenu {
0% {
opacity: 0;
left: -150px;
}
50% {
-webkit-box-shadow: -10px 4px 8px 5px #000;
}
100% {
opacity: 1;
left: 1px;
}
}
@-o-keyframes submenu {

0% {
opacity: 0;
left: -150px;
}
50% {
-o-box-shadow: -10px 4px 8px 5px #000;
}
100% {
opacity: 1;
left: 1px;
}
}
@-ms-keyframes submenu {
0% {
opacity: 0;
left: -150px;
}
50% {
-ms-box-shadow: -10px 4px 8px 5px #000;
}
100% {
opacity: 1;
left: 1px;
}
}
/* Transiciones de animación del submenú */

#menuHorizontal>li {
transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-webkit-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
}
#menuHorizontal>li:first-child {
background-color: #d0dbe6;
padding-top: 10px;
box-shadow: 0 0 4px #375F85;
-moz-box-shadow: 0 0 4px #375F85;
-webkit-box-shadow: 0 0 4px #375F85;
-o-box-shadow: 0 0 4px #375F85;
-ms-box-shadow: 0 0 4px #375F85;
border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
-o-border-radius: 10px 10px 0 0;
-ms-border-radius: 10px 10px 0 0;
border: 1px outset #d0dbe6;
color: #375F85;
text-shadow: 1px 1px 1px #375F85;
-moz-text-shadow: 1px 1px 1px #375F85;
-webkit-text-shadow: 1px 1px 1px #375F85;
-o-text-shadow: 1px 1px 1px #375F85;
-ms-text-shadow: 1px 1px 1px #375F85;
}

#menuHorizontal>li:hover {
background-color: #abc;
padding-top: 10px;
box-shadow: 0 0 4px #375F85;
-moz-box-shadow: 0 0 4px #375F85;
-webkit-box-shadow: 0 0 4px #375F85;
-o-box-shadow: 0 0 4px #375F85;
-ms-box-shadow: 0 0 4px #375F85;
border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
-o-border-radius: 10px 10px 0 0;
-ms-border-radius: 10px 10px 0 0;
border: 1px outset #abc;
color: #375F85;
text-shadow: 1px 1px 1px #375F85;
-moz-text-shadow: 1px 1px 1px #375F85;
-webkit-text-shadow: 1px 1px 1px #375F85;
-o-text-shadow: 1px 1px 1px #375F85;
-ms-text-shadow: 1px 1px 1px #375F85;
}
Resultado al visualizarlo en un navegador. Note que el menú va desplazando en cascada las opciones al ir
disminuyendo el tamaño de la ventana del navegador:
Ejercicio 6: Un slider de fotos hecho completamente con HTML5 y CSS3, con funcionalidad de cambiar la
fotografía en primer plano haciendo clic en las miniaturas o dando clic en los controles de movimiento
anterior y siguiente ubicados a los extremos, con la funcionalidad adicional de hacer clic en el botón PLAY
(►) para avanzar automáticamente y botón de PAUSE para detener reproducción automática (no terminado
de forma completa).
html: galeriaslideshow.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laboratorios de la Universidad Don Bosco</title>
<link href='http://fonts.googleapis.com/css?family=Mr+Dafoe' rel='stylesheet'
type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Amaranth:700' rel='stylesheet'
type='text/css'>
<link rel="stylesheet" href="css/slideshow.css" />
</head>

<body>

<span id="sl_play" class="sl_command"> </span>
<span id="sl_pause" class="sl_command"> </span>
<span id="sl_i1" class="sl_command sl_i"> </span>
<header>
<h2 class="opensans">Laboratorios y Centros Especializados</h2>
<p>
Una completa plataforma con diversas tecnologías, experimentales
y virtuales, que complementan el proceso de formación y mejoran
tus competencias profesionales.
</p>
</header>
<section id="slideshow">
<a class="commands prev commands1" href="#sl_i14" title="Ir al último slide"><</a>
<a class="commands next commands1" href="#sl_i2" title="Ir al 2do slide">></a>
<a class="commands prev commands2" href="#sl_i1" title="Ir al 1er slide"><</a>
<a class="commands next commands2" href="#sl_i3" title="Ir al 3er slide">></a>
<a class="commands prev commands3" href="#sl_i2" title="Ir al 2do slide"><</a>
<a class="commands next commands3" href="#sl_i4" title="Ir al 4to slide">></a>
<a class="commands prev commands4" href="#sl_i3" title="Ir al 3er slide"><</a>
<a class="commands prev commands5" href="#sl_i4" title="Ir al 4to slide"><</a>
<a class="commands next commands6" href="#sl_i7" title="Ir al 7mo slide">></a>
<a class="commands next commands7" href="#sl_i8" title="Ir al 8vo slide">></a>
<a class="commands prev commands8" href="#sl_i7" title="Ir al 7mo slide"><</a>
<a class="commands next commands8" href="#sl_i9" title="Ir al 9no slide">></a>
<a class="commands prev commands9" href="#sl_i8" title="Ir al 8vo slide"><</a>
<a class="commands next commands9" href="#sl_i10" title="Ir al 10mo slide">></a>
<a class="commands prev commands10" href="#sl_i9" title="Ir al 9no slide"><</a>
<a class="commands prev commands11" href="#sl_i10" title="Ir al 10mo slide"><</a>
<a class="commands next commands14" href="#sl_i1" title="Ir al 1er slide">></a>
<a class="play_commands pause" href="#sl_pause" title="Maintain paused">Detener</a>
<a class="play_commands play" href="#sl_play" title="Play the animation">Iniciar</a>
<div class="container">
<div class="c_slider"></div>
<div class="slider">
<figure>
<img src="img/img001.jpg" alt="" width="640" height="310" />

<figcaption>LABORATORIO DE BIOMÉDICA EXPERIMENTAL</figcaption>

</figure>
<figure>
<figcaption>CELDA DE MANUFACTURA INTEGRADA POR COMPUTADORA</figcaption>
</figure>
<figure>
<figcaption>LABORATORIO DE CNC</figcaption>
</figure>
<figure>
<figcaption>LABORATORIO DE DISEÑO GRÁFICO Y MULTIMEDIA</figcaption>
</figure>
<figure>
<figcaption>LABORATORIO DE MÁQUINAS ELÉCTRICAS</figcaption>
</figure>
<figure>
<figcaption>AVIÓN ESCUELA BOEING 727 (BASE AÉREA MILITAR DE
ILOPANGO)</figcaption>
</figure>
<figure>
<figcaption>HANGAR AERONÁUTICA</figcaption>
</figure>
<figure>
<figcaption>LABORATORIO DE IDIOMAS</figcaption>
</figure>
<figure>
<figcaption>CENTRO INTERNACIONAL CERTIFICADO EN MECATRÓNICA</figcaption>
</figure>
<figure>
<figcaption>CENTRO DE INNOVACIÓN DE SOFTWARE PARA MÓVILES
(MOSAIC)</figcaption>
</figure>
<figure>
<figcaption>PRÁCTICAS DE DISEÑO Y SIMULACIÓN DE PIEZAS Y
EQUIPOS</figcaption>
</figure>
<figure>
<figcaption>LABORATORIO DE ANÁLISIS DE LA MARCHA</figcaption>
</figure>
<figure>
<figcaption>SALA CIENTÍFICA ESTADOUNIDENSE PARA LA INVESTIGACIÓN EN
ENERGÍA</figcaption>
</figure>
<figure>
<figcaption>ESTUDIO DE TELEVISIÓN</figcaption>
</figure>
</div>
</div>
<span id="timeline"></span>
<ul class="dots_commands">
<li>

<a title="Foto 1" href="#sl_i1">

<img src="img/img001_s.jpg" alt="img001" width="36" height="24" />
</a>
</li>
<li>
</a>
</li>
<li>
</a>
</li>
<li>
</a>
</li>
<li>
</a>
</li>
<li>
</a>
</li>
<li>
</a>
</li>
<li>
</a>
</li>
<li>
</a>
</li>
<li>
</a>
</li>
<li>
</a>
</li>
<li>
</a>
</li>
<li>
</a>
</li>
<li>


</a>
</li>
</ul>
</section>

</body>
</html>
css: slideshow.css
html {
background-color: #e4dfd2;
background-image: -webkit-radial-gradient(center 425px 45deg, circle closest-side,
rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 30%),
-webkit-radial-gradient(center 425px 45deg, circle closest-side,
rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 10%),
-webkit-linear-gradient(rgba(231, 228, 222, 0), rgba(231, 228, 222, 1) 150px,
rgba(231, 228, 222, 1) 388px, rgba(255, 255, 255, 0) 388px, rgba(243, 239,233,1)
388px,rgba(243, 239,233,1) 390px, rgba(206,195,187,1) 390px, rgba(230,222,216,1) 990px,
rgba(230,222,216,1)),
-webkit-linear-gradient(0pt 50% , rgba(255, 255, 255, 0.07) 50%, transparent
50%),
-webkit-linear-gradient(0pt 50% , rgba(255, 255, 255, 0.13) 50%, transparent
50%),
-webkit-linear-gradient(0pt 50% , transparent 50%, rgba(255, 255, 255, 0.17)
50%),
-webkit-linear-gradient(0pt 50% , transparent 50%, rgba(255, 255, 255, 0.19)
50%);
background-image: -moz-radial-gradient(center 425px 45deg, circle closest-side,
rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 30%),
-moz-radial-gradient(center 425px 45deg, circle closest-side, rgba(0,0,0,0.2)
0%, rgba(0,0,0,0) 10%),
-moz-linear-gradient(rgba(231, 228, 222, 0), rgba(231, 228, 222, 1) 150px,
rgba(230,222,216,1)),
-moz-linear-gradient(0pt 50% , rgba(255, 255, 255, 0.07) 50%, transparent
50%),
-moz-linear-gradient(0pt 50% , rgba(255, 255, 255, 0.13) 50%, transparent
50%),
-moz-linear-gradient(0pt 50% , transparent 50%, rgba(255, 255, 255, 0.17)
50%),
-moz-linear-gradient(0pt 50% , transparent 50%, rgba(255, 255, 255, 0.19)
50%);
background-image: -o-radial-gradient(center 425px 45deg, circle closest-side,
rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 30%),
-o-radial-gradient(center 425px 45deg, circle closest-side, rgba(0,0,0,0.2)
0%, rgba(0,0,0,0) 10%),
-o-linear-gradient(rgba(231, 228, 222, 0), rgba(231, 228, 222, 1) 150px,
rgba(230,222,216,1)),
-o-linear-gradient(0pt 50% , rgba(255, 255, 255, 0.07) 50%, transparent 50%),
-o-linear-gradient(0pt 50% , rgba(255, 255, 255, 0.13) 50%, transparent 50%),
-o-linear-gradient(0pt 50% , transparent 50%, rgba(255, 255, 255, 0.17) 50%),
-o-linear-gradient(0pt 50% , transparent 50%, rgba(255, 255, 255, 0.19) 50%);
background-image: -ms-radial-gradient(center 425px 45deg, circle closest-side,
rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 30%),
-ms-radial-gradient(center 425px 45deg, circle closest-side, rgba(0,0,0,0.2)
0%, rgba(0,0,0,0) 10%),
-ms-linear-gradient(rgba(231, 228, 222, 0), rgba(231, 228, 222, 1) 150px,

rgba(230,222,216,1)),
-ms-linear-gradient(0pt 50% , rgba(255, 255, 255, 0.07) 50%, transparent
50%),
-ms-linear-gradient(0pt 50% , rgba(255, 255, 255, 0.13) 50%, transparent
50%),
-ms-linear-gradient(0pt 50% , transparent 50%, rgba(255, 255, 255, 0.17)
50%),
-ms-linear-gradient(0pt 50% , transparent 50%, rgba(255, 255, 255, 0.19)
50%);
background-image: radial-gradient(center 425px 45deg, circle closest-side,
rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 30%),
radial-gradient(center 425px 45deg, circle closest-side, rgba(0,0,0,0.2) 0%,
rgba(0,0,0,0) 10%),
linear-gradient(rgba(231, 228, 222, 0), rgba(231, 228, 222, 1) 150px,
rgba(230,222,216,1)),
linear-gradient(0pt 50% , rgba(255, 255, 255, 0.07) 50%, transparent 50%),
linear-gradient(0pt 50% , rgba(255, 255, 255, 0.13) 50%, transparent 50%),
linear-gradient(0pt 50% , transparent 50%, rgba(255, 255, 255, 0.17) 50%),
linear-gradient(0pt 50% , transparent 50%, rgba(255, 255, 255, 0.19) 50%);
background-size: 13px, 26px, auto, 13px, 29px, 37px, 53px;
min-height:100%;
overflow-x:hidden;
}
body {
width: 800px;
margin: 0 auto;
color:#777;
}
h1, h2 {
text-align:center;
margin-top:0;
}
h1 {
padding: 0.6em 0;
margin-left: 1.5em;
font-size: 2em;
font-family: 'Amaranth', Arial, Verdana, sans-serif;
}
h1 span {
display:block;
margin: 0.75em 0 0 -2em;
line-height: 1em;
font-size: 0.55em;
}
h1 .cursive {
margin: 0 0 0 -3em;
font-size: 1.1em;
line-height:0.5em;
color: #bd9b83;
}
figure {
}
a {

border-bottom: 1px solid #bc9d88;
color: #8f6b51;
}
a:hover,
a:focus {
border-bottom: 1px dashed #bc9d88;
}
.sread {
position: absolute;
left:-9999px;
}
.cursive {
font-family: 'Mr Dafoe', cursive;
}
.center {
text-align: center;
}
#slideshow {
position: relative;
width: 640px;
height: 310px;
padding: 15px;
border: 1px solid #ddd;
margin: 0 auto 2em;
background: #FFF;
background: -webkit-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
background: -moz-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
background: -ms-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
background: -o-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
background: linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
-webkit-border-radius: 2px 2px 2px 2px;
-moz-border-radius: 2px 2px 2px 2px;
-o-border-radius: 2px 2px 2px 2px;
-ms-border-radius: 2px 2px 2px 2px;
border-radius: 2px 2px 2px 2px;
-webkit-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
-moz-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
-o-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
-ms-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
box-shadow: 0 0 3px rgba(0,0,0, 0.2);
}
/* box-shadow avanzado */
#slideshow:before,
#slideshow:after {
position: absolute;
display:block;
bottom:16px;
width: 50%;
height: 20px;
content: " ";
background: rgba(0,0,0,0.1);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
-webkit-box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
-moz-box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);

-o-box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);

-ms-box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
z-index: -10;
}
#slideshow:before {
left:0;
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
-ms-transform: rotate(-4deg);
-o-transform: rotate(-4deg);
transform: rotate(-4deg);
}
#slideshow:after {
right:0;
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
-ms-transform: rotate(4deg);
-o-transform: rotate(4deg);
}
#slideshow .commands {
position: absolute;
top: 45%;
padding: 5px 13px;
border-bottom:0;
font-family: 'Amaranth', Arial, Verdana, sans-serif;
font-size: 1.3em;
color: #aaa;
background-color: #eee;
background-image: -webkit-linear-gradient(#fff,#ddd);
background-image: -moz-linear-gradient(#fff,#ddd);
background-image: -ms-linear-gradient(#fff,#ddd);
background-image: -o-linear-gradient(#fff,#ddd);
background-image: linear-gradient(#fff,#ddd);
text-shadow: 0 0 1px #aaa;
border-radius: 50%;
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-o-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-ms-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
#slideshow .commands:after {
position: absolute;
bottom: 65px; left:-18px;
content: attr(title);
width: 50px;
padding: 12px;
background: #fff;
font-family: Georgia, Times, serif;
font-size: 14px;
text-align:center;
text-shadow: 0 0 0;
opacity: 0;

border-radius: 12px;
-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
-moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
-o-box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
-ms-box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
-webkit-transition: opacity 0.7s, bottom 0.7s;
-moz-transition: opacity 0.7s, bottom 0.7s;
-o-transition: opacity 0.7s, bottom 0.7s;
-ms-transition: opacity 0.7s, bottom 0.7s;
transition: opacity 0.7s, bottom 0.7s;
}
#slideshow .commands:before {
position: absolute;
bottom: 55px; left: 13px;
content: " ";
width: 1px; height: 1px;
border-top: 10px solid #fff;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
z-index:100;
opacity: 0;
-webkit-transition: opacity 0.7s, bottom 0.7s;
-moz-transition: opacity 0.7s, bottom 0.7s;
-o-transition: opacity 0.7s, bottom 0.7s;
-ms-transition: opacity 0.7s, bottom 0.7s;
transition: opacity 0.7s, bottom 0.7s;
}
#slideshow .commands:hover:before {
bottom: 35px;
opacity: 1;
}
#slideshow .commands:hover:after {
bottom: 45px;
opacity: 1;
}
#slideshow .commands:focus {
outline: 0;
-webkit-transform: translate(1px, 2px);
-moz-transform: translate(1px, 2px);
-ms-transform: translate(1px, 2px);
-o-transform: translate(1px, 2px);
transform: translate(1px, 2px);
}
#slideshow .commands:active {
-webkit-transform: translate(0, 1px);
-moz-transform: translate(0, 1px);
-ms-transform: translate(0, 1px);
-o-transform: translate(0, 1px);
transform: translate(0, 1px);
}
#slideshow .prev {
left: -48px;
}
#slideshow .next {
right: -48px;

#slideshow .prev,
#slideshow .next {
display:none;
}
#slideshow .prev,
#slideshow .next {
display:none;
}
#slideshow .commands1 {
display: block;
}
/* play/pause commands */
.play_commands {
border:0 none;
height: 22px;
top: 25px; right: 25px;
text-indent: -9999px;
opacity: 0;
position: absolute;
z-index: 10;
width: 22px;
-webkit-transition: opacity 1s, right 1s;
-moz-transition: opacity 1s, right 1s;
-o-transition: opacity 1s, right 1s;
-ms-transition: opacity 1s, right 1s;
transition: opacity 1s, right 1s;
}
.play {
right: 55px;
cursor: default;
}
.pause:hover {
border:0 none;
}
.play_commands:focus {
outline:0;
}
#slideshow:hover .pause,
#sl_play:target ~ #slideshow:hover .pause,
.play_commands:focus {
opacity: 1;
}
.sl_command:target ~ #slideshow:hover .pause,

#sl_pause:target ~ #slideshow:hover .pause {
opacity: 0;
}
.pause:after,
.pause:before {
position: absolute;
display: block;
content: " ";
top:0;
width:38%;
height: 22px;

background: #fff;
}
.pause:after {
right:0;
}
.pause:before {
left:0;
}
.play {
width: 1px;
height: 1px;
border-top: 10px solid transparent;
border-left: 20px solid #fff;
border-left: 20px solid rgba(255,255,255,0.5);
border-bottom: 10px solid transparent;
opacity: 0;
}
.play:hover,
.play:focus {
border-bottom: 10px solid transparent;
}
#slideshow .container {
position:relative;
width: 640px;
height: 310px;
overflow: hidden;
}
/* Base de la línea de tiempo */

#slideshow .container:after {
position:absolute;
bottom: 0; left:0;
content: " ";
background: #999;
width: 100%;
height: 1px;
}
@-webkit-keyframes slider {
0%, 20%, 100% { left: 0 }
25%, 45% { left: -100% }
50%, 70% { left: -200% }
75%, 95% { left: -300% }
}
@-moz-keyframes slider {
0%, 20%, 100% { left: 0 }
25%, 45% { left: -100% }
50%, 70% { left: -200% }
75%, 95% { left: -300% }
}
@keyframes slider {
0%, 20%, 100% { left: 0 }
25%, 45% { left: -100% }
50%, 70% { left: -200% }
75%, 95% { left: -300% }
}
#slideshow .slider {
position: absolute;

left:0; top:0;
width: 1400%;
height: 310px;
-webkit-animation: slider 32s infinite;
-moz-animation: slider 32s infinite;
-o-animation: slider 32s infinite;
-ms-animation: slider 32s infinite;
animation: slider 32s infinite;
}
.sl_i:target ~ #slideshow .slider {

-webkit-transition: left 1s;
-moz-transition: left 1s;
-o-transition: left 1s;
-ms-transition: left 1s;
transition: left 1s;
}
.sl_command:target ~ #slideshow .slider {

-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
-ms-transition: opacity 1s;
transition: opacity 1s;
}
#slideshow .c_slider {
position: absolute;
left:0; top:0;
width: 1400%;
height: 310px;
background: url(../img/img001.jpg) 0 0 no-repeat,
url(../img/img002.jpg) 640px 0 no-repeat,
url(../img/img014.jpg) 8320px 0 no-repeat;
}
.sl_i:target ~ #slideshow .c_slider {
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
-ms-transition: background 1s;
transition: background 1s;
}
#slideshow figure {
position:relative;
padding:0; margin:0;
}
@-webkit-keyframes figurer {
0%, 25%, 50%, 75%, 100% {
-webkit-box-shadow: 0 0 65px rgba(0,0,0, 0) inset;
box-shadow: 0 0 65px rgba(0,0,0, 0) inset;
}
5%, 20%, 30%, 45%, 55%, 70%, 80%, 95% {

-webkit-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;

box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
}
}
@-moz-keyframes figurer {
0%, 25%, 50%, 75%, 100% {
-moz-box-shadow: 0 0 65px rgba(0,0,0, 0) inset;
}
5%, 20%, 30%, 45%, 55%, 70%, 80%, 95% {
-moz-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
}
}
@keyframes figurer {
0%, 25%, 50%, 75%, 100% {
-moz-box-shadow: 0 0 65px rgba(0,0,0, 0) inset;
}
5%, 20%, 30%, 45%, 55%, 70%, 80%, 95% {
}
}
#slideshow figure:after {
position: absolute;
display:block;
content: " ";
top:0; left:0;
width: 100%; height: 100%;
-webkit-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
-o-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
-ms-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
-webkit-animation: figurer 32s infinite;
-moz-animation: figurer 32s infinite;
-o-animation: figurer 32s infinite;
-ms-animation: figurer 32s infinite;
animation: figurer 32s infinite;
}
@-webkit-keyframes figcaptionner {
0%, 25%, 50%, 75%, 100% {
bottom: -55px;
}
5%, 20%, 30%, 45%, 55%, 70%, 80%, 95% {
bottom: 5px;
}
}
@-moz-keyframes figcaptionner {
0%, 25%, 50%, 75%, 100% {
bottom: -55px;
}
5%, 20%, 30%, 45%, 55%, 70%, 80%, 95% {
bottom: 5px;
}
}
@keyframes figcaptionner {
0%, 25%, 50%, 75%, 100% {
bottom: -55px;
}
5%, 20%, 30%, 45%, 55%, 70%, 80%, 95% {
bottom: 5px;

}
}
#slideshow figcaption {
position:absolute;
padding: 20px 20px; margin:0;
left:0; right:0; bottom: 5px;
text-align:center;
word-spacing: 0.05em;
font-family: Georgia, Times, serif;
background: #000;
border-top: 1px solid rgb(225,225,225);
color: #555;
text-shadow: -1px -1px 0 rgba(255,255,255,0.3);
-webkit-animation: figcaptionner 32s infinite;
-moz-animation: figcaptionner 32s infinite;
-o-animation: figcaptionner 32s infinite;
-ms-animation: figcaptionner 32s infinite;
animation: figcaptionner 32s infinite;
}
@-webkit-keyframes timeliner {
0%, 25%, 50%, 75%, 100% { width: 0; }
20%, 45%, 70%, 90% { width: 640px; }
}
@-moz-keyframes timeliner {
0%, 25%, 50%, 75%, 100% { width: 0; }
20%, 45%, 70%, 90% { width: 640px; }
}
@keyframes timeliner {
0%, 25%, 50%, 75%, 100% { width: 0; }
20%, 45%, 70%, 90% { width: 640px; }
}
#timeline {
position: absolute;
background: #999;
bottom: 15px;
left: 15px;
height: 1px;
background: rgb(214,98,13);
background: rgba(214,98,13,.8);
width: 0;
-webkit-animation: timeliner 32s infinite;
-moz-animation: timeliner 32s infinite;
-o-animation: timeliner 32s infinite;
-ms-animation: timeliner 32s infinite;
animation: timeliner 32s infinite;
}
/* dots styles */
.dots_commands {
position: relative;
top: 32px;
text-align:center;
}
.dots_commands li {
display:inline;
list-style:none;
}

.dots_commands a {
position: relative;
height:26px; width: 40px;
margin: 1px 1px;
/* text-indent: -9999px; */
/* background: #fff; */
border-bottom: 2px;
padding-top: 2px;
/*-webkit-border-radius: 50%;
border-radius: 50%; */
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
-o-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
-ms-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
z-index:25;
}
.dots_commands li + li a {
z-index:10;
}
@-moz-keyframes dotser {
0%, 100% { opacity: 1; left: 0; }
20% { opacity: 1; left: 0; }

22% { opacity: 0; left: 0; }
23% { opacity: 0; left: 18px; }



98% { opacity: 0; left: 0; }
}
@-webkit-keyframes dotser {
0%, 100% { opacity: 1; left: 0; }
20% { opacity: 1; left: 0; }

22% { opacity: 0; left: 0; }




98% { opacity: 0; left: 0; }
}
@keyframes dotser {
0%, 100% { opacity: 1; left: 0; }
20% { opacity: 1; left: 0; }

22% { opacity: 0; left: 0; }



98% { opacity: 0; left: 0; }
}
.dots_commands li:first-child a:after,

.dots_commands li:first-child a:before {
position: absolute;
top: 0; left: 0;
content: " ";
height: 7px;
width: 7px;
background: #fff609;
z-index:20;
border-radius: 50%;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
-o-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
-ms-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
}
.dots_commands li:first-child a:after {

/* webkit no permite animar pseudo-elementos */
-webkit-animation: dotser 32s infinite;
/* moz si */
-moz-animation: dotser 32s infinite;
-o-animation: dotser 32s infinite;
-ms-animation: dotser 32s infinite;
animation: dotser 32s infinite;
}
.dots_commands li:first-child a:before {

display:none;
}
/* Necesita una forma de detenerse */
/* Acciones al cargar */

.sl_command { display: none; }
.sl_command:target ~ #slideshow .slider,

.sl_command:target ~ #slideshow figure:after,
.sl_command:target ~ #slideshow figcaption,
.sl_command:target ~ #slideshow #timeline,
.sl_command:target ~ #slideshow .dots_commands li:first-child a:after {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
animation-play-state: paused;
}
#sl_play:target ~ #slideshow .slider,

#sl_play:target ~ #slideshow figure:after,
#sl_play:target ~ #slideshow figcaption,
#sl_play:target ~ #slideshow #timeline,
#sl_play:target ~ #slideshow .dots_commands li:first-child a:after {
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
animation-play-state: running;
}
.sl_command:target ~ #slideshow .pause { opacity:0; }

.sl_command:target ~ #slideshow .play { opacity:1; right: 25px; cursor: pointer; }
#sl_play:target ~ #slideshow .pause { opacity:0; }
#sl_play:target ~ #slideshow .play { opacity:0; right: 55px; cursor: default; }
.sl_i:target ~ #slideshow .slider

{ visibility: hidden }
.sl_i:target ~ #slideshow .slider figcaption {
visibility: hidden }
.sl_i:target ~ #slideshow .dots_commands li:first-child a:after { display:none; }
.sl_i:target ~ #slideshow .dots_commands li:first-child a:before { display:block; }}
#sl_i1:target ~ #slideshow .commands {

display: none; }
#sl_i1:target ~ #slideshow .commands1 {
display: block; }
#sl_i1:target ~ #slideshow .c_slider {
background-position: 0 0, 640px 0, 1280px 0, 1920px 0, 2560px 0, 3200px 0, 3840px 0,
4480px 0, 5120px 0, 5760px 0, 6400px 0, 7040px 0, 7680px 0, 8320px 0; }
#sl_i1:target ~ #slideshow .dots_commands li:first-child a:before { left:0; }

display: none; }
display: block; }
background-position: -640px 0, 0 0, 640px 0, 1280px 0, 1920px 0, 2560px 0, 3200px 0,
3840px 0, 4480px 0, 5120px 0, 5760px 0, 6400px 0, 7040px 0, 7680px 0; }
#sl_i2:target ~ #slideshow .dots_commands li:first-child a:before { left:46px; }

display: none; }
display: block; }
background-position: -1280px 0, -640px 0, 0 0, 640px 0, 1280px 0, 1920px 0, 2560px 0,
3200px 0, 3840px 0, 4480px 0, 5120px 0, 5760px 0, 6400px 0, 7040px 0; }

display: none; }
display: block; }


background-position: -1920px 0, -1280px 0, -640px 0, 0 0, 640px 0, 1280px 0, 1920px 0,
2560px 0, 3200px 0, 3840px 0, 4480px 0, 5120px 0, 5760px 0, 6400px 0; }

display: none; }
display: block; }
background-position: -2560px 0, -1920px 0, -1280px 0, -640px 0, 0 0, 640px 0, 1280px 0,
1920px 0, 2560px 0, 3200px 0, 3840px 0, 4480px 0, 5120px 0, 5760px 0; }

display: none; }
display: block; }
background-position: -3200px 0, -2560px 0, -1920px 0, -1280px 0, -640px 0, 0 0, 640px 0,
1280px 0, 1920px 0, 2560px 0, 3200px 0, 3840px 0, 4480px 0, 5120px 0; }

display: none; }
display: block; }
background-position: -3840px 0, -3200px 0, -2560px 0, -1920px 0, -1280px 0, -640px 0, 0 0,
640px 0, 1280px 0, 1920px 0, 2560px 0, 3200px 0, 3840px 0, 4480px 0; }

display: none; }
display: block; }
background-position: -4480px 0, -3840px 0, -3200px 0, -2560px 0, -1920px 0, -1280px 0, -
640px 0, 0 0, 640px 0, 1280px 0, 1920px 0, 2560px 0, 3200px 0, 3840px 0; }

display: none; }
display: block; }
1280px 0, -640px 0, 0 0, 640px 0, 1280px 0, 1920px 0, 2560px 0, 3200px 0; }

display: none; }
display: block; }
1920px 0, -1280px 0, -640px 0, 0 0, 640px 0, 1280px 0, 1920px 0, 2560px 0; }

display: none; }
display: block; }


2560px 0, -1920px 0, -1280px 0, -640px 0, 0 0, 640px 0, 1280px 0, 1920px 0; }

display: none; }
display: block; }
3200px 0, -2560px 0, -1920px 0, -1280px 0, -640px 0, 0 0, 640px 0, 1280px 0; }

display: none; }
display: block; }
3840px 0, -3200px 0, -2560px 0, -1920px 0, -1280px 0, -640px 0, 0 0, 640px 0; }

display: none; }
display: block; }
4480px 0, -3840px 0, -3200px 0, -2560px 0, -1920px 0, -1280px 0, -640px 0, 0 0; }
/* EXPLANATIONS */
#main .download {
text-align: center;
margin: 3em 0 1em;
line-height: 1.35em;
}
#main .download a {
position: relative;
padding: 8px 22px 14px;
border: 0;
color: #fff;
background:#8a796d;
text-shadow: -1px -1px 0 #60544c;
font-weight:bold;
overflow: hidden;
-moz-box-shadow: 0 6px 0 #403c3a;

box-shadow: 0 6px 0 rgba(0,0,0,0.7), 0 7px 6px -5px rgba(255,255,255,0.40) inset;
border-radius: 12px;
-webkit-transition: color .5s;

-moz-transition: color .5s;
transition: color .5s;
}
#main .download .arrow {

position: relative;
top: 5px;
padding: 1px 6px;
margin-right: 10px;

color: #cabfb6;
font-size: 22px;
border: 1px solid rgba(0,0,0,0.2);
border-radius: 50%;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
@-webkit-keyframes downloader {
0% { top:5px; }
45% { top:60px; }
49% { opacity: 0; }
50% { top: -60px; }
51% { opacity: 1; }
100% { top:5px; color: #cbbfb5; text-shadow: 1px 1px #777; background:
rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); }
}
@-moz-keyframes downloader {
0% { top:5px; }
45% { top:60px; }
49% { opacity: 0; }
50% { top: -60px; }
51% { opacity: 1; }
}
@keyframes downloader {
0% { top:5px; }
45% { top:60px; }
49% { opacity: 0; }
50% { top: -60px; }
51% { opacity: 1; }
#main .download a:hover,

#main .download a:focus {
color: #cbbfb5;
}
#main .download a:hover .arrow,

#main .download a:focus .arrow {
-webkit-animation: downloader .4s forwards;
-moz-animation: downloader .4s forwards;
animation: downloader .4s forwards;
}
#main .download .file {

display: block;
font-weight:normal;
font-size: 0.6em;
margin-left: 40px;
}
#main .download .already {

font-size: 0.7em;
line-height: 2.4em;

#main .download .nb {

font-weight:bold;
}
#main {
padding: 10px;
color: #8a796d;
font-family: Helvetica, Arial, sans-serif;
text-align:left;
text-shadow: -1px -1px 0 rgba(255,255,255,0.1);
}
#main h2, #main h3 {

margin-top: 45px;
font-size: 2em;
font-family: "Open Sans", cursive;
text-align:left;
}
#main h3 {
margin-top: 25px;
font-size: 1.4em;
}
#main p {
margin-top: 2em;
}
#main .col2,
#main .col2 {
position: relative;
margin-top: 1em;
-webkit-column-count: 2;
-webkit-column-gap: 3em;
-moz-column-count: 2;
-moz-column-gap: 3em;
column-count: 2;
column-gap: 3em;
}
#main .col2 + .col2 {

margin-top: 3em;
}
#main p + p:before {
position: absolute;
content: "*";
width: 100%;
text-align: center;
top: -1.2em;
font-size: 2em;
color: #e1d7cf;
text-shadow: 1px 1px 0 rgba(0,0,0,0.15);
}
header h2.opensans{
font-family: 'Open Sans', sans-serif;
color: #000;
}
header p{
width:666px;

margin: 0 auto;
text-align: center;
font-family:Arial,Helvetica;
margin-bottom:12px;
}
footer {
padding: 25px;
margin-bottom: 38px;
border: 1px solid rgba(0,0,0,0.1);
color: #777;
text-align: center;
}
footer p {
margin:0.5em 0;
}
footer .sep {
margin: 0 1em;
}
RESULTADO:
En Internet Explorer 11:
En Firefox de Mozilla:

En Chrome de Google:
V. DISCUSION DE RESULTADOS
1. Ahora, realice ud. una página web adaptable, como la del segundo ejemplo, con otras fotos (utilice 8),
otros textos para un menú con cinco opciones, para el título principal y para los párrafos. Las fotos en
dimensiones mayores a 1280px deben mostrarse en una sola línea, para dimensiones menores de 1280px
pero mayores a 768px deben mostrarse en dos filas con cuatro fotos en cada una de estas, para
dimensiones menores de 768px pero mayores de 400px mantener las dos filas con cuatro fotos en cada
una, pero el menú debe quedar debajo del logo y arriba del contenido. Por último, para dimensiones
menores menores de 400px distribuir las fotos en cuatro filas con dos en cada una de estas.
Importante:
 En el ejercicio, documente los bloques y líneas de código de acuerdo a lo que crea conveniente, para
que instructor comprenda mejor su solución.
 Finalmente, envíe la carpeta del proyecto resultante, de manera comprimida a donde indique su
instructor(a).

2. Realice un sitio web utilizando el método de adaptabilidad del sitio web del ejercicio 2 del procedimiento.
El menú debe poseer cuatro opciones con funcionalidad para que se muestre una página de Inicio, una
página con un formulario de registro, como el del ejemplo 4, con un campo de texto: uno para el nombre
del usuario registrado, otro campo de tipo correo (mail o email) para su correo electrónico, otro campo de
tipo url para el sitio web de este usuario y uno adicional para la fecha de nacimiento, utilizando para este
último campo un control de tipo fecha. El último enlace del menú debe mostrar una galería integrada en
el área de contenido del sitio web. El menú siempre estará visible.
VI. INVESTIGACION COMPLEMENTARIA
 Investigue sobre que parámetros podemos añadirle a la propiedad viewport del elemento meta
utilizado para sitios web adaptativos.
 Investigar que debemos hacer para que nuestra página tenga el mismo ancho que el dispositivo
utilizando siempre viewport.
 Investigar cómo debemos establecer el ancho de la página para que sea el mismo que el dispositivo, y
además podamos tener el zoom mínimo de 1.0, y opcionalmente podamos establecer si se puede
ampliar la página o no, utilizando viewport.
 Investigue para qué se utilizan los archivos .htc que son una solución para visualización correcta de
sitios web donde se aplican bordes redondeados en versiones de Internet Explorer 8.0 y anteriores.
Explique cómo se aplica correctamente en un sitio web.
 Siguiendo el video tutorial del siguiente enlace: https://www.youtube.com/watch?v=z-CPRslZS_A
realice el menú desplegable con CSS3 que se explica durante el vídeo. Debe quedar igual y tener
exactamente la misma funcionalidad. Envíelo por correo tanto el marcado HTML como la hoja de
estilo en un archivo .css aparte vinculado al documento. Tiene que descargar los recursos de la hoja
de estilos y una carpeta de fuentes como se indica en el vídeo tutorial para completar el ejemplo y
obtener los iconos.
VII. BIBLIOGRAFIA
 Julie C. Meloni. HTML5, CSS3 y JavaScript. Editorial Anaya Multimedia/SAMS. 2da Edición. Mayo
2015. Madrid, España.
 Alexis Goldstein, Louis Lazaris y Estrelle Weyl. Manual Imprescindible HTML5 y CSS3. Editorial
Anaya Multimedia/Sitepoint. 1a. Edición. Noviembre 2011, Madrid España.
 Thomas A. Powell. HTML 4.0 Manual de Referencia. Traducción de la 3ra Edición en Inglés.
Editorial,McGraw Hill Osborne. 2001. Madrid, España.

Guia 1

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Guia 1

Încărcat de

Drepturi de autor:

Formate disponibile

UNIVERSIDAD DON BOSCO

FACULTAD DE ESTUDIOS TECNOLÓGICOS

 II. INTRODUCCION TEORICA

Estructura semántica básica de HTML5

ASIDE es nuestro equivalente a un DIV con ID="sidebar" o "barra"

Lenguajes Interpretados en el Cliente 2

FOOTER es nuestro equivalente a un DIV con ID="footer" o "pie".

Lenguajes Interpretados en el Cliente 3

Explicación de algunos atributos CSS

Lenguajes Interpretados en el Cliente 4

Lenguajes Interpretados en el Cliente 5

Lenguajes Interpretados en el Cliente 6

Valores y unidades de medida

Acerca de los colores y fondos

Lenguajes Interpretados en el Cliente 7

III. MATERIALES Y EQUIPO

Para la realización de la guía de práctica se requerirá lo siguiente:

Script html: cuadricula-flexible.html

Lenguajes Interpretados en el Cliente 8

Lenguajes Interpretados en el Cliente 9

Script css: flexible-grid.css (Guardar script en carpeta con nombre css)

/* Resetear todos los estilos en los navegadores */

Lenguajes Interpretados en el Cliente 10

fieldset, form, label, legend,

Lenguajes Interpretados en el Cliente 11

Lenguajes Interpretados en el Cliente 12

Lenguajes Interpretados en el Cliente 13

-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);;

Resultado al visualizarlo en varios navegadores (Firefox, Chrome, Internet Explorer y Opera):

Visualización en pantallas medias, como tablets o mini laptops.

Lenguajes Interpretados en el Cliente 14

Visualización en dispositivos como smartphones:

Lenguajes Interpretados en el Cliente 15

Ejercicio 2: Creación de página web adaptable con HTML5 y CSS3.

Script HTML: cuadricula-adaptable.html

<div class="section main">

Lenguajes Interpretados en el Cliente 16

Lenguajes Interpretados en el Cliente 17

DD_belatedPNG.fix('body, #page, h1, h1 img, ul.nav, ul.nav a, .main h2, .main h2 b,

Hoja de estilo CSS: responsive-grid.css

/* Resetear todos los estilos en los navegadores */

Lenguajes Interpretados en el Cliente 18

Lenguajes Interpretados en el Cliente 19

Lenguajes Interpretados en el Cliente 20

@media (max-width: 600px) {

Lenguajes Interpretados en el Cliente 21

@media (max-width: 400px) {

@media (min-width: 1300px) {

El resultado visualizado en su navegador es el siguiente:

En pantallas de 600px a 1299px:

Lenguajes Interpretados en el Cliente 22

En pantallas mayores o iguales a 400px pero menores de 600px:

Lenguajes Interpretados en el Cliente 23

En pantallas menores de 400px:

Lenguajes Interpretados en el Cliente 24

Script html: inicio.html

Lenguajes Interpretados en el Cliente 25

Lenguajes Interpretados en el Cliente 26

Hoja de estilos 1: base.css

Hoja de estilos 2: color.css

nav a, nav a:link {

Lenguajes Interpretados en el Cliente 27

#main-section article h3 a:hover {