SlideShare a Scribd company logo
1 of 22
Explorando HTML5 - > Introducción
Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar
Explorando HTML5
Comprendiendo HTML5
No todo es HTML
Explorando HTML5 - > Introducción
Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar
Explorando HTML5 - > Introducción
Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar
A tener en cuenta
• Antes de comenzar con este “viaje”, deberías conocer
conceptos básicos de Sistema Operativo, cómo
instalar software, como trabajar con archivos,
carpetas
• No necesitas un super computador, tampoco una
Tablet es cómoda, pero con un pc estándar y
navegadores es suficiente
Explorando HTML5 - > Introducción
Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar
Tu primer sitio web
• Navegadores
• Editores
• Texto
• Imagen
Instalar Software
• Aspecto
• Contenidos
• Recursos
• Navegación
Definir tu proyecto
• Archivos
• Carpetas
Trabajo con archivos
• Semántico
• Estructural
• Otros
HTML
• Bases
• Frameworks
CSS
• Bases
• Frameworks
JavaScript
• FTP
• Local
Publicar/Administrar
tu proyecto
• Servidores
• Serv. Local
• Hosting
• Dominio
Entender cómo
funciona la web
Explorando HTML5 - > Introducción
Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar
Descripción
Cómo se
comporta
(plano o para
interacción)
La apariencia
gráfica, cómo
se ve (incluye
animaciones)
Contenido,
texto,
adicionales
Js css3 HTML5
Explorando HTML5 - > Introducción
Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar
Solicita
Solicita
Responde (HTML5)
Responde (HTML5)
¿Cómo funciona la web?
Dispositivos conectados a la web son clientes, dispositivos que
responden, comúnmente serán servidores.
Cliente
(Navegador)
Cliente
(Navegador)
Servidor
Mod 1
Mod 1
Mod 1
Explorando HTML5 - > Introducción
Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar
Otros factores
• Conexión a Internet
• El protocolo (TCP/IP)
• DNS (Nombres de dominio)
• El protocolo HTTP (transferencia de hipertexto)
• Archivos componentes
• Etiquetas CSS, HTML, código JS
• Otros códigos
• Recursos
Explorando HTML5 - > Introducción
Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar
Solicita
Responde (HTML5)
Web estática o dinámica
Estática se refiere a un documento pre creado (HTML5),
dinámica implica intercambio de información con otros módulos
Cliente
(Navegador)
Servidor
Mod
1
Mod
1
Mod
1
Servidor
Mod
1
Mod
1
Mod
1
Servidor
Mod
1
Mod
1
Mod
1
Explorando HTML5 - > Introducción
Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar
Solicita
Responde (HTML5)
Servidor local web
Podemos tener un servidor web, pero en local, dicho en otra
palabra, en tu pc. Comúnmente llamado “Localhost”.
Cliente
(Navegador)
Servidor
Mod
1
Mod
1
Mod
1
Servidor
Mod
1
Mod
1
Mod
1
Servidor
Mod
1
Mod
1
Mod
1
Explorando HTML5 - > Introducción
Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar
Recordar (estática)
HTML
JS
URL
HTML- CSS - JS
Explorando HTML5 - > Introducción
Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar
Recordar (dinámica)
HTML
JS
URL
HTML- CSS - JS
Página
dinámica
BD
PRG
Otros
Explorando HTML5 - > Introducción
Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar
Cómo se divide HTML5
Semántica CSS3 Multimedia Gráficos y 3D
Multi dispositivos Desempeño Almacenamiento Offline Conectividad
Explorando HTML5 - > Introducción
Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar
Semántica
• Nuevas secciones de contenido.
• Contenidos con más “significado”
• Formularios Mejorados
• MathML
Explorando HTML5 - > Introducción
Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar
CSS3
• Lenguaje ampliado
• Bordes
• Animaciones
• Tipografía
• Flexbox – presentación y columnas
• Más de 200 propiedades
Explorando HTML5 - > Introducción
Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar
Multimedia
• Soporte nativo para audio y video
• WebRTC – comunicación en tiempo real
• Uso de la API de la cámara
• Uso de subtítulos (track)
Explorando HTML5 - > Introducción
Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar
Gráficos 2D , 3D
• Canvas
• Soporte SVG
• WebGL – gráficos 3D
Explorando HTML5 - > Introducción
Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar
Acceso al dispositivo
• Uso de la API de la cámara
• Eventos táctiles
• Geolocalización
• Detección de orientación del dispositivo
Explorando HTML5 - > Introducción
Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar
Rendimiento e integración
• Webworkers
• Procesos asincrónicos,
(AJAX incluido)
• Motores JS más potentes
• History API
• Contenido editable
• Drag & Drop
• Gestión del foco
• Protocolos de la web
• Renderización animaciones
• Control Full Screen
• Eventos en línea y fuera de
línea
Explorando HTML5 - > Introducción
Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar
HTML5 local storage
• Las aplicaciones pueden guardar información para
uso offline
• Soporta eventos con y sin conexión
• Disminuye el tráfico hacia el servidor
• Mayor tamaño respecto a las cookies de 4Kb,
pasamos a un rango entre 5Mb y 10 Mb
Explorando HTML5 - > Introducción
Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar
Conectividad
• Con Websockets es posible crear conexión
permanente e intercambiar datos no HTML
• Eventos de servidor hacia el cliente
• WebRTC, básicamente es comunicación en tiempo
real sin plugins o apps externas
Explorando HTML5 - > Introducción
Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar
Y está en contínua actualización
Existen varias capas que estarán disponibles una vez
que se estandaricen y realicen varias pruebas
Es cuestión de tiempo
Cada vez más estándar – viejos días de la guerra de los
navegadores
Optimización constante
Aún no vemos su máximo aprovechamiento
Explorando HTML5 - > Introducción
Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar
Agradecimientos
www.dominiopublico.es
Wikimedia.org
W3.org
W3schools.com
Developer.mozilla.org
Flaticon e Iconfinder

