UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLÓGICOS COMPUTACIÓN

Transcripción

1 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

2 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

3 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

4 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

5 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

6 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( 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

7 <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

8 III. MATERIALES Y EQUIPO Para la realización de la guía de práctica se requerirá lo siguiente: No. Requerimiento Cantidad 1 Guía de práctica #0: Repaso HTML5 - CSS Computadora con navegadores y editor de texto instalado 1 3 Memoria USB o disco flexible 1 IV. PROCEDIMIENTO Indicaciones: Para todos los ejemplos de esta guía de práctica utilizaremos el Notepad++ o Sublime Text 3. Se pide que cuando guarde el archivo lo haga con extensión.html, En todo caso, la única extensión diferente que se utilizará en esta práctica será la extensión.css, para cuando se requiera crear un script con los estilos de manera independiente. Ejercicio 1: Creación de página web con cuadrícula flexible con html y css. En este ejercicio seguiremos un proceso para lograr la realización de una página web con diseño flexible. Lo primero será crear el marcado HTML de la página como se ilustra en el siguiente código que debe digitar sin errores. Cree una carpeta y denomínela flexible, junto a esta cree otras carpetas y denomínelas css, img y site. La estructura de carpetas del proyecto debe ser la siguiente: Carpeta flexible Script html: cuadricula-flexible.html <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8" /> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta name="dc.creator" content="ethan Marcotte - /> <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> <a href="#"><i>ediciones</i> Anteriores</a> <li class="last"> <a href="#"><i>acerca de</i> Nuestro papel</a> Lenguajes Interpretados en el Cliente 8

9 <b>holmes</b></span> <b>holmes</b></span> </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 Lenguajes Interpretados en el Cliente 9 </a> <!-- 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> <!-- Final del li class="figure" --> <li id="f-mycroft" class="figure"> <a href="#"> <img src="img/f-mycroft.jpg" alt="" /> <span class="figcaption">mycroft </a> <!-- 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> <!-- 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> <!-- 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>

10 </a> <!-- Final del li class="figure" --> </ol> </div><!-- Final del div class="section main" --> <div class="footer"> <p> Ilustraciones de <a href=" Sidney Paget</a>, palabras de <a href=" Sir Arthur Conan Doyle</a>. </p> <p> Lo que resta es gracias a <a href=" 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

11 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

12 #page { background: url("../img/rag.png") repeat-x; padding: 2em 0;.inner { margin: 0 auto; width: 93.75%; /* 960px px */ 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: %; /* 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: %; /* 633px - 960px */.intro { margin-top: 117px;.intro div { line-height: 1.4; ul.nav { border-top: 1px solid #888583; margin: 2em auto 0; width: %; 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

13 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 Text","Baskerville old face",garamond,"times New Roman",serif; text-align: center; margin-bottom: 0.25em;.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: % 1.5em 0; /* 21px - 633px */ text-align: center; text-transform: uppercase; width: %; /* 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

14 -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

15 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

16 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 - /> <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> <a href="#"><i>ediciones</i> Anteriores</a> <li class="last"> <a href="#"><i>acerca de</i> Nuestro papel</a> </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

17 </a> <!-- 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> <!-- 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> <!-- 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> <!-- 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> <!-- 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> <!-- Final del li class="figure" --> </ol> </div><!-- Fianl del div class="section main" --> <div class="footer"> <p> Ilustraciones de <a href=" Sidney Paget</a>, palabras de <a href=" Sir Arthur Conan Doyle</a>. </p> <p> Lo que resta es gracias a <a href=" 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

18 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

19 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 px */ 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: %; /* 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

20 .intro,.main,.footer { float: right; width: %; /* 633px - 960px */.intro { margin-top: 110px;.intro div { line-height: 1.4; ul.nav { border-top: 1px solid #888583; margin: 2em auto 0; width: %; 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; letter-spacing: 0.05em;.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 { 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

21 .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: % 1.5em 0; /* 21px / 633px */ text-align: center; width: %; /* 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: (max-width: 600px) { /* 633px grid (88x6 col, 21x5 gut; ) */.inner { position: relative;.mast,.intro,.main,.footer { float: none; width: auto;.intro { margin-top: 46px; Lenguajes Interpretados en el Cliente 21

22 @media (max-width: 400px) {.intro { margin-top: 32px;.figure, li#f-mycroft { margin-right: %; /* 21px - 633px */ width: %; /* 306px - 633px */ li#f-watson, li#f-moriarty { margin-right: (min-width: 1300px) {.figure, li#f-mycroft { margin-right: %; /* 21px - 633px */ width: %; /* 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

23 En pantallas mayores o iguales a 400px pero menores de 600px: Lenguajes Interpretados en el Cliente 23

24 En pantallas menores de 400px: Lenguajes Interpretados en el Cliente 24

25 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> <a href="#" title="institucional">institucional</a> <li> <a href="#" title="carreras">carreras</a> <li> <a href="#" title="nuevo Ingreso">Nuevo Ingreso</a> <li> <a href="#" title="contacto">contacto</a> </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

26 lucro. arisma. y paquete </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 Pertenece y es respaldada por la Institución Salesiana, por fundación y </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 </p> </article> <article> <h3> desarrollo dinámico a través de una serie de Escuelas y Departamentos especializados que garantizan la calidad educativa de sus programas. <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 inicia a partir del 17 de septiembre del El proceso inicia con la adquisición del 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 ext <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> <a href="" title="investigación">investigación</a> Lenguajes Interpretados en el Cliente 26

27 <li> <a href="#" title="citt">citt</a> <li> <a href="#" title="biblioteca">biblioteca</a> </ul> </aside> </div> <footer> <p> Universidad Don Bosco Derechos reservados Tel. (503) Apartado postal: </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

28 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

29 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

30 #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

31 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> <label for="name">nombre:</label> <input type="text" placeholder="john Doe" required /> <span class="form_hint">formato aceptado "Juan Pérez"</span> <li> <label for=" ">correo electrónico:</label> <input type=" " name=" " placeholder="john_doe@example.com" required /> <span class="form_hint">formato aceptado "name@something.com"</span> Lenguajes Interpretados en el Cliente 31

32 <li> <label for="website">sitio web:</label> <input type="url" name="website" placeholder=" required pattern="(http https)://.+"/> <span class="form_hint">formato aceptado " <li> <label for="message">mensaje:</label> <textarea name="message" cols="40" rows="6" required ></textarea> <li> <button class="submit" type="submit">registrar</button> </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%, #FFF %); /* Mozilla Firefox */ background-image: -moz-linear-gradient(top left, #FFFFD9 0%, #F5F3AB 40%, #FFF %); /* Opera */ background-image: -o-linear-gradient(top left, #FFFFD9 0%, #F5F3AB 40%, #FFF %); /* 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%, #FFF %); /* W3C Markup */ background-image: linear-gradient(to bottom right, #FFFFD9 0%, #F5F3AB 40%, #FFF %); 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

33 .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

34 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

35 .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; -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; button.submit:hover { cursor: pointer; opacity:.85; button.submit:active { border: 1px solid #20911e; box-shadow: px 5px #356b0b inset; -webkit-box-shadow:0 0 10px 5px #356b0b inset ; -moz-box-shadow: px 5px #356b0b inset; -ms-box-shadow: px 5px #356b0b inset; -o-box-shadow: px 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

36 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>deportes <ul class="submenu"> <li>fútbol <li>motor <li>baloncesto <li>tenis </ul> <li>cultura <ul class="submenu"> <li>cine <li>teatro <li>literatura <li>premios </ul> <li>sociedad <ul class="submenu"> <li>educación <li>comunicación <li>blogs </ul> <li>economía <ul class="submenu"> <li>empresas <li>mercado <li>bolsa </ul> <li>tecnología <ul class="submenu"> <li>programas Lenguajes Interpretados en el Cliente 36

37 </ul> </div> </nav> </body> </html> <li>redes sociales <li>gadgets <li>seguridad </ul> 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: px 10px; -moz-border-radius: px 10px; -webkit-border-radius: px 10px; -o-border-radius: px 10px; -ms-border-radius: px 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

38 /* 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 botonsubmenu { 0% { text-shadow: 200px 2px 20px #375f85; 50% { 100%{ transform: scale(1.25); border-radius: 5px; transform: scale(1.05); text-shadow: 2px 2px 1px botonsubmenu { 0% { text-shadow: 200px 2px 20px #375f85; -moz-text-shadow: 200px 2px 20px #375f85; 50% { 100%{ -moz-transform: scale(1.25); -moz-border-radius: 5px; -moz-transform: scale(1.05); text-shadow: 2px 2px 1px #375f85; -moz-text-shadow: 2px 2px 1px #375f85; Lenguajes Interpretados en el Cliente 38

39 @-webkit-keyframes botonsubmenu { 0% { text-shadow: 200px 2px 20px #375f85; -webkit-text-shadow: 200px 2px 20px #375f85; 50% { 100%{ -webkit-transform: scale(1.25); -webkit-border-radius: 5px; -webkit-transform: scale(1.05); text-shadow: 2px 2px 1px #375f85; -webkit-text-shadow: 2px 2px 1px botonsubmenu { 0% { text-shadow: 200px 2px 20px #375f85; -o-text-shadow: 200px 2px 20px #375f85; 50% { 100%{ -o-transform: scale(1.25); -o-border-radius: 5px; -o-transform: scale(1.05); text-shadow: 200px 2px 20px #375f85; -o-text-shadow: 2px 2px 1px botonsubmenu { 0% { text-shadow: 200px 2px 20px #375f85; -ms-text-shadow: 200px 2px 20px #375f85; 50% { 100%{ -ms-transform: scale(1.25); -ms-border-radius: 5px; -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: px 10px; -moz-border-radius: px 10px; -webkit-border-radius: px 10px; -o-border-radius: px 10px; -ms-border-radius: px 10px; Lenguajes Interpretados en el Cliente 39

40 #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 submenu { 0% { opacity: 0; left: -150px; 50% { 100% { transform: scale(0.5); box-shadow: -10px 4px 8px 5px #000; opacity: 1; left: submenu { 0% { opacity: 0; left: -150px; 50% { 100% { -moz-transform: scale(0.5); box-shadow: -10px 4px 8px 5px #000; -moz-box-shadow: -10px 4px 8px 5px #000; opacity: 1; left: submenu { 0% { opacity: 0; left: -150px; 50% { 100% { -webkit-transform: scale(0.5); box-shadow: -10px 4px 8px 5px #000; -webkit-box-shadow: -10px 4px 8px 5px #000; opacity: 1; left: submenu { Lenguajes Interpretados en el Cliente 40

41 0% { 50% { 100% { opacity: 0; left: -150px; -o-transform: scale(0.5); box-shadow: -10px 4px 8px 5px #000; -o-box-shadow: -10px 4px 8px 5px #000; opacity: 1; left: submenu { 0% { opacity: 0; left: -150px; 50% { 100% { -ms-transform: scale(0.5); box-shadow: -10px 4px 8px 5px #000; -ms-box-shadow: -10px 4px 8px 5px #000; 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

42 #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=' rel='stylesheet' type='text/css'> <link href=' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/slideshow.css" /> </head> Lenguajes Interpretados en el Cliente 42