Este documento presenta un curso sobre las nuevas tecnologías HTML5 y CSS3. Explica la historia y objetivos de HTML5, sus principales características como compatibilidad y nuevos elementos como video, audio, canvas y formularios. También cubre las novedades de HTML5 como nuevos tipos de contenido, elementos estructurales y APIs para el almacenamiento de datos y drag-and-drop. Finalmente, incluye ejemplos prácticos para utilizar estas tecnologías.
HTML5 es la respuesta de ingenieros y especialistas de empresas y organizaciones tecnológicas dedicadas a la web, quienes propusieron un estándar acorde a los nuevos tiempos y necesidades. Hoy en día, HTML5 está en vías de convertirse en un estándar oficial y es la punta del iceberg de un conjunto de tecnologías de web abierta destinadas a revolucionar la forma en que se construyen sitios y aplicaciones web.
HTML5 Nuevas Etiquetas Semánticas. Se presentan y describen las nuevas etiquetas del estándar HTML5. Aunque se repasan la mayoría de ellas se hace un mayor énfasis en etiquetas y atributos para formularios.
Curso de 4 horas con con ejemplos. Bastante completo, incluye canvas, video, almacenamiento, protocols, geolocation, WebRTC, .. y muchos punteros a sitios vistosos
HTML5 es la respuesta de ingenieros y especialistas de empresas y organizaciones tecnológicas dedicadas a la web, quienes propusieron un estándar acorde a los nuevos tiempos y necesidades. Hoy en día, HTML5 está en vías de convertirse en un estándar oficial y es la punta del iceberg de un conjunto de tecnologías de web abierta destinadas a revolucionar la forma en que se construyen sitios y aplicaciones web.
HTML5 Nuevas Etiquetas Semánticas. Se presentan y describen las nuevas etiquetas del estándar HTML5. Aunque se repasan la mayoría de ellas se hace un mayor énfasis en etiquetas y atributos para formularios.
Curso de 4 horas con con ejemplos. Bastante completo, incluye canvas, video, almacenamiento, protocols, geolocation, WebRTC, .. y muchos punteros a sitios vistosos
Conociendo las novedades, ventajas y nuevos elementos que nos ofrece esta versión de HTML.
Fotos: https://www.facebook.com/media/set/?set=a.601422266572455.1073741831.519082574806425&type=1&l=0930432fd8
Presentación del "Seminario Introducción a HTML5 y CSS3" impartido el 28 de octubre de 2010 en el CEU San Pablo por Paradigma Tecnológico.
Desde Paradigma, esperamos que el seminario cumpliera con vuestras expectativas y que os haya servido para conocer dichos estándares y os sirva de punto de partida para el desarrollo de nuevas aplicaciones web.
Muchas gracias.
Bases de la maquetación de una web en HTML5, explicando e incorporando todas sus ventajas y novedades, así mismo, se darán a conocer diversas herramientas para el diseño y maquetación de webs de forma sencilla.
Se darán respuesta a las siguientes cuestiones:
¿Qué es HTML?
¿En qué consiste HTML?
¿Cómo se escriben las etiquetas?
¿Cómo se muestra una página Web?
¿Qué es la semántica HTML?
¿Qué es HTML5?
¿Por qué surge HTML5?
¿Qué va a pasar con las Web en HTML4?
¿Cómo se crea una página Web?
¿Cómo se declara un documento HTML5?
¿Qué etiquetas se usan para maquetar en HTML5?
¿Qué herramientas usaremos?
El taller correrá a cargo de Antonio Cruz Gómez, amigo y presidente de la Asociación EnRed 2.0 (http://enred20.org/)
Para más información puedes mirar la web: http://enred20.org/node/39
O ponerte en contacto con nosotros o con la Asociación EnRed 2.0
Curso de introducción a HTML5 y CSS3 impartido el 1 junio de 2012 a clientes de Paradigma Tecnológico
http://www.paradigmatecnologico.com/blog/curso-de-html5-y-css3/
Conceptos Fundamentales sobre HTML5:
- Definición
- Historia
- Etiquetas Nuevas
- Etiquetas Eliminadas
- Doctype
- Etiqueta HTML
- Encabezado
- La Codificación
- Nueva Organización del Sitio
- Incorporar Video
- Otras Características
- Validación de HTML5
- Soporte De Los Navegadores
- Referencias
HTML 5 es el próximo estándar de sitios web en Internet. La ponencia parte de la historia de Internet para llegar a las implementaciones actuales en los más modernos navegadores de Internet.
Nuevas etiquetas HTML5 estructurales por Joaquin Lara Sierra se encuentra bajo una Licencia Creative Commons Atribución-NoComercial-CompartirIgual 2.5 Colombia.Basada en una obra en http://www.ibm.com/developerworks/ssa/web/library/wa-html5structuraltags/.
Conociendo las novedades, ventajas y nuevos elementos que nos ofrece esta versión de HTML.
Fotos: https://www.facebook.com/media/set/?set=a.601422266572455.1073741831.519082574806425&type=1&l=0930432fd8
Presentación del "Seminario Introducción a HTML5 y CSS3" impartido el 28 de octubre de 2010 en el CEU San Pablo por Paradigma Tecnológico.
Desde Paradigma, esperamos que el seminario cumpliera con vuestras expectativas y que os haya servido para conocer dichos estándares y os sirva de punto de partida para el desarrollo de nuevas aplicaciones web.
Muchas gracias.
Bases de la maquetación de una web en HTML5, explicando e incorporando todas sus ventajas y novedades, así mismo, se darán a conocer diversas herramientas para el diseño y maquetación de webs de forma sencilla.
Se darán respuesta a las siguientes cuestiones:
¿Qué es HTML?
¿En qué consiste HTML?
¿Cómo se escriben las etiquetas?
¿Cómo se muestra una página Web?
¿Qué es la semántica HTML?
¿Qué es HTML5?
¿Por qué surge HTML5?
¿Qué va a pasar con las Web en HTML4?
¿Cómo se crea una página Web?
¿Cómo se declara un documento HTML5?
¿Qué etiquetas se usan para maquetar en HTML5?
¿Qué herramientas usaremos?
El taller correrá a cargo de Antonio Cruz Gómez, amigo y presidente de la Asociación EnRed 2.0 (http://enred20.org/)
Para más información puedes mirar la web: http://enred20.org/node/39
O ponerte en contacto con nosotros o con la Asociación EnRed 2.0
Curso de introducción a HTML5 y CSS3 impartido el 1 junio de 2012 a clientes de Paradigma Tecnológico
http://www.paradigmatecnologico.com/blog/curso-de-html5-y-css3/
Conceptos Fundamentales sobre HTML5:
- Definición
- Historia
- Etiquetas Nuevas
- Etiquetas Eliminadas
- Doctype
- Etiqueta HTML
- Encabezado
- La Codificación
- Nueva Organización del Sitio
- Incorporar Video
- Otras Características
- Validación de HTML5
- Soporte De Los Navegadores
- Referencias
HTML 5 es el próximo estándar de sitios web en Internet. La ponencia parte de la historia de Internet para llegar a las implementaciones actuales en los más modernos navegadores de Internet.
Nuevas etiquetas HTML5 estructurales por Joaquin Lara Sierra se encuentra bajo una Licencia Creative Commons Atribución-NoComercial-CompartirIgual 2.5 Colombia.Basada en una obra en http://www.ibm.com/developerworks/ssa/web/library/wa-html5structuraltags/.
Conferencia guía para el debate del pensamiento crítico con docentes de bachillerato. Esta presentación ha servido para el debate en diferentes Instituciones Educativas. Concreción de objetivos de asignatura y proyectos empleando estandares universales y formas de elevar el nivel cognitivo de las asignaturas
Evidence: Describing my kitchen. ENGLISH DOT WORKS 2. SENA... ..
Evidence: Describing my kitchen. SENA.
ENGLISH DOT WORKS 2. SENA.
3. describing my kitchen. ENGLISH DOT WORKS 2.
activity 3 week 1. ENGLISH DOT WORKS 2.
actividad 3 semana 1. ENGLISH DOT WORKS 2.
2. describing cities and places. ENGLISH DOT WORKS 2. SENA. semana 4 acitivda..... ..
Evidence: describing cities and places.ENGLISH DOT WORKS 2. SENA. ENGLISH DOT WORKS 2.
semana 4 acitivdad 2.ENGLISH DOT WORKS 2.
week 4 acitivty 2. ENGLISH DOT WORKS 2.
3.Evidence: Getting to Bogota.ENGLISH DOT WORKS 2. SENA.semana 4 actividad 3... ..
vidence: Getting to Bogota / Evidencia: Llegando a Bogotá.
ENGLISH DOT WORKS 2. SENA.
ENGLISH DOT WORKS 2.
semana 4 actividad 3.ENGLISH DOT WORKS 2.
week 4 activity 3.ENGLISH DOT WORKS 2. SENA.
Evidence: Going to the restaurant . ENGLISH DOT WORKS 2. SENA... ..
Evidence: Going to the restaurant .
ENGLISH DOT WORKS 2. SENA.
actividad 2 Semana 1. Evidence: Going to the restaurant .
Activity 2 Week 1. Evidence: Going to the restaurant .
Evidence: I can’t believe it.ENGLISH DOT WORKS 2. semana 3 actividad 1.SENA... ..
Evidence: I can’t believe it.ENGLISH DOT WORKS 2. SENA.
ENGLISH DOT WORKS 2.
semana 3 actividad 1.ENGLISH DOT WORKS 2.
week 3 activity 1.ENGLISH DOT WORKS 2.
Evidence: I can’t believe it. SENA.
Evidence: Memorable moments.ENGLISH DOT WORKS 2. SENA. semana 2 actividad 2... ..
Evidence: Memorable moments.ENGLISH DOT WORKS 2. SENA. ENGLISH DOT WORKS 2.
week 2 activity 2.ENGLISH DOT WORKS 2.
semana 2 actividad 2. ENGLISH DOT WORKS 2.
¿Estás pensando en aprender HTML5? ¿Te gustaría participar en un curso sobre esta u otras tecnologías de desarrollo web?. En caso afirmativo no dudes en contactarme. Trabajo en el sector de la formación profesional para el empleo como técnico elearning y desarrollo cursos a medida.
Así mismo si te gustaría organizar tu propio curso sobre esta u otra tecnología puedo ayudarte.
Con esta pequeña guia podras aprender a crear tu propia pagina web, asi como aprender el funcionamiento de las mismas, resolveras tus dudas y ahorraras tiempo al trabajar, ya que tiene funciones mejoradas que HTML.
Índice del libro "Big Data: Tecnologías para arquitecturas Data-Centric" de 0...Telefónica
Índice del libro "Big Data: Tecnologías para arquitecturas Data-Centric" de 0xWord escrito por Ibón Reinoso ( https://mypublicinbox.com/IBhone ) con Prólogo de Chema Alonso ( https://mypublicinbox.com/ChemaAlonso ). Puedes comprarlo aquí: https://0xword.com/es/libros/233-big-data-tecnologias-para-arquitecturas-data-centric.html
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informáticavazquezgarciajesusma
En este proyecto de investigación nos adentraremos en el fascinante mundo de la intersección entre el arte y los medios de comunicación en el campo de la informática.
La rápida evolución de la tecnología ha llevado a una fusión cada vez más estrecha entre el arte y los medios digitales, generando nuevas formas de expresión y comunicación.
Continuando con el desarrollo de nuestro proyecto haremos uso del método inductivo porque organizamos nuestra investigación a la particular a lo general. El diseño metodológico del trabajo es no experimental y transversal ya que no existe manipulación deliberada de las variables ni de la situación, si no que se observa los fundamental y como se dan en su contestó natural para después analizarlos.
El diseño es transversal porque los datos se recolectan en un solo momento y su propósito es describir variables y analizar su interrelación, solo se desea saber la incidencia y el valor de uno o más variables, el diseño será descriptivo porque se requiere establecer relación entre dos o más de estás.
Mediante una encuesta recopilamos la información de este proyecto los alumnos tengan conocimiento de la evolución del arte y los medios de comunicación en la información y su importancia para la institución.
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informáticavazquezgarciajesusma
En este proyecto de investigación nos adentraremos en el fascinante mundo de la intersección entre el arte y los medios de comunicación en el campo de la informática.
La rápida evolución de la tecnología ha llevado a una fusión cada vez más estrecha entre el arte y los medios digitales, generando nuevas formas de expresión y comunicación.
Continuando con el desarrollo de nuestro proyecto haremos uso del método inductivo porque organizamos nuestra investigación a la particular a lo general. El diseño metodológico del trabajo es no experimental y transversal ya que no existe manipulación deliberada de las variables ni de la situación, si no que se observa los fundamental y como se dan en su contestó natural para después analizarlos.
El diseño es transversal porque los datos se recolectan en un solo momento y su propósito es describir variables y analizar su interrelación, solo se desea saber la incidencia y el valor de uno o más variables, el diseño será descriptivo porque se requiere establecer relación entre dos o más de estás.
Mediante una encuesta recopilamos la información de este proyecto los alumnos tengan conocimiento de la evolución del arte y los medios de comunicación en la información y su importancia para la institución.
Actualmente, y debido al desarrollo tecnológico de campos como la informática y la electrónica, la mayoría de las bases de datos están en formato digital, siendo este un componente electrónico, por tanto se ha desarrollado y se ofrece un amplio rango de soluciones al problema del almacenamiento de datos.
Es un diagrama para La asistencia técnica o apoyo técnico es brindada por las compañías para que sus clientes puedan hacer uso de sus productos o servicios de la manera en que fueron puestos a la venta.
Inteligencia Artificial y Ciberseguridad.pdfEmilio Casbas
Recopilación de los puntos más interesantes de diversas presentaciones, desde los visionarios conceptos de Alan Turing, pasando por la paradoja de Hans Moravec y la descripcion de Singularidad de Max Tegmark, hasta los innovadores avances de ChatGPT, y de cómo la IA está transformando la seguridad digital y protegiendo nuestras vidas.
3Redu: Responsabilidad, Resiliencia y Respetocdraco
¡Hola! Somos 3Redu, conformados por Juan Camilo y Cristian. Entendemos las dificultades que enfrentan muchos estudiantes al tratar de comprender conceptos matemáticos. Nuestro objetivo es brindar una solución inclusiva y accesible para todos.
1. HTML5 y CSS3:
cómo sacarles partido hoy
Jose Florido
Madrid · Martes 22 Septiembre 2009
FRONTDAYS www.frontdays.com
2. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
Objetivo del curso
Mostrar el potencial de los nuevos estándares, así como de los
navegadores web de nueva generación y su uso hoy en día,
logrando mantener nuestras páginas web compatibles con
navegadores menos avanzados.
3. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
FRONTDAYS
HTML 5
4. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
Primera parte: HTML5
‣ Historia
‣ Características
‣ Novedades
‣ APIs
‣ Ejercicio práctico: creación de una página con HTML5
5. HTML5 CSS3: cómo sacarles partido
HTML5yyCSS3: cómo sacarles partido hoy hoy FRONTDAYS
FRONTDAYS
HTML 5
Historia de HTML 5
6. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
Historia de HTML5
HTML4
1998
7. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
Historia de HTML5
XHTML1
2000
8. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
Historia de HTML5
XHTML2
2002
9. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
Historia de HTML5
XForms
2003
10. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
Historia de HTML5
WHATG
2004
11. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
Historia de HTML5
HTML5
2007
12. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
Historia de HTML5
Hoy día, las aplicacione web necesitan:
‣ Reproducir video y audio
‣ Acceso a recursos: webcam, micrófono, etc
‣ Trabajar offline
‣ 3D
‣ Geolocalización
‣ Mejores subidas de ficheros
‣ Drag and drop
‣ Complejos elementos de interacción con formularios
13. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
Historia de HTML5
¿2022?
‣ Final Draft en Octubre 2009
‣ Nuevos navegadores: Chrome 3, FireFox 3.5.3, Opera 10, Safari 4
‣ Google Wave
‣ iPhone
14. HTML5 CSS3: cómo sacarles partido
HTML5yyCSS3: cómo sacarles partido hoy hoy FRONTDAYS
FRONTDAYS
HTML 5
Principales características
15. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Principales características
Compatibilidad
Evolución, no revolución
16. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Principales características
Utilidad
Resolver problemas reales
17. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Principales características
Interoperabilidad
Definir el comportamiento de los UA
Gestión de errores
18. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Principales características
Acceso universal
Independencia del medio, i18n, accesible
19. HTML5 CSS3: cómo sacarles partido
HTML5yyCSS3: cómo sacarles partido hoy hoy FRONTDAYS
FRONTDAYS
HTML 5
Novedades
20. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
21. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
22. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Doctype
<!DOCTYPE html> :-)
24. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Metadata content
define la presentación o el comportamiento del resto del
documento, o relaciones del documento con otros documentos.
base, command, link, meta, noscript, script, style, title
25. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Flow content
la mayoría de los elementos usados en el cuerpo de un documento
son de tipo flow.
a, abbr address, article aside, audio, dialog, div, fieldset, figure,
footer, form, h1, h2, img, nav, p, script, section, select, small, span,
strong, table, textarea, time, video,...
26. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Sectioning content
elementos que crean nuevas secciones en el documento
article, aside, nav, section
27. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Heading content
elementos que definen la cabecera de una sección
h1, h2, h3, h4, h5, h6, hgroup
28. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Phrasing content
texto del documento junto con elementos que marcan el texto,
dentro de un párrafo
a, b, string, span, small, time, em,...
29. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Embedded content
elementos que importan otro recurso o contenido de otro
vocabulario dentro del documento
audio, canvas, embed, iframe, img, math, object, svg, video
30. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Interactive content
elementos destinados a interacción con el usuario
a, audio, button, details, embed, iframe, img, input, keygen,
label,menu, object, select, textarea, video
31. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Nuevos elementos
‣ Elementos estructurales
‣ Canvas
‣ Video
‣ Audio
32. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Elementos estructurales I
section representa una sección del documento. Junto con h1, h2,...,
h6 indica la estructura del documento.
article representa una pieza de contenido independiente dentro de
un documento.
aside representa una pieza de contenido que esta menos
relacionada con el resto de la página.
33. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Elementos estructurales II
hgroup representa el encabezado de una sección. Agrupa varios
elementos h1 - h6.
header representa la cabecera de un documento o sección.
footer representa el pie de una sección y puede contener
información sobre el autor, copyright, etc.
34. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
<article>
<hgroup>
<h1>Apples</h1>
<h2>Tasty, delicious fruit!</h2>
</hgroup>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<section>
<h1>Red Delicious</h1>
<p>These bright red apples are the most common found in many
supermarkets.</p>
</section>
<section>
<h1>Granny Smith</h1>
<p>These juicy, green apples make a great filling for
apple pies.</p>
</section>
</article>
35. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Elementos estructurales III
nav representa una sección del documento que contiene
navegación
dialog usado para marcar una conversación
figure usado para asociar una description textual o subtítulos a
algún elemento embedido, como vídeos o imágenes.
37. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Nuevos elementos
canvas crea un lienzo donde es posible crear gráficos u otras
imágenes visuales al vuelo, mediante scripting.
38. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Canvas - accesibilidad
Contenido alternativo
<canvas id="a_canvas" width="400" height="300">
<p>Ops! No canvas support, bad browser!</p>
</canvas>
Problemas de accesibilidad
39. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Canvas - soporte
Soporte extenso por parte de navegadores
* IE utilizando la librería excanvas.js
40. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Canvas - aplicaciones
Efectos y transformaciones (Demo)
Animaciones (Demo)
Tipografías (Cufón)
41. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Nuevos elementos
video un método único para insertar video en la web.
42. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Video - atributos
<video src="http://www.test.com/video.wmv">
your browser does not support the video tag
</video>
Atributos
‣ poster
‣ autobuffer
‣ autoplay
‣ loop
‣ controls
43. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Video - formato / codecs
‣ Ogg Theora (Chrome, Firefox, Opera)
‣ H.264 (Chrome, Safari)
44. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Video - soporte
Soportado por las últimas versiones de casi todos los
navegadores, excepto IE
48. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Audio - demo
HTML5 Audio player
49. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Audio - soporte
Soportado por las últimas versiones de casi todos los
navegadores, excepto IE
50. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Nuevos reglas para el código
En HTML4 / XHTML1:
<li>
<p><a href="http://www.google.com">Ir a google.com</a></p>
<a href="http://www.google.com"><img src="" alt="logo de
Google" /></a>
</li>
51. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Nuevos reglas para el código
En HTML5:
<li>
<a href="http://www.google.com">
<p>Ir a google.com</p>
<img src="" alt="logo de Google" />
</a>
</li>
52. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Elementos que desaparecen
basefont frameset
big noframes
center acronym
font applet
s isindex
strike dir
tt
u
frame
53. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Forms
Opera 10 demo
54. HTML5 CSS3: cómo sacarles partido
HTML5yyCSS3: cómo sacarles partido hoy hoy FRONTDAYS
FRONTDAYS
HTML 5
APIs
55. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: APIs
APIs en navegadores
‣ getElementsByClassName
‣ querySelector
‣ Almacenamiento de datos en el cliente, por sesión y persistente
‣ Mensajes entre documentos
‣ Drag-and-drop
56. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: APIs
getElementsByClassName(“abrir”)
<li id="uno">
<p>Link 1</p>
<a href="#" class="abrir">Abrir link 1</a>
</li>
<li id="dos">
<p>Link 2</p>
<a href="#" class="abrir">Abrir link 2</a>
</li>
<li id="tres">
<p>Link 3</p>
<a href="#" class="abrir">Abrir link 3</a>
</li>
57. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: APIs
querySelector(“#dos .abrir”)
<li id="uno">
<p>Link 1</p>
<a href="#" class="abrir">Abrir link 1</a>
</li>
<li id="dos">
<p>Link 2</p>
<a href="#" class="abrir">Abrir link 2</a>
</li>
<li id="tres">
<p>Link 3</p>
<a href="#" class="abrir">Abrir link 3</a>
</li>
58. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: APIs
Almacenamiento de datos en el cliente, por sesión y persistente
‣ Aplicaciones web offline
‣ Menor latencia
‣ Mejor rendimiento
‣ Mayor privacidad
‣ Safari Notes demo
59. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: APIs
Mensajes entre documentos
‣ Cross-domain
‣ Sin necesidad de configuración
‣ postMessage()
‣ John Resig´s messaging demo
60. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: APIs
Drag-and-drop
‣ Drag and drop nativo del sistema
‣ Arrastrar objetos al navegador y entre ventanas del navegador
‣ Drag-and-drop demo
‣ 280 slides video demo
61. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Ejercicio
Estructura
62. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Ejercicio
HTML4
63. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Ejercicio
HTML5
64. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
FRONTDAYS
CSS 3
65. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
Segunda parte: CSS3
‣ Historia
‣ Selectores
‣ Módulos y nuevas propiedades
‣ Ejercicio práctico: aplicación de CSS3 a una página
66. HTML5 CSS3: cómo sacarles partido
HTML5yyCSS3: cómo sacarles partido hoy hoy FRONTDAYS
FRONTDAYS
CSS 3
Historia de CSS 3
67. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
Historia de CSS3
CSS1
1996
68. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
Historia de CSS3
CSS2
1998
69. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
Historia de CSS3
CSS3
2000 (WD)
70. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
Historia de CSS3
CSS2.1
2002 (WD)
71. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Principios
Compatibilidad
Hacia delante y hacia atrás
72. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Principios
Complementariedad
Cambiar CSS si cambiar HTML
73. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Principios
Independencia
De plataforma y de dispositivo
74. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Principios
Simplicidad, flexibilidad, riqueza
Sencillo y potente
75. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Principios
Accesibilidad
Posibilitar acceso universal
76. HTML5 CSS3: cómo sacarles partido
HTML5yyCSS3: cómo sacarles partido hoy hoy FRONTDAYS
FRONTDAYS
CSS 3
Selectores
77. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Selectores
Selectores en CSS1
‣ de elemento: h1 { color: red; }
‣ de clase: h1.alert { color: red; }
‣ de ID: #alert { color: red; }
‣ descendientes y contextuales: h1 em { color: red; }
‣ pseudo-clases: a:link, a:visited, a:active, :first-line, :first-letter
‣ comodín: div * p
78. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Selectores
Selectores en CSS2
‣ selector universal (*): blockquote * { ... }
‣ de atributo: a[href="http://www.google.com/"] { ... }
‣ más pseudo-clases: :first-child, :hover, :focus, :active, :lang,
:before, :after
‣ de hijos: div > p { ... }
‣ de hermanos: h1 + h2 { ... }
79. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Selectores
Selectores en CSS1 y CSS2
‣ body > ol > li p
80. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Selectores
Selectores en CSS1 y CSS2
‣ body > ol > li p - Selecciona cualquier elemento p que es
descendiente de un elemento li que es hijo de un elemento ol que es
hijo de un elemento body.
81. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Selectores
Selectores en CSS1 y CSS2
‣ p > * > em
82. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Selectores
Selectores en CSS1 y CSS2
‣ p > * > em - Selecciona cualquier elemento em que es hijo de
cualquier elemento que es hijo de un elemento p.
83. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Selectores
Selectores en CSS1 y CSS2
‣ a[title~="Mail"]
84. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Selectores
Selectores en CSS1 y CSS2
‣ a[title~="Mail"] - Selecciona cualquier elemento a con un atributo
title que contiene la palabra Mail.
85. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Selectores
Selectores en CSS3 I
‣ nuevos selectores de atributo:
comienzo del atributo
a[href^="ftp:"] { ... }
final del atributo
a[href$=".edu"] { ... }
cualquier cadena contenido
img[src*="photos"] { ... }
86. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Selectores
Selectores en CSS3 II
‣ nuevas pseudo-clases:
:enabled, :disabled, :checked
Permiten cambiar la apariencia de los inputs de formulario,
según su estado. No soportadas en IE7 ni en IE8
87. HTML5 CSS3: cómo sacarles partido
HTML5yyCSS3: cómo sacarles partido hoy hoy FRONTDAYS
FRONTDAYS
CSS 3
Módulos
88. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Módulos
Algunos otros módulos de CSS3
‣ Colores
‣ Modelo de caja
‣ Fondos y bordes
‣ Tipografía y efectos de texto
‣ Layout multicolumna
‣ Animaciones y transiciones
89. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Colores
Colores en CSS2
‣ Hexadecimal - #RRGGBB
‣ Hexadecimal, shorthand - #RGB
‣ RGB- rgb(red, green, blue)
‣ Nombres de colores - white, red, black, etc.
91. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Colores
Formato HLS
‣ Intensidad, luz y saturación
‣ Sencillo de manipular
‣ Existente en programas de edición de imágenes, como Adobe
Photoshop
‣ Adecuado para crear paletas de colores: sólo tienes que elegir el
color básico y no sus variantes claras/oscuras
92. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Colores
Formato CMYK
‣ Cyan, magenta, amarillo y negro
‣ Formato muy bien conocido por los diseñadores
‣ Nos permite definir cómo nuestros colores serán impresos
93. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Colores
Formatos RGBA y HSLA
‣ Añaden un cuarto parámetro: alpha
‣ El canal alpha define la transparencia del color, va de 0
(totalmente transparente) a 1 (totalmente opaco)
‣ La adición del canal alpha ofrece muchas nuevas posibilidades a
los diseñadores visuales.
94. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Colores
Si no hay soporte RGBA
background-color: rgb(0%, 0%, 100%);
background-color: rgba(0%, 0%, 100%, 0.5);
95. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Colores
RGBA y HSLA vs OPACITY
‣ Opacity es una propiedad de CSS3 que modifica la transparencia
de todo el elemento. Por ejemplo un párrafo con opacity: 0.5
tendría su fondo semitrans, pero también su contenido (texto)
‣ El canal alpha nos permite modificar la transparencia del color de
fondo del elemento, con lo que el contenido del elemento no se
vería afectado.
96. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Colores
Soporte en navegadores
‣ Las últimas versiones de Safari, Opera, Firefox y Chrome
soportan HSL, HSLA y RGBA
‣ IE no soporta ninguno de los nuevos formatos
‣ Ningún navegador soporta aún CMYK
97. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Modelo de caja
Modelo de caja
‣ IE box model
‣ W3C box model
‣ Nueva propiedad: box-sizing: content-box / border-box
Soportado en FF 1.1, Safari 3, IE 8, Opera 9.5
98. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Fondos y bordes
Fondos y bordes
‣ Degradados
‣ Bordes redondeados
‣ Sombras
‣ Imágenes de borde
‣ Imágenes de fondo
99. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Fondos y bordes
Degradados
background: -webkit-gradient(linear, 0 0, 100% 100%,
from(#d0d0d0), to(#ffffff));
background: -moz-linear-gradient(20% center, 30% center,
from(blue), to (yellow)) no-repeat;
Soportado por Safari y firefox.
100. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Fondos y bordes
Bordes redondeados
-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius
101. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Fondos y bordes
Sombras (de caja)
box-shadow: 10px 10px 5px #888;
102. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Fondos y bordes
Imágenes de borde
border-image:
border-corner-image:
103. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Fondos y bordes
Imágenes de fondo
Tamaño
-o-background-size, -webkit-background-size, -khtml-background-size,
-moz-background-size
Múltiples imágenes de fondo
background: url(img1.gif) top left no-repeat, url(img2.gif) bottom
left no-repeat;
Soportado por Safari
104. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Layout multicolumna
Layout multicolumna
‣ Número de columnas
‣ Separacón entre columnas
‣ Bordes separadores
-moz-column-count -webkit-column-count
-moz-column-width -webkit-column-width
-moz-column-gap -webkit-column-gap
105. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Tipografía y efectos de texto
Tipografía y efectos de texto
‣ Sombras en texto
‣ Uso de tipografías (@font-face)