More Related Content

What's hot

What's hot (19)

MongoDB
MongoDBMongoDB
MongoDB
 
Nosql y cassandra
Nosql y cassandraNosql y cassandra
Nosql y cassandra
 
Base de datos pedraza
Base de datos  pedraza Base de datos  pedraza
Base de datos pedraza
 
Base de datos
Base de datosBase de datos
Base de datos
 
Optimización del rendimiento web
Optimización del rendimiento webOptimización del rendimiento web
Optimización del rendimiento web
 
Base de datos
Base de datosBase de datos
Base de datos
 
Couch db
Couch dbCouch db
Couch db
 
Apache derby
Apache derbyApache derby
Apache derby
 
Desarrollo de Almacenes de Datos con Sistemas Gestores de Bases de Datos NOSQL
Desarrollo de Almacenes de Datos con Sistemas Gestores de Bases de Datos NOSQLDesarrollo de Almacenes de Datos con Sistemas Gestores de Bases de Datos NOSQL
Desarrollo de Almacenes de Datos con Sistemas Gestores de Bases de Datos NOSQL
 
Bases de datos_Arturo Aldana Reyes
Bases de datos_Arturo Aldana ReyesBases de datos_Arturo Aldana Reyes
Bases de datos_Arturo Aldana Reyes
 
Principales bases de datos
Principales bases de datosPrincipales bases de datos
Principales bases de datos
 
Principales base de datos
Principales base de datosPrincipales base de datos
Principales base de datos
 
Introducción a NoSQL y MongoDB Webinar
Introducción a NoSQL y MongoDB WebinarIntroducción a NoSQL y MongoDB Webinar
Introducción a NoSQL y MongoDB Webinar
 
Introducción a NoSQL
Introducción a NoSQLIntroducción a NoSQL
Introducción a NoSQL
 
Hilda Dolores Garza Acosta Base de Datos
Hilda Dolores Garza Acosta Base de DatosHilda Dolores Garza Acosta Base de Datos
Hilda Dolores Garza Acosta Base de Datos
 
Arquitectura de las nuevas aplicaciones web: Como lograr escalabilidad, alta ...
Arquitectura de las nuevas aplicaciones web: Como lograr escalabilidad, alta ...Arquitectura de las nuevas aplicaciones web: Como lograr escalabilidad, alta ...
Arquitectura de las nuevas aplicaciones web: Como lograr escalabilidad, alta ...
 
