UNIVERSIDAD DON BOSCO FACULTAD DE …...Valores y unidades de medida Como se ha podido observar en algunos de los ejemplos es necesario especificar en algunas propiedades medidas mediante

1 / 65

UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLÓGICOS

COMPUTACIÓN

CICLO: 02/2019

GUIA DE LABORATORIO #5

Nombre de la Practica: Formularios responsive HTML5 y CSS3

Lugar de Ejecución: Centro de Cómputo.

Tiempo Estimado: 2 horas MATERIA: Lenguajes Interpretados en el Cliente.

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.

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.

Guía # 5: Repaso HTML5 y CSS3.

Lenguajes Interpretados en el Cliente 2

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.

FOOTER es nuestro equivalente a un DIV con ID="footer" o "pie". Ahora el código debería tener la siguiente estructura.





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



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

Text-decoration Este atributo permite remarcar el texto. Los valores soportados son underline (subrayado), line-through (tachado), none (ninguno) e italic (cursiva). Ejemplos: {text-decoration: underline} {text-decoration: line-through}



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



<P STYLE="background: URL(nubes.jpg)"> Este párrafo tiene un fondo con imágenes, al igual que con el HTML convencional se consigue para toda una página, pero en este caso está limitado al ámbito de esta etiqueta. <P> En cambio, este otro párrafo no tiene imagen de fondo, porque no se le ha incluido este atributo. Este es el resultado: Este párrafo tiene un fondo con imágenes, al igual que con el HTML convencional se consigue para toda una página, pero en este caso está limitado al ámbito de esta etiqueta. En cambio, este otro párrafo no tiene imagen de fondo, porque no se le ha incluido este atributo. Valores y unidades de medida Como se ha podido observar en algunos de los ejemplos es necesario especificar en algunas propiedades medidas mediante valores y unidades de medida. Por ejemplo, para tamaños de fuente, para márgenes, para grosor de bordes, etc. El valor de medida está constituido por un signo opcional (+ | -) seguido por un número (con o sin punto decimal). La unidad de medida puede ser relativa o absoluta. Las unidades relativas son: em, ex, px. Las unidades absolutas son: in, cm, mm, pt, pc (picas). Ejemplo: P { font-size:12pt; text-indent:10px; margin-left:1in; margin-right:1in; } Acerca de los colores y fondos En hojas de estilo se pueden especificar los colores de tres formas diferentes. Dos de ellas ya se mostraron en la sección anterior. En esta sección se explicarán las tres formas: La primera forma es utilizando el nombre de color predefinido. Debe tener cuidado que sea un nombre válido. No debe de llevar espacios en blanco. Ejemplo: H1 {color:red;} La segunda forma es utilizando el valor hexadecimal del color precedido del símbolo de numeral (#). Ejemplo: H1 {color:#FF3333;} La tercera forma, que es la novedosa, es utilizando notación rgb, como se muestra a continuación: H1 {color:rgb(255,0,0);} Note que en esta última forma debe especificar los valores de color dentro de un rango que va desde 0 hasta 255 en base decimal. Las propiedades de estilo en las que se pueden establecer colores son todos los elementos para presentación de texto y los elementos para colocar fondos. Por ejemplo: P {background-color:rgb(0,0,64); color:rgb(255,0,0);



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

No. Requerimiento Cantidad

1 Guía práctica #5: Formularios responsive HTML5 y CSS3 1

2 Computadora con navegadores y editor de texto instalado 1

3 Memoria USB o disco flexible 1

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

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>

Carpeta flexible



</li>

</ul>

</div>

<div class="section intro">

<div>

<h2>“Dame problemas, me dan <em>trabajo</em>”.</h2>

<p>

En el año 1878 obtuve mi grado de Doctor en Medicina

en la Universidad de Londres, y viajé a Netley para

tomar el curso prescrito para los cirujanos en el ejército.

Después de haber completado mis estudios allí, yo estaba

debidamente acreditado para ejercer como cirujano auxiliar

en la «Fifth Northumberland Fusiliers». El regimiento

estaba ubicado en la India en aquel momento, y antes de

que pudiera unirme a ella, estalló la segunda guerra

afgana. Al desembarcar en Bombay, me enteré de que mi

cuerpo había avanzado a través de las estaciones, y estaba

inmerso en el territorio enemigo.

</p>

</div>

</div>

<div class="section main">

<h2>

<b>Victors <abbr class="amp" title="And">&</abbr> Villains</b>

</h2>

<ol>

<li id="f-holmes" class="figure">

<a href="#">

<img src="img/f-holmes.jpg" alt="" />

<span class="figcaption">Sherlock

<b>Holmes</b></span>

</a>

</li>

<li id="f-watson" class="figure">

<a href="#">

<img src="img/f-watson.jpg" alt="" />

<span class="figcaption"><abbr title="Professor">

Dr.</abbr> John Hemish <b>Watson</b></span>

</a>


<li id="f-mycroft" class="figure">

<a href="#">

<img src="img/f-mycroft.jpg" alt="" />

<span class="figcaption">Mycroft


</a>


<li id="f-moriarty" class="figure">

<a href="#">

<img src="img/f-moriarty.jpg" alt="" />

<span class="figcaption"><abbr

title="Professor">Prof.</abbr> James <b>Moriarty</b></span>

</a>


<li id="f-adler" class="figure">

<a href="#">

<img src="img/f-adler.jpg" alt="" />

<span class="figcaption">Irene <b>Adler</b></span>

</a>


<li id="f-winter" class="figure">

<a href="#">

<img src="img/f-winter.jpg" alt="" />

<span class="figcaption">James

<b>Winter</b></span>



</a>


</ol>

</div>

<div class="footer">

<p>

Ilustraciones de

<a href="http://en.wikipedia.org/wiki/Sidney_Paget">

Sidney Paget</a>, palabras de

<a href="http://en.wikipedia.org/wiki/Arthur_Conan_Doyle">

Sir Arthur Conan Doyle</a>.

</p>

<p>

Lo que resta es gracias a

<a href="http://unstoppablerobotninja.com/">Ethan Marcotte</a>.

</p>

</div>

</div>

</div>





</body>

</html>

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

* Archivo: estilos.css *

* Descripción: Hoja de estilos para la página cuadricula-flexible.html *

* Materia: Lenguajes Interpretados en el Cliente *

******************************************************************/

.section:after,

ul.nav:after {

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

/* Resetear todos los estilos en los navegadores */

html, body, div,span,

applet, object, iframe,

h1, h2, h3, h4, h5, h6,

p, blockquote, pre, a,

abbr, acronym, address,

big, cite, code, del, dfn,

em, font, img, ins, kbd, q, s,

samp, small, strike, strong,

sub, sup, tt, var, b, u, i,

center, dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,



table, caption, tbody,

tfoot, thead, tr, th, td {

margin:0;

padding:0;

border:0;

outline:0;

font-size:100%;

vertical-align:baseline;

background:transparent;

}

body {

line-height:1;

}

ol,ul {

list-style:none;

}

blockquote,q {

quotes:none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content:'';content:none;

}

ins {

text-decoration:none;

}

del {

text-decoration:line-through;

}

table {

border-collapse:collapse;

border-spacing:0;

}

body {

background: #E4E4E4 url("../img/bg.png");

color: #292929;

color: rgba(0, 0, 0, 0.82);

font: normal 100% Cambria, Georgia, serif;

-moz-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);

-webkit-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);

text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);

-webkit-text-size-adjust: none;

}

a {

color: #890101;

text-decoration: none;

-moz-transition: 0.2s color linear;

-webkit-transition: 0.2s color linear;

transition: 0.2s color linear;

}

a:hover {

color: #DF3030;

}

#page {



background: url("../img/rag.png") repeat-x;

padding: 2em 0;

}

.inner {

margin: 0 auto;

width: 93.75%; /* 960px - 1024px */

}

img {

max-width: 100%;

}

.amp {

font-family: Baskerville,Garamond,Palatino,"Palatino Linotype","Hoefler Text","Times

New Roman",serif;

font-style: italic;

font-weight: normal;

}

.mast {

float: left;

width: 31.875%; /* 306px / 960px */

}

h1 {

background: url("../img/logo-bg.png") no-repeat 50% 0;

}

h1 a {

padding-top: 117px;

height: 162px;

display: block;

text-align: center;

}

.intro,

.main,

.footer {

float: right;

width: 65.9375%; /* 633px - 960px */

}

.intro {

margin-top: 117px;

}

.intro div {

line-height: 1.4;

}

ul.nav {

border-top: 1px solid #888583;

margin: 2em auto 0;

width: 64.379%;

}

ul.nav a {

background: url("../img/ornament.png") no-repeat 0 100%;

font: bold 14px/1.2 "Book Antiqua","Palatino Linotype",Georgia,serif;

display: block;

text-align: center;

letter-spacing: 0.1em;

padding: 1em 0.5em 3em;

margin-bottom: -1em;



text-transform: uppercase;

}

ul.nav a:hover {

background-position: 50% 100%;

}

li.first a {

border-top: 1px solid #FFF9EF;

padding-top: 1.25em;

}

ul.nav i {

font: normal 10px Baskerville, Garamond, Palatino, "Palatino Linotype", "Hoefler

Text", "Times New Roman", serif;

display: block;


}

.intro h2 {

color: #890101;

font: normal 2em "Hoefler Text","Baskerville old face",Garamond,"Times New

Roman",serif;

text-align: center;

margin-bottom: 0.25em;

}

.main h2 {


font-size: 1.4em;

text-transform: lowercase;

text-align: center;

margin: 0.75em 0 1em;

}

.main h2 b {

background: url("../img/bg.png");


padding: 0 1em;

}

.figure {

float: left;

font-size: 10px;


line-height: 1.1;

margin: 0 3.317535545023696682% 1.5em 0; /* 21px - 633px */

text-align: center;


width: 31.121642969984202211%; /* 197px - 633px */

}

