SlideShare ist ein Scribd-Unternehmen logo
1 von 21
HTML5 + CSS3
¿Imprescindibles?

    Paco Fortis
Apuntad vuestras preguntas




                         Evento

                  45 + 45
¿Por qué HTML5?


     HTML 4.01

     XHTML 1.0

     XHTML 2.0

      XHTML 5

      HTML 5.1                                                      WHATWG


http://www.w3.org/TR/html5/                                  http://www.w3.org/html/logo/
http://www.w3.org/html/wg/drafts/html/master/Overview.html
¿Qué se pretende conseguir con HTML5?

            HTML + CSS + JavaScript                                    - plugins


                      + etiquetas                            - scripting

               + sencillo                     + potente                 + rendimiento


           independiente                                      + compatible

                              libre                          público

http://www.w3.org/TR/html5/
http://www.w3.org/html/wg/drafts/html/master/Overview.html
¿Qué aporta HTML5?

             web semántica
                                                               mejores formularios


             audio
                       vídeo
                                           canvas                       sockets web

                                                             APIs amigas:
      almacenamiento offline                                 Geolocation API
                                                             Indexed Database API
http://www.w3.org/TR/html5/                                      http://www.w3.org/TR/geolocation-API/
http://www.w3.org/html/wg/drafts/html/master/Overview.html             http://www.w3.org/TR/IndexedDB/
HTML5 ¿Únicamente para Internet?
                                   http://html5test.com/
Maquillando la web
<!DOCTYPE HTML>
<html lang="es">
      <head>                                                                      CSS 2.1
            <meta charset="utf-8" />
            <title>Título del sitio</title>
      </head>
      <body>
                                                                                            CSS3
            <div id="contenedor">
                   <header id="cabecera">
                                                                                                   CSS4
                          <!-- Contenido de la cabecera -->
                          <nav id="menuPrincipal"><!-- Menú principal --></nav>
                   </header>
                   <aside id="colIzq">
                          <!-- Contenido de la columna izquierda -->
                   </aside>
                   <div id="colCentro">
                          <!-- Contenido de la columna central -->
                          <article>
                                   <!-- Artículo 1 -->
                          </article>
                          <article>
                                   <!-- Artículo 2 -->
                          </article>
                   </div>
                   <footer id="pie"><!-- Contenido del pie --></footer>
            </div>
      </body>
</html>
¿Qué aporta CSS3?

+ selectores
                              + unidades




   colores y transparencias
¿Qué aporta CSS3?

+ propiedades
¿Qué aporta CSS3?

+ propiedades
¿Qué aporta CSS3?

+ propiedades
¿Qué aporta CSS3?

+ funciones
¿Qué aporta CSS3?

+ funciones
¿Qué aporta CSS3?

+ funciones
¿Qué aporta CSS3?

media queries       1280 x 800
¿Qué aporta CSS3?

media queries       800 x 1280
¿Qué aporta CSS3?

media queries       800 x 480
¿Qué aporta CSS3?

media queries       480 x 800
Vuestro turno

   Preguntas
Gracias por estar aquí




             Francisco José Fortis Moreno
                        https://twitter.com/fjfortis
                  http://www.linkedin.com/in/pacofortis
HTML5 y CSS3 ¿Imprescindibles?

Weitere ähnliche Inhalte

Was ist angesagt?

Introducción a Etiquetas HTML 5
Introducción a Etiquetas HTML 5Introducción a Etiquetas HTML 5
Introducción a Etiquetas HTML 5Joaquin Lara Sierra
 
Buenas prácticas en XHTML, CSS y Accesibilidad
Buenas prácticas en XHTML, CSS y AccesibilidadBuenas prácticas en XHTML, CSS y Accesibilidad
Buenas prácticas en XHTML, CSS y AccesibilidadFRONTDAYS
 
Html5 y css3: Introducción y aplicación desde hoy
Html5 y css3: Introducción y aplicación desde hoyHtml5 y css3: Introducción y aplicación desde hoy
Html5 y css3: Introducción y aplicación desde hoyParadigma Digital
 
Seminario html5
Seminario html5Seminario html5
Seminario html5UDECI
 
Introducción a HTML5 y CSS3
Introducción a HTML5 y CSS3Introducción a HTML5 y CSS3
Introducción a HTML5 y CSS3Paradigma Digital
 
Desarrollo de aplicaciones con HTML5
Desarrollo de aplicaciones con HTML5 Desarrollo de aplicaciones con HTML5
Desarrollo de aplicaciones con HTML5 Gonzalo C.
 
Html5 Básico
Html5 BásicoHtml5 Básico
Html5 BásicoFEDIMON
 
Introducción a HTML5 y CSS3 AWGR
Introducción a HTML5 y CSS3 AWGRIntroducción a HTML5 y CSS3 AWGR
Introducción a HTML5 y CSS3 AWGRvalgreens
 
Html5 telefonica-curso
Html5 telefonica-cursoHtml5 telefonica-curso
Html5 telefonica-cursoJuan Quemada
 