DOCENTE
DOCENTEDOCENTE
DOCENTE
 
Principales bases de datos existentes
Principales bases de datos existentesPrincipales bases de datos existentes
Principales bases de datos existentes
 
Bases de datos
Bases de datosBases de datos
Bases de datos
 

Similar to Explorando html5 - Inicio

Html5 y otras yerbas
Html5 y otras yerbasHtml5 y otras yerbas
Html5 y otras yerbas
Avanet
 
Aplicaciones de linea de negocio con silverlight y share point
Aplicaciones de linea de negocio con silverlight y share pointAplicaciones de linea de negocio con silverlight y share point
Aplicaciones de linea de negocio con silverlight y share point
Roberto Carlos
 
Desarrollo de aplicaciones con HTML5
Desarrollo de aplicaciones con HTML5 Desarrollo de aplicaciones con HTML5
Desarrollo de aplicaciones con HTML5
Gonzalo C.
 
Presentación html5
Presentación html5Presentación html5
Presentación html5
aydimdagam
 
SP2010 evolución vs evolución
SP2010 evolución vs evoluciónSP2010 evolución vs evolución
SP2010 evolución vs evolución
goreorti
 

Similar to Explorando html5 - Inicio (20)

Html5 y otras yerbas
Html5 y otras yerbasHtml5 y otras yerbas
Html5 y otras yerbas
 
Html5 y otras yerbas
Html5 y otras yerbasHtml5 y otras yerbas
Html5 y otras yerbas
 
Html5
Html5Html5
Html5
 
HTML5 en Acción
HTML5 en AcciónHTML5 en Acción
HTML5 en Acción
 
Aplicaciones de linea de negocio con silverlight y share point
Aplicaciones de linea de negocio con silverlight y share pointAplicaciones de linea de negocio con silverlight y share point
Aplicaciones de linea de negocio con silverlight y share point
 
Tecnologíahtml5
Tecnologíahtml5Tecnologíahtml5
Tecnologíahtml5
 
Desarrollo de aplicaciones con HTML5
Desarrollo de aplicaciones con HTML5 Desarrollo de aplicaciones con HTML5
Desarrollo de aplicaciones con HTML5
 
Hacking Web Performance en Español - JSConf México 2020
Hacking Web Performance en Español - JSConf México 2020Hacking Web Performance en Español - JSConf México 2020
Hacking Web Performance en Español - JSConf México 2020
 
Web matrix. armando nuestros sitios dinámicamente con html5, php y mysql
Web matrix.  armando nuestros sitios dinámicamente con html5, php y mysqlWeb matrix.  armando nuestros sitios dinámicamente con html5, php y mysql
Web matrix. armando nuestros sitios dinámicamente con html5, php y mysql
 
Introducción a HTML5
Introducción a HTML5Introducción a HTML5
Introducción a HTML5
 
La importancia del frontend y backend en un proyecto
La importancia del frontend y backend en un proyectoLa importancia del frontend y backend en un proyecto
La importancia del frontend y backend en un proyecto
 
Aplicaciones en HTML 5: Los pilares de una Nueva Web
Aplicaciones en HTML 5: Los pilares de una Nueva WebAplicaciones en HTML 5: Los pilares de una Nueva Web
Aplicaciones en HTML 5: Los pilares de una Nueva Web
 
Presentación html5
Presentación html5Presentación html5
Presentación html5
 
Aplicaciones distribuidas
Aplicaciones distribuidasAplicaciones distribuidas
Aplicaciones distribuidas
 
Aplicaciones Web SPA con WebAPI y TypeScript
Aplicaciones Web SPA con WebAPI y TypeScriptAplicaciones Web SPA con WebAPI y TypeScript
Aplicaciones Web SPA con WebAPI y TypeScript
 
12-Unidad 3: Webservices-3.3 Inicio del Proyecto
12-Unidad 3: Webservices-3.3 Inicio del Proyecto12-Unidad 3: Webservices-3.3 Inicio del Proyecto
12-Unidad 3: Webservices-3.3 Inicio del Proyecto
 