.figure b {

display: block;

font-size: 14px;

font-family: "Book Antiqua","Palatino Linotype",Georgia,serif;


}

.figure img {

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

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

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



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

display: block;

margin: 0 auto 1em;

}

li#f-mycroft,

li#f-winter {

margin-right: 0;

}

.footer {

background: url("../img/ornament.png") 50% 0 repeat-x;

font-size: 12px;

text-align: center;

padding: 40px 0 20px;

}

.footer p {


}

Resultado al visualizarlo en varios navegadores (Firefox, Chrome, Internet Explorer y Opera): Visualización en pantallas amplias Visualización en pantallas medias, como tablets o mini laptops.



Visualización en dispositivos como smartphones:

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



Ejercicio 2: Creación de página web adaptable con HTML5 y CSS3. Ahora convertiremos mediante propiedades CSS3 la página web en adaptable a distintos tipos de dispositivos atendiendo a la cantidad de pixeles del área de visualización usando para ello media-queries. Script HTML: cuadricula-adaptable.html <!DOCTYPE html>

<html lang="es">

<head>


<meta name="DC.creator" content="Ethan Marcotte - http://unstoppablerobotninja.com/"

/>

<meta name="DC.language" content="es" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Cuadrícula adaptable</title>

<link rel="stylesheet" href="css/responsive-grid.css" />

</head>

<body>

<div id="page">

<div class="inner">

<div class="mast">

<h1 id="logo">

<a href="#"><img src="img/logo.png" alt="The Baker Street Inquirer" /></a>

</h1>

<ul class="nav">

<li class="first">

<a href="#"><i>El</i> Weblogue</a>

</li>

<li>

<a href="#"><i>Ediciones</i> Anteriores</a>

</li>

<li class="last">

<a href="#"><i>Acerca de</i> Nuestro papel</a>

</li>

</ul>

</div>

<div class="section intro">

<div>

<h2>“Dame problemas, me dan <em>trabajo</em>”.</h2>

<p>

En el año 1878 obtuve mi grado de Doctor en Medicina

en la Universidad de Londres, y viajé a Netley para

tomar el curso prescrito para los cirujanos en el ejército.

Después de haber completado mis estudios allí, yo estaba

debidamente acreditado para ejercer como cirujano auxiliar

en la «Fifth Northumberland Fusiliers». El regimiento

estaba ubicado en la India en aquel momento, y antes de

que pudiera unirme a ella, estalló la segunda guerra

afgana. Al desembarcar en Bombay, me enteré de que mi

cuerpo había avanzado a través de las estaciones, y estaba

inmerso en el territorio enemigo.

</p>

</div>

</div>

<div class="section main">

<h2>

<b>Victors <abbr class="amp" title="And">&</abbr> Villains</b>

</h2>

<ol>

<li id="f-holmes" class="figure">

<a href="#">

<img src="img/f-holmes.jpg" alt="" />

<span class="figcaption">Sherlock




</a>


<li id="f-watson" class="figure">

<a href="#">

<img src="img/f-watson.jpg" alt="" />

<span class="figcaption"><abbr title="Professor">

Dr.</abbr> John Hemish <b>Watson</b></span>

</a>


<li id="f-mycroft" class="figure">

<a href="#">

<img src="img/f-mycroft.jpg" alt="" />

<span class="figcaption">Mycroft


</a>


<li id="f-moriarty" class="figure">

<a href="#">

<img src="img/f-moriarty.jpg" alt="" />

<span class="figcaption"><abbr

title="Professor">Prof.</abbr> James <b>Moriarty</b></span>

</a>


<li id="f-adler" class="figure">

<a href="#">

<img src="img/f-adler.jpg" alt="" />

<span class="figcaption">Irene <b>Adler</b></span>

</a>


<li id="f-winter" class="figure">

<a href="#">

<img src="img/f-winter.jpg" alt="" />

<span class="figcaption">James

<b>Winter</b></span>

</a>


</ol>

</div>

<div class="footer">

<p>

Ilustraciones de

<a href="http://en.wikipedia.org/wiki/Sidney_Paget">

Sidney Paget</a>, palabras de

<a href="http://en.wikipedia.org/wiki/Arthur_Conan_Doyle">

Sir Arthur Conan Doyle</a>.

</p>

<p>

Lo que resta es gracias a

<a href="http://unstoppablerobotninja.com/">Ethan Marcotte</a>.

</p>

</div>

</div>

</div>





</body>

</html>

Hoja de estilo CSS: responsive-grid.css .section:after,

ul.nav:after {

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

/* Resetear todos los estilos en los navegadores */

html, body, div, span,

applet, object, iframe,

h1, h2, h3, h4, h5, h6,

p, blockquote, pre, a, abbr,

acronym, address, big, cite,

code, del, dfn, em,

font, img, ins, kbd, q, s,

samp, small, strike, strong,

sub, sup, tt, var, b, u, i,

center, dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead,

tr, th, td {

margin:0;

padding:0;

border:0;

outline:0;

font-size:100%;

vertical-align:baseline;

background:transparent;

}

body {

line-height:1;

}

ol,ul {

list-style:none;

}

blockquote,q {

quotes:none;

}

blockquote:before,

blockquote:after,

q:before, q:after {

content:'';content:none;

}

ins {


}

del {

text-decoration:line-through;



}

table {

border-collapse:collapse;border-spacing:0;

}

body {

background: #E4E4E4 url("../img/bg.png");

color: #292929;

color: rgba(0, 0, 0, 0.82);

font: normal 100% Cambria, Georgia, serif;

-moz-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);

-webkit-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);

text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);

-webkit-text-size-adjust: none;

}

a {

color: #890101;


-moz-transition: 0.2s color linear;

-webkit-transition: 0.2s color linear;

transition: 0.2s color linear;

}

a:hover {

color: #DF3030;

}

#page {

background: url("../img/rag.png") repeat-x;

padding: 2em 0;

}

.inner {

margin: 0 auto;

width: 93.75%; /* 960px - 1024px */

}

img {

max-width: 100%;

}

.amp {

font-family: Baskerville,Garamond,Palatino,"Palatino Linotype","Hoefler

Text","Times New Roman",serif;

font-style: italic;


}

.mast {

float: left;

width: 31.875%; /* 306px - 960px */

}

h1 {

background: url("../img/logo-bg.png") no-repeat 50% 0;

}

h1 a {

padding-top: 117px;

height: 162px;

display: block;

text-align: center;

}



.intro,

.main,

.footer {

float: right;

width: 65.9375%; /* 633px - 960px */

}

.intro {

margin-top: 110px;

}

.intro div {

line-height: 1.4;

}

ul.nav {

border-top: 1px solid #888583;

margin: 2em auto 0;

width: 64.379%;

}

ul.nav a {


font: bold 14px/1.2 "Book Antiqua","Palatino Linotype",Georgia,serif;

display: block;

text-align: center;


padding: 1em 0.5em 3em;

margin-bottom: -1em;


}

ul.nav a:hover {

background-position: 50% 100%;

}

li.first a {

border-top: 1px solid #FFF9EF;

padding-top: 1.25em;

}

ul.nav i {

font: normal 10px Baskerville,Garamond,Palatino,"Palatino Linotype","Hoefler

Text","Times New Roman",serif;

display: block;


}

.intro h2 {

color: #890101;

font: normal 2em "Hoefler Text","Baskerville old face",Garamond,"Times New

Roman",serif;

text-align: center;


}

.main h2 {


font-size: 1.4em;

text-transform: lowercase;

text-align: center;

margin: 0.75em 0 1em;

}



.main h2 b {

background: url("../img/bg.png");


padding: 0 1em;

}

.figure {

float: left;

font-size: 10px;

line-height: 1.1;

margin: 0 3.317535545023696682% 1.5em 0; /* 21px / 633px */

text-align: center;

width: 31.121642969984202211%; /* 197px / 633px */



}

.figure b {

display: block;

font-size: 14px;

font-family: "Book Antiqua","Palatino Linotype",Georgia,serif;


}

.figure img {



border-radius: 4px;

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

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

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

display: block;

margin: 0 auto 1em;

}

li#f-mycroft,

li#f-winter {

margin-right: 0;

}

.footer {

background: url("../img/ornament.png") 50% 0 repeat-x;

font-size: 12px;

text-align: center;

padding: 40px 0 20px;

}

.footer p {


}

@media (max-width: 600px) {

/* 633px grid (88x6 col, 21x5 gut; 88+21+88+21+88+21+88+21+88+21+88) */

.inner {

position: relative;

}

.mast,

.intro,

.main,

.footer {

float: none;

width: auto;

}

.intro {

margin-top: 46px;



}

}

@media (max-width: 400px) {

.intro {

margin-top: 32px;

}

.figure,

li#f-mycroft {

margin-right: 3.317535545023696682%; /* 21px - 633px */

width: 48.341232227488151658%; /* 306px - 633px */

}

li#f-watson,

li#f-moriarty {

margin-right: 0;

}

}

@media (min-width: 1300px) {

.figure,

li#f-mycroft {

margin-right: 3.317535545023696682%; /* 21px - 633px */

width: 13.902053712480252764%; /* 88px - 633px */

}

}

El resultado visualizado en su navegador es el siguiente: En pantallas más anchas de 1300px:

En pantallas de 600px a 1299px:



En pantallas menores a 400px:



En pantallas menores o iguales a 400px:



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

<html lang="es">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Diseño Web Adaptable</title>

<link rel="stylesheet" media="screen" href="css/base.css">

<link rel="stylesheet" media="screen" href="css/color.css">

<link rel="stylesheet" media="screen and (min-width: 1281px)" href="css/extrabig.css">

<link rel="stylesheet" media="screen and (min-width: 769px) and (max-width: 1280px)"

href="css/big.css">

<link rel="stylesheet" media="screen and (min-width: 481px) and (max-width: 768px)"

href="css/medium.css">