Nuevas etiquetas en HTML 5
Nuevas etiquetas en HTML 5Nuevas etiquetas en HTML 5
Nuevas etiquetas en HTML 5mferrer
 

Was ist angesagt? (20)

Introducción a Etiquetas HTML 5
Introducción a Etiquetas HTML 5Introducción a Etiquetas HTML 5
Introducción a Etiquetas HTML 5
 
Buenas prácticas en XHTML, CSS y Accesibilidad
Buenas prácticas en XHTML, CSS y AccesibilidadBuenas prácticas en XHTML, CSS y Accesibilidad
Buenas prácticas en XHTML, CSS y Accesibilidad
 
Html5 y css3: Introducción y aplicación desde hoy
Html5 y css3: Introducción y aplicación desde hoyHtml5 y css3: Introducción y aplicación desde hoy
Html5 y css3: Introducción y aplicación desde hoy
 
Curso HTML y CSS, parte 1
Curso HTML y CSS, parte 1Curso HTML y CSS, parte 1
Curso HTML y CSS, parte 1
 
Elementos de html5 y css3
Elementos de html5 y css3Elementos de html5 y css3
Elementos de html5 y css3
 
Seminario html5
Seminario html5Seminario html5
Seminario html5
 
HTML5 Nuevas Etiquetas Semanticas
HTML5 Nuevas Etiquetas SemanticasHTML5 Nuevas Etiquetas Semanticas
HTML5 Nuevas Etiquetas Semanticas
 
Ria 03-html5-css3
Ria 03-html5-css3Ria 03-html5-css3
Ria 03-html5-css3
 
Introducción HTML5 y CSS3
Introducción HTML5 y CSS3Introducción HTML5 y CSS3
Introducción HTML5 y CSS3
 
Html+css 2013
Html+css 2013Html+css 2013
Html+css 2013
 
Introducción a HTML5 y CSS3
Introducción a HTML5 y CSS3Introducción a HTML5 y CSS3
Introducción a HTML5 y CSS3
 
Desarrollo de aplicaciones con HTML5
Desarrollo de aplicaciones con HTML5 Desarrollo de aplicaciones con HTML5
Desarrollo de aplicaciones con HTML5
 
HTML y CSS
HTML y CSSHTML y CSS
HTML y CSS
 
Html5 Básico
Html5 BásicoHtml5 Básico
Html5 Básico
 
Introducción a HTML5 y CSS3 AWGR
Introducción a HTML5 y CSS3 AWGRIntroducción a HTML5 y CSS3 AWGR
Introducción a HTML5 y CSS3 AWGR
 
Html5 telefonica-curso
Html5 telefonica-cursoHtml5 telefonica-curso
Html5 telefonica-curso
 
Html 5 presente y futuro de la web
Html 5 presente y futuro de la webHtml 5 presente y futuro de la web
Html 5 presente y futuro de la web
 
Las Ventajas de usar HTML5 Y CSS3
Las Ventajas de usar HTML5 Y CSS3Las Ventajas de usar HTML5 Y CSS3
Las Ventajas de usar HTML5 Y CSS3
 
Curso HTML 5 - Módulo 1
Curso HTML 5 - Módulo 1Curso HTML 5 - Módulo 1
Curso HTML 5 - Módulo 1
 
Nuevas etiquetas en HTML 5
Nuevas etiquetas en HTML 5Nuevas etiquetas en HTML 5
Nuevas etiquetas en HTML 5
 

Andere mochten auch (13)

Hacking, fraude online y seguridad informatica
Hacking, fraude online y seguridad informaticaHacking, fraude online y seguridad informatica
Hacking, fraude online y seguridad informatica
 
CSS
CSSCSS
CSS
 
CSS - CSS3
CSS - CSS3CSS - CSS3
CSS - CSS3
 
LEYENDAS DEL TRADING
LEYENDAS DEL TRADINGLEYENDAS DEL TRADING
LEYENDAS DEL TRADING
 
HTML5, CSS3 y móviles
HTML5, CSS3 y móvilesHTML5, CSS3 y móviles
HTML5, CSS3 y móviles
 
css3
css3css3
css3
 
Monitorización y análisis de redes sociales con Opileak
Monitorización y análisis de redes sociales con OpileakMonitorización y análisis de redes sociales con Opileak
Monitorización y análisis de redes sociales con Opileak
 
Html5+ccs3+js
Html5+ccs3+jsHtml5+ccs3+js
Html5+ccs3+js
 
HTML5 y CSS3
HTML5 y CSS3HTML5 y CSS3
HTML5 y CSS3
 
Programacion Concurrente
Programacion ConcurrenteProgramacion Concurrente
Programacion Concurrente
 
39702397 matematicas-discretas
39702397 matematicas-discretas39702397 matematicas-discretas
39702397 matematicas-discretas
 
Css3 Presetation
Css3 PresetationCss3 Presetation
Css3 Presetation
 
Php 6
Php 6Php 6
Php 6
 

Ähnlich wie HTML5 y CSS3 ¿Imprescindibles?

Ähnlich wie HTML5 y CSS3 ¿Imprescindibles? (20)