pagina
paginapagina
pagina
 
Introducción al desarrollo web moderno
Introducción al desarrollo web modernoIntroducción al desarrollo web moderno
Introducción al desarrollo web moderno
 
ASP.NET MVC
ASP.NET MVCASP.NET MVC
ASP.NET MVC
 
SP2010 evolución vs evolución
SP2010 evolución vs evoluciónSP2010 evolución vs evolución
SP2010 evolución vs evolución
 

More from Edison Monsalve

Presentacion oficial Cartagenaen3D
Presentacion oficial Cartagenaen3DPresentacion oficial Cartagenaen3D
Presentacion oficial Cartagenaen3D
Edison Monsalve
 
Cuida tu imagen digital - Llévala a la web - Cpco5
Cuida tu imagen digital - Llévala a la web - Cpco5Cuida tu imagen digital - Llévala a la web - Cpco5
Cuida tu imagen digital - Llévala a la web - Cpco5
Edison Monsalve
 

More from Edison Monsalve (20)

Proyecto Accesibilidad SENA - mayo 2020
Proyecto Accesibilidad SENA - mayo 2020Proyecto Accesibilidad SENA - mayo 2020
Proyecto Accesibilidad SENA - mayo 2020
 
Plantillas para procesos BI - INS
Plantillas para procesos BI - INSPlantillas para procesos BI - INS
Plantillas para procesos BI - INS
 
Herramientas y tips para el profesor tic
Herramientas y tips para el profesor ticHerramientas y tips para el profesor tic
Herramientas y tips para el profesor tic
 
4 - Congreso Internacional Tecnologias y Tendencias Educativas - Evaluar los ...
4 - Congreso Internacional Tecnologias y Tendencias Educativas - Evaluar los ...4 - Congreso Internacional Tecnologias y Tendencias Educativas - Evaluar los ...
4 - Congreso Internacional Tecnologias y Tendencias Educativas - Evaluar los ...
 
Fedesoft Bootstrap UTB
Fedesoft Bootstrap UTBFedesoft Bootstrap UTB
Fedesoft Bootstrap UTB
 
Desarrollo de aplicaciones y contenidos web bajo estándares internacionales
Desarrollo de aplicaciones y contenidos web   bajo estándares internacionalesDesarrollo de aplicaciones y contenidos web   bajo estándares internacionales
Desarrollo de aplicaciones y contenidos web bajo estándares internacionales
 
No es técnica son los conceptos - creacion digital
No es técnica   son los conceptos - creacion digitalNo es técnica   son los conceptos - creacion digital
No es técnica son los conceptos - creacion digital
 
Consejos para la empresa digital xy - Desconferencia @morpheusco en #CPCO7
Consejos para la empresa digital xy - Desconferencia @morpheusco en #CPCO7Consejos para la empresa digital xy - Desconferencia @morpheusco en #CPCO7
Consejos para la empresa digital xy - Desconferencia @morpheusco en #CPCO7
 
Crear contenidos y de paso mejorar el seo -
Crear contenidos y de paso mejorar el seo - Crear contenidos y de paso mejorar el seo -
Crear contenidos y de paso mejorar el seo -
 
Generando contenidos digitales con bajo presupuesto - En TravelCampCO
Generando contenidos digitales con bajo presupuesto - En TravelCampCOGenerando contenidos digitales con bajo presupuesto - En TravelCampCO
Generando contenidos digitales con bajo presupuesto - En TravelCampCO
 
Presentacion oficial Cartagenaen3D
Presentacion oficial Cartagenaen3DPresentacion oficial Cartagenaen3D
Presentacion oficial Cartagenaen3D
 
Cuida tu imagen digital - Llévala a la web - Cpco5
Cuida tu imagen digital - Llévala a la web - Cpco5Cuida tu imagen digital - Llévala a la web - Cpco5
Cuida tu imagen digital - Llévala a la web - Cpco5
 
Identidad redes sociales y oportunidades de negocio en Internet
Identidad redes sociales y oportunidades de negocio en InternetIdentidad redes sociales y oportunidades de negocio en Internet
Identidad redes sociales y oportunidades de negocio en Internet
 