<link rel="stylesheet" media="screen and (max-width: 480px)" href="css/mini.css">

</head>

<body>

<header>

<h1>El título de sitio web</h1>

<h2 class="display-extrabig">Extra grande</h2>

<h2 class="display-big">Grande</h2>

<h2 class="display-medium">Mediano</h2>

<h2 class="display-mini">Pequeño</h2>

</header>

<div id="wrapper">

<nav id="main-nav">

<h2>Mi menú</h2>

<ul class="menu display-extrabig display-big display-medium">

<li>

<a href="#" title="Inicio">Inicio</a>

</li>

<li>

<a href="#" title="Institucional">Institucional</a>

</li>

<li>

<a href="#" title="Carreras">Carreras</a>

</li>

<li>

<a href="#" title="Nuevo Ingreso">Nuevo Ingreso</a>

</li>

<li>

<a href="#" title="Contacto">Contacto</a>

</li>

</ul>

<select class="display-mini">

<option value="Inicio">Inicio</option>

<option value="Institucional">Institucional</option>

<option value="Carreras">Carreras</option>

<option value="Nuevo Ingreso">Nuevo Ingreso</option>

<option value="Contacto">Contacto</option>

</select>

</nav>

<section id="main-section">

<h2>El contenido principal</h2>

<article>

<h3>

<a href="#" title="Contenido uno">Contenido uno</a>



</h3>

<p class="display-extrabig display-big display-medium">

La Universidad Don Bosco es una institución educativa de nivel superior,

de utilidad pública, apolítica, de inspiración cristiana y sin fines de

lucro.

Pertenece y es respaldada por la Institución Salesiana, por fundación y

arisma.

</p>

</article>

<article>

<h3>

<a href="#" title="Contenido dos">Contenido dos</a>

</h3>


La actividad académica de la Universidad encuentra una base de soporte

y

desarrollo dinámico a través de una serie de Escuelas y Departamentos

especializados que garantizan la calidad educativa de sus programas.

</p>

</article>

<article>

<h3>

<a href="#" title="Contenido tres">Contenido tres</a>

</h3>


Con la apertura del Centro de Estudios de Postgrados (CEP), la

Universidad Don Bosco promueve un nuevo horizonte de las posibilidades

educativas con el propósito de responder objetivamente a necesidades

concretas del país.

</p>

</article>

<article>

<h3>

<a href="#" title="Contenido cuatro">Contenido cuatro</a>

</h3>


El proceso de inscripción para el ciclo 01-2014 inicia a partir del 17

de septiembre del 2013. El proceso inicia con la adquisición del

paquete

informativo, luego por una asesoría en la oficina de Nuevo Ingreso y

la

presentación del cuestionario socio-económico en el Departamento de

Gestión

Social y Estudiantil.

</p>

</article>

<article>

<h3>

<a href="#" title="Contenido cinco">Contenido cinco</a>

</h3>


Universidad Don Bosco<br>

Departamento de Publicidad y Relaciones Públicas<br>

[email protected]<br>

Tel. 2251-8200 ext. 1620 <br>

</p>

</article>

</section>

<aside class="display-extrabig display-big">

<ul id="menusec">

<li>

<a href="#" title="Proyección Social">Proyección Social</a>

</li>

<li>

<a href="" title="Investigación">Investigación</a>



</li>

<li>

<a href="#" title="CITT">CITT</a>

</li>

<li>

<a href="#" title="Biblioteca">Biblioteca</a>

</li>

</ul>

</aside>

</div>

<footer>

<p>

Universidad Don Bosco © Derechos reservados 2013. Tel. (503)2251-8200.

Apartado postal: 1874.

</p>

<select class="display-mini">

<option value="Inicio">Inicio</option>

<option value="Institucional">Institucional</option>

<option value="Carreras">Carreras</option>

<option value="Nuevo Ingreso">Nuevo Ingreso</option>

<option value="Contacto">Contacto</option>

</select>

</footer>

</body>

</html>

Hoja de estilos 1: base.css .display-extrabig {

display: none;

}

.display-big {

display: none;

}

.display-medium {

display: none;

}

.display-mini {

display: none;

}

aside ul,

nav ul {

list-style: none;

padding-left: 10px;

}

.menu {

padding-left: 0;

}

Hoja de estilos 2: color.css body {

color: #000;

}

nav a, nav a:link {

color: #fff;


}



nav a:visited {

color: #dcdcdc;


}

nav a:active {

color: #fc3;


}

nav a:hover {

color: #ff0;

text-decoration: underline;

}

header {

background-color: #7094FF;

}

header h1 {

color: #fff;

}

header h2 {

color: #fff;

}

nav {

background-color: #00C24E;

}

section {

background-color: #B061FF;

}

#main-section article h3 a {

color: #e0e0e0;

}

#main-section article h3 a:hover {

color: #fff;

}

aside {

background-color: #FF5757;

}

aside a, aside a:link {

color: #ff6;


}

aside a:visited {

color: #dcdcdc;


}

aside a:active {

color: #C28547;


}

aside a:hover {

color: #75D1D1;

text-decoration: underline;



}

footer {

background-color: #FF8B3D;

padding: 8px 6px;

}

footer p {

color: #e9e9e9;

}

Hoja de estilos 3: extrabig.css .display-extrabig {

display: inherit !important;

}

header, footer, #wrapper {

clear: both;

margin-left: auto;

margin-right: auto;

max-width: 1800px;

width: 90%;

}

header h1 {

font-size: 2.2em;

text-align: center;

}

header h2 {

font-size: 1.6em;

text-align: center;

}

p.display-extrabig {

font-size: 0.9em;

text-align: justify;

}

.menu ul li {

display:block;

padding: 6px 10px;

}

#main-nav {

float: left;

max-width: 240px;

padding-left: 10px;

width: 19%;

}

#main-section {

float: left;

max-width: 1280px;

padding: 2px 8px;

width: 64%;

}

aside.display-extrabig {

float: right;

max-width: 280px;

width: 14%;

}



#menusec li {

display: block;

padding: 6px 2px;

}

Hoja de estilos 4: big.css .display-big {


}

header, footer, #wrapper {

clear: both;

margin-left: auto;

margin-right: auto;

max-width: 1020px;

width: 86%;

}

h1, h2 {

text-align: center;

font-size: 1.4em;

}

p.display-big {

font-size: 0.9em;

text-align: justify;

}

.menu ul li {

display:block;

padding: 4px 8px;

}

#main-nav {

float: left;

max-width: 280px;

padding-left: 10px;

width: 18%;

}

#main-section {

margin-left: 20%;

max-width: 1024px;

padding: 16px 20px;

width: 76%;

}

aside.display-big {

width: 100%;

}

Hoja de estilos 5: medium.css .display-medium {


}

body {

font-family: Arial,sans-serif;

font-size: 18px;

}

.menu li {

display: inline-block;



padding: 6px 10px;

}

#main-nav {

width: 100%;

}

select.display-mini {

font-size: 1.2em;

width: 100%;

}

Hoja de estilos 6: mini.css .display-mini {


}

h1, h2 {

font-size: 1.25em;

}

body {

font-family: "Lucida Sans",sans-serif;

font-size: 1.1em;

}

select.display-mini {

font-size: 1.25em;

}

Ejercicio 4: Formulario con ayudas visuales usando sólo las nuevas características de CSS que facilitan al usuario su correcto llenado. Script html: formcss.html <!DOCTYPE html>

<html lang="es">

<head>


<title>HTML5 - Formulario de contacto</title>

<link rel="stylesheet" href="css/forms.css" />

</head>

<body>

<section id="main-content">

<article id="form-content">

<form class="contact_form" action="#" method="post" name="contact_form">

<ul>

<li>

<h2>Contáctanos</h2>

<span class="required_notification">* Indica que el campo es

obligatorio</span>

</li>

<li>

<label for="name">Nombre:</label>

<input type="text" placeholder="John Doe" required />

<span class="form_hint">Formato aceptado "Juan Pérez"</span>

</li>

<li>

<label for="email">Correo electrónico:</label>

<input type="email" name="email" placeholder="[email protected]" required

/>

<span class="form_hint">Formato aceptado "[email protected]"</span>

</li>



<li>

<label for="website">Sitio web:</label>

<input type="url" name="website" placeholder="http://johndoe.com" required

pattern="(http|https)://.+"/>

<span class="form_hint">Formato aceptado "http://someaddress.com"</span>

</li>

<li>

<label for="message">Mensaje:</label>

<textarea name="message" cols="40" rows="6" required ></textarea>

</li>

<li>

<button class="submit" type="submit">Registrar</button>

</li>

</ul>

</form>

</article>

</section>

</body>

</html>

Hoja de estilo css: forms.css /* Remueve la característica autofocus de webkit */

*:focus {

outline: none;

}

/* Definiendo tipografía */

body {

font: 14px/21px "Lucida Sans","Lucida Grande","Lucida Sans Unicode",sans-serif;

}

#main-content {

margin: 24px auto;

max-width: 1340px;

width: 58%;

}

#main-content #form-content {

/* IE10+ */

background-image: -ms-linear-gradient(top left, #FFFFD9 0%, #F5F3AB 40%, #FFF787

100%);

/* Mozilla Firefox */

background-image: -moz-linear-gradient(top left, #FFFFD9 0%, #F5F3AB 40%, #FFF787

100%);

/* Opera */

background-image: -o-linear-gradient(top left, #FFFFD9 0%, #F5F3AB 40%, #FFF787 100%);

/* Webkit (Safari/Chrome 10) */

background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0,

#FFFFD9), color-stop(40, #F5F3AB), color-stop(100, #FFF787));

/* Webkit (Chrome 11+) */

background-image: -webkit-linear-gradient(top left, #FFFFD9 0%, #F5F3AB 40%, #FFF787

100%);

/* W3C Markup */

background-image: linear-gradient(to bottom right, #FFFFD9 0%, #F5F3AB 40%, #FFF787

100%);

border: 1px solid #D45252;

border-radius: 12px 12px;

-moz-box-shadow:2px 2px 5px #1D2B1F;

-webkit-box-shadow:2px 2px 5px #1D2B1F;

-o-box-shadow:2px 2px 5px #1D2B1F;

-ms-box-shadow:2px 2px 5px #1D2B1F;

box-shadow:2px 2px 5px #1D2B1F;

padding: 0 4px;

}