JqueryMobile
JqueryMobile JqueryMobile
JqueryMobile
 
Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5
 
Programacion web
Programacion webProgramacion web
Programacion web
 
Html5 g@tv
Html5 g@tvHtml5 g@tv
Html5 g@tv
 
HTML5 en Acción
HTML5 en AcciónHTML5 en Acción
HTML5 en Acción
 
Introducción a Foundation 5
Introducción a Foundation 5Introducción a Foundation 5
Introducción a Foundation 5
 
Introducción a Foundation 5
Introducción a Foundation 5Introducción a Foundation 5
Introducción a Foundation 5
 
Presentación html5
Presentación html5Presentación html5
Presentación html5
 
Phonegap
PhonegapPhonegap
Phonegap
 
Html 5
Html 5Html 5
Html 5
 
Dispositivas CURSO HTML 5.pdf
Dispositivas CURSO HTML 5.pdfDispositivas CURSO HTML 5.pdf
Dispositivas CURSO HTML 5.pdf
 
Estructura semantica Html5.pptx
Estructura semantica Html5.pptxEstructura semantica Html5.pptx
Estructura semantica Html5.pptx
 
Presentación en Aspgems html5
Presentación en Aspgems html5Presentación en Aspgems html5
Presentación en Aspgems html5
 
Presentación CSS y HTML en Gummurcia
Presentación CSS y HTML en GummurciaPresentación CSS y HTML en Gummurcia
Presentación CSS y HTML en Gummurcia
 
Semana 2 Arquitectura web y HTML 5
Semana 2   Arquitectura web y HTML 5Semana 2   Arquitectura web y HTML 5
Semana 2 Arquitectura web y HTML 5
 
myprofly
myproflymyprofly
myprofly
 
Guía Practica conexión BD 2021
Guía Practica conexión BD  2021Guía Practica conexión BD  2021
Guía Practica conexión BD 2021
 
Frameworks CSS
Frameworks CSSFrameworks CSS
Frameworks CSS
 
Introducción a los Frameworks CSS
Introducción a los Frameworks CSSIntroducción a los Frameworks CSS
Introducción a los Frameworks CSS
 
Sesion 2 Profundización
Sesion 2 ProfundizaciónSesion 2 Profundización
Sesion 2 Profundización
 

Kürzlich hochgeladen

Trabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnologíaTrabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnologíassuserf18419
 
EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveEPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveFagnerLisboa3
 
Desarrollo Web Moderno con Svelte 2024.pdf
Desarrollo Web Moderno con Svelte 2024.pdfDesarrollo Web Moderno con Svelte 2024.pdf
Desarrollo Web Moderno con Svelte 2024.pdfJulian Lamprea
 
Redes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdfRedes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdfsoporteupcology
 
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITpruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITMaricarmen Sánchez Ruiz
 
Presentación guía sencilla en Microsoft Excel.pptx
Presentación guía sencilla en Microsoft Excel.pptxPresentación guía sencilla en Microsoft Excel.pptx
Presentación guía sencilla en Microsoft Excel.pptxLolaBunny11
 
9egb-lengua y Literatura.pdf_texto del estudiante
9egb-lengua y Literatura.pdf_texto del estudiante9egb-lengua y Literatura.pdf_texto del estudiante
9egb-lengua y Literatura.pdf_texto del estudianteAndreaHuertas24
 
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...silviayucra2
 
International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)GDGSucre
 
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft FabricGlobal Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft FabricKeyla Dolores Méndez
 
Proyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptxProyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptx241521559
 
guía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Josephguía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan JosephBRAYANJOSEPHPEREZGOM
 
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIA
CLASE  DE TECNOLOGIA E INFORMATICA PRIMARIACLASE  DE TECNOLOGIA E INFORMATICA PRIMARIA
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIAWilbisVega
 

Kürzlich hochgeladen (13)

Trabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnologíaTrabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnología
 
EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveEPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial Uninove
 
Desarrollo Web Moderno con Svelte 2024.pdf
Desarrollo Web Moderno con Svelte 2024.pdfDesarrollo Web Moderno con Svelte 2024.pdf
Desarrollo Web Moderno con Svelte 2024.pdf
 
Redes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdfRedes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdf
 
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITpruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNIT
 
Presentación guía sencilla en Microsoft Excel.pptx
Presentación guía sencilla en Microsoft Excel.pptxPresentación guía sencilla en Microsoft Excel.pptx
Presentación guía sencilla en Microsoft Excel.pptx
 
9egb-lengua y Literatura.pdf_texto del estudiante
9egb-lengua y Literatura.pdf_texto del estudiante9egb-lengua y Literatura.pdf_texto del estudiante
9egb-lengua y Literatura.pdf_texto del estudiante
 
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
 
International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)
 
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft FabricGlobal Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
 
Proyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptxProyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptx
 
guía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Josephguía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Joseph
 
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIA
CLASE  DE TECNOLOGIA E INFORMATICA PRIMARIACLASE  DE TECNOLOGIA E INFORMATICA PRIMARIA
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIA
 

HTML5 y CSS3 ¿Imprescindibles?