Industria y oportunidades de los videojuegos en Colombia
Industria y oportunidades de los videojuegos en ColombiaIndustria y oportunidades de los videojuegos en Colombia
Industria y oportunidades de los videojuegos en Colombia
 
Presentacion GITPRO
Presentacion GITPROPresentacion GITPRO
Presentacion GITPRO
 
Presentación didacTIC une
Presentación didacTIC   unePresentación didacTIC   une
Presentación didacTIC une
 
Identidad digital TEDX Yoouth Cartagena
Identidad digital  TEDX Yoouth CartagenaIdentidad digital  TEDX Yoouth Cartagena
Identidad digital TEDX Yoouth Cartagena
 
Redesigning engineering education for the 21 century richard miller
Redesigning engineering education for the 21 century   richard millerRedesigning engineering education for the 21 century   richard miller
Redesigning engineering education for the 21 century richard miller
 
Technological universities as source of innovation seeram ramakrishna
Technological universities as source of innovation seeram ramakrishnaTechnological universities as source of innovation seeram ramakrishna
Technological universities as source of innovation seeram ramakrishna
 
The university for the changing world felix tan
The university for the changing world felix tanThe university for the changing world felix tan
The university for the changing world felix tan
 

Recently uploaded

Las Preguntas Educativas entran a las Aulas CIAESA Ccesa007.pdf
Las Preguntas Educativas entran a las Aulas CIAESA  Ccesa007.pdfLas Preguntas Educativas entran a las Aulas CIAESA  Ccesa007.pdf
Las Preguntas Educativas entran a las Aulas CIAESA Ccesa007.pdf
Demetrio Ccesa Rayme
 
FICHA DE LA VIRGEN DE FÁTIMA.pdf educación religiosa primaria de menores
FICHA DE LA VIRGEN DE FÁTIMA.pdf educación religiosa primaria de menoresFICHA DE LA VIRGEN DE FÁTIMA.pdf educación religiosa primaria de menores
FICHA DE LA VIRGEN DE FÁTIMA.pdf educación religiosa primaria de menores
Santosprez2
 
Diseño Universal de Aprendizaje en Nuevos Escenarios JS2 Ccesa007.pdf
Diseño Universal de Aprendizaje en Nuevos Escenarios  JS2  Ccesa007.pdfDiseño Universal de Aprendizaje en Nuevos Escenarios  JS2  Ccesa007.pdf
Diseño Universal de Aprendizaje en Nuevos Escenarios JS2 Ccesa007.pdf
Demetrio Ccesa Rayme
 
Apunte clase teorica propiedades de la Madera.pdf
Apunte clase teorica propiedades de la Madera.pdfApunte clase teorica propiedades de la Madera.pdf
Apunte clase teorica propiedades de la Madera.pdf
Gonella
 
Ediciones Previas Proyecto de Innovacion Pedagogica ORIGAMI 3D Ccesa007.pdf
Ediciones Previas Proyecto de Innovacion Pedagogica ORIGAMI 3D  Ccesa007.pdfEdiciones Previas Proyecto de Innovacion Pedagogica ORIGAMI 3D  Ccesa007.pdf
Ediciones Previas Proyecto de Innovacion Pedagogica ORIGAMI 3D Ccesa007.pdf
Demetrio Ccesa Rayme
 
Estrategia Nacional de Refuerzo Escolar SJA Ccesa007.pdf
Estrategia Nacional de Refuerzo Escolar  SJA  Ccesa007.pdfEstrategia Nacional de Refuerzo Escolar  SJA  Ccesa007.pdf
Estrategia Nacional de Refuerzo Escolar SJA Ccesa007.pdf
Demetrio Ccesa Rayme
 
Escucha tu Cerebro en Nuevos Escenarios PE3 Ccesa007.pdf
Escucha tu Cerebro en Nuevos Escenarios  PE3  Ccesa007.pdfEscucha tu Cerebro en Nuevos Escenarios  PE3  Ccesa007.pdf
Escucha tu Cerebro en Nuevos Escenarios PE3 Ccesa007.pdf
Demetrio Ccesa Rayme
 

Recently uploaded (20)

