![Selectores
• Selector
de
atributos.
• Permite
seleccionar
elementos
HTML
en
función
de
sus
atributos
y/o
valores
de
esos
atributos.
/* Se muestran de color azul todos los enlaces que tengan un atributo
"class", independientemente de su valor */
a[class] { color: blue; }
/* Se muestran de color azul todos los enlaces que tengan un atributo
"class" con el valor "externo" */
a[class="externo"] { color: blue; }
/* Se muestran de color azul todos los enlaces que apunten al sitio
"http://www.ejemplo.com" */
a[href="http://www.ejemplo.com"] { color: blue; }
/* Se muestran de color azul todos los enlaces que tengan un atributo
"class" en el que al menos uno de sus valores sea "externo" */
a[class~="externo"] { color: blue; }](https://image.slidesharecdn.com/dispositivascursohtml5-231002150315-903e7f7a/85/Dispositivas-CURSO-HTML-5-pdf-82-320.jpg)
![Selectores
• Selectores
de
atributos
en
CSS3
/* Selecciona todos los enlaces que apuntan a
una dirección de correo electrónico */
a[href^="mailto:"] { ... }
/* Selecciona todos los enlaces que apuntan a
una página HTML */
a[href$=".html"] { ... }
/* Selecciona todos los títulos h1 cuyo atributo
title contenga la palabra "capítulo" */
h1[title*="capítulo"] { ... }](https://image.slidesharecdn.com/dispositivascursohtml5-231002150315-903e7f7a/85/Dispositivas-CURSO-HTML-5-pdf-83-320.jpg)
![Media
queries
de
CSS3
• Podemos
uIlizar
las
media
queries
de
tres
formas
diferentes:
@media [only|not] <media_type> [ and
(<media_feature>:value)]*] {
/* Aquí van las reglas CSS necesarias */
}
<link rel="stylesheet" type="text/css"
media="<media_type> [ and
(<media_feature>:value)]*]"
href="<fichero_css>" />
@import url("<fichero_css>") <media_type> [ and
(<media_feature>:value)]*];](https://image.slidesharecdn.com/dispositivascursohtml5-231002150315-903e7f7a/85/Dispositivas-CURSO-HTML-5-pdf-169-320.jpg)
![Modificación
y
animación
de
propiedades
CSS
• .animate()
• Nos
permite
animar
varias
propiedades,
con
valores
numéricos,
de
CSS
en
un
solo
paso.
• Propiedades:
atributos
CSS
que
queremos
actualizar.
• Duración:
duración
de
la
animación.
• Función
de
animación:
sirve
para
indicar
como
se
realizará
la
animación.
• Callback:
función
que
se
ejecutará
una
vez
terminada
la
animación.
.animate( Propiedades, [ Duración],
[ Función de animación ], [ Callback ] )](https://image.slidesharecdn.com/dispositivascursohtml5-231002150315-903e7f7a/85/Dispositivas-CURSO-HTML-5-pdf-210-320.jpg)
Dispositivas CURSO HTML 5.pdf
- 3. Historia de HTML5 • 1989 … 1991: Tim Berners-‐Lee – URL + HTTP + HTML • 1994: World Wide ConsorIum (W3C) • 1995: HTML 2.0 • 1999: HTML 4.01 • 2000: XHTML 1.0 (grámaIca XML y vocabulario HTML) • 2001: XHTML 1.1 • 2006: HTML5
- 4. ¿Qué es HTML5? • Es el nuevo estándar de HTML • Esta basado en HTML, CSS, DOM y JavaScript. • Contenido más rico sin necesidad de plugins. • MulIplataforma. • Valor semánIco de las eIquetas.
- 5. Diferencias con HTML 4.01 • Sintaxis • Nuevos elementos • Nuevos atributos • Elementos cambiados • Atributos cambiados • Elementos eliminados • Atributos eliminados
- 6. Principales caracterísIcas • Estructura del cuerpo • EIquetas para contenidos específico • Canvas • Bases de Datos locales • Web Workers • Aplicaciones Web Offline • Geolocalización • Nuevas APIs para interfaz de usuario • Fin de las eIquetas de presentación
- 7. TEMA 2. ELEMENTOS DE HTML5
- 8. DOCTYPE • Antes: <!DOCTYPE html PUBLIC "-//W3C// DTD XHTML 1.0 Transitional//EN” "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd"> • Ahora: <!DOCTYPE html>
- 9. Cabecera y Metainformación • La cabecera conIene código e información que no es visible en la ventana del navegador. Puede contener información importante como el ntulo de la página, el Ipo de codificación que vamos a uIlizar, enlaces a ficheros css o javascript.
- 10. EIqueta head • <head> …. </head> • Puede contener los siguientes elementos: Itle, style, base, link, meta, script y noscript En anteriores versiones de HTML disponiamos del atributo “profile”
- 11. EIqueta Itle • <Itle> … </Itle> • Define el Itulo del documento • El Itulo aparece en: -‐ La barra de Itulo del navegador -‐ Cuando agregamos la página a favoritos -‐ Los motores de busqueda <title>Título página web</title>
- 12. EIqueta meta • <meta /> • Información sobre el documento HTML • No se visualiza en el navegador <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta charset="UTF-8"> <meta name="autor" content="Juan" /> <meta name="description" content=”descripción web" /> <meta name="keywords" content=”html5, css3, responsive" /> <meta name="robots" content="index, follow" />
- 13. EIqueta style • <style> … </style> • Permite definir esIlos parIculares para los elementos de una página, basados en definiciones CSS <style type="text/css"> p { color: black; font-family: Verdana; } </style>
- 14. EIqueta link • <link /> • Define una relación entre un documento HTML y un recurso externo. Su uso más común es para enlazar hojas de esIlo definidas mediante CSS. <link rel="stylesheet" type="text/css" href="theme.css” media=“screen”>
- 15. EIqueta script • <script> … </script> • Se usa para definir un script del lado del cliente <script type=“text/javascript”> document.write(”Hola mundo") </script> <script src= http://code.jquery.com/ jquery-1.7.2.min.js type=“text/ javascript”></script>
- 16. EIqueta noscript • <noscript> … </noscript> • Define un contenido alternaIvo para los usuarios que Ienen deshabilitado la ejecución de scripts en sus navegadores o no son soportados por este. • Con HTML5, también en <head> … </head> <script> document.write(”Hola mundo") </script> <noscript>Tu navegador no soporta JavaScript!</ noscript>
- 17. EIquetas HTML • <body> …. </body> • <div> …. </div> • <span> …. </span> • Cabeceras (<h1> …. </h1>, <h2> …. </h2>, …) • Hiperenlaces <a> …. </a> • Párrafos <p> …. </p> • Listas <ul><li> …. </li></ul> • Tablas <table><thead><tr>…</tr></thead><tbody><td>...</ td></tbody></table> • Imágenes <img /> • Formularios <form><input/></form> • Iframe <iframe> …. </iframe>
- 18. EIqueta body • <body> … </body> • Define el cuerpo del documento HTML. ConIene todos los contenidos de un documento HTML y lo que se visualizará en el navegador <html> <head> <title>Título de la página</title> </head> <body> Contenido de la página </body> </html>
- 19. EIqueta div • <div> … </div> • Define una sección/división en un documento HTML • Se les da formato con CSS para maquetar la página web. <div style="color:#0000FF"> <h3>Esto es la cabecera</h3> <p>Esto es un parrafo.</p> </div>
- 20. EIqueta span • <span> … </span> • Se usa para agrupar elementos en la misma línea. • No produce ningún cambio visual por sí mismo. • Se usa como método para referenciar (hook) alguna parte del documento. <p> Color <span style="color:blue">azul</span>. </p>
- 21. Encabezados • <h1>…</h1> …. <h6>…</h6> • Define encabezados de texto en el documento HTML. <h1>Cabecera 1</h1> <h2>Cabecera 2</h2> <h3>Cabecera 3</h3> <h4>Cabecera 4</h4> <h5>Cabecera 5</h5> <h6>Cabecera 6</h6>
- 22. Hiperenlaces • <a> … </a> • Sirve para enlazar desde una página web a otra o a algún recurso (pdf, zip, etc…). • El atributo más importante es href, que define el enlace de desIno. • En HTML5 se puede no especificar el href para que actúe como un marcador de posición. <a href="http://www.google.es">Enlace a google</a>
- 23. Parrafo • <p> …. </p> • Define un párrafo. • Los navegadores añaden un margen antes y después de cada eIqueta por defecto. <p>Esto es un párrafo de texto.</p>
- 24. Listas • Combinación de varias eIquetas. • ul: definea una lista desordenada. • ol: define una lista ordenada. • li: define un elemento de la lista <ol> <li>Madrid</li> <li>Barcelona</li> <li>Valencia</li> </ol> <ul> <li>Madrid</li> <li>Barcelona</li> <li>Valencia</li> </ul>
- 25. Tablas • Combinación de varias eIquetas • table: define una tabla en HTML. Es el contenedor principal. • thead: define el contenido de la cabecera de una tabla. • tbody: define el contenido del cuerpo de la tabla. • tr: define una fila de la tabla. • th: define una celda de la cabecera de la tabla. • td: define una celda del cuerpo de la tabla
- 26. Ejemplo de tabla sencilla <table> <tr> <th>Artículo</th> <th>Precio</th> </tr> <tr> <td>Ordenador</td> <td>400 €</td> </tr> <tr> <td>Impresora</td> <td>80 €</td> </tr> </table>
- 27. Ejemplo de tabla completa <table> <thead> <tr> <th>Ordenador</th> <th>Precio</th> </tr> </thead> <tbody> <tr> <td>Ordenador</td> <td>400 €</td> </tr> <tr> <td>Impresora</td> <td>80 €</td> </tr> </tbody> </table>
- 28. EIqueta form • <form> … </form> • Engloba todos los campos de introducción de datos por parte del usuario. • Puede contener los siguientes elementos: -‐ input -‐ textarea -‐ buxon -‐ select -‐ opIon -‐ optgroup -‐ fieldset -‐ label <form action=”tratamiento.php" method=”post"> Nombre: <input type="text" name=”nombre"><br> Apellido: <input type="text" name=”apellido"><br> <input type="submit" value=”Enviar"> </form>
- 29. EIqueta label • <label> … </label> • Define una eIqueta para un elemento de entrada de datos (input). <form action=”tratamiento.php"> <label for=”nom">Nombre</label> <input type=”text" name=”nombre" id=”nom" value=”Pepe"><br> <input type="submit" value="Submit"> </form>
- 30. EIqueta fieldset • Sirve para agrupar elementos de un formulario. <form> <fieldset> <legend>Datos personales</legend> Nombre: <input type="text"><br> Apellido: <input type="text"><br> DNI: <input type="text"> </fieldset> </form>
- 31. EIqueta input • <input /> • Define un campo donde el usuario puede introducir datos. <form action=”tratamiento.php"> Nombre: <input type="text" name=”nombre"><br> Apellidos: <input type="text" name=”apellidos"><br> <input type="submit" value=”Enviar"> </form>
- 32. EIqueta input • Nuevos Ipos en HTML5: -‐ color -‐ date -‐ dateIme -‐ dateIme-‐local -‐ email -‐ month -‐ number -‐ range -‐ search -‐ tel -‐ Ime -‐ url -‐ week
- 33. EIqueta textarea • <textarea> … </textarea> • Define un área mulI línea para introducir grandes canIdades de texto. <textarea rows="4" cols="50"> Esta es un área de texto, donde podemos introducir grandes cantidades de datos para enviar en un formulario. </textarea>
- 34. EIqueta select • <select> … </select> • Especifica una lista desplegable a modo de selector. • Cada elemento del selector se define con la eIqueta <opIon> … </opIon>
- 35. EIqueta opIon • <opIon> … </opIon> • Define un elemento para un selector. <select> <option value="volvo">Volvo</option> <option value=”lotus”>Renault</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select>
- 36. EIqueta optgroup • <optgroup> … </optgroup> • Se uIliza para agrupar diferentes opciones dentro de un selector <select> <optgroup label=”Coches franceses"> <option value=”renault”>Renault</option> <option value=”citroen”>Citroen</option> </optgroup> <optgroup label=”Coches alemanes"> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </optgroup> </select>
- 37. EIqueta datalist • <datalist> … </datalist> • Define un lista de opciones predefinidas. <input list="navegadores"> <datalist id=”navegadores"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>
- 38. EIqueta keygen • Especifica un campo generador de pares de claves. • La clave privada se guarda localmente. • La clave pública se envía al servidor. <form action="keygen.php" method="post"> Usuario: <input type="text" name="usuario"> Encriptación: <keygen name="seguridad"> <input type="submit" value="Enviar"> </form>
- 39. EIqueta output • Representa el resultado de un cálculo. <form oninput="result.value=parseInt(a.value) +parseInt(b.value)"> <input type="range" name="b" value="50" /> + <input type="number" name="a" value="10" /> = <output name="result"></output> </form>
- 40. Nuevas eIquetas en HTML 5 • Eliminar elementos en desuso de HTML 4.01. • Redefinir elementos de HTML 4.01. • Introducción de nuevas APIs. • Significado a los elementos estructurales (web semánIca). • Elementos eliminados: acronym, applet, basefont, big, center, dir, Font, frame, frameset, noframes, strike, 6. • Nuevos elementos: canvas, audio, embed, source, track, video, datalist, keygen, output, ar9cle, aside, bdi, details, dialog, figcap9on, figure, footer, header, main, mark, menuitem, meter, nav, progess, rp, rt, ruby, sec9on, summary, 9me, wbr:.
- 41. EIqueta header • <header> … </header> • Define la cabecera del documento o de una sección. <body> <header> <h1>Título de la página</h1> <p>Breve descripción</p> </header> </body>
- 42. EIqueta nav • Define el bloque de navegación de la página. • Menú. <nav> <ul> <li><a href=”index.html”>Inicio</a></li> <li><a href=”galeria.html”>Galería</a></li> <li><a href=”empresa.html”>La empresa</a></li> <li><a href=”contacto.html">Contacto</a></li> </ul> </nav>
- 43. EIqueta hgroup • <hgroup> … </hgroup> • Se usa para agrupar elementos de cabecera cuando tenemos mulIples niveles de encabezados. <hgroup> <h1>El Cartagena gana la Champions</h1> <h2>Una final agónica frente a…</h2> </hgroup> <p>El parIdo se decidió finalmente en la ronda de penalIs, donde el Cartagena no falló ninguno.</p>
- 44. EIqueta main • <main> … </main> • Define el contenido principal de la página. • El contenido insertado dentro debería ser único. <main> <h1>Navegadores web</h1> <article> <h1>Google Chrome</h1> </article> <article> <h1>Mozilla Firefox</h1> </article> </main>
- 45. EIqueta secIon • <secIon> … </secIon> • Define una sección del documento, agrupando elementos de la misma temáIca. <section> <h1>Título</h1> <p>Texto largo</p> </section>
- 46. EIqueta arIcle • <arIcle> … </arIcle> • Define un contenido independiente, como podría ser un arnculo de un blog, una noIcia, un comentario, etc… <section> <article> <h1>Noticia 1</h1> <p>Texto noticia 1.</p> </article> <article> <h1>Noticia 2</h1> <p>Texto noticia 2.</p> </article> </section>
- 47. EIqueta aside • <aside> … </aside> • Define un contenido aparte. Es lo que se conoce vulgarmente como barra lateral de la web (sidebar). <p>Vacaciones familiares.</p> <aside> <h4>Listado de hoteles</h4> <ul> <li>Hotel Victoria</li> <li>Hotel NH</li> </ul> </aside>
- 48. EIqueta figure • <figure> … </figure> • Define una sección donde agrupar contenido como imágenes, ilustraciones, diagramas, etc… <figure> <img src=”imagen.jpg" alt=”Una imagen” /> </figure>
- 49. EIqueta figcapIon • <figcapIon> … </figcapIon> • Define un subntulo para un elemento <figure> <figure> <img src=”imagen.jpg" alt=”Una imagen” /> <figcaption> Fig 1. Mis vacaciones.</ figcaption> </figure>
- 50. EIqueta footer • <footer> … </footer> • Define un pié para un documento o sección. <footer> <p>Autor: Juan</p> <p>Información de contacto: <a href=mailto:mail@mail.com>Enviar mail</a>. </p> </footer>
- 51. EIqueta details • <details> … </details> • Es un elemento interacIvo que el usuario puede abrir o cerrar. • La eIqueta <summary>…</summary> define el texto visible del detalle. <details> <summary>Todos los derechos reservados.</ summary> <p> - por La Empresa. </p> <p>Todo el contenido y las imágenes de esta página web son propiedad de Le Empresa.</p> </details>
- 52. EIqueta mark • <mark> … </mark> • Define un subrayado en un texto. <p>Mi nombre es Juan Diego <mark>Navarro</mark>.</p>
- 53. EIqueta menu y menuitem • Con esta combinación de eIquetas podemos generar opciones que se añadirán al menú contextual del sistema operaIvo al uIlizar el botón derecho del ratón. <div style="background:red;border:1px solid #cccccc;padding: 10px;" contextmenu="mymenu"> <p>Click derecho con el raton</p> <menu type="context" id="mymenu"> <menuitem label="Recargar web" onclick="window.location.reload();"> </menuitem> <menuitem label="Saludar" onclick="alert('hola');"> </menuitem> </menu> </p> </div>
- 54. EIqueta progess • <progess></progess> • Define una barra de progreso para una tarea . • Se puede usar junto con javascript para mostrar el progreso del valor. <progress value="22" max="100"></progress>
- 55. EIqueta audio • <audio> … </audio> • Define un reproductor de sonidos. • Formatos permiIdos: mp3, wav y ogg. <audio controls> <source src=”musica.ogg" type="audio/ogg"> <source src=”musica.mp3" type="audio/mpeg"> Su navegador no soporta la etiqueta audio. </audio>
- 56. EIqueta video • <video> … </video> • Define un reproductor de video. • Formatos permiIdos: mp4, webM y ogg. <video width="320" height="240" controls> <source src= "peli.mp4" type="video/mp4"> <source src=”peli.ogg" type="video/ogg"> Su navegador no soporta la etiqueta video. </video>
- 57. EIqueta canvas • <canvas> … </canvas> • Crea un área para dibujar mediante lenguajes de script (normalmente javascript). <canvas id=”area-dibujo"></canvas> <script> var canvas=document.getElementById(’area-dibujo'); var ctx=canvas.getContext('2d'); ctx.fillStyle='#FF0000'; ctx.fillRect(0,0,80,100); </script>
- 58. Atributos • Añaden información adicional a los elementos HTML. • Se definen en la eIqueta de apertura. • Están definidos por un par nombre=valor
- 59. Atributo Class • Especifica uno o más nombres de clase para un elemento. • Lo uIlizamos junto con las hojas de esIlo. • Una clase se puede repeIr tantas veces como se quiera en una misma página web. • jQuery.
- 60. Atributo id • Especifica un idenIficador para un elemento. • Este idenIficador debe ser único en la página web . • Se puede usar el id para idenIficar el elemento mediante lenguajes de script.
- 61. Atributo style • Sirve para especificar un esIlo en línea mediante CSS.
- 62. Atributo Itle • Información extra de un elemento. • Se visualiza como toolIp. • Buscadores.
- 63. TEMA 3. CSS 3
- 64. CSS 3 • Permite separar los esIlos del contenido. • Ahorramos eIquetas y atributos. • Con un solo archivo CSS podemos aplicar esIlos a miles de páginas. <font color="red" face="Arial" size="5">Titular de la página</font>
- 65. EsIlos en el código • Se incluye en la eIqueta HTML mediante el atributo “style”. • Debería ser uIlizado solo en situaciones muy especificas <p style="color: black; font-family: Verdana;”>Párrafo.</p>
- 66. EsIlos internos • Se definen en la cabecera del documento HTML. • Se uIliza la eIqueta <style>. • Pocas reglas CSS o especificas para una página de un siIo web. <style type="text/css"> p { color: black; font-family: Verdana; } </style>
- 67. EsIlos externos • Se uIliza la eIqueta <link> de HTML. • Un mismo archivos de esIlos para mulItud de páginas. • Aplicación homogénea. <link rel="stylesheet" type="text/css" href="/css/ estilos.css" media="screen" />
- 68. EsIlos externos • También se puede usar @import (regla CSS). • Es mejor usar <link>, según la W3C. <style type="text/css" media="screen"> @import '/css/estilos.css'; @import url('/css/estilos.css'); </style>
- 69. Sintaxis • Regla: cada uno de los esIlos que componen una hoja de esIlos. • Selector: indica el elemento o elementos HTML a los que se aplica la regla. • Declaración: especifica los esIlos que se aplican a los elementos. Esta compuesta por una o más propiedades. • Propiedad: caracterísIca que se modifica. • Valor: establece el nuevo valor de la caracterísIca.
- 70. Sintaxis • Un archivo CSS puede contener un número ilimitado de reglas. • Cada regla se puede aplicar a selectores diferentes. • Cada declaración puede contener tantos pares propiedad/ valor como queramos.
- 71. Selectores • Selector universal • Se aplica a todos los elementos HTML * { margin: 0; padding: 0; }
- 72. Selectores • Selector de Ipo o eIqueta • Selecciona todos los elementos de la página cuya eIqueta HTML coincide con el valor del selector. a { color: red; }
- 73. Selectores • CSS permite agrupar varias reglas individuales en una sola regla con un selector múlIple. h1, h2, h3 { color: #8A8E27; font-weight: normal; font-family: Arial, Helvetica, sans-serif; }
- 74. Selectores • Selector descendente • Selecciona elementos que se encuentran dentro de otros elementos. p span { color: red; } <p> <span>texto1</span> <a href="">...<span>texto2</span></a> </p>
- 75. Selectores • Selector de clase. • Se aplica la regla a todos las eIquetas HTML que Ienen definido como nombre de clase, el nombre del selector. • En una misma página HTML varios elementos diferentes pueden uIlizar el mismo valor en el atributo class. • Sintaxis: .selector .destacado { color: red; } <body> <p class="destacado">Lorem ipsum dolor sit amet...</p> <p>Nunc sed lacus et est adipiscing accumsan...</p> <p>Class aptent taciti sociosqu ad litora...</p> </body>
- 76. Selectores • Los selectores de Ipo y selectores de clase se pueden combinar. p.destacado { color: red } <body> <p class="destacado">Lorem ipsum dolor sit amet...</p> <a href=”#” class="destacado"> Enlace</a> <p>Class aptent taciti sociosqu ad litora...</p> </body>
- 77. Selectores • Es posible aplicar los esIlos de varias clases CSS sobre un mismo elemento. .error { color: red; } .destacado { font-size: 15px; } .especial { font-weight: bold; } .error.destacado { color: blue; } <p class="especial destacado error">Párrafo de texto...</p>
- 78. Selectores • Selector de id. • Permite seleccionar un elemento de la página a través del valor de su atributo id. • Solo seleccionan un elemento de la página ya que el valor del atributo id no se puede repeIr en otros elementos de la página. • Sintaxis: #selector #destacado { color: red; } <p>Primer párrafo</p> <p id="destacado">Segundo párrafo</p> <p>Tercer párrafo</p>
- 79. Selectores • Selector de hijos. • Se uIliza para seleccionar un elemento que es hijo directo de otro elemento. • Sintaxis: elemento > elemento p > span { color: blue; } <p><span>Texto1</span></p> <p><a href="#"><span>Texto2</span></a></p>
- 80. Selectores • Selector adyacente. • Dos elementos son adyacentes cuando son hermanos y están uno al lado del otro. h2 { color: green; } h1 + h2 { color: red } <body> <h1>Titulo1</h1> <h2>Subtítulo</h2> <h2>Otro subtítulo</h2> </body>
- 81. Selectores • Con CSS3 se añade el selector general de elementos hermnos. • Funcional igual que el selector adyacente pero no Iene en cuenta que los elementos tengan que estar uno al lado del otro. h1 + h2 { ... } /* selector adyacente */ h1 ~ h2 { ... } /* selector general de hermanos */ <h1>...</h1> <h2>...</h2> <p>...</p> <div> <h2>...</h2> </div> <h2>...</h2>
- 82. Selectores • Selector de atributos. • Permite seleccionar elementos HTML en función de sus atributos y/o valores de esos atributos. /* Se muestran de color azul todos los enlaces que tengan un atributo "class", independientemente de su valor */ a[class] { color: blue; } /* Se muestran de color azul todos los enlaces que tengan un atributo "class" con el valor "externo" */ a[class="externo"] { color: blue; } /* Se muestran de color azul todos los enlaces que apunten al sitio "http://www.ejemplo.com" */ a[href="http://www.ejemplo.com"] { color: blue; } /* Se muestran de color azul todos los enlaces que tengan un atributo "class" en el que al menos uno de sus valores sea "externo" */ a[class~="externo"] { color: blue; }
- 83. Selectores • Selectores de atributos en CSS3 /* Selecciona todos los enlaces que apuntan a una dirección de correo electrónico */ a[href^="mailto:"] { ... } /* Selecciona todos los enlaces que apuntan a una página HTML */ a[href$=".html"] { ... } /* Selecciona todos los títulos h1 cuyo atributo title contenga la palabra "capítulo" */ h1[title*="capítulo"] { ... }
- 84. Pseudo-‐elementos • :first-‐line • Permite seleccionar la primera línea de un elemento. p:first-line { text-transform: uppercase; }
- 85. Pseudo-‐elementos • :first-‐lexer • Permite seleccionar la primera letra de la primera línea de texto de un elemento. p:first-letter { text-transform: uppercase; }
- 86. Pseudo-‐elementos • :before y :a|er • Se uIlizan en combinación con la propiedad content. • Añaden contenidos antes o después del contenido original. h1:before { content: "Capítulo - "; } p:after { content: "."; }
- 87. Pseudo-‐elementos • En CSS3 cambia la sintaxis de los pseudo-‐ elementos, se cambia “:” por “::”. • CSS3 añade un pseudo-‐elemento nuevo ::selección, el cual selecciona el texto que ha seleccionado un usuario con su ratón o teclado.
- 88. Pseudo-‐clases • :first-‐child • Selecciona el primer elemento hijo de un elemento. p em:first-child { color: red; } <p>Esto <span><em>es un texto</em></span> dentro de una etiqueta de <em>parrafo</em>.</p>
- 89. Pseudo-‐clases • :link y :visited • Se uIlizan para aplicar esIlos a los enlaces de una misma página. a:link { color: red; } a:visited { color: green; }
- 90. Pseudo-‐clases • :hover, :acIve y :focus • :hover se acIva cuando el usuario pasa el ratón por encima de un elemento. • :acIve se acIva cuando el usuario pulsa sobre cualquier elemento. Se muestra solo el intervalo de Iempo en el que el usuario pulsa y suelta el botón del ratón. • :focus se acIva cuando el elemento Iene el foco del navegador, es decir, cuando el elemento está seleccionado.
- 91. Pseudo-‐clases • En CSS3 se añaden varias pseudo-‐clases nuevas. • elemento:nth-‐child(numero) • elemento:nth-‐last-‐child(numero) • elemento:empty • elemento:first-‐child y elemento:last-‐child • elemento:nth-‐of-‐type(numero) • elemento:nth-‐last-‐of-‐type(numero) • :not(elemento) li:nth-child(2n+1) { ... } /* selecciona todos los elementos impares de una lista */ li:nth-child(2n) { ... } /* selecciona todos los elementos pares de una lista */
- 92. Herencia • Cuando se establece el valor de una propiedad en un elemento, sus elementos descendientes heredan de forma automáIca el valor de esa propiedad . <html> <head> <style type="text/css"> body { color: blue; } h1 { font-family: Verdana; } p { color: blue; } </style> </head> <body> <h1>Titular de la página</h1> <p>Un párrafo de texto no muy largo.</p> </body> </html>
- 93. Herencia • Podemos forzar la herencia <html> <head> <!-‐-‐meta charset="UTF-‐8”à <style type="text/css”> ul { background: blue; color: white; margin: 0; padding: 0; } ul li { display: inline; margin: 0; padding: 0 0.5em; border-‐right: 1px solid; } ul li a { /*color: inherit;*/ text-‐decoraIon: none; } </style> </head> <body> <ul> <li><a href="/">Inicio</a></li> <li><a href="/news/">NoIcias</a></li> </ul> </body> </html>
- 94. Cascada • Importancia: – 1. Hojas de esIlo de agentes de usuario. – 2. Declaraciones normales en hojas de esIlo de usuario . – 3. Declaraciones normales en hojas de esIlo de autor. – 4. Declaraciones importantes en hojas de esIlo de autor. – 5. Declaraciones importantes en hojas de esIlo de usuario. • Especificidad. • Orden de las fuentes.
- 95. Unidades de medida • in: pulgadas ("inches", en inglés). Una pulgada equivale a 2.54 cennmetros. • cm: cennmetros. • mm: milímetros. • pt: puntos. Un punto equivale a 1 pulgada/72, es decir, unos 0.35 milímetros. • pc: picas. Una pica equivale a 12 puntos, es decir, unos 4.23 milímetros. • em: (no confundir con la eIqueta <em> de HTML) relaIva respecto del tamaño de letra del elemento. • ex: relaIva respecto de la altura de la letra x ("equis minúscula") del Ipo y tamaño de letra del elemento. • px: (píxel) relaIva respecto de la resolución de la pantalla del disposiIvo en el que se visualiza la página HTML.
- 96. Colores • Colores por palabras clave: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow • RGB Decimal: p { color: rgb(71, 98, 176); } • RGB Porcentual: p { color: rgb(27%, 38%, 69%); } • RGB hexadecimal: p { color: #4762B0; } • RGB con opacidad: p { color: rgba(71, 98, 176, 0.5); }
- 97. Modelo de cajas
- 98. Anchura • Width • Controla la anchura de la caja de los elementos. • No admite valores negaIvos. • Los valores en porcentaje se calculan a parIr de la anchura de su elemento padre. • Por defecto su valor es auto. #lateral { width: 200px; } <div id="lateral"> ... </div>
- 99. Altura • Height • Controla la anchura de la caja de los elementos. • No admite valores negaIvos. • Los valores en porcentaje se calculan a parIr de la anchura de su elemento padre. • Por defecto su valor es auto. #cabecera { height: 60px; } <div id="cabecera"> ... </div>
- 100. Margen • margin-‐le|, margin-‐right, margin-‐top y margin-‐boxom. .destacado { margin-left: 2em; } <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam et elit.</p> <p class="destacado">Vestibulum lectus diam, luctus vel, venenatis ultrices, cursus vel, tellus.</p>
- 101. Margen • CSS define una propiedad especial que permite definir los cuatro márgenes con una sola propiedad: margin. • Si solo se indica un valor, los cuatro márgenes tomarán ese valor. • Si se indican dos valores, el primero se asigna al margen superior e inferior y el segundo a los márgenes izquierdo y derecho. • Si se indican tres valores, el primero se asigna al margen superior, el tercero se asigna al margen inferior, y el segundo se asigna a los márgenes izquierdo y derecho. • Si se indican los cuatro valores el orden de asignación es: superior, derecho, inferior e izquierdo.
- 102. Relleno • Funciona igual que margin. body {padding: 2em} /* Todos los rellenos valen 2em */ body {padding: 1em 2em} /* Superior e inferior = 1em, Izquierdo y derecho = 2em */ body {padding: 1em 2em 3em} /* Superior = 1em, derecho = 2em, inferior = 3em, izquierdo = 2em */ body {padding: 1em 2em 3em 4em} /* Superior = 1em, derecho = 2em, inferior = 3em, izquierdo = 4em */
- 103. Bordes • La anchura se controla con las propiedades: border-‐top-‐width, border-‐right-‐width, border-‐ boxom-‐width y border-‐le|-‐width. div { border-top-width: 10px; border-right-width: 1em; border-bottom-width: thick; border-left-width: thin; }
- 104. Bordes • Podemos uIlizar la propiedad border-‐width para definir simultáneamente los cuatro bordes por igual. p { border-width: thin } /* thin thin thin thin */ p { border-width: thin thick } /* thin thick thin thick */ p { border-width: thin thick medium } /* thin thick medium thick */ p { border-width: thin thick medium thin } /* thin thick medium thin */
- 105. Bordes • El color se controla con las propiedades: border-‐top-‐color, border-‐right-‐color, border-‐boxom-‐color y border-‐le|-‐color. • Podemos uIlizar la propiedad border-‐color para definir simultáneamente los cuatro colores por igual. div { border-top-color: #CC0000; border-right-color: blue; border-bottom-color: #00FF00; border-left-color: #CCC; }
- 106. Bordes • El esIlo se controla con las propiedades: border-‐top-‐style, border-‐right-‐style, border-‐boxom-‐style y border-‐le|-‐style. • Podemos uIlizar la propiedad border-‐style para definir simultáneamente los cuatro esIlos por igual. div { border-top-style: dashed; border-right-style: double; border-bottom-style: dotted; border-left-style: solid; }
- 107. Bordes
- 108. Bordes • CSS también posee una propiedad que permite establecer todos los atributos de forma simultánea: border-‐top, border-‐right, border-‐ boxom y border-‐le|. div { border-top: 1px solid #369; border-bottom: 3px double #369; }
- 109. Bordes • Por úlImo tenemos una propiedad para establecer de manera global el valor de todos los atributos y todos los bordes. div { border: 1px solid red; }
- 110. Bordes • Bordes con esquinas redondeadas div { border:2px solid; border-radius:25px; }
- 111. Bordes • Se le puede añadir sombra a una caja. div { box-shadow: 10px 10px 5px #888888; }
- 112. Bordes • Podemos asignar una imagen para crear el borde div { -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */ -o-border-image:url(border.png) 30 30 round; /* Opera 10.5-12.1 */ border-image:url(border.png) 30 30 round; }
- 113. Fondos • El fondo puede ser un color simple o una imagen. • Solo se visualiza en el área ocupada por el contenido y su relleno. • Hay cinco propiedades para definir los fondos. • Una sexta propiedad que engloba simultáneamente a las demás.
- 114. Fondos • Color • Con CSS3 podemos especificar el área que queremos pintar. body { background-color: #F5F5F5; } background-clip: border-box| padding-box|content-box|initial| inherit;
- 115. Fondos • Imagen • CSS permite establecer simultáneamente un color y una imagen de fondo. • CSS3 permite uIlizar varias imágenes de fondo, tan solo separandolas con una , • También podemos establecer el tamaño de la imagen de fondo. body { background-image: url("imagenes/fondo.png") background-size: 50%;}
- 116. Fondos • RepeIción. • repeat: se repite horizontal y verIcalmente. • repeat-‐x: solo se repite horizontalmente. • repeat-‐y: solo se repite verIcalmente. • no-‐repeat: solo se muestra la imagen una vez. body { background-image: url("imagenes/fondo.png") no-repeat}
- 117. Fondos • Posición. • Se suelen indicar dos valores, el primero indica el desplazamiento horizontal y el segundo el desplazamiento verIcal. #caja1 { background-image: url("fondo.gif"); background-repeat: no-repeat; background-position: bottom left; }
- 118. Fondos • background /* Color e imagen de fondo de la página mediante una propiedad shorthand */ body { background: #222d2d url(./graphics/colorstrip.gif) repeat-x 0 0; } /* La propiedad shorthand anterior es equivalente a las siguientes propiedades */ body { background-color: #222d2d; background-image: url("./graphics/colorstrip.gif"); background-repeat: repeat-x; background-position: 0 0; }
- 119. Fondos • Background-‐origin • Especifica a que debe ser relaIvo la posición de la imagen. background-origin: padding-box|border-box|content- box|initial|inherit;
- 120. Fondos • Gradientes. • Con CSS3 podemos definir gradientes de colores para nuestros fondos. • Los gradientes pueden ser: lineales, radiales, lineal repeIIvo y radial repeIIvo. background: linear-gradient(direction, color-stop1, color-stop2, ...); background: linear-gradient(angle, color-stop1, color- stop2); background: radial-gradient(center, shape size, start- color, ..., last-color);
- 121. Posicionamiento y visualización • Los elementos de bloque ("block elements" en inglés) siempre empiezan en una nueva línea y ocupan todo el espacio disponible. • Los elementos en línea ("inline elements" en inglés) no empiezan necesariamente en nueva línea y sólo ocupan el espacio necesario para mostrar sus contenidos. • Los elementos en línea definidos por HTML son: a, abbr, acronym, b, basefont, bdo, big, br, cite, code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small, span, strike, strong, sub, sup, textarea, x, u, var. • Los elementos de bloque definidos por HTML son: address, blockquote, center, dir, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul.
- 122. Posicionamiento • Cinco modelos diferentes: normal o estáIco, absoluto, relaIvo, fijo y flotante. • El posicionamiento se define mediante la propiedad posiIon. • Normalmente cuando se posiciona una caja también es necesario desplazarla respecto de su posición original o respecto de otro origen de coordenadas. • CSS define cuatro propiedades: top, le|, right y boxom.
- 123. Posicionamiento • Normal o estáIco. • Es el modelo que uIlizan por defecto los navegadores para mostrar los elementos de las páginas. • Se Iene en cuenta si el elemento es de bloque o en línea, sus propiedades width y height y su contenido. • Si un elemento se encuentra dentro de otro, el elemento padre se llama "elemento contenedor" y determina tanto la posición como el tamaño de todas sus cajas interiores.
- 124. Posicionamiento • RelaIvo. • Desplaza una caja respecto de su posición original establecida mediante el posicionamiento normal. • El posicionamiento relaIvo de una caja no afecta al resto de cajas adyacentes.
- 125. Posicionamiento • Absoluto. • Se uIliza para establecer de forma exacta la posición en la que se encuentra la caja de un elemento. • Cuando una caja se posiciona de forma absoluta, el resto de elementos de la página se ven afectados y modifican su posición. • A diferencia del posicionamiento relaIvo, la interpretación de los valores de posicionamiento depende del elemento contenedor de la caja posicionada. • Por tanto, si se quiere posicionar un elemento de forma absoluta respecto de su elemento contenedor, es imprescindible posicionar este úlImo.
- 126. Posicionamiento • Fijo • Caso parIcular del posicionamiento absoluto. • Es inamovible dentro de la ventana
- 127. Posicionamiento flotante • La propiedad CSS que permite posicionar de forma flotante una caja se denomina float. • Cuando una caja se posiciona con modelo de posicionamiento flotante, automáIcamente se convierte en una caja flotante, lo que significa que se desplaza hasta la zona más a la izquierda o más a la derecha de la posición en la que originalmente se encontraba.
- 128. Posicionamiento flotante • La propiedad clear permite modificar el comportamiento por defecto del posicionamiento flotante para forzar a un elemento a mostrarse debajo de cualquier caja flotante. • La propiedad clear indica el lado del elemento HTML que no debe ser adyacente a ninguna caja posicionada de forma flotante.
- 129. Visualización • La propiedad display permite ocultar completamente un elemento. • El resto de elementos de la página se mueven para ocupar su lugar. • Los valores más usados para la propiedad display son: -‐ block: muestra un elemento como si fuera un elemento de bloque. -‐ inline: visualiza un elemento en forma de elemento en línea. -‐ none: oculta el elemento.
- 130. Visualización • La propiedad visibility permite hacer invisible un elemento. • El resto de elementos no modifican su posición. • Los valores más usados para la propiedad visibility son: -‐ hidden: convierte una caja en invisible. -‐ collapse: solo se puede uIlizar en las filas, grupos de filas, columnas y grupos de columnas de una tabla.
- 131. Visualización • La propiedad overflow permite controlar la forma en la que se visualizan los contenidos que sobresalen de sus elementos. -‐ visible: el contenido no se corta y se muestra lo que sobresale. -‐ hidden: el contenido sobrante se oculta. -‐ scroll: solamente se visualiza el contenido que cabe dentro de la zona reservada, pero también se muestran barras de scroll que permiten visualizar el resto del contenido. -‐ auto: el comportamiento depende del navegador, aunque normalmente es el mismo que scroll.
- 132. Visualización • UIlizando la propiedad z-‐index es posible crear páginas complejas con varios niveles o capas. • El valor más común de z-‐index es un número entero. • z-‐index:8 < z-‐index:10 < z-‐index:12
- 133. Tipogra†as y efectos de texto • Color • Establece el color del texto. h1 { color: #369; } p { color: black; } a, span { color: #B1251E; } div { color: rgb(71, 98, 176); }
- 134. Tipogra†as y efectos de texto • Font-‐family • Establece el Ipo de letra del texto: 1. Mediante el nombre de una familia Ipográfica. 2. Mediante el nombre genérico de una familia Ipográfica. font-family: Arial, Helvetica, sans-serif; font-family: "Times New Roman", Times, serif; font-family: "Courier New", Courier, monospace; font-family: Georgia, "Times New Roman", Times, serif; font-family: Verdana, Arial, Helvetica, sans-serif;
- 135. Tipogra†as y efectos de texto • Font-‐size • Permite indicar el tamaño de la letra del texto.
- 136. Tipogra†as y efectos de texto • Font-‐weight • Permite modificar el grosor del texto. #especial em { font-weight: bold; } #especial strong { font-weight: normal; background-color: #FFFF66; padding: 2px; }
- 137. Tipogra†as y efectos de texto • Font-‐style. • Se suele uIlizar para mostrar el texto en cursiva con el valor italic.
- 138. Tipogra†as y efectos de texto • Font • Permite indicar de forma directa algunas o todas las propiedades de la Ipogra†a de un texto. font: 76%/140% Verdana,Arial,HelveIca,sans-‐serif; font: normal 24px/26px "Century Gothic","Trebuchet MS",Arial,HelveIca,sans-‐serif; font: normal .94em "Trebuchet MS",Arial,HelveIca,sans-‐serif; font: bold 1em "Trebuchet MS",Arial,Sans-‐Serif; font: normal 0.9em "Lucida Grande", Verdana, Arial, HelveIca, sans-‐serif; font: normal 1.2em/1em helveIca, arial, sans-‐serif; font: 11px verdana, sans-‐serif;
- 139. Tipogra†as y efectos de texto • Text-‐align • Permite alinear el texto según los valores tradicionales: izquierda (le|), derecha (right), centrado (center) y jusIficado (jusIfy). • Además de alienar el texto de un elemento, también alinea todos sus contenidos como imágenes.
- 140. Tipogra†as y efectos de texto • Line-‐height • Se usa para controlar el interlineado, ya que controla la altura ocupada por cada línea de texto.
- 141. Tipogra†as y efectos de texto • Text-‐decoraIon. • Se usa para decorar un texto. • underline: subraya el texto. • overline: añade una línea a la parte superior. • line-‐through: muestra el texto tachado. • blink: muestra el texto parpadeando. • none: sin ningún Ipo de decoración.
- 142. Tipogra†as y efectos de texto • Text-‐transform. • Se usa para transformar el texto. • -‐ uppercase: texto en mayúsculas. • -‐ lowercase: texto en minúsculas. • -‐ capitalize: la primera letra de cada palabra en mayúscula.
- 143. Tipogra†as y efectos de texto • Text-‐shadows • Permite crear sombras en los textos. h1 { text-shadow: 5px 5px 5px #bbbbbb; }
- 144. Tipogra†as y efectos de texto • Permite que se usen fuentes que no están instaladas en el ordenador clientes y tomarlas directamente del servidor. @font-face { font-family: myFirstFont; src: url(sansation_light.woff); } div { font-family:myFirstFont; }
- 145. Layout mulIcolumna • CSS3 incorpora reglas para maquetado mulIcolumna. • column-‐count: especificaremos el número de columnas. • column-‐width: servirá para definir la anchura de las disIntas columnas a crear. • column-‐gap: nos permiIrá definir el espacio en blanco entre columnas. • column-‐rule: servirá para crear una línea divisoria entre las columnas.
- 146. Animaciones y transiciones • Transform • Aplica una transformación 2D o 3D a un elemento.
- 147. Animaciones y transiciones • Transform • Aplica una transformación 2D o 3D a un elemento. • Transformaciones 2D: translate, rotate, scale y skew
- 148. Animaciones y transiciones • Transform • Aplica una transformación 2D o 3D a un elemento. • Transformaciones 2D: translate, rotate, scale y skew. • Transformaciones 3D: rotateX y rotateY
- 149. Animaciones y transiciones • Podemos añadir transiciones cuando cambiamos de un esIlo a otro. • Para conseguir una transición debemos especificar: -‐ La propiedad CSS a la que queremos añadir el efecto. -‐ La duración del efecto.
- 150. Animaciones y transiciones • Debemos crear una regla @keyframes • Podemos usar porcentajes para definir cuando ocurrirá la animación. • Podemos usar las palabras “from” y “to” para definir el principio y el final. @keyframes myfirst { from {background: red;} to {background: yellow;} }
- 151. Técnicas de maquetación • Centrar una página horizontalmente. • anchura fija adecuada y centrar la página horizontalmente respecto de la ventana del navegador. • Si le damos al ancho un valor porcentual podemos conseguir un diseño dinámico o líquido.
- 152. Técnicas de maquetación • Diseño a dos columnas con cabecera y pie de página.
- 153. Técnicas de maquetación • Diseño a tres columnas
- 154. TEMA 4. DISEÑO WEB RESPONSIVE
- 155. Introducción • Corresponde a una tendencia de creación de páginas web que pueden ser visualizadas en todo Ipo de disposiIvos sin necesidad de crear una versión diferente para cada uno de ellos. • CSS3 Media Queries y un layout flexible. • El siIo web detecta con que Ipo de disposiIvo está accediendo el usuario y muestra la versión más opImizada para ese medio.
- 156. Introducción • No es lo mismo enfocar el diseño a la resolución de la pantalla que al ancho del navegador.
- 157. Viewport • Fue inicialmente creada por Apple para definir diversas directrices sobre como el iPhone debe renderizar un documento web. • Sirve para definir que área de pantalla está disponible al renderizar un documento, cuál es su nivel de escalado que puede realizar el usuario, así como si el navegador debe mostrarla con algún zoom inicial. • El viewport corresponde con el área que está disponible en la pantalla del navegador donde se mostrará la página web. • En el caso de disposiIvos móviles, no corresponde al tamaño real de la pantalla en píxeles, sino al espacio que la pantalla está emulando que Iene.
- 158. Viewport • La eIqueta META dispone de los siguientes parámetros: -‐ Width: anchura virtual del viewport. -‐ Height: altura virtual del viewport. -‐ IniIal-‐scale: la escala inicial del documento. -‐ Minimum-‐scale: la escala mínima que se puede poner en el documento. -‐ Maximum-‐scale: la escala máxima que se puede poner en el documento. -‐ User-‐scalable: si se permite o no hacer zoom al usuario.
- 159. Viewport <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1"> • Con width=device-‐width conseguimos que el viewport sea igual a la anchura real de la pantalla del disposiIvo, de modo que no se tratará de emular una pantalla mayor de lo que realmente es. • Con iniIal-‐scale=1 conseguimos que no se haga zoom sobre el documento. • Con user-‐scalable=no conseguimos que el usuario no pueda hacer zoom.
- 160. El layout fluido • Se diseña con la idea en mente de que se expandan hasta ocupar el total disponible o una parte de pantalla del disposiIvo que renderiza la página web. • Están basados en anchos por porcentajes y sus elementos se redimensionan si cambiamos la resolución o si visualizamos la página desde diferentes disposiIvos. • En la mayoría de ocasiones, no todos los contenedores usan valores con porcentaje, muchos usan valores con un ancho fijo en píxeles. Esto úlImo es muy común en menús laterales por ejemplo.
- 161. El layout fluido
- 162. El layout fluido
- 163. El layout fluido • Iene un inconveniente cuando el ancho del disposiIvo que visita la página es muy grande y el contenido escaso. • También puede darse el caso contrario, que el ancho del disposiIvo sea demasiado pequeño y en una página web con muchos elementos al comprimirlos tanto toda la maquetación se descuadre.
- 164. Fuentes flexibles • Si deseamos que aumente de manera proporcional el tamaño del texto, deberemos indicar el tamaño del texto de manera relaIva en el elemento padre de mas alta jerarquía. body{font-size: 100%} • Después para cada caso le daremos un tamaño en em.
- 165. Fuentes flexibles • Para pasar un valor px a em: • Target/context = result • Target: tamaño de letra que queremos conseguir. • Context: tamaño de fuente base del navegador. • Para pasar 32px a em: 32/16= 2em
- 166. Imágenes flexibles • Problema: cuando la imagen excede del tamaño del contenedor, la imagen excederá del tamaño de este. • Solución: img { width: 100%} • De esta manera se adaptará al ancho del contenedor ocupando el 100% del mismo.
- 167. Imágenes flexibles • Otro problema: Cuando el contenedor es más grande que la imagen, está intentará llenar el 100% del contenedor y ocurrirá un pixelado de la imagen. • Solución: img { max-width: 100%} • De esta manera conseguimos que la imagen sea fluida pero hasta un límite. -‐ si el contenedor Iene 300px nuestra imagen de 400px ocupará 300px. -‐ si el contenedor Iene 400px nuestra imagen de 400px ocupará 400px. -‐ si el contenedor Iene 1200px nuestra imagen de 400px ocupará 400px.
- 168. Media queries de CSS3 • El diseño sensible (responsive) nos ofrece todo el control que tendríamos con un diseño de ancho fijo y nos ofrece mucha más flexibilidad que el diseño fluido. • Los media queries forman parte de CSS3 e inspeccionan las caracterísIcas †sicas del medio que va a mostrar nuestro diseño. • Una media query consiste en un Ipo de medio y al menos una consulta que limita las hojas de esIlo uIlizando caracterísIcas del medio como ancho, alto y color, la cual se resuelve como verdadera o falsa.
- 169. Media queries de CSS3 • Podemos uIlizar las media queries de tres formas diferentes: @media [only|not] <media_type> [ and (<media_feature>:value)]*] { /* Aquí van las reglas CSS necesarias */ } <link rel="stylesheet" type="text/css" media="<media_type> [ and (<media_feature>:value)]*]" href="<fichero_css>" /> @import url("<fichero_css>") <media_type> [ and (<media_feature>:value)]*];
- 170. Media queries de CSS3 • Algunos ejemplos: • Aplicar una serie de reglas para pantallas superiores a 1200px: @media screen and (min-width: 1200px) {} • Aplicar una hoja de esIlos diferente para anchos de pantalla inferiores a 480px: <link rel="stylesheet" type="text/css" media="screen and (max-width: 480px)" href="style.css" /> @import url("style.css") screen and (max-width: 480px); • Aplica hojas de esIlo diferentes según la orientación de la pantalla: <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
- 171. Media queries de CSS3 • Los <media_type> hacen referencia al Ipo de medio: – all: todos los Ipos de medios. – screen: pantallas. – aural: sintenIzadores de sonido. – braille: disposiIvos de retroalimentación braille. – embossed: impresoras braille. – handheld: disposiIvos pequeños portáIles. – print: impresoras. – projecIon: proyectores. – xy: teleIpos, terminales, etc... – tv: televisiones.
- 172. Media queries de CSS3 • Los <media_feaures> hacen referencia a carácterísIcas del medio:
- 173. Media queries de CSS3 • device-‐width, device-‐height (max y min) • Describe la anchura/altura del disposiIvo de salida (la pantalla y no el área del documento a renderizar). • Pantalla de al menos 800 píxeles: <link rel="stylesheet" media="screen and (max- device-width: 799px)" />
- 174. Media queries de CSS3 • Color • Indica el número de bits por componente de color del disposiIvo de salida. Si el disposiIvo no soporta colores, este valor es 0. • 4 bits por componente de color: @media all and (min-color: 4) { ... }
- 175. Media queries de CSS3 • Color-‐index • Indica el número de entradas en la tabla de colores para el disposiIvo de salida. • 256 colores: @media all and (min-color-index:256) { ... }
- 176. Media queries de CSS3 • Aspect-‐raIo • Representa la razón de aspecto de los pixeles horizontales (primer termino) a los pixeles verIcales (segundo termino). • Mismo ancho que alto: @media screen and (min-aspect-ratio: 1/1) { ... }
- 177. Media queries de CSS3 • Grid • Determina cuando el disposiIvo de salida es un disposiIvo de cuadrícula (pantalla de teléfono de solo texto). • DisposiIvo portaIl con una pantalla de 15 caracteres o más estrecha: @media handheld and (grid) and (max-width: 15em) { ... }
- 178. Media queries de CSS3 • Monochrome • Indica el número de bits por píxel de un disposiIvo monocromáIco. • Todos los disposiIvos monocromáIcos: @media all and (monochrome) { ... }
- 179. Media queries de CSS3 • Scan • Describe el proceso de exploración de televisión en los disposiIvos de salida (progressive o interlace). • Televisores de exploración progresiva: @media tv and (scan: progressive) { ... }
- 180. Media queries de CSS3 • ResoluIon • Indica la resolución (densidad de pixeles) del disposiIvo de salida, un puntos por pulgada (dpi) o en puntos por cennmetro (dpcm). • 300 dpi de resolución: @media print and (min-resolution: 300dpi) { ... }
- 181. Media queries de CSS3 • OrientaIon • Indica cuando el disposiIvo esta en modo landscape (el ancho de la pantalla es mayor al alto) o modo portrait (el alto de la pantalla es mayor al ancho). • esIlo solo en orientación verIcal (portrait): @media all and (orientation: portrait) { ... }
- 182. Media queries de CSS3 • Width/height • Describe el ancho/alto de la superficie a renderizar en el disposiIvo de salida, como el ancho de la ventana de un documento. • 320px, 480px, 600px, 768px, 900px y 1200(+)px. • Cuando la ventana Iene un ancho entre 500 y 800 píxeles: @media screen and (min-width: 500px) and (max-width: 800px)
- 183. TEMA 5. TECNICAS SEO
- 184. Introducción • SEO: proceso de transformación de un siIo web para mejorar el posicionamiento en los principales buscadores y aumentar el tráfico de usuarios o clientes. • No obstante hay que crear contenidos para las personas, no para los buscadores.
- 185. Introducción • Básicamente estas técnicas consisten en: -‐ Realizar un estudio completo de palabras clave para su siIo. -‐ Actualizar y añadir eIquetas META. -‐ Mejorar la estructura del siIo (Encabezados y eIquetas alt, texto en negrita, enlaces, etc.). -‐ Integrar las palabras clave en el contenido del siIo. -‐ Enviar esos cambios a los motores de búsqueda. -‐ Llevar el seguimiento de los resultados. -‐ Valorar los resultados y opImizar repiIendo el proceso.
- 186. Introducción • Elegir un buen alojamiento (localizado en el país de la web y rápido). • Indexarse de manera manual. • robots.txt User-agent: * Disallow: /archivo.html Disallow: /carpeta/ • sitemap.xml <urlset> <url> <loc>http://www.ejemplo.com</loc> <lastmod>2014-01-01</lastmod> <change>weekly</change> <priority>1</priority> </url> </urlset>
- 187. Meta eIquetas • META descripción: proporciona a los motores de búsqueda un resumen sobre la página y debe contener las palabras clave que hemos extraído del estudio previo. Hay que procurar que cada página web que conforman el siIo tenga una descripción diferente. • META Keywords: obsoleta, aunque se sigue usando. En esta eIqueta se ponen las palabras clave por las que te quieres posicionar separadas por comas. • META robots: la usamos solo para páginas que no queremos que sean indexadas (noindex, nofollow).
- 188. Estructura y elementos • Nombre de dominio. • Tener en cuenta en que país queremos posicionar la web para escoger la extensión. • Usar palabras clave en el dominio. • AnIgüedad.
- 189. Estructura y elementos • Título. • La eIqueta Itle indica el tema sobre el que trata una página. • Un Itulo diferente para cada página.
- 190. Estructura y elementos • Encabezados. • H1 es el Itulo principal de la página. • Cada página debe contener solo un H1. • H2 para los subntulos. • El resto de encabezados no se Ienen en cuenta en el SEO.
- 191. Estructura y elementos • OpImizar imágenes. • Nombre descripIvo. • Usar atributo alt.
- 192. Estructura y elementos • URL amigables. • NO: hxp://www.ejemplo.com/?p=1 • SI: hxp://www.ejemplo.com/una-‐pagina • La mayoría de gestores de contenido pueden hacer esto automáIcamente, pero si hemos de hacerlo manualmente, un tutorial: hxp://www.emenia.es/como-‐crear-‐urls-‐amigables-‐ con-‐htaccess/
- 193. Contenidos • Publicar contenidos de calidad, bien estructurados y que aporten valor al lector. • Al menos 400 palabras con una densidad de palabras clave del 2-‐3%. • Los usuarios permanecen más Iempo en la web y pueden comparIr ese contenido. • Mantener el siIo actualizado (blog).
- 194. Enlaces externos • PageRank: valor numérico que representa la popularidad de una página web. • Más popularidad cuanto más se hable de I. • Estrategia Link Building. • ¡Cuidado con las trampas!
- 195. Redes sociales • SMO (Social Media OpImizaIon) • Conseguir que nuestros contenidos sean más enlazados. • Actualización constante de nuestro contenido. • Tener presencia en redes sociales. • Facilitar medios para que los usuarios compartan nuestro contenido.
- 196. TEMA 6. JQUERY
- 197. Introducción • Es una librería. • CaracterísIcas: – Acceder a elementos del documento. – Modificar la apariencia de una web. – Alterar el contenido de un documento. – Responder a la interacción de un usuario. – Animar cambios realizados a un documento. – Recuperar información de un servidor sin refresco. – Simplificar tareas JavaScript comunes.
- 198. Introducción • Esta sentencia ejecutará el código introducido cuando el documento se haya cargado: $(documento).ready(function(){ … código… })
- 199. Eventos • Reacción a la interacción del usuario y otros eventos. • jQuery amplía los mecanismos disponibles en JavaScript.
- 200. Eventos • Eventos de documento. • .load(): cuando se cargan todos los elementos del DOM. • .ready(): cuando se cargan todos los elementos del DOM.
- 201. Eventos • Eventos de Navegador • .error(): cuando se produce un error JavaScript. • .resize(): cuando se redimensiona la ventana del navegador. • .scroll(): cuando se produce desplazamiento por la ventana del navegador
- 202. Eventos • Eventos de formulario. • .blur(): cuando un elemento input pierde el foco. • .change(): cuando un elemento de formulario cambia su valor. • .focus(): cuando un elemento de formulario Iene el foco. • .focusin(): permite saber cuando un elemento o alguno de sus hijos gana el foco. • .select(): cuando se selecciona un texto del elemento sobre el que se gesIona el evento. Se aplica solo a los textarea y a los input de Ipo texto. • .submit():cuando se envían los datos del formulario.
- 203. Eventos • Eventos de teclado. • .focusout(): cuando un elemento pierde el foco. • .keydown(): cuando se pulsa una tecla. • .keypress(): cuando se pulsa una tecla, pero a diferencia del anterior, si mantenemos la tecla pulsada, este evento se capturaría varias veces. • .keyup(): cuando se suelta la tecla que el usuario estaba pulsando.
- 204. Eventos • Eventos de ratón. • .click(): cuando pinchamos sobre un elemento al que tenemos asociado el evento. • .dblclick(): cuando pinchamos dos veces sobre un elemento. • .hover(): cuando pasamos el cursor por encima de un elemento. • .mousedown(): cuando pinchamos sobre un elemento y antes del soltar el botón. • .mouseenter(): cuando el ratón entra en el elemento asociado al evento. • .mouseleave(): cuando el ratón entra en el elemento asociado al evento. • .mousemove(): cuando el ratón está encima del elemento. • .mouseout(): cuando el ratón deja de estar encima del elemento. • .mouseover(): cuando el ratón entra por primera vez en un elemento. • .mouseup(): cuando al haber pulsado con el ratón sobre un elemento, soltamos el botón. • .toggle(): se uIliza para generar comportamientos de cambio de estado generados al pinchar sobre un elemento, por ejemplo, si queremos que al pinchar sobre un elemento se muestre y que al volver a pinchar se oculte, esto lo podemos conseguir asociando dos o más funciones al mismo evento que se van ejecutando de manera secuencial.
- 205. Eventos • Asignador de eventos. • .bind(): nos permite asociar funciones a eventos de elementos tanto del DOM como del navegador. • .delegate(): asigna eventos para elementos específicos que son hijos de los elementos seleccionados. • .die(): nos permite borrar controladores de eventos que hemos añadido con el siguiente método. • .live(): asigna controladores de eventos para los elementos seleccionados. • .off(): borrar controladores asociados con el método on. • .on(): asigna controladores de eventos a los elementos seleccionados y sus elementos descendientes. • .one(): igual que bind pero el elemento sólo se ejecuta una vez. • .trigger(): acIva el evento especificado y el comportamiento predeterminado de un evento para los elementos seleccionados. • .unbind(): borrar funciones asociadas a eventos mediante la función bind. • .undelegate(): borrar eventos asociados con delegate.
- 206. Eventos • El objeto event es pasado a todos los eventos que se lanzan y pone a nuestra disposición una serie de atributos para trabajar con eventos. • Event.data: devulve los datos que hayamos podido pasar al evento cuando se asocia con bind. • Event.preventDefault: anula la acción predeterminada. • Event.stopPropagaIon: previene que se ejecute cualquier event que pudiera estar asociado a los padres del elemento dentro del arbol DOM. • Event.target: es el elemento DOM que inicio el evento.
- 207. Modificación y animación de propiedades CSS • Mediante jQuery podemos cambiar las propiedades CSS de un elemento para darle un esIlo diferente. • jQuery dispone de un método para que esos cambios se produzcan mediante una animación.
- 208. Modificación y animación de propiedades CSS • .css() • Este método sirve tanto para recibir el valor de un atributo CSS como para asignarle un nuevo valor y su funcionamiento depende de los parámetros que podamos enviarle. • Podemos cambiar varios atributos a la vez. $("#micapa").css({ "background-color": "#ff8800”, "position": "absolute”, "width": "100px”, "top": "100px”, "left": "200px” })
- 209. Modificación y animación de propiedades CSS • addClass() y removeClass() • Estas funciones nos permiten añadir o eliminar nombres de clase a un elemento HTML. $("#micapa").addClass("fondo_rojo"); $("#micapa").removeClass("fondo_rojo");
- 210. Modificación y animación de propiedades CSS • .animate() • Nos permite animar varias propiedades, con valores numéricos, de CSS en un solo paso. • Propiedades: atributos CSS que queremos actualizar. • Duración: duración de la animación. • Función de animación: sirve para indicar como se realizará la animación. • Callback: función que se ejecutará una vez terminada la animación. .animate( Propiedades, [ Duración], [ Función de animación ], [ Callback ] )
- 211. Control de visibilidad • Mediante una serie de métodos podemos ser capaces de ocultar y mostrar elementos. • Además jQuery dispone de varios métodos que nos proporcionan una animación sin necesidad de usar funciones de animación.
- 212. Control de visibilidad • .hide() • Este método oculta los elementos seleccionados. $( ".elemento" ).hide();
- 213. Control de visibilidad • .show() • Este método muestra los elementos seleccionados. $( ".elemento" ).show();
- 214. Control de visibilidad • .toggle() • Este método alterna entre ocultar y mostrar los elementos seleccionados. • Muestra elementos que están ocultos y oculta elementos que están visibles. $( ".elemento" ).toggle();
- 215. Control de visibilidad • .fadeIn() y .fadeOut() • Estos métodos muestran y ocultan respecIvamente mediante un efecto de opacidad. $( ".elemento" ).fadeIn("slow", function() { alert( "Animación completa." ); }); $( ".elemento" ).fadeOut("fast", function() { alert( "Animación completa." ); });
- 216. Control de visibilidad • .fadeToggle() • Este método alterna entre ocultar y mostrar los elementos seleccionados aplicando un efecto de opacidad. $( ".elemento" ).fadeToggle();
- 217. Control de visibilidad • .slideUp() • Este método oculta los elementos seleccionados aplicándoles un efecto de deslizamiento. $( ".elemento" ).slideUp();
- 218. Control de visibilidad • .slideDown() • Este método muestra los elementos seleccionados aplicándoles un efecto de deslizamiento. $( ".elemento" ).slideDown();
- 219. Control de visibilidad • .slideToggle() • Este método alterna ocultar y mostrar los elementos seleccionados aplicándoles un efecto de deslizamiento. $( ".elemento" ).slideToggle();
- 220. Integración de plug-‐ins • El primer paso para incluir un plug-‐in jQuery sería incluirlo en el <head>. • Hay que incluirlo después de incluis la librería jQuery. <head> <script src=”jquery.js” type=”text/ javascript”><script> <script src=”jquery.plugin.js” type=”text/javascript”></script> <title>…</title> </head>
- 221. Integración de plug-‐ins • Incluir un archivo JavaScript personalizado en el que uIlizamos los métodos que el plug-‐in crea o amplía. • También podemos uIlizar estos métodos en el mismo <head> mediante las eIquetas <script></script>.
- 222. Integración de plug-‐ins <head> <script src=”jquery.js” type=”text/javascript”></script> <script src=”jquery.plugin.js” type=”text/javascript”></script> <title>Título</title> <script> $(document).ready(function(){ $(‘#id-elemento’).funcionPlugin(); }); </script> </head> <body> <div id=“id-elemento”></div> </body>
- 223. Integración de plug-‐ins • Muchos plug-‐ins Ienen flexibilidad incorporada proporcionando una serie de parámetros opcionales que podemos establecer para modificar su comportamiento. $(document).ready(function(){ $(‘#id-elemento’).funcionPlugin({ send: true, message: “Este plugin es sensacional” }); });
- 224. Integración de plug-‐ins • Normalmente también necesitaremos crear algún Ipo de estructura HTML. • Puede ser también incluso necesario incluir algún fichero CSS.
- 225. <head> <script src=”jquery.js” type=”text/javascript”></script> <script src=”slider.js” type=”text/javascript”></script> <link href=”slider.css” type=”text/css” rel=”stylesheet”/> <script> $(document).ready(funcIon(){ $(‘#id-‐elemento’).slider({ Ime: 600 }); }); </script> </head> <body> <div id=”slider”> <ul> <li><img src=”slider1.jpg” alt=”Imagen 1”</li> <li><img src=”slider2.jpg” alt=”Imagen 2”</li> <li><img src=”slider3.jpg” alt=”Imagen 3”</li> </ul> </div> </body>
- 226. TEMA 7. INTEGRAR CAPA SOCIAL
- 227. Integración con redes sociales • Facebook: hxps://developers.facebook.com/docs/ plugins/ • Twixer: hxps://dev.twixer.com • Google+: hxps://developers.google.com/+/web/ • LinkedIn: hxps://developer.linkedin.com/plugins