.contact_form h2,

.contact_form label {

color: #50911E;

font-family: Georgia,Times,"Times New Roman",serif;

}

.form_hint, .required_notification {

font-size: 11px;

}

/* Estilo para las listas */

.contact_form ul {

list-style-type:none;

list-style-position:outside;

margin:0px;

padding:0px;

width:750px;

}

.contact_form li{

border-bottom:1px solid #eee;

padding:12px;

position:relative;

}

.contact_form li:first-child,

.contact_form li:last-child {

border-bottom:1px solid #777;

}

/* Estilos para el encabezado del formulario */

.contact_form h2 {

display: inline;

margin:0;

}

.required_notification {

color:#d45252;

display:inline;

float:right;

margin:5px 0 0 0;

}

/* Estilos para los elementos de formulario */

.contact_form label {

display:inline-block;

float:left;

margin-top: 3px;

padding:3px;

width:150px;

}

.contact_form input {

height:20px;

padding:5px 8px;

width:220px;

}

.contact_form textarea {

padding:8px;

width:300px;

}

.contact_form button {

margin-left:156px;



}

/* Estilos visuales para los elementos de formulario */

.contact_form input, .contact_form textarea {

border:1px solid #aaa;

box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;

border-radius:2px;

padding-right:30px;

-moz-transition: padding .25s;

-webkit-transition: padding .25s;

-o-transition: padding .25s;

transition: padding .25s;

}

.contact_form input:focus, .contact_form textarea:focus {

background: #fff;

border:1px solid #555;

box-shadow: 0 0 3px #aaa;

padding-right:70px;

}

/* Aplicacando validación con estilos aprovechando las características del HTML5 */

.contact_form input:required, .contact_form textarea:required {

background: #fff url(../images/red_asterisk.png) no-repeat 98% center;

}

.contact_form input:required:valid, .contact_form textarea:required:valid {

background: #fff url(../images/valid.png) no-repeat 98% center;

box-shadow: 0 0 5px #5cd053;

border-color: #28921f;

}

.contact_form input:focus:invalid, .contact_form textarea:focus:invalid {

background: #fff url(../images/invalid.png) no-repeat 98% center;

box-shadow: 0 0 5px #d45252;

border-color: #b03535

}

/* Estilos para mostrar sugerencias mientras se llena el campo de formulario */

.form_hint {

background: #d45252;

border-radius: 3px 3px 3px 3px;

color: white;

margin-left:8px;

padding: 1px 6px;

/* Mantiene las sugerencias siempre en primer plano */

z-index: 999;

/* Permite que la sugerencias mantengan formato aún cuando sean de más líneas */

position: absolute;

display: none;

}

.form_hint::before {

content: "\25C0";

color:#d45252;

position: absolute;

top:1px;

left:-6px;

}

.contact_form input:focus + .form_hint {

display: inline;

}

.contact_form input:required:valid + .form_hint {



background: #28921f;

}

.contact_form input:required:valid + .form_hint::before {color:#28921f;}

/* Estilos para el botón de envío */

button.submit {

background-color: #68b12f;

background: -webkit-gradient(linear, left top, left bottom, from(#68b12f),

to(#50911e));

background: -webkit-linear-gradient(top, #68b12f, #50911e);

background: -moz-linear-gradient(top, #68b12f, #50911e);

background: -ms-linear-gradient(top, #68b12f, #50911e);

background: -o-linear-gradient(top, #68b12f, #50911e);

background: linear-gradient(top, #68b12f, #50911e);

border: 1px solid #509111;

border-bottom: 1px solid #5b992b;

border-radius: 3px;



-ms-border-radius: 3px;

-o-border-radius: 3px;

box-shadow: inset 0 1px 0 0 #9fd574;

-webkit-box-shadow: 0 1px 0 0 #9fd574 inset ;

-moz-box-shadow: 0 1px 0 0 #9fd574 inset;

-ms-box-shadow: 0 1px 0 0 #9fd574 inset;

-o-box-shadow: 0 1px 0 0 #9fd574 inset;

color: white;

font-weight: bold;

padding: 6px 20px;

text-align: center;

text-shadow: 0 -1px 0 #396715;

}

button.submit:hover {

cursor: pointer;

opacity:.85;

}

button.submit:active {

border: 1px solid #20911e;

box-shadow: 0 0 10px 5px #356b0b inset;

-webkit-box-shadow:0 0 10px 5px #356b0b inset ;

-moz-box-shadow: 0 0 10px 5px #356b0b inset;

-ms-box-shadow: 0 0 10px 5px #356b0b inset;

-o-box-shadow: 0 0 10px 5px #356b0b inset;

}

El resultado que podrá observar utilizando cualquier navegador (Firefox, Chrome, Internet Explorer, Opera o Safari) será el siguiente. Puede hacer uso de todos ellos para que observe que si son las últimas versiones de los mismos el formulario funcionará correctamente en todos ellos:



Ejercicio 5: Menú avanzado con las nuevas propiedades CSS3 aplicado a un documento HTML5. html: menuavanzado.html <!DOCTYPE html">

<html lang="es">

<head>


<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Menú desplegable avanzado</title>

<link rel="stylesheet" href="css/menuav.css">

</head>

<body>

<nav>

<div id="nav">

<ul id="menuHorizontal">

<li>Inicio</li>

<li>Deportes

<ul class="submenu">

<li>Fútbol</li>

<li>Motor</li>

<li>Baloncesto</li>

<li>Tenis</li>

</ul>

</li>

<li>Cultura


<li>Cine</li>

<li>Teatro</li>

<li>Literatura</li>

<li>Premios</li>

</ul>

</li>

<li>Sociedad


<li>Educación</li>

<li>Comunicación</li>

<li>Blogs</li>

</ul>

</li>

<li>Economía


<li>Empresas</li>

<li>Mercado</li>

<li>Bolsa</li>

</ul>

</li>

<li>Tecnología


<li>Programas</li>



<li>Redes sociales</li>

<li>Gadgets</li>

<li>Seguridad</li>

</ul>

</li>

</ul>

</div>

</nav>

</body>

</html>

css: menuav.css /* Estilos del elemento nav que contiene el menú */

#nav ul {

list-style-type: none;

padding: 0;

margin: 0;

}

/* Estilos de las opciones principales del menú */

#nav li {

background-color: #375F85;

border: 1px outset #375F85;

color: white;

cursor: pointer;


font-family: Tahoma,Helvetica,sans-serif;

font-size: 1em;

margin: -2px;

padding: 5px;

position: relative;

text-align: center;

vertical-align: top;

width: 110px;

}

#nav #menuHorizontal {

margin: 0 auto;

width: 58%;

}

/* Estilos de los elementos de submenú */

#menuHorizontal .submenu {

animation-duration: 0.8s;

-moz-animation-duration: 0.8s;

-webkit-animation-duration: 0.8s;

-o-animation-duration: 0.8s;

-ms-animation-duration: 0.8s;

border-radius: 0 0 10px 10px;

-moz-border-radius: 0 0 10px 10px;

-webkit-border-radius: 0 0 10px 10px;

-o-border-radius: 0 0 10px 10px;

-ms-border-radius: 0 0 10px 10px;

box-shadow: 0 0.5px 5px #000;

-moz-box-shadow: 0 0.5px 5px #000;

-webkit-box-shadow: 0 0.5px 5px #000;

-o-box-shadow: 0 0.5px 5px #000;

-ms-box-shadow: 0 0.5px 5px #000;

display: none;

left: 1px;

position: absolute;

top: 36px;

z-index: 10;

}



/* Estilos para las opciones de submenú */

#menuHorizontal .submenu>li {

display: block;

animation-duration: 0.5s;

-moz-animation-duration: 0.5s;

-webkit-animation-duration: 0.5s;

-o-animation-duration: 0.5s;

-ms-animation-duration: 0.5s;

}

/* Efectos de animación para las opciones

de submenú cuando se posicione el puntero

del ratón encima de una de estas subopciones */

#menuHorizontal .submenu>li:hover {

animation-name: botonsubmenu;

-moz-animation-name: botonsubmenu;

-webkit-animation-name: botonsubmenu;

-o-animation-name: botonsubmenu;

-ms-animation-name: botonsubmenu;

background-color: #c9d7e6;

text-shadow: 2px 2px 2px #375f85;

transform: scale(1.05);

-moz-transform: scale(1.05);

-webkit-transform: scale(1.05);

-o-transform: scale(1.05);

-ms-transform: scale(1.05);

z-index: 2;

}

/* Media-queries que se aplicarán para animar

el menú transformándolo en etapas controlando

en varios pasos la secuencia de animación deseada */

@keyframes botonsubmenu {

0% {


}

50% {


border-radius: 5px;

}

100%{



}

}

@-moz-keyframes botonsubmenu {

0% {


-moz-text-shadow: 200px 2px 20px #375f85;

}

50% {



}

100%{



-moz-text-shadow: 2px 2px 1px #375f85;

}



}

@-webkit-keyframes botonsubmenu {

0% {


-webkit-text-shadow: 200px 2px 20px #375f85;

}

50% {



}

100%{



-webkit-text-shadow: 2px 2px 1px #375f85;

}

}

@-o-keyframes botonsubmenu {

0% {


-o-text-shadow: 200px 2px 20px #375f85;

}

50% {



}

100%{



-o-text-shadow: 2px 2px 1px #375f85;

}

}

@-ms-keyframes botonsubmenu {

0% {


-ms-text-shadow: 200px 2px 20px #375f85;

}

50% {



}

100%{



-ms-text-shadow: 2px 2px 1px #375f85;

}

}

/* Estableciendo bordes redondeados para

las opciones de submenú */

#menuHorizontal .submenu li:last-child {

border-radius: 0 0 10px 10px;

-moz-border-radius: 0 0 10px 10px;

-webkit-border-radius: 0 0 10px 10px;

-o-border-radius: 0 0 10px 10px;

-ms-border-radius: 0 0 10px 10px;

}



#menuHorizontal li:hover ul {

animation-name: submenu;

-moz-animation-name: submenu;

-webkit-animation-name: submenu;

-o-animation-name: submenu;

-ms-animation-name: submenu;

display: block;

}

/* Animación del submenú .submenu */

@keyframes submenu {

0% {

opacity: 0;

left: -150px;

}

50% {


box-shadow: -10px 4px 8px 5px #000;

}

100% {

opacity: 1;

left: 1px;

}

}

@-moz-keyframes submenu {

0% {

opacity: 0;

left: -150px;

}

50% {



-moz-box-shadow: -10px 4px 8px 5px #000;

}

100% {

opacity: 1;

left: 1px;

}

}

@-webkit-keyframes submenu {

0% {

opacity: 0;

left: -150px;

}

50% {



-webkit-box-shadow: -10px 4px 8px 5px #000;

}

100% {

opacity: 1;

left: 1px;

}

}

@-o-keyframes submenu {



0% {

opacity: 0;

left: -150px;

}

50% {



-o-box-shadow: -10px 4px 8px 5px #000;

}

100% {

opacity: 1;

left: 1px;

}

}

@-ms-keyframes submenu {

0% {

opacity: 0;

left: -150px;

}

50% {



-ms-box-shadow: -10px 4px 8px 5px #000;

}

100% {

opacity: 1;

left: 1px;

}

}

/* Transiciones de animación del submenú */

#menuHorizontal>li {

transition: all 0.6s ease;

-moz-transition: all 0.6s ease;

-webkit-transition: all 0.6s ease;

-o-transition: all 0.6s ease;

-ms-transition: all 0.6s ease;

}