Las Preguntas Educativas entran a las Aulas CIAESA Ccesa007.pdf
Las Preguntas Educativas entran a las Aulas CIAESA  Ccesa007.pdfLas Preguntas Educativas entran a las Aulas CIAESA  Ccesa007.pdf
Las Preguntas Educativas entran a las Aulas CIAESA Ccesa007.pdf
 
FICHA DE LA VIRGEN DE FÁTIMA.pdf educación religiosa primaria de menores
FICHA DE LA VIRGEN DE FÁTIMA.pdf educación religiosa primaria de menoresFICHA DE LA VIRGEN DE FÁTIMA.pdf educación religiosa primaria de menores
FICHA DE LA VIRGEN DE FÁTIMA.pdf educación religiosa primaria de menores
 
Diseño Universal de Aprendizaje en Nuevos Escenarios JS2 Ccesa007.pdf
Diseño Universal de Aprendizaje en Nuevos Escenarios  JS2  Ccesa007.pdfDiseño Universal de Aprendizaje en Nuevos Escenarios  JS2  Ccesa007.pdf
Diseño Universal de Aprendizaje en Nuevos Escenarios JS2 Ccesa007.pdf
 
¿Que es Fuerza? online 2024 Repaso CRECE.pptx
¿Que es Fuerza? online 2024 Repaso CRECE.pptx¿Que es Fuerza? online 2024 Repaso CRECE.pptx
¿Que es Fuerza? online 2024 Repaso CRECE.pptx
 
Salud mental y bullying en adolescentes.
Salud mental y bullying en adolescentes.Salud mental y bullying en adolescentes.
Salud mental y bullying en adolescentes.
 
Evaluación de los Factores Externos de la Organización.
Evaluación de los Factores Externos de la Organización.Evaluación de los Factores Externos de la Organización.
Evaluación de los Factores Externos de la Organización.
 
Síndrome piramidal 2024 según alvarez, farrera y wuani
Síndrome piramidal 2024 según alvarez, farrera y wuaniSíndrome piramidal 2024 según alvarez, farrera y wuani
Síndrome piramidal 2024 según alvarez, farrera y wuani
 
Proyecto de Participación Estudiantil Completo - Bachillerato Ecuador
Proyecto de Participación Estudiantil Completo - Bachillerato EcuadorProyecto de Participación Estudiantil Completo - Bachillerato Ecuador
Proyecto de Participación Estudiantil Completo - Bachillerato Ecuador
 
GOBIERNO DE MANUEL ODRIA EL OCHENIO.pptx
GOBIERNO DE MANUEL ODRIA   EL OCHENIO.pptxGOBIERNO DE MANUEL ODRIA   EL OCHENIO.pptx
GOBIERNO DE MANUEL ODRIA EL OCHENIO.pptx
 
ACERTIJO EL NÚMERO PI COLOREA EMBLEMA OLÍMPICO DE PARÍS. Por JAVIER SOLIS NOYOLA
ACERTIJO EL NÚMERO PI COLOREA EMBLEMA OLÍMPICO DE PARÍS. Por JAVIER SOLIS NOYOLAACERTIJO EL NÚMERO PI COLOREA EMBLEMA OLÍMPICO DE PARÍS. Por JAVIER SOLIS NOYOLA
ACERTIJO EL NÚMERO PI COLOREA EMBLEMA OLÍMPICO DE PARÍS. Por JAVIER SOLIS NOYOLA
 
Apunte clase teorica propiedades de la Madera.pdf
Apunte clase teorica propiedades de la Madera.pdfApunte clase teorica propiedades de la Madera.pdf
Apunte clase teorica propiedades de la Madera.pdf
 
TEMA EGIPTO.pdf. Presentación civilización
TEMA EGIPTO.pdf. Presentación civilizaciónTEMA EGIPTO.pdf. Presentación civilización
TEMA EGIPTO.pdf. Presentación civilización
 
Ediciones Previas Proyecto de Innovacion Pedagogica ORIGAMI 3D Ccesa007.pdf
Ediciones Previas Proyecto de Innovacion Pedagogica ORIGAMI 3D  Ccesa007.pdfEdiciones Previas Proyecto de Innovacion Pedagogica ORIGAMI 3D  Ccesa007.pdf
Ediciones Previas Proyecto de Innovacion Pedagogica ORIGAMI 3D Ccesa007.pdf
 
