Repaso HTML5 y CSS3 - Universidad Don Bosco

UNIVERSIDAD DON BOSCO
FACULTAD DE ESTUDIOS TECNOLÓGICOS
COMPUTACIÓN
CICLO: 02/2015
Nombre de la Practica:
Lugar de Ejecución:
Tiempo Estimado:
MATERIA:
DOCENTES:
GUIA DE LABORATORIO #1
Repaso HTML5 y CSS3.
Centro de Cómputo.
2 horas con 30 minutos.
Desarrollo de Aplicaciones Web con Software Interpretado
en el Cliente.
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
Guía # 1: Repaso HTML5 y CSS3.
FOOTER es nuestro equivalente a un DIV con ID="footer" o "pie".
Ahora el código debería tener la siguiente estructura.
Lenguajes Interpretados en el Cliente
3
Guía # 1: Repaso HTML5 y CSS3.
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.)
Lenguajes Interpretados en el Cliente
4
Guía # 1: Repaso HTML5 y CSS3.
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}
Lenguajes Interpretados en el Cliente
5
Guía # 1: Repaso HTML5 y CSS3.
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>:
Lenguajes Interpretados en el Cliente
6
Guía # 1: Repaso HTML5 y CSS3.
<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);
Lenguajes Interpretados en el Cliente
7
Guía # 1: Repaso HTML5 y CSS3.
III. MATERIALES Y EQUIPO
Para la realización de la guía de práctica se requerirá lo siguiente:
No. Requerimiento
1
Guía de práctica #0: Repaso HTML5 - CSS3.
2
Computadora con navegadores y editor de texto instalado
3
Memoria USB o disco flexible
Cantidad
1
1
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>
Lenguajes Interpretados en el Cliente
8
Guía # 1: Repaso HTML5 y CSS3.
</li>
</ul><!-- Final del ul class=".nav" -->
</div><!-- Final del div class=".mast" -->
<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><!-- Final del div con class=".section.intro" -->
<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><!-- Final del li class="figure" -->
<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><!-- Final del li class="figure" -->
<li id="f-mycroft" class="figure">
<a href="#">
<img src="img/f-mycroft.jpg" alt="" />
<span
class="figcaption">Mycroft
<b>Holmes</b></span>
</a>
</li><!-- Final del li class="figure" -->
<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><!-- Final del li class="figure" -->
<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><!-- Final del li class="figure" -->
<li id="f-winter" class="figure">
<a href="#">
<img src="img/f-winter.jpg" alt="" />
<span class="figcaption">James
<b>Winter</b></span>
Lenguajes Interpretados en el Cliente
9
Guía # 1: Repaso HTML5 y CSS3.
</a>
</li><!-- Final del li class="figure" -->
</ol>
</div><!-- Final del div class="section main" -->
<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><!-- Final del div class="footer" -->
</div><!-- Final del div="inner" -->
</div><!-- Final del div id="page" -->
<!--[if lte IE 7]>
<script type="text/javascript" src="site/imgSizer.js"></script>
<script type="text/javascript">
window.onload = function() {
imgSizer.collate();
}
</script>
<![endif]-->
<!--[if lte IE 6]>
<script type="text/javascript" src="site/ddpng.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix('body, #page, h1, h1 img, ul.nav, ul.nav a, .main h2, .main h2 b,
.footer');
</script>
<![endif]-->
</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,
Lenguajes Interpretados en el Cliente
10
Guía # 1: Repaso HTML5 y CSS3.
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;
}
Lenguajes Interpretados en el Cliente
11
Guía # 1: Repaso HTML5 y CSS3.
#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;
Lenguajes Interpretados en el Cliente
12
Guía # 1: Repaso HTML5 y CSS3.
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;
letter-spacing: 0.05em;
}
.intro h2 {
color: #890101;
font:
normal
2em
"Hoefler
Roman",serif;
text-align: center;
margin-bottom: 0.25em;
}
Text","Baskerville
old
face",Garamond,"Times
.main h2 {
background: url("../img/ornament.png") no-repeat 0 50%;
font-size: 1.4em;
text-transform: lowercase;
text-align: center;
margin: 0.75em 0 1em;
}
.main h2 b {
background: url("../img/bg.png");
font-weight: normal;
padding: 0 1em;
}
.figure {
float: left;
font-size: 10px;
letter-spacing: 0.05em;
line-height: 1.1;
margin: 0 3.317535545023696682% 1.5em 0; /* 21px - 633px */
text-align: center;
text-transform: uppercase;
width: 31.121642969984202211%; /* 197px - 633px */
}
.figure b {
display: block;
font-size: 14px;
font-family: "Book Antiqua","Palatino Linotype",Georgia,serif;
letter-spacing: 0.1em;
}
.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);
Lenguajes Interpretados en el Cliente
13
New
Guía # 1: Repaso HTML5 y CSS3.
-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 {
margin-bottom: 0.5em;
}
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.
Lenguajes Interpretados en el Cliente
14
Guía # 1: Repaso HTML5 y CSS3.
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.
Lenguajes Interpretados en el Cliente
15
Guía # 1: Repaso HTML5 y CSS3.
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 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 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><!-- Final de ul class="nav" -->
</div><!-- Final de div class="mast" -->
<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><!-- Final del div class="section intro" -->
<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>
Lenguajes Interpretados en el Cliente
16
Guía # 1: Repaso HTML5 y CSS3.
</a>
</li><!-- Final del li class="figure" -->
<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><!-- Final del li class="figure" -->
<li id="f-mycroft" class="figure">
<a href="#">
<img src="img/f-mycroft.jpg" alt="" />
<span class="figcaption">Mycroft
<b>Holmes</b></span>
</a>
</li><!-- Final del li class="figure" -->
<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><!-- Final del li class="figure" -->
<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><!-- Final del li class="figure" -->
<li id="f-winter" class="figure">
<a href="#">
<img src="img/f-winter.jpg" alt="" />
<span class="figcaption">James
<b>Winter</b></span>
</a>
</li><!-- Final del li class="figure" -->
</ol>
</div><!-- Fianl del div class="section main" -->
<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><!-- Final del div class="footer" -->
</div><!-- Final del div="inner" -->
</div><!-- Final del div id="page" -->
<!--[if lte IE 7]>
<script type="text/javascript" src="site/imgSizer.js"></script>
<script type="text/javascript">
window.onload = function() {
imgSizer.collate();
}
</script>
<![endif]-->
<!--[if lte IE 6]>
<script type="text/javascript" src="site/ddpng.js"></script>
<script type="text/javascript">
Lenguajes Interpretados en el Cliente
17
Guía # 1: Repaso HTML5 y CSS3.
DD_belatedPNG.fix('body, #page, h1, h1 img, ul.nav, ul.nav a, .main h2, .main h2 b,
.footer');
</script>
<![endif]-->
</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 {
text-decoration:none;
}
del {
text-decoration:line-through;
Lenguajes Interpretados en el Cliente
18
Guía # 1: Repaso HTML5 y CSS3.
}
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;
}
Lenguajes Interpretados en el Cliente
19
Guía # 1: Repaso HTML5 y CSS3.
.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 {
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
Text","Times New Roman",serif;
display: block;
letter-spacing: 0.05em;
}
.intro h2 {
color: #890101;
font:
normal
2em
"Hoefler
Roman",serif;
text-align: center;
margin-bottom: 0.25em;
}
Text","Baskerville
old
.main h2 {
background: url("../img/ornament.png") no-repeat 0 50%;
font-size: 1.4em;
text-transform: lowercase;
text-align: center;
margin: 0.75em 0 1em;
}
Lenguajes Interpretados en el Cliente
20
Linotype","Hoefler
face",Garamond,"Times
New
Guía # 1: Repaso HTML5 y CSS3.
.main h2 b {
background: url("../img/bg.png");
font-weight: normal;
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 */
text-transform: uppercase;
letter-spacing: 0.05em;
}
.figure b {
display: block;
font-size: 14px;
font-family: "Book Antiqua","Palatino Linotype",Georgia,serif;
letter-spacing: 0.1em;
}
.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 {
margin-bottom: 0.5em;
}
@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;
Lenguajes Interpretados en el Cliente
21
Guía # 1: Repaso HTML5 y CSS3.
}
}
@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:
Lenguajes Interpretados en el Cliente
22
Guía # 1: Repaso HTML5 y CSS3.
En pantallas mayores o iguales a 400px pero menores de 600px:
Lenguajes Interpretados en el Cliente
23
Guía # 1: Repaso HTML5 y CSS3.
En pantallas menores de 400px:
Lenguajes Interpretados en el Cliente
24
Guía # 1: Repaso HTML5 y CSS3.
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>
Lenguajes Interpretados en el Cliente
25
Guía # 1: Repaso HTML5 y CSS3.
</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>
<p class="display-extrabig display-big display-medium">
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>
<p class="display-extrabig display-big display-medium">
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>
<p class="display-extrabig display-big display-medium">
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>
<p class="display-extrabig display-big display-medium">
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>
Lenguajes Interpretados en el Cliente
26
Guía # 1: Repaso HTML5 y CSS3.
</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;
text-decoration: none;
}
Lenguajes Interpretados en el Cliente
27
Guía # 1: Repaso HTML5 y CSS3.
nav a:visited {
color: #dcdcdc;
text-decoration: none;
}
nav a:active {
color: #fc3;
text-decoration: none;
}
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;
text-decoration: none;
}
aside a:visited {
color: #dcdcdc;
text-decoration: none;
}
aside a:active {
color: #C28547;
text-decoration: none;
}
aside a:hover {
color: #75D1D1;
text-decoration: underline;
Lenguajes Interpretados en el Cliente
28
Guía # 1: Repaso HTML5 y CSS3.
}
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%;
}
Lenguajes Interpretados en el Cliente
29
Guía # 1: Repaso HTML5 y CSS3.
#menusec li {
display: block;
padding: 6px 2px;
}
Hoja de estilos 4: big.css
.display-big {
display: inherit !important;
}
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 {
display: inherit !important;
}
body {
font-family: Arial,sans-serif;
font-size: 18px;
}
.menu li {
display: inline-block;
Lenguajes Interpretados en el Cliente
30
Guía # 1: Repaso HTML5 y CSS3.
padding: 6px 10px;
}
#main-nav {
width: 100%;
}
select.display-mini {
font-size: 1.2em;
width: 100%;
}
Hoja de estilos 6: mini.css
.display-mini {
display: inherit !important;
}
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>
<meta charset="utf-8" />
<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>
Lenguajes Interpretados en el Cliente
31
Guía # 1: Repaso HTML5 y CSS3.
</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;
Lenguajes Interpretados en el Cliente
32
Guía # 1: Repaso HTML5 y CSS3.
}
.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 {
Lenguajes Interpretados en el Cliente
33
Guía # 1: Repaso HTML5 y CSS3.
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;
}
Lenguajes Interpretados en el Cliente
34
Guía # 1: Repaso HTML5 y CSS3.
.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
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;
-webkit-border-radius: 3px;
-moz-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;
}
bottom,
from(#68b12f),
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:
Lenguajes Interpretados en el Cliente
35
Guía # 1: Repaso HTML5 y CSS3.
Ejercicio 5: Menú avanzado con las nuevas propiedades CSS3 aplicado a un documento HTML5.
html: menuavanzado.html
<!DOCTYPE html">
<html lang="es">
<head>
<meta charset="utf-8">
<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
<ul class="submenu">
<li>Cine</li>
<li>Teatro</li>
<li>Literatura</li>
<li>Premios</li>
</ul>
</li>
<li>Sociedad
<ul class="submenu">
<li>Educación</li>
<li>Comunicación</li>
<li>Blogs</li>
</ul>
</li>
<li>Economía
<ul class="submenu">
<li>Empresas</li>
<li>Mercado</li>
<li>Bolsa</li>
</ul>
</li>
<li>Tecnología
<ul class="submenu">
<li>Programas</li>
Lenguajes Interpretados en el Cliente
36
Guía # 1: Repaso HTML5 y CSS3.
<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;
display: inline-block;
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;
}
Lenguajes Interpretados en el Cliente
37
Guía # 1: Repaso HTML5 y CSS3.
/* 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% {
text-shadow: 200px 2px 20px #375f85;
}
50% {
transform: scale(1.25);
border-radius: 5px;
}
100%{
transform: scale(1.05);
text-shadow: 2px 2px 1px #375f85;
}
}
@-moz-keyframes botonsubmenu {
0% {
text-shadow: 200px 2px 20px #375f85;
-moz-text-shadow: 200px 2px 20px #375f85;
}
50% {
-moz-transform: scale(1.25);
-moz-border-radius: 5px;
}
100%{
-moz-transform: scale(1.05);
text-shadow: 2px 2px 1px #375f85;
-moz-text-shadow: 2px 2px 1px #375f85;
}
Lenguajes Interpretados en el Cliente
38
Guía # 1: Repaso HTML5 y CSS3.
}
@-webkit-keyframes botonsubmenu {
0% {
text-shadow: 200px 2px 20px #375f85;
-webkit-text-shadow: 200px 2px 20px #375f85;
}
50% {
-webkit-transform: scale(1.25);
-webkit-border-radius: 5px;
}
100%{
-webkit-transform: scale(1.05);
text-shadow: 2px 2px 1px #375f85;
-webkit-text-shadow: 2px 2px 1px #375f85;
}
}
@-o-keyframes botonsubmenu {
0% {
text-shadow: 200px 2px 20px #375f85;
-o-text-shadow: 200px 2px 20px #375f85;
}
50% {
-o-transform: scale(1.25);
-o-border-radius: 5px;
}
100%{
-o-transform: scale(1.05);
text-shadow: 200px 2px 20px #375f85;
-o-text-shadow: 2px 2px 1px #375f85;
}
}
@-ms-keyframes botonsubmenu {
0% {
text-shadow: 200px 2px 20px #375f85;
-ms-text-shadow: 200px 2px 20px #375f85;
}
50% {
-ms-transform: scale(1.25);
-ms-border-radius: 5px;
}
100%{
-ms-transform: scale(1.05);
text-shadow: 200px 2px 20px #375f85;
-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;
}
Lenguajes Interpretados en el Cliente
39
Guía # 1: Repaso HTML5 y CSS3.
#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% {
transform: scale(0.5);
box-shadow: -10px 4px 8px 5px #000;
}
100% {
opacity: 1;
left: 1px;
}
}
@-moz-keyframes submenu {
0% {
opacity: 0;
left: -150px;
}
50% {
-moz-transform: scale(0.5);
box-shadow: -10px 4px 8px 5px #000;
-moz-box-shadow: -10px 4px 8px 5px #000;
}
100% {
opacity: 1;
left: 1px;
}
}
@-webkit-keyframes submenu {
0% {
opacity: 0;
left: -150px;
}
50% {
-webkit-transform: scale(0.5);
box-shadow: -10px 4px 8px 5px #000;
-webkit-box-shadow: -10px 4px 8px 5px #000;
}
100% {
opacity: 1;
left: 1px;
}
}
@-o-keyframes submenu {
Lenguajes Interpretados en el Cliente
40
Guía # 1: Repaso HTML5 y CSS3.
0% {
opacity: 0;
left: -150px;
}
50% {
-o-transform: scale(0.5);
box-shadow: -10px 4px 8px 5px #000;
-o-box-shadow: -10px 4px 8px 5px #000;
}
100% {
opacity: 1;
left: 1px;
}
}
@-ms-keyframes submenu {
0% {
opacity: 0;
left: -150px;
}
50% {
-ms-transform: scale(0.5);
box-shadow: -10px 4px 8px 5px #000;
-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;
}
Lenguajes Interpretados en el Cliente
41
Guía # 1: Repaso HTML5 y CSS3.
#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 charset="utf-8">
<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>
Lenguajes Interpretados en el Cliente
42
Guía # 1: Repaso HTML5 y CSS3.
<body>
<!-- Comienza el cuerpo de la galeria -->
<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>
<span id="sl_i2" class="sl_command sl_i"> </span>
<span id="sl_i3" class="sl_command sl_i"> </span>
<span id="sl_i4" class="sl_command sl_i"> </span>
<span id="sl_i5" class="sl_command sl_i"> </span>
<span id="sl_i6" class="sl_command sl_i"> </span>
<span id="sl_i7" class="sl_command sl_i"> </span>
<span id="sl_i8" class="sl_command sl_i"> </span>
<span id="sl_i9" class="sl_command sl_i"> </span>
<span id="sl_i10" class="sl_command sl_i"> </span>
<span id="sl_i11" class="sl_command sl_i"> </span>
<span id="sl_i12" class="sl_command sl_i"> </span>
<span id="sl_i13" class="sl_command sl_i"> </span>
<span id="sl_i14" 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
<a class="commands next
<a class="commands prev
<a class="commands next
<a class="commands prev
<a class="commands next
<a class="commands prev
<a class="commands next
<a class="commands prev
<a class="commands next
<a class="commands prev
<a class="commands next
<a class="commands prev
<a class="commands next
<a class="commands prev
<a class="commands next
<a class="commands prev
<a class="commands next
<a class="commands prev
<a class="commands next
<a class="commands prev
<a class="commands next
<a class="commands prev
<a class="commands next
<a class="commands prev
<a class="commands next
<a class="commands prev
<a class="commands next
<a class="play_commands
<a class="play_commands
commands1" href="#sl_i14" title="Ir al último slide"><</a>
commands1" href="#sl_i2" title="Ir al 2do slide">></a>
commands2" href="#sl_i1" title="Ir al 1er slide"><</a>
commands2" href="#sl_i3" title="Ir al 3er slide">></a>
commands3" href="#sl_i2" title="Ir al 2do slide"><</a>
commands3" href="#sl_i4" title="Ir al 4to slide">></a>
commands4" href="#sl_i3" title="Ir al 3er slide"><</a>
commands4" href="#sl_i5" title="Ir al 5to slide">></a>
commands5" href="#sl_i4" title="Ir al 4to slide"><</a>
commands5" href="#sl_i6" title="Ir al 6to slide">></a>
commands6" href="#sl_i5" title="Ir al 5to slide"><</a>
commands6" href="#sl_i7" title="Ir al 7mo slide">></a>
commands7" href="#sl_i6" title="Ir al 6to slide"><</a>
commands7" href="#sl_i8" title="Ir al 8vo slide">></a>
commands8" href="#sl_i7" title="Ir al 7mo slide"><</a>
commands8" href="#sl_i9" title="Ir al 9no slide">></a>
commands9" href="#sl_i8" title="Ir al 8vo slide"><</a>
commands9" href="#sl_i10" title="Ir al 10mo slide">></a>
commands10" href="#sl_i9" title="Ir al 9no slide"><</a>
commands10" href="#sl_i11" title="Ir al 11vo slide">></a>
commands11" href="#sl_i10" title="Ir al 10mo slide"><</a>
commands11" href="#sl_i12" title="Ir al 12vo slide">></a>
commands12" href="#sl_i11" title="Ir al 11vo slide"><</a>
commands12" href="#sl_i13" title="Ir al 13vo slide">></a>
commands13" href="#sl_i12" title="Ir al 12vo slide"><</a>
commands13" href="#sl_i14" title="Ir al 14vo slide">></a>
commands14" href="#sl_i13" title="Ir al 12vo slide"><</a>
commands14" href="#sl_i1" title="Ir al 1er slide">></a>
pause" href="#sl_pause" title="Maintain paused">Detener</a>
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" />
Lenguajes Interpretados en el Cliente
43
Guía # 1: Repaso HTML5 y CSS3.
<figcaption>LABORATORIO DE BIOMÉDICA EXPERIMENTAL</figcaption>
</figure>
<figure>
<img src="img/img002.jpg" alt="" width="640" height="310" />
<figcaption>CELDA DE MANUFACTURA INTEGRADA POR COMPUTADORA</figcaption>
</figure>
<figure>
<img src="img/img003.jpg" alt="" width="640" height="310" />
<figcaption>LABORATORIO DE CNC</figcaption>
</figure>
<figure>
<img src="img/img004.jpg" alt="" width="640" height="310" />
<figcaption>LABORATORIO DE DISEÑO GRÁFICO Y MULTIMEDIA</figcaption>
</figure>
<figure>
<img src="img/img005.jpg" alt="" width="640" height="310" />
<figcaption>LABORATORIO DE MÁQUINAS ELÉCTRICAS</figcaption>
</figure>
<figure>
<img src="img/img006.jpg" alt="" width="640" height="310" />
<figcaption>AVIÓN ESCUELA BOEING 727 (BASE AÉREA MILITAR DE
ILOPANGO)</figcaption>
</figure>
<figure>
<img src="img/img007.jpg" alt="" width="640" height="310" />
<figcaption>HANGAR AERONÁUTICA</figcaption>
</figure>
<figure>
<img src="img/img008.jpg" alt="" width="640" height="310" />
<figcaption>LABORATORIO DE IDIOMAS</figcaption>
</figure>
<figure>
<img src="img/img009.jpg" alt="" width="640" height="310" />
<figcaption>CENTRO INTERNACIONAL CERTIFICADO EN MECATRÓNICA</figcaption>
</figure>
<figure>
<img src="img/img010.jpg" alt="" width="640" height="310" />
<figcaption>CENTRO DE INNOVACIÓN DE SOFTWARE PARA MÓVILES
(MOSAIC)</figcaption>
</figure>
<figure>
<img src="img/img011.jpg" alt="" width="640" height="310" />
<figcaption>PRÁCTICAS DE DISEÑO Y SIMULACIÓN DE PIEZAS Y
EQUIPOS</figcaption>
</figure>
<figure>
<img src="img/img012.jpg" alt="" width="640" height="310" />
<figcaption>LABORATORIO DE ANÁLISIS DE LA MARCHA</figcaption>
</figure>
<figure>
<img src="img/img013.jpg" alt="" width="640" height="310" />
<figcaption>SALA CIENTÍFICA ESTADOUNIDENSE PARA LA INVESTIGACIÓN EN
ENERGÍA</figcaption>
</figure>
<figure>
<img src="img/img014.jpg" alt="" width="640" height="310" />
<figcaption>ESTUDIO DE TELEVISIÓN</figcaption>
</figure>
</div>
</div>
<span id="timeline"></span>
<ul class="dots_commands">
<li>
Lenguajes Interpretados en el Cliente
44
Guía # 1: Repaso HTML5 y CSS3.
<a title="Foto 1" href="#sl_i1">
<img src="img/img001_s.jpg" alt="img001" width="36" height="24" />
</a>
</li>
<li>
<a title="Foto 2" href="#sl_i2">
<img src="img/img002_s.jpg" alt="img002" width="36" height="24" />
</a>
</li>
<li>
<a title="Foto 3" href="#sl_i3">
<img src="img/img003_s.jpg" alt="img003" width="36" height="24" />
</a>
</li>
<li>
<a title="Foto 4" href="#sl_i4">
<img src="img/img004_s.jpg" alt="img004" width="36" height="24" />
</a>
</li>
<li>
<a title="Foto 5" href="#sl_i5">
<img src="img/img005_s.jpg" alt="img005" width="36" height="24" />
</a>
</li>
<li>
<a title="Foto 6" href="#sl_i6">
<img src="img/img006_s.jpg" alt="img006" width="36" height="24" />
</a>
</li>
<li>
<a title="Foto 7" href="#sl_i7">
<img src="img/img007_s.jpg" alt="img007" width="36" height="24" />
</a>
</li>
<li>
<a title="Foto 8" href="#sl_i8">
<img src="img/img008_s.jpg" alt="img008" width="36" height="24" />
</a>
</li>
<li>
<a title="Foto 9" href="#sl_i9">
<img src="img/img009_s.jpg" alt="img009" width="36" height="24" />
</a>
</li>
<li>
<a title="Foto 10" href="#sl_i10">
<img src="img/img010_s.jpg" alt="img010" width="36" height="24" />
</a>
</li>
<li>
<a title="Foto 11" href="#sl_i11">
<img src="img/img011_s.jpg" alt="img011" width="36" height="24" />
</a>
</li>
<li>
<a title="Foto 12" href="#sl_i12">
<img src="img/img012_s.jpg" alt="img012" width="36" height="24" />
</a>
</li>
<li>
<a title="Foto 13" href="#sl_i13">
<img src="img/img013_s.jpg" alt="img013" width="36" height="24" />
</a>
</li>
<li>
Lenguajes Interpretados en el Cliente
45
Guía # 1: Repaso HTML5 y CSS3.
<a title="Foto 14" href="#sl_i14">
<img src="img/img014_s.jpg" alt="img014" width="36" height="24" />
</a>
</li>
</ul>
</section>
<!-- Termina el cuerpo de la galeria -->
</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(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)),
-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(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)),
-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,
Lenguajes Interpretados en el Cliente
46
Guía # 1: Repaso HTML5 y CSS3.
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)),
-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(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)),
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 {
display: inline-block;
}
a {
Lenguajes Interpretados en el Cliente
47
Guía # 1: Repaso HTML5 y CSS3.
text-decoration: none;
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);
Lenguajes Interpretados en el Cliente
48
Guía # 1: Repaso HTML5 y CSS3.
-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;
text-decoration:none;
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;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
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;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
Lenguajes Interpretados en el Cliente
49
Guía # 1: Repaso HTML5 y CSS3.
-o-border-radius: 12px;
-ms-border-radius: 12px;
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;
Lenguajes Interpretados en el Cliente
50
Guía # 1: Repaso HTML5 y CSS3.
}
#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;
Lenguajes Interpretados en el Cliente
51
Guía # 1: Repaso HTML5 y CSS3.
background: #fff;
background: rgba(255,255,255,0.5);
}
.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:
50%, 70%
{ left:
75%, 95%
{ left:
}
@-moz-keyframes slider {
0%, 20%, 100% { left: 0 }
25%, 45%
{ left:
50%, 70%
{ left:
75%, 95%
{ left:
}
@keyframes slider {
0%, 20%, 100% { left: 0 }
25%, 45%
{ left:
50%, 70%
{ left:
75%, 95%
{ left:
}
-100% }
-200% }
-300% }
-100% }
-200% }
-300% }
-100% }
-200% }
-300% }
#slideshow .slider {
position: absolute;
Lenguajes Interpretados en el Cliente
52
Guía # 1: Repaso HTML5 y CSS3.
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)
url(../img/img002.jpg)
url(../img/img003.jpg)
url(../img/img004.jpg)
url(../img/img005.jpg)
url(../img/img006.jpg)
url(../img/img007.jpg)
url(../img/img008.jpg)
url(../img/img009.jpg)
url(../img/img010.jpg)
url(../img/img011.jpg)
url(../img/img012.jpg)
url(../img/img013.jpg)
url(../img/img014.jpg)
}
.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;
}
0 0 no-repeat,
640px 0 no-repeat,
1280px 0 no-repeat,
1920px 0 no-repeat,
2560px 0 no-repeat,
3200px 0 no-repeat,
3840px 0 no-repeat,
4480px 0 no-repeat,
5120px 0 no-repeat,
5760px 0 no-repeat,
6400px 0 no-repeat,
7040px 0 no-repeat,
7680px 0 no-repeat,
8320px 0 no-repeat;
#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% {
Lenguajes Interpretados en el Cliente
53
Guía # 1: Repaso HTML5 y CSS3.
-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;
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;
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;
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;
box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
}
}
#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;
-moz-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;
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;
Lenguajes Interpretados en el Cliente
54
Guía # 1: Repaso HTML5 y CSS3.
}
}
#slideshow figcaption {
position:absolute;
padding: 20px 20px; margin:0;
left:0; right:0; bottom: 5px;
text-align:center;
letter-spacing: 0.05em;
word-spacing: 0.05em;
font-family: Georgia, Times, serif;
background: #000;
background: rgba(255,255,255,0.5);
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%
20%, 45%, 70%, 90%
}
@-moz-keyframes timeliner {
0%, 25%, 50%, 75%, 100%
20%, 45%, 70%, 90%
}
@keyframes timeliner {
0%, 25%, 50%, 75%, 100%
20%, 45%, 70%, 90%
}
{ width: 0;
{ width: 640px;
}
}
{ width: 0;
{ width: 640px;
}
}
{ width: 0;
{ 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;
padding:0; margin:0;
text-align:center;
}
.dots_commands li {
display:inline;
padding:0; margin:0;
list-style:none;
}
Lenguajes Interpretados en el Cliente
55
Guía # 1: Repaso HTML5 y CSS3.
.dots_commands a {
position: relative;
display:inline-block;
height:26px; width: 40px;
margin: 1px 1px;
/* text-indent: -9999px; */
/* background: #fff; */
border-bottom: 2px;
padding-top: 2px;
/*-webkit-border-radius: 50%;
-moz-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%
22%
23%
25%
{
{
{
{
opacity:
opacity:
opacity:
opacity:
1;
0;
0;
1;
left:
left:
left:
left:
0;
0;
18px; }
18px; }
45%
47%
48%
50%
{
{
{
{
opacity:
opacity:
opacity:
opacity:
1;
0;
0;
1;
left:
left:
left:
left:
18px;
18px;
36px;
36px;
}
}
}
}
70%
72%
73%
75%
{
{
{
{
opacity:
opacity:
opacity:
opacity:
1;
0;
0;
1;
left:
left:
left:
left:
36px;
36px;
54px;
54px;
}
}
}
}
95%
97%
98%
{ opacity: 1; left: 54px; }
{ opacity: 0; left: 54px; }
{ opacity: 0; left: 0;
}
}
@-webkit-keyframes dotser {
0%, 100%
{ opacity: 1; left: 0;
}
20%
22%
23%
25%
{
{
{
{
opacity:
opacity:
opacity:
opacity:
1;
0;
0;
1;
left:
left:
left:
left:
0;
0;
18px; }
18px; }
45%
47%
48%
50%
{
{
{
{
opacity:
opacity:
opacity:
opacity:
1;
0;
0;
1;
left:
left:
left:
left:
18px;
18px;
36px;
36px;
}
}
}
}
70%
72%
73%
75%
{
{
{
{
opacity:
opacity:
opacity:
opacity:
1;
0;
0;
1;
left:
left:
left:
left:
36px;
36px;
54px;
54px;
}
}
}
}
Lenguajes Interpretados en el Cliente
}
}
56
}
}
Guía # 1: Repaso HTML5 y CSS3.
95%
97%
98%
{ opacity: 1; left: 54px; }
{ opacity: 0; left: 54px; }
{ opacity: 0; left: 0;
}
}
@keyframes dotser {
0%, 100%
{ opacity: 1; left: 0;
}
20%
22%
23%
25%
{
{
{
{
opacity:
opacity:
opacity:
opacity:
1;
0;
0;
1;
left:
left:
left:
left:
0;
0;
18px; }
18px; }
45%
47%
48%
50%
{
{
{
{
opacity:
opacity:
opacity:
opacity:
1;
0;
0;
1;
left:
left:
left:
left:
18px;
18px;
36px;
36px;
}
}
}
}
70%
72%
73%
75%
{
{
{
{
opacity:
opacity:
opacity:
opacity:
1;
0;
0;
1;
left:
left:
left:
left:
36px;
36px;
54px;
54px;
}
}
}
}
95%
97%
98%
{ opacity: 1; left: 54px; }
{ opacity: 0; left: 54px; }
{ 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;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
-ms-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;
}
.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 */
Lenguajes Interpretados en el Cliente
57
Guía # 1: Repaso HTML5 y CSS3.
.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
display: none; }
#sl_i1:target ~ #slideshow
display: block; }
#sl_i1:target ~ #slideshow
background-position: 0 0,
4480px 0, 5120px 0, 5760px
#sl_i1:target ~ #slideshow
.commands
{
.commands1
{
.c_slider
{
640px 0, 1280px 0, 1920px 0, 2560px 0, 3200px 0, 3840px 0,
0, 6400px 0, 7040px 0, 7680px 0, 8320px 0; }
.dots_commands li:first-child a:before { left:0; }
#sl_i2:target ~ #slideshow .commands
{
display: none; }
#sl_i2:target ~ #slideshow .commands2
{
display: block; }
#sl_i2:target ~ #slideshow .c_slider
{
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; }
#sl_i3:target ~ #slideshow .commands
{
display: none; }
#sl_i3:target ~ #slideshow .commands3
{
display: block; }
#sl_i3:target ~ #slideshow .c_slider
{
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; }
#sl_i3:target ~ #slideshow .dots_commands li:first-child a:before { left:92px; }
#sl_i4:target ~ #slideshow .commands
display: none; }
#sl_i4:target ~ #slideshow .commands4
display: block; }
Lenguajes Interpretados en el Cliente
{
{
58
Guía # 1: Repaso HTML5 y CSS3.
#sl_i4:target ~ #slideshow .c_slider
{
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; }
#sl_i4:target ~ #slideshow .dots_commands li:first-child a:before { left:138px; }
#sl_i5:target ~ #slideshow .commands
{
display: none; }
#sl_i5:target ~ #slideshow .commands5
{
display: block; }
#sl_i5:target ~ #slideshow .c_slider
{
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; }
#sl_i5:target ~ #slideshow .dots_commands li:first-child a:before { left:184px; }
#sl_i6:target ~ #slideshow .commands
{
display: none; }
#sl_i6:target ~ #slideshow .commands6
{
display: block; }
#sl_i6:target ~ #slideshow .c_slider
{
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; }
#sl_i6:target ~ #slideshow .dots_commands li:first-child a:before { left:230px; }
#sl_i7:target ~ #slideshow .commands
{
display: none; }
#sl_i7:target ~ #slideshow .commands7
{
display: block; }
#sl_i7:target ~ #slideshow .c_slider
{
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; }
#sl_i7:target ~ #slideshow .dots_commands li:first-child a:before { left:276px; }
#sl_i8:target ~ #slideshow .commands
{
display: none; }
#sl_i8:target ~ #slideshow .commands8
{
display: block; }
#sl_i8:target ~ #slideshow .c_slider
{
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; }
#sl_i8:target ~ #slideshow .dots_commands li:first-child a:before { left:322px; }
#sl_i9:target ~ #slideshow .commands
{
display: none; }
#sl_i9:target ~ #slideshow .commands9
{
display: block; }
#sl_i9:target ~ #slideshow .c_slider
{
background-position: -5120px 0, -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; }
#sl_i9:target ~ #slideshow .dots_commands li:first-child a:before { left:368px; }
#sl_i10:target ~ #slideshow .commands
{
display: none; }
#sl_i10:target ~ #slideshow .commands10
{
display: block; }
#sl_i10:target ~ #slideshow .c_slider
{
background-position: -5760px 0, -5120px 0, -4480px 0, -3840px 0, -3200px 0, -2560px 0, 1920px 0, -1280px 0, -640px 0, 0 0, 640px 0, 1280px 0, 1920px 0, 2560px 0; }
#sl_i10:target ~ #slideshow .dots_commands li:first-child a:before
{ left:414px; }
#sl_i11:target ~ #slideshow .commands
display: none; }
#sl_i11:target ~ #slideshow .commands11
display: block; }
Lenguajes Interpretados en el Cliente
{
{
59
Guía # 1: Repaso HTML5 y CSS3.
#sl_i11:target ~ #slideshow .c_slider
{
background-position: -6400px 0, -5760px 0, -5120px 0, -4480px 0, -3840px 0, -3200px 0, 2560px 0, -1920px 0, -1280px 0, -640px 0, 0 0, 640px 0, 1280px 0, 1920px 0; }
#sl_i11:target ~ #slideshow .dots_commands li:first-child a:before
{ left:460px; }
#sl_i12:target ~ #slideshow .commands
{
display: none; }
#sl_i12:target ~ #slideshow .commands12
{
display: block; }
#sl_i12:target ~ #slideshow .c_slider
{
background-position: -7040px 0, -6400px 0, -5760px 0, -5120px 0, -4480px 0, -3840px 0, 3200px 0, -2560px 0, -1920px 0, -1280px 0, -640px 0, 0 0, 640px 0, 1280px 0; }
#sl_i12:target ~ #slideshow .dots_commands li:first-child a:before
{ left:506px; }
#sl_i13:target ~ #slideshow .commands
{
display: none; }
#sl_i13:target ~ #slideshow .commands13
{
display: block; }
#sl_i13:target ~ #slideshow .c_slider
{
background-position: -7680px 0, -7040px 0, -6400px 0, -5760px 0, -5120px 0, -4480px 0, 3840px 0, -3200px 0, -2560px 0, -1920px 0, -1280px 0, -640px 0, 0 0, 640px 0; }
#sl_i13:target ~ #slideshow .dots_commands li:first-child a:before
{ left:552px; }
#sl_i14:target ~ #slideshow .commands
{
display: none; }
#sl_i14:target ~ #slideshow .commands14
{
display: block; }
#sl_i14:target ~ #slideshow .c_slider
{
background-position: -8320px 0, -7680px 0, -7040px 0, -6400px 0, -5760px 0, -5120px 0, 4480px 0, -3840px 0, -3200px 0, -2560px 0, -1920px 0, -1280px 0, -640px 0, 0 0; }
#sl_i14:target ~ #slideshow .dots_commands li:first-child a:before
{ left:598px; }
/* EXPLANATIONS */
#main .download {
text-align: center;
margin: 3em 0 1em;
line-height: 1.35em;
}
#main .download a {
position: relative;
display:inline-block;
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;
display: inline-block;
padding: 1px 6px;
margin-right: 10px;
Lenguajes Interpretados en el Cliente
60
Guía # 1: Repaso HTML5 y CSS3.
color: #cabfb6;
font-size: 22px;
background: rgba(0,0,0,0.1);
border: 1px solid rgba(0,0,0,0.2);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
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
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; }
100%
{
top:5px;
color:
#cbbfb5;
text-shadow:
1px
rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); }
}
@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
rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); }
}
#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;
line-height: 0.55em;
}
#main .download .already {
font-size: 0.7em;
line-height: 2.4em;
Lenguajes Interpretados en el Cliente
61
1px
#777;
background:
1px
#777;
background:
1px
#777;
background:
Guía # 1: Repaso HTML5 y CSS3.
}
#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 {
line-height: 1.85em;
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;
Lenguajes Interpretados en el Cliente
62
Guía # 1: Repaso HTML5 y CSS3.
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);
background: rgba(0,0,0,0.1);
color: #777;
text-align: center;
}
footer p {
margin:0.5em 0;
}
footer .sep {
display: inline-block;
margin: 0 1em;
}
RESULTADO:
En Internet Explorer 11:
En Firefox de Mozilla:
Lenguajes Interpretados en el Cliente
63
Guía # 1: Repaso HTML5 y CSS3.
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).
Lenguajes Interpretados en el Cliente
64
Guía # 1: Repaso HTML5 y CSS3.
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.
Lenguajes Interpretados en el Cliente
65