#menuHorizontal>li:first-child {

background-color: #d0dbe6;

padding-top: 10px;

box-shadow: 0 0 4px #375F85;

-moz-box-shadow: 0 0 4px #375F85;

-webkit-box-shadow: 0 0 4px #375F85;

-o-box-shadow: 0 0 4px #375F85;

-ms-box-shadow: 0 0 4px #375F85;

border-radius: 10px 10px 0 0;

-moz-border-radius: 10px 10px 0 0;

-webkit-border-radius: 10px 10px 0 0;

-o-border-radius: 10px 10px 0 0;

-ms-border-radius: 10px 10px 0 0;

border: 1px outset #d0dbe6;

color: #375F85;

text-shadow: 1px 1px 1px #375F85;

-moz-text-shadow: 1px 1px 1px #375F85;

-webkit-text-shadow: 1px 1px 1px #375F85;

-o-text-shadow: 1px 1px 1px #375F85;

-ms-text-shadow: 1px 1px 1px #375F85;

}



#menuHorizontal>li:hover {

background-color: #abc;

padding-top: 10px;

box-shadow: 0 0 4px #375F85;

-moz-box-shadow: 0 0 4px #375F85;

-webkit-box-shadow: 0 0 4px #375F85;

-o-box-shadow: 0 0 4px #375F85;

-ms-box-shadow: 0 0 4px #375F85;

border-radius: 10px 10px 0 0;

-moz-border-radius: 10px 10px 0 0;

-webkit-border-radius: 10px 10px 0 0;

-o-border-radius: 10px 10px 0 0;

-ms-border-radius: 10px 10px 0 0;

border: 1px outset #abc;

color: #375F85;

text-shadow: 1px 1px 1px #375F85;

-moz-text-shadow: 1px 1px 1px #375F85;

-webkit-text-shadow: 1px 1px 1px #375F85;

-o-text-shadow: 1px 1px 1px #375F85;

-ms-text-shadow: 1px 1px 1px #375F85;

}

Resultado al visualizarlo en un navegador. Note que el menú va desplazando en cascada las opciones al ir disminuyendo el tamaño de la ventana del navegador:

Ejercicio 6: Un slider de fotos hecho completamente con HTML5 y CSS3, con funcionalidad de cambiar la fotografía en primer plano haciendo clic en las miniaturas o dando clic en los controles de movimiento anterior y siguiente ubicados a los extremos, con la funcionalidad adicional de hacer clic en el botón PLAY (►) para avanzar automáticamente y botón de PAUSE para detener reproducción automática (no terminado de forma completa). html: galeriaslideshow.html <!DOCTYPE html>

<html lang="es">

<head>


<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Laboratorios de la Universidad Don Bosco</title>

<link href='http://fonts.googleapis.com/css?family=Mr+Dafoe' rel='stylesheet'

type='text/css'>

<link href='http://fonts.googleapis.com/css?family=Amaranth:700' rel='stylesheet'

type='text/css'>

<link rel="stylesheet" href="css/slideshow.css" />

</head>



<body>



<span id="sl_play" class="sl_command"> </span>

<span id="sl_pause" class="sl_command"> </span>

<span id="sl_i1" class="sl_command sl_i"> </span>














<header>

<h2 class="opensans">Laboratorios y Centros Especializados</h2>

<p>

Una completa plataforma con diversas tecnologías, experimentales

y virtuales, que complementan el proceso de formación y mejoran

tus competencias profesionales.

</p>

</header>

<section id="slideshow">

<a class="commands prev commands1" href="#sl_i14" title="Ir al último slide"><</a>

<a class="commands next commands1" href="#sl_i2" title="Ir al 2do slide">></a>

<a class="commands prev commands2" href="#sl_i1" title="Ir al 1er slide"><</a>

<a class="commands next commands2" href="#sl_i3" title="Ir al 3er slide">></a>

<a class="commands prev commands3" href="#sl_i2" title="Ir al 2do slide"><</a>

<a class="commands next commands3" href="#sl_i4" title="Ir al 4to slide">></a>

<a class="commands prev commands4" href="#sl_i3" title="Ir al 3er slide"><</a>


<a class="commands prev commands5" href="#sl_i4" title="Ir al 4to slide"><</a>



<a class="commands next commands6" href="#sl_i7" title="Ir al 7mo slide">></a>


<a class="commands next commands7" href="#sl_i8" title="Ir al 8vo slide">></a>

<a class="commands prev commands8" href="#sl_i7" title="Ir al 7mo slide"><</a>

<a class="commands next commands8" href="#sl_i9" title="Ir al 9no slide">></a>

<a class="commands prev commands9" href="#sl_i8" title="Ir al 8vo slide"><</a>

<a class="commands next commands9" href="#sl_i10" title="Ir al 10mo slide">></a>

<a class="commands prev commands10" href="#sl_i9" title="Ir al 9no slide"><</a>


<a class="commands prev commands11" href="#sl_i10" title="Ir al 10mo slide"><</a>







<a class="commands next commands14" href="#sl_i1" title="Ir al 1er slide">></a>

<a class="play_commands pause" href="#sl_pause" title="Maintain paused">Detener</a>

<a class="play_commands play" href="#sl_play" title="Play the animation">Iniciar</a>

<div class="container">

<div class="c_slider"></div>

<div class="slider">

<figure>

<img src="img/img001.jpg" alt="" width="640" height="310" />



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

</figure>

<figure>


<figcaption>CELDA DE MANUFACTURA INTEGRADA POR COMPUTADORA</figcaption>

</figure>

<figure>


<figcaption>LABORATORIO DE CNC</figcaption>

</figure>

<figure>


<figcaption>LABORATORIO DE DISEÑO GRÁFICO Y MULTIMEDIA</figcaption>

</figure>

<figure>


<figcaption>LABORATORIO DE MÁQUINAS ELÉCTRICAS</figcaption>

</figure>

<figure>


<figcaption>AVIÓN ESCUELA BOEING 727 (BASE AÉREA MILITAR DE

ILOPANGO)</figcaption>

</figure>

<figure>


<figcaption>HANGAR AERONÁUTICA</figcaption>

</figure>

<figure>


<figcaption>LABORATORIO DE IDIOMAS</figcaption>

</figure>

<figure>


<figcaption>CENTRO INTERNACIONAL CERTIFICADO EN MECATRÓNICA</figcaption>

</figure>

<figure>


<figcaption>CENTRO DE INNOVACIÓN DE SOFTWARE PARA MÓVILES

(MOSAIC)</figcaption>

</figure>

<figure>


<figcaption>PRÁCTICAS DE DISEÑO Y SIMULACIÓN DE PIEZAS Y

EQUIPOS</figcaption>

</figure>

<figure>


<figcaption>LABORATORIO DE ANÁLISIS DE LA MARCHA</figcaption>

</figure>

<figure>


<figcaption>SALA CIENTÍFICA ESTADOUNIDENSE PARA LA INVESTIGACIÓN EN

ENERGÍA</figcaption>

</figure>

<figure>


<figcaption>ESTUDIO DE TELEVISIÓN</figcaption>

</figure>

</div>

</div>

<span id="timeline"></span>

<ul class="dots_commands">

<li>



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

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

</a>

</li>

<li>



</a>

</li>

<li>



</a>

</li>

<li>



</a>

</li>

<li>



</a>

</li>

<li>



</a>

</li>

<li>



</a>

</li>

<li>



</a>

</li>

<li>



</a>

</li>

<li>



</a>

</li>

<li>



</a>

</li>

<li>



</a>

</li>

<li>



</a>

</li>

<li>





</a>

</li>

</ul>

</section>



</body>

</html>