EFEMERIDES DEL MES DE MAYO PERIODICO MURAL.pdf
EFEMERIDES DEL MES DE MAYO PERIODICO MURAL.pdfEFEMERIDES DEL MES DE MAYO PERIODICO MURAL.pdf
EFEMERIDES DEL MES DE MAYO PERIODICO MURAL.pdf
 
Estudios Sociales libro 8vo grado Básico
Estudios Sociales libro 8vo grado BásicoEstudios Sociales libro 8vo grado Básico
Estudios Sociales libro 8vo grado Básico
 
Sesión de clase Motivados por la esperanza.pdf
Sesión de clase Motivados por la esperanza.pdfSesión de clase Motivados por la esperanza.pdf
Sesión de clase Motivados por la esperanza.pdf
 
Estrategia Nacional de Refuerzo Escolar SJA Ccesa007.pdf
Estrategia Nacional de Refuerzo Escolar  SJA  Ccesa007.pdfEstrategia Nacional de Refuerzo Escolar  SJA  Ccesa007.pdf
Estrategia Nacional de Refuerzo Escolar SJA Ccesa007.pdf
 
Escucha tu Cerebro en Nuevos Escenarios PE3 Ccesa007.pdf
Escucha tu Cerebro en Nuevos Escenarios  PE3  Ccesa007.pdfEscucha tu Cerebro en Nuevos Escenarios  PE3  Ccesa007.pdf
Escucha tu Cerebro en Nuevos Escenarios PE3 Ccesa007.pdf
 
DISEÑO DE ESTRATEGIAS EN MOMENTOS DE INCERTIDUMBRE.pdf
DISEÑO DE ESTRATEGIAS EN MOMENTOS DE INCERTIDUMBRE.pdfDISEÑO DE ESTRATEGIAS EN MOMENTOS DE INCERTIDUMBRE.pdf
DISEÑO DE ESTRATEGIAS EN MOMENTOS DE INCERTIDUMBRE.pdf
 
REGLAMENTO FINAL DE EVALUACIÓN 2024 pdf.pdf
REGLAMENTO  FINAL DE EVALUACIÓN 2024 pdf.pdfREGLAMENTO  FINAL DE EVALUACIÓN 2024 pdf.pdf
REGLAMENTO FINAL DE EVALUACIÓN 2024 pdf.pdf
 