css: slideshow.css html {

background-color: #e4dfd2;

background-image: -webkit-radial-gradient(center 425px 45deg, circle closest-side,

rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 30%),

-webkit-radial-gradient(center 425px 45deg, circle closest-side,

rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 10%),

-webkit-linear-gradient(rgba(231, 228, 222, 0), rgba(231, 228, 222, 1) 150px,

rgba(231, 228, 222, 1) 388px, rgba(255, 255, 255, 0) 388px, rgba(243, 239,233,1)

388px,rgba(243, 239,233,1) 390px, rgba(206,195,187,1) 390px, rgba(230,222,216,1) 990px,

rgba(230,222,216,1)),

-webkit-linear-gradient(0pt 50% , rgba(255, 255, 255, 0.07) 50%, transparent

50%),

-webkit-linear-gradient(0pt 50% , rgba(255, 255, 255, 0.13) 50%, transparent

50%),

-webkit-linear-gradient(0pt 50% , transparent 50%, rgba(255, 255, 255, 0.17)

50%),

-webkit-linear-gradient(0pt 50% , transparent 50%, rgba(255, 255, 255, 0.19)

50%);

background-image: -moz-radial-gradient(center 425px 45deg, circle closest-side,

rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 30%),

-moz-radial-gradient(center 425px 45deg, circle closest-side, rgba(0,0,0,0.2)

0%, rgba(0,0,0,0) 10%),

-moz-linear-gradient(rgba(231, 228, 222, 0), rgba(231, 228, 222, 1) 150px,



rgba(230,222,216,1)),

-moz-linear-gradient(0pt 50% , rgba(255, 255, 255, 0.07) 50%, transparent

50%),

-moz-linear-gradient(0pt 50% , rgba(255, 255, 255, 0.13) 50%, transparent

50%),

-moz-linear-gradient(0pt 50% , transparent 50%, rgba(255, 255, 255, 0.17)

50%),

-moz-linear-gradient(0pt 50% , transparent 50%, rgba(255, 255, 255, 0.19)

50%);

background-image: -o-radial-gradient(center 425px 45deg, circle closest-side,

rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 30%),

-o-radial-gradient(center 425px 45deg, circle closest-side, rgba(0,0,0,0.2)

0%, rgba(0,0,0,0) 10%),

-o-linear-gradient(rgba(231, 228, 222, 0), rgba(231, 228, 222, 1) 150px,



rgba(230,222,216,1)),

-o-linear-gradient(0pt 50% , rgba(255, 255, 255, 0.07) 50%, transparent 50%),

-o-linear-gradient(0pt 50% , rgba(255, 255, 255, 0.13) 50%, transparent 50%),

-o-linear-gradient(0pt 50% , transparent 50%, rgba(255, 255, 255, 0.17) 50%),

-o-linear-gradient(0pt 50% , transparent 50%, rgba(255, 255, 255, 0.19) 50%);

background-image: -ms-radial-gradient(center 425px 45deg, circle closest-side,

rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 30%),

-ms-radial-gradient(center 425px 45deg, circle closest-side, rgba(0,0,0,0.2)

0%, rgba(0,0,0,0) 10%),

-ms-linear-gradient(rgba(231, 228, 222, 0), rgba(231, 228, 222, 1) 150px,





rgba(230,222,216,1)),

-ms-linear-gradient(0pt 50% , rgba(255, 255, 255, 0.07) 50%, transparent

50%),

-ms-linear-gradient(0pt 50% , rgba(255, 255, 255, 0.13) 50%, transparent

50%),

-ms-linear-gradient(0pt 50% , transparent 50%, rgba(255, 255, 255, 0.17)

50%),

-ms-linear-gradient(0pt 50% , transparent 50%, rgba(255, 255, 255, 0.19)

50%);

background-image: radial-gradient(center 425px 45deg, circle closest-side,

rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 30%),

radial-gradient(center 425px 45deg, circle closest-side, rgba(0,0,0,0.2) 0%,

rgba(0,0,0,0) 10%),

linear-gradient(rgba(231, 228, 222, 0), rgba(231, 228, 222, 1) 150px,



rgba(230,222,216,1)),

linear-gradient(0pt 50% , rgba(255, 255, 255, 0.07) 50%, transparent 50%),

linear-gradient(0pt 50% , rgba(255, 255, 255, 0.13) 50%, transparent 50%),

linear-gradient(0pt 50% , transparent 50%, rgba(255, 255, 255, 0.17) 50%),

linear-gradient(0pt 50% , transparent 50%, rgba(255, 255, 255, 0.19) 50%);

background-size: 13px, 26px, auto, 13px, 29px, 37px, 53px;

min-height:100%;

overflow-x:hidden;

}

body {

width: 800px;

margin: 0 auto;

color:#777;

}

h1, h2 {

text-align:center;

margin-top:0;

}

h1 {

padding: 0.6em 0;

margin-left: 1.5em;

font-size: 2em;

font-family: 'Amaranth', Arial, Verdana, sans-serif;

}

h1 span {

display:block;

margin: 0.75em 0 0 -2em;

line-height: 1em;

font-size: 0.55em;

}

h1 .cursive {

margin: 0 0 0 -3em;

font-size: 1.1em;

line-height:0.5em;

color: #bd9b83;

}

figure {


}

a {




border-bottom: 1px solid #bc9d88;

color: #8f6b51;

}

a:hover,

a:focus {

border-bottom: 1px dashed #bc9d88;

}

.sread {

position: absolute;

left:-9999px;

}

.cursive {

font-family: 'Mr Dafoe', cursive;

}

.center {

text-align: center;

}

#slideshow {

position: relative;

width: 640px;

height: 310px;

padding: 15px;

border: 1px solid #ddd;

margin: 0 auto 2em;

background: #FFF;

background: -webkit-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);

background: -moz-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);

background: -ms-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);

background: -o-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);

background: linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);

-webkit-border-radius: 2px 2px 2px 2px;

-moz-border-radius: 2px 2px 2px 2px;

-o-border-radius: 2px 2px 2px 2px;

-ms-border-radius: 2px 2px 2px 2px;

border-radius: 2px 2px 2px 2px;

-webkit-box-shadow: 0 0 3px rgba(0,0,0, 0.2);

-moz-box-shadow: 0 0 3px rgba(0,0,0, 0.2);

-o-box-shadow: 0 0 3px rgba(0,0,0, 0.2);

-ms-box-shadow: 0 0 3px rgba(0,0,0, 0.2);

box-shadow: 0 0 3px rgba(0,0,0, 0.2);

}

/* box-shadow avanzado */

#slideshow:before,

#slideshow:after {

position: absolute;

display:block;

bottom:16px;

width: 50%;

height: 20px;

content: " ";

background: rgba(0,0,0,0.1);

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

-o-border-radius: 50%;

-ms-border-radius: 50%;

border-radius: 50%;

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

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



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

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

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

z-index: -10;

}

#slideshow:before {

left:0;

-webkit-transform: rotate(-4deg);

-moz-transform: rotate(-4deg);

-ms-transform: rotate(-4deg);

-o-transform: rotate(-4deg);

transform: rotate(-4deg);

}

#slideshow:after {

right:0;

-webkit-transform: rotate(4deg);

-moz-transform: rotate(4deg);

-ms-transform: rotate(4deg);

-o-transform: rotate(4deg);

}

#slideshow .commands {

position: absolute;

top: 45%;

padding: 5px 13px;

border-bottom:0;

font-family: 'Amaranth', Arial, Verdana, sans-serif;

font-size: 1.3em;

color: #aaa;


background-color: #eee;

background-image: -webkit-linear-gradient(#fff,#ddd);

background-image: -moz-linear-gradient(#fff,#ddd);

background-image: -ms-linear-gradient(#fff,#ddd);

background-image: -o-linear-gradient(#fff,#ddd);

background-image: linear-gradient(#fff,#ddd);

text-shadow: 0 0 1px #aaa;





border-radius: 50%;

-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);

-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);

-o-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);

-ms-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);

box-shadow: 1px 1px 2px rgba(0,0,0,0.2);

}

#slideshow .commands:after {

position: absolute;

bottom: 65px; left:-18px;

content: attr(title);

width: 50px;

padding: 12px;

background: #fff;

font-family: Georgia, Times, serif;

font-size: 14px;

text-align:center;

text-shadow: 0 0 0;

opacity: 0;







border-radius: 12px;

-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.4);

-moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.4);

-o-box-shadow: 1px 1px 4px rgba(0,0,0,0.4);

-ms-box-shadow: 1px 1px 4px rgba(0,0,0,0.4);

box-shadow: 1px 1px 4px rgba(0,0,0,0.4);

-webkit-transition: opacity 0.7s, bottom 0.7s;

-moz-transition: opacity 0.7s, bottom 0.7s;

-o-transition: opacity 0.7s, bottom 0.7s;

-ms-transition: opacity 0.7s, bottom 0.7s;

transition: opacity 0.7s, bottom 0.7s;

}

#slideshow .commands:before {

position: absolute;

bottom: 55px; left: 13px;

content: " ";

width: 1px; height: 1px;

border-top: 10px solid #fff;

border-left: 5px solid transparent;

border-right: 5px solid transparent;

z-index:100;

opacity: 0;

-webkit-transition: opacity 0.7s, bottom 0.7s;

-moz-transition: opacity 0.7s, bottom 0.7s;

-o-transition: opacity 0.7s, bottom 0.7s;

-ms-transition: opacity 0.7s, bottom 0.7s;

transition: opacity 0.7s, bottom 0.7s;

}

#slideshow .commands:hover:before {

bottom: 35px;

opacity: 1;

}

#slideshow .commands:hover:after {

bottom: 45px;

opacity: 1;

}

#slideshow .commands:focus {

outline: 0;

-webkit-transform: translate(1px, 2px);

-moz-transform: translate(1px, 2px);

-ms-transform: translate(1px, 2px);

-o-transform: translate(1px, 2px);

transform: translate(1px, 2px);

}

#slideshow .commands:active {

-webkit-transform: translate(0, 1px);

-moz-transform: translate(0, 1px);

-ms-transform: translate(0, 1px);

-o-transform: translate(0, 1px);

transform: translate(0, 1px);

}

#slideshow .prev {

left: -48px;

}

#slideshow .next {

right: -48px;



}

#slideshow .prev,

#slideshow .next {

display:none;

}

#slideshow .prev,

#slideshow .next {

display:none;

}

#slideshow .commands1 {

display: block;

}

/* play/pause commands */

.play_commands {

border:0 none;

height: 22px;

top: 25px; right: 25px;

text-indent: -9999px;

opacity: 0;

position: absolute;

z-index: 10;

width: 22px;

-webkit-transition: opacity 1s, right 1s;

-moz-transition: opacity 1s, right 1s;

-o-transition: opacity 1s, right 1s;

-ms-transition: opacity 1s, right 1s;

transition: opacity 1s, right 1s;

}

.play {

right: 55px;

cursor: default;

}

.pause:hover {

border:0 none;

}

.play_commands:focus {

outline:0;

}

#slideshow:hover .pause,

#sl_play:target ~ #slideshow:hover .pause,

.play_commands:focus {

opacity: 1;

}

.sl_command:target ~ #slideshow:hover .pause,

#sl_pause:target ~ #slideshow:hover .pause {

opacity: 0;

}

.pause:after,

.pause:before {

position: absolute;

display: block;

content: " ";

top:0;

width:38%;

height: 22px;



background: #fff;


}

.pause:after {

right:0;

}

.pause:before {

left:0;

}

.play {

width: 1px;

height: 1px;

border-top: 10px solid transparent;

border-left: 20px solid #fff;

border-left: 20px solid rgba(255,255,255,0.5);

border-bottom: 10px solid transparent;

opacity: 0;

}

.play:hover,

.play:focus {

border-bottom: 10px solid transparent;

}

#slideshow .container {

position:relative;

width: 640px;

height: 310px;

overflow: hidden;

}

/* Base de la línea de tiempo */

#slideshow .container:after {

position:absolute;

bottom: 0; left:0;

content: " ";

background: #999;

width: 100%;

height: 1px;

}

@-webkit-keyframes slider {

0%, 20%, 100% { left: 0 }

25%, 45% { left: -100% }

50%, 70% { left: -200% }

75%, 95% { left: -300% }

}

@-moz-keyframes slider {

0%, 20%, 100% { left: 0 }

25%, 45% { left: -100% }

50%, 70% { left: -200% }

75%, 95% { left: -300% }

}

@keyframes slider {

0%, 20%, 100% { left: 0 }

25%, 45% { left: -100% }

50%, 70% { left: -200% }

75%, 95% { left: -300% }

}

#slideshow .slider {

position: absolute;



left:0; top:0;

width: 1400%;

height: 310px;

-webkit-animation: slider 32s infinite;

-moz-animation: slider 32s infinite;

-o-animation: slider 32s infinite;

-ms-animation: slider 32s infinite;

animation: slider 32s infinite;

}

.sl_i:target ~ #slideshow .slider {

-webkit-transition: left 1s;

-moz-transition: left 1s;

-o-transition: left 1s;

-ms-transition: left 1s;

transition: left 1s;

}

.sl_command:target ~ #slideshow .slider {

-webkit-transition: opacity 1s;

-moz-transition: opacity 1s;

-o-transition: opacity 1s;

-ms-transition: opacity 1s;

transition: opacity 1s;

}

#slideshow .c_slider {

position: absolute;

left:0; top:0;

width: 1400%;

height: 310px;

background: url(../img/img001.jpg) 0 0 no-repeat,

url(../img/img002.jpg) 640px 0 no-repeat,












url(../img/img014.jpg) 8320px 0 no-repeat;

}

.sl_i:target ~ #slideshow .c_slider {

-webkit-transition: background 1s;

-moz-transition: background 1s;

-o-transition: background 1s;

-ms-transition: background 1s;

transition: background 1s;

}

#slideshow figure {

position:relative;

padding:0; margin:0;

}

@-webkit-keyframes figurer {

0%, 25%, 50%, 75%, 100% {

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

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

}

5%, 20%, 30%, 45%, 55%, 70%, 80%, 95% {



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

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

}

}

@-moz-keyframes figurer {

0%, 25%, 50%, 75%, 100% {

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


}

5%, 20%, 30%, 45%, 55%, 70%, 80%, 95% {

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


}

}

@keyframes figurer {

0%, 25%, 50%, 75%, 100% {

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


}

5%, 20%, 30%, 45%, 55%, 70%, 80%, 95% {



}

}

#slideshow figure:after {

position: absolute;

display:block;

content: " ";

top:0; left:0;

width: 100%; height: 100%;

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


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

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


-webkit-animation: figurer 32s infinite;

-moz-animation: figurer 32s infinite;

-o-animation: figurer 32s infinite;

-ms-animation: figurer 32s infinite;

animation: figurer 32s infinite;

}

@-webkit-keyframes figcaptionner {

0%, 25%, 50%, 75%, 100% {

bottom: -55px;

}

5%, 20%, 30%, 45%, 55%, 70%, 80%, 95% {

bottom: 5px;

}

}

@-moz-keyframes figcaptionner {

0%, 25%, 50%, 75%, 100% {

bottom: -55px;

}

5%, 20%, 30%, 45%, 55%, 70%, 80%, 95% {

bottom: 5px;

}

}

@keyframes figcaptionner {

0%, 25%, 50%, 75%, 100% {

bottom: -55px;

}

5%, 20%, 30%, 45%, 55%, 70%, 80%, 95% {

bottom: 5px;



}

}

#slideshow figcaption {

position:absolute;

padding: 20px 20px; margin:0;

left:0; right:0; bottom: 5px;

text-align:center;


word-spacing: 0.05em;

font-family: Georgia, Times, serif;

background: #000;


border-top: 1px solid rgb(225,225,225);

color: #555;

text-shadow: -1px -1px 0 rgba(255,255,255,0.3);

-webkit-animation: figcaptionner 32s infinite;

-moz-animation: figcaptionner 32s infinite;

-o-animation: figcaptionner 32s infinite;

-ms-animation: figcaptionner 32s infinite;

animation: figcaptionner 32s infinite;

}

@-webkit-keyframes timeliner {

0%, 25%, 50%, 75%, 100% { width: 0; }

20%, 45%, 70%, 90% { width: 640px; }

}

@-moz-keyframes timeliner {

0%, 25%, 50%, 75%, 100% { width: 0; }

20%, 45%, 70%, 90% { width: 640px; }

}

@keyframes timeliner {

0%, 25%, 50%, 75%, 100% { width: 0; }

20%, 45%, 70%, 90% { width: 640px; }

}

#timeline {

position: absolute;

background: #999;

bottom: 15px;

left: 15px;

height: 1px;

background: rgb(214,98,13);

background: rgba(214,98,13,.8);

width: 0;

-webkit-animation: timeliner 32s infinite;

-moz-animation: timeliner 32s infinite;

-o-animation: timeliner 32s infinite;

-ms-animation: timeliner 32s infinite;

animation: timeliner 32s infinite;

}

/* dots styles */

.dots_commands {

position: relative;

top: 32px;


text-align:center;

}

.dots_commands li {

display:inline;


list-style:none;

}



.dots_commands a {

position: relative;


height:26px; width: 40px;

margin: 1px 1px;

/* text-indent: -9999px; */

/* background: #fff; */

border-bottom: 2px;

padding-top: 2px;

/*-webkit-border-radius: 50%;


border-radius: 50%; */

-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;

-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;

-o-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;

-ms-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;

box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;

z-index:25;

}

.dots_commands li + li a {

z-index:10;

}

@-moz-keyframes dotser {

0%, 100% { opacity: 1; left: 0; }

20% { opacity: 1; left: 0; }

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

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












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

}

@-webkit-keyframes dotser {

0%, 100% { opacity: 1; left: 0; }

20% { opacity: 1; left: 0; }

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















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

}

@keyframes dotser {

0%, 100% { opacity: 1; left: 0; }

20% { opacity: 1; left: 0; }

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













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

}

.dots_commands li:first-child a:after,

.dots_commands li:first-child a:before {

position: absolute;

top: 0; left: 0;

content: " ";

height: 7px;

width: 7px;

background: #fff609;

z-index:20;





border-radius: 50%;

-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;

-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;

-o-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;

-ms-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;

box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;

}

.dots_commands li:first-child a:after {

/* webkit no permite animar pseudo-elementos */

-webkit-animation: dotser 32s infinite;

/* moz si */

-moz-animation: dotser 32s infinite;

-o-animation: dotser 32s infinite;

-ms-animation: dotser 32s infinite;

animation: dotser 32s infinite;

}

.dots_commands li:first-child a:before {

display:none;

}

/* Necesita una forma de detenerse */

/* Acciones al cargar */



.sl_command { display: none; }

.sl_command:target ~ #slideshow .slider,

.sl_command:target ~ #slideshow figure:after,

.sl_command:target ~ #slideshow figcaption,

.sl_command:target ~ #slideshow #timeline,

.sl_command:target ~ #slideshow .dots_commands li:first-child a:after {

-webkit-animation-play-state: paused;

-moz-animation-play-state: paused;

animation-play-state: paused;

}

#sl_play:target ~ #slideshow .slider,

#sl_play:target ~ #slideshow figure:after,

#sl_play:target ~ #slideshow figcaption,

#sl_play:target ~ #slideshow #timeline,

#sl_play:target ~ #slideshow .dots_commands li:first-child a:after {

-webkit-animation-play-state: running;

-moz-animation-play-state: running;

animation-play-state: running;

}

.sl_command:target ~ #slideshow .pause { opacity:0; }

.sl_command:target ~ #slideshow .play { opacity:1; right: 25px; cursor: pointer; }

#sl_play:target ~ #slideshow .pause { opacity:0; }