Explorando html5 - Inicio

  • 1. Explorando HTML5 - > Introducción Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar Explorando HTML5 Comprendiendo HTML5 No todo es HTML
  • 2. Explorando HTML5 - > Introducción Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar
  • 3. Explorando HTML5 - > Introducción Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar A tener en cuenta • Antes de comenzar con este “viaje”, deberías conocer conceptos básicos de Sistema Operativo, cómo instalar software, como trabajar con archivos, carpetas • No necesitas un super computador, tampoco una Tablet es cómoda, pero con un pc estándar y navegadores es suficiente
  • 4. Explorando HTML5 - > Introducción Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar Tu primer sitio web • Navegadores • Editores • Texto • Imagen Instalar Software • Aspecto • Contenidos • Recursos • Navegación Definir tu proyecto • Archivos • Carpetas Trabajo con archivos • Semántico • Estructural • Otros HTML • Bases • Frameworks CSS • Bases • Frameworks JavaScript • FTP • Local Publicar/Administrar tu proyecto • Servidores • Serv. Local • Hosting • Dominio Entender cómo funciona la web
  • 5. Explorando HTML5 - > Introducción Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar Descripción Cómo se comporta (plano o para interacción) La apariencia gráfica, cómo se ve (incluye animaciones) Contenido, texto, adicionales Js css3 HTML5
  • 6. Explorando HTML5 - > Introducción Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar Solicita Solicita Responde (HTML5) Responde (HTML5) ¿Cómo funciona la web? Dispositivos conectados a la web son clientes, dispositivos que responden, comúnmente serán servidores. Cliente (Navegador) Cliente (Navegador) Servidor Mod 1 Mod 1 Mod 1
  • 7. Explorando HTML5 - > Introducción Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar Otros factores • Conexión a Internet • El protocolo (TCP/IP) • DNS (Nombres de dominio) • El protocolo HTTP (transferencia de hipertexto) • Archivos componentes • Etiquetas CSS, HTML, código JS • Otros códigos • Recursos
  • 8. Explorando HTML5 - > Introducción Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar Solicita Responde (HTML5) Web estática o dinámica Estática se refiere a un documento pre creado (HTML5), dinámica implica intercambio de información con otros módulos Cliente (Navegador) Servidor Mod 1 Mod 1 Mod 1 Servidor Mod 1 Mod 1 Mod 1 Servidor Mod 1 Mod 1 Mod 1
  • 9. Explorando HTML5 - > Introducción Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar Solicita Responde (HTML5) Servidor local web Podemos tener un servidor web, pero en local, dicho en otra palabra, en tu pc. Comúnmente llamado “Localhost”. Cliente (Navegador) Servidor Mod 1 Mod 1 Mod 1 Servidor Mod 1 Mod 1 Mod 1 Servidor Mod 1 Mod 1 Mod 1
  • 10. Explorando HTML5 - > Introducción Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar Recordar (estática) HTML JS URL HTML- CSS - JS
  • 11. Explorando HTML5 - > Introducción Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar Recordar (dinámica) HTML JS URL HTML- CSS - JS Página dinámica BD PRG Otros
  • 12. Explorando HTML5 - > Introducción Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar Cómo se divide HTML5 Semántica CSS3 Multimedia Gráficos y 3D Multi dispositivos Desempeño Almacenamiento Offline Conectividad
  • 13. Explorando HTML5 - > Introducción Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar Semántica • Nuevas secciones de contenido. • Contenidos con más “significado” • Formularios Mejorados • MathML
  • 14. Explorando HTML5 - > Introducción Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar CSS3 • Lenguaje ampliado • Bordes • Animaciones • Tipografía • Flexbox – presentación y columnas • Más de 200 propiedades
  • 15. Explorando HTML5 - > Introducción Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar Multimedia • Soporte nativo para audio y video • WebRTC – comunicación en tiempo real • Uso de la API de la cámara • Uso de subtítulos (track)
  • 16. Explorando HTML5 - > Introducción Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar Gráficos 2D , 3D • Canvas • Soporte SVG • WebGL – gráficos 3D
  • 17. Explorando HTML5 - > Introducción Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar Acceso al dispositivo • Uso de la API de la cámara • Eventos táctiles • Geolocalización • Detección de orientación del dispositivo
  • 18. Explorando HTML5 - > Introducción Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar Rendimiento e integración • Webworkers • Procesos asincrónicos, (AJAX incluido) • Motores JS más potentes • History API • Contenido editable • Drag & Drop • Gestión del foco • Protocolos de la web • Renderización animaciones • Control Full Screen • Eventos en línea y fuera de línea
  • 19. Explorando HTML5 - > Introducción Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar HTML5 local storage • Las aplicaciones pueden guardar información para uso offline • Soporta eventos con y sin conexión • Disminuye el tráfico hacia el servidor • Mayor tamaño respecto a las cookies de 4Kb, pasamos a un rango entre 5Mb y 10 Mb
  • 20. Explorando HTML5 - > Introducción Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar Conectividad • Con Websockets es posible crear conexión permanente e intercambiar datos no HTML • Eventos de servidor hacia el cliente • WebRTC, básicamente es comunicación en tiempo real sin plugins o apps externas
  • 21. Explorando HTML5 - > Introducción Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar Y está en contínua actualización Existen varias capas que estarán disponibles una vez que se estandaricen y realicen varias pruebas Es cuestión de tiempo Cada vez más estándar – viejos días de la guerra de los navegadores Optimización constante Aún no vemos su máximo aprovechamiento
  • 22. Explorando HTML5 - > Introducción Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar Agradecimientos www.dominiopublico.es Wikimedia.org W3.org W3schools.com Developer.mozilla.org Flaticon e Iconfinder