#sl_play:target ~ #slideshow .play { opacity:0; right: 55px; cursor: default; }

.sl_i:target ~ #slideshow .slider

{ visibility: hidden }

.sl_i:target ~ #slideshow .slider figcaption {

visibility: hidden }

.sl_i:target ~ #slideshow .dots_commands li:first-child a:after { display:none; }

.sl_i:target ~ #slideshow .dots_commands li:first-child a:before { display:block; }}

#sl_i1:target ~ #slideshow .commands {

display: none; }

#sl_i1:target ~ #slideshow .commands1 {

display: block; }

#sl_i1:target ~ #slideshow .c_slider {

background-position: 0 0, 640px 0, 1280px 0, 1920px 0, 2560px 0, 3200px 0, 3840px 0,

4480px 0, 5120px 0, 5760px 0, 6400px 0, 7040px 0, 7680px 0, 8320px 0; }

#sl_i1:target ~ #slideshow .dots_commands li:first-child a:before { left:0; }


display: none; }


display: block; }


background-position: -640px 0, 0 0, 640px 0, 1280px 0, 1920px 0, 2560px 0, 3200px 0,

3840px 0, 4480px 0, 5120px 0, 5760px 0, 6400px 0, 7040px 0, 7680px 0; }

#sl_i2:target ~ #slideshow .dots_commands li:first-child a:before { left:46px; }


display: none; }


display: block; }


background-position: -1280px 0, -640px 0, 0 0, 640px 0, 1280px 0, 1920px 0, 2560px 0,

3200px 0, 3840px 0, 4480px 0, 5120px 0, 5760px 0, 6400px 0, 7040px 0; }



display: none; }


display: block; }




background-position: -1920px 0, -1280px 0, -640px 0, 0 0, 640px 0, 1280px 0, 1920px 0,

2560px 0, 3200px 0, 3840px 0, 4480px 0, 5120px 0, 5760px 0, 6400px 0; }



display: none; }


display: block; }


background-position: -2560px 0, -1920px 0, -1280px 0, -640px 0, 0 0, 640px 0, 1280px 0,

1920px 0, 2560px 0, 3200px 0, 3840px 0, 4480px 0, 5120px 0, 5760px 0; }



display: none; }


display: block; }


background-position: -3200px 0, -2560px 0, -1920px 0, -1280px 0, -640px 0, 0 0, 640px 0,

1280px 0, 1920px 0, 2560px 0, 3200px 0, 3840px 0, 4480px 0, 5120px 0; }



display: none; }


display: block; }


background-position: -3840px 0, -3200px 0, -2560px 0, -1920px 0, -1280px 0, -640px 0, 0 0,

640px 0, 1280px 0, 1920px 0, 2560px 0, 3200px 0, 3840px 0, 4480px 0; }



display: none; }


display: block; }


background-position: -4480px 0, -3840px 0, -3200px 0, -2560px 0, -1920px 0, -1280px 0, -

640px 0, 0 0, 640px 0, 1280px 0, 1920px 0, 2560px 0, 3200px 0, 3840px 0; }



display: none; }


display: block; }



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



display: none; }


display: block; }



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



display: none; }


display: block; }





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



display: none; }


display: block; }



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



display: none; }


display: block; }



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



display: none; }


display: block; }



4480px 0, -3840px 0, -3200px 0, -2560px 0, -1920px 0, -1280px 0, -640px 0, 0 0; }


/* EXPLANATIONS */

#main .download {

text-align: center;

margin: 3em 0 1em;

line-height: 1.35em;

}

#main .download a {

position: relative;


padding: 8px 22px 14px;

border: 0;

color: #fff;

background:#8a796d;

text-shadow: -1px -1px 0 #60544c;

font-weight:bold;

overflow: hidden;

-moz-box-shadow: 0 6px 0 #403c3a;

box-shadow: 0 6px 0 rgba(0,0,0,0.7), 0 7px 6px -5px rgba(255,255,255,0.40) inset;

border-radius: 12px;

-webkit-transition: color .5s;

-moz-transition: color .5s;

transition: color .5s;

}

#main .download .arrow {

position: relative;

top: 5px;


padding: 1px 6px;

margin-right: 10px;



color: #cabfb6;

font-size: 22px;


border: 1px solid rgba(0,0,0,0.2);



border-radius: 50%;

-webkit-transition: all .5s;

-moz-transition: all .5s;

transition: all .5s;

}

@-webkit-keyframes downloader {

0% { top:5px; }

45% { top:60px; }

49% { opacity: 0; }

50% { top: -60px; }

51% { opacity: 1; }

100% { top:5px; color: #cbbfb5; text-shadow: 1px 1px #777; background:

rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); }

}

@-moz-keyframes downloader {

0% { top:5px; }

45% { top:60px; }

49% { opacity: 0; }

50% { top: -60px; }

51% { opacity: 1; }



}

@keyframes downloader {

0% { top:5px; }

45% { top:60px; }

49% { opacity: 0; }

50% { top: -60px; }

51% { opacity: 1; }



}

#main .download a:hover,

#main .download a:focus {

color: #cbbfb5;

}

#main .download a:hover .arrow,

#main .download a:focus .arrow {

-webkit-animation: downloader .4s forwards;

-moz-animation: downloader .4s forwards;

animation: downloader .4s forwards;

}

#main .download .file {

display: block;

font-weight:normal;

font-size: 0.6em;

margin-left: 40px;


}

#main .download .already {

font-size: 0.7em;

line-height: 2.4em;



}

#main .download .nb {

font-weight:bold;

}

#main {

padding: 10px;

color: #8a796d;

font-family: Helvetica, Arial, sans-serif;

text-align:left;

text-shadow: -1px -1px 0 rgba(255,255,255,0.1);

}

#main h2, #main h3 {

margin-top: 45px;

font-size: 2em;

font-family: "Open Sans", cursive;

text-align:left;

}

#main h3 {

margin-top: 25px;

font-size: 1.4em;

}

#main p {


margin-top: 2em;

}

#main .col2,

#main .col2 {

position: relative;

margin-top: 1em;

-webkit-column-count: 2;

-webkit-column-gap: 3em;

-moz-column-count: 2;

-moz-column-gap: 3em;

column-count: 2;

column-gap: 3em;

}

#main .col2 + .col2 {

margin-top: 3em;

}

#main p + p:before {

position: absolute;

content: "*";

width: 100%;

text-align: center;

top: -1.2em;

font-size: 2em;

color: #e1d7cf;

text-shadow: 1px 1px 0 rgba(0,0,0,0.15);

}

header h2.opensans{

font-family: 'Open Sans', sans-serif;

color: #000;

}

header p{

width:666px;



margin: 0 auto;

text-align: center;

font-family:Arial,Helvetica;

margin-bottom:12px;

}

footer {

padding: 25px;

margin-bottom: 38px;

border: 1px solid rgba(0,0,0,0.1);


color: #777;

text-align: center;

}

footer p {

margin:0.5em 0;

}

footer .sep {


margin: 0 1em;

}

RESULTADO: En Internet Explorer 11:

En Firefox de Mozilla:



En Chrome de Google:

V. DISCUSION DE RESULTADOS 1. Ahora, realice ud. una página web adaptable, como la del segundo ejemplo, con otras fotos (utilice 8),

otros textos para un menú con cinco opciones, para el título principal y para los párrafos. Las fotos en dimensiones mayores a 1280px deben mostrarse en una sola línea, para dimensiones menores de 1280px pero mayores a 768px deben mostrarse en dos filas con cuatro fotos en cada una de estas, para dimensiones menores de 768px pero mayores de 400px mantener las dos filas con cuatro fotos en cada una, pero el menú debe quedar debajo del logo y arriba del contenido. Por último, para dimensiones menores menores de 400px distribuir las fotos en cuatro filas con dos en cada una de estas.

Importante:

• En el ejercicio, documente los bloques y líneas de código de acuerdo a lo que crea conveniente, para que instructor comprenda mejor su solución.

• Finalmente, envíe la carpeta del proyecto resultante, de manera comprimida a donde indique su instructor(a).



2. Realice un sitio web utilizando el método de adaptabilidad del sitio web del ejercicio 2 del procedimiento. El menú debe poseer cuatro opciones con funcionalidad para que se muestre una página de Inicio, una página con un formulario de registro, como el del ejemplo 4, con un campo de texto: uno para el nombre del usuario registrado, otro campo de tipo correo (mail o email) para su correo electrónico, otro campo de tipo url para el sitio web de este usuario y uno adicional para la fecha de nacimiento, utilizando para este último campo un control de tipo fecha. El último enlace del menú debe mostrar una galería integrada en el área de contenido del sitio web. El menú siempre estará visible.

VI. INVESTIGACION COMPLEMENTARIA

• Investigue sobre que parámetros podemos añadirle a la propiedad viewport del elemento meta utilizado para sitios web adaptativos.

• Investigar que debemos hacer para que nuestra página tenga el mismo ancho que el dispositivo utilizando siempre viewport.

• Investigar cómo debemos establecer el ancho de la página para que sea el mismo que el dispositivo, y además podamos tener el zoom mínimo de 1.0, y opcionalmente podamos establecer si se puede ampliar la página o no, utilizando viewport.

• Investigue para qué se utilizan los archivos .htc que son una solución para visualización correcta de sitios web donde se aplican bordes redondeados en versiones de Internet Explorer 8.0 y anteriores. Explique cómo se aplica correctamente en un sitio web.

• Siguiendo el video tutorial del siguiente enlace: https://www.youtube.com/watch?v=z-CPRslZS_A realice el menú desplegable con CSS3 que se explica durante el vídeo. Debe quedar igual y tener exactamente la misma funcionalidad. con 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.

Documents

UNIVERSIDAD DON BOSCO FACULTAD DE …...Valores y unidades de medida Como se ha podido observar en algunos de los ejemplos es necesario especificar en algunas propiedades medidas mediante