![Page 1: Tecnologias web moderna, Gamificacion y analitica web (conferencia)](https://reader035.vdocuments.com.br/reader035/viewer/2022062419/557af82ad8b42a2d178b45c2/html5/thumbnails/1.jpg)
Tecnologias web modernas, gamificacion y analitica webTendencias en el desarrollo web moderno y diseño
centrado en el usuario (DCU)
![Page 2: Tecnologias web moderna, Gamificacion y analitica web (conferencia)](https://reader035.vdocuments.com.br/reader035/viewer/2022062419/557af82ad8b42a2d178b45c2/html5/thumbnails/2.jpg)
Recomendaciones
• Participacion ( que no les de pena)• Preguntas (confianza)• Atencion a los tips ( aunque la presentacion sera
compartida)• Levantar la mano para dar un si o un ok • No dispositivos moviles (venimos a prender no a
mensajear ni a twitter mucho menos facebokear)• Relajesen tomenlo con calma y disfruten de la
presentacion• Prohibido mencionar el navegador de Microsoft (nos
puede dar cancer)
![Page 3: Tecnologias web moderna, Gamificacion y analitica web (conferencia)](https://reader035.vdocuments.com.br/reader035/viewer/2022062419/557af82ad8b42a2d178b45c2/html5/thumbnails/3.jpg)
Al finalizar
• Se entregaran incentivos a las personas que respondan algunas preguntas….. Asi que a poner atencion
![Page 4: Tecnologias web moderna, Gamificacion y analitica web (conferencia)](https://reader035.vdocuments.com.br/reader035/viewer/2022062419/557af82ad8b42a2d178b45c2/html5/thumbnails/4.jpg)
![Page 5: Tecnologias web moderna, Gamificacion y analitica web (conferencia)](https://reader035.vdocuments.com.br/reader035/viewer/2022062419/557af82ad8b42a2d178b45c2/html5/thumbnails/5.jpg)
![Page 6: Tecnologias web moderna, Gamificacion y analitica web (conferencia)](https://reader035.vdocuments.com.br/reader035/viewer/2022062419/557af82ad8b42a2d178b45c2/html5/thumbnails/6.jpg)
Agenda
1) HTML5 , CSS3 y JAVASCRIPT (fundamentos de Fronted)
2) Gamificacion
3) Analitica web
![Page 7: Tecnologias web moderna, Gamificacion y analitica web (conferencia)](https://reader035.vdocuments.com.br/reader035/viewer/2022062419/557af82ad8b42a2d178b45c2/html5/thumbnails/7.jpg)
HTML5 , CSS3 y JAVASCRIPT (fundamentos de Fronted)
1. Definamos que son estas tecnologias web
2. Las nuevas etiquetas de html5 y su poder semántico3. Importancia de la semántica de html5 para posicionamiento en
buscadores4. La accesibilidad y usabilidad web5. Características de audio y vídeo6. La muerte de Flash y el nacimiento de los servicios Adobe Edge7. CMS, e-commerce y gestores de educación en línea8. Javascript (programacion dinamica del lado del cliente o
usuario)
![Page 8: Tecnologias web moderna, Gamificacion y analitica web (conferencia)](https://reader035.vdocuments.com.br/reader035/viewer/2022062419/557af82ad8b42a2d178b45c2/html5/thumbnails/8.jpg)
9. Retina Design (la ultima patada al higado, gracias Steve Jobs)
10.Responsive design11.Mobile First12.Todo esto? Y para hacerlo mas facil? :
html5boilerplate, initializr, Html5bone13.El futuro de la web14.Que podemos hacer con estas tres tecnologias
![Page 9: Tecnologias web moderna, Gamificacion y analitica web (conferencia)](https://reader035.vdocuments.com.br/reader035/viewer/2022062419/557af82ad8b42a2d178b45c2/html5/thumbnails/9.jpg)
empezamos con preguntas, si !!! preguntas• Que es html ?HyperText Markup Language(lenguaje de marcado o etiquetado de hipertexto)Marcado o etiquetado ?a) Html no es un lenguaje de programacion b) En html no se le da estilos (diseño) a los elementosc) Solo html no es suficiente para crear webs ( solo es lo
basico)d) Html no es XML tampoco XHTML
![Page 10: Tecnologias web moderna, Gamificacion y analitica web (conferencia)](https://reader035.vdocuments.com.br/reader035/viewer/2022062419/557af82ad8b42a2d178b45c2/html5/thumbnails/10.jpg)
Entonces que es realmente html?
• Lenguaje de estructuracion de informacion (maquetacion de info.)• No tablas,
![Page 11: Tecnologias web moderna, Gamificacion y analitica web (conferencia)](https://reader035.vdocuments.com.br/reader035/viewer/2022062419/557af82ad8b42a2d178b45c2/html5/thumbnails/11.jpg)
En el principio:
![Page 12: Tecnologias web moderna, Gamificacion y analitica web (conferencia)](https://reader035.vdocuments.com.br/reader035/viewer/2022062419/557af82ad8b42a2d178b45c2/html5/thumbnails/12.jpg)
Html4 vs html5
• No semantico• Es Viejo (1999)• No es cambiante• No soporta video ni audio (flash)• Etc
• Es semantico• Especificacion en 2008• Es cambiante• Soportado por mas del 95% de
navegadores nuevos• APIS • Y un sin fin de mejoras
![Page 13: Tecnologias web moderna, Gamificacion y analitica web (conferencia)](https://reader035.vdocuments.com.br/reader035/viewer/2022062419/557af82ad8b42a2d178b45c2/html5/thumbnails/13.jpg)
Y html5 ya es compatible?
![Page 14: Tecnologias web moderna, Gamificacion y analitica web (conferencia)](https://reader035.vdocuments.com.br/reader035/viewer/2022062419/557af82ad8b42a2d178b45c2/html5/thumbnails/14.jpg)
html5
![Page 15: Tecnologias web moderna, Gamificacion y analitica web (conferencia)](https://reader035.vdocuments.com.br/reader035/viewer/2022062419/557af82ad8b42a2d178b45c2/html5/thumbnails/15.jpg)
![Page 16: Tecnologias web moderna, Gamificacion y analitica web (conferencia)](https://reader035.vdocuments.com.br/reader035/viewer/2022062419/557af82ad8b42a2d178b45c2/html5/thumbnails/16.jpg)
Testeando (probando) los navegadores?
![Page 17: Tecnologias web moderna, Gamificacion y analitica web (conferencia)](https://reader035.vdocuments.com.br/reader035/viewer/2022062419/557af82ad8b42a2d178b45c2/html5/thumbnails/17.jpg)
CSS ?
• Cascading Style Sheets Hojas de Estilo en Cascada• Estilos para las estructuras de html
![Page 18: Tecnologias web moderna, Gamificacion y analitica web (conferencia)](https://reader035.vdocuments.com.br/reader035/viewer/2022062419/557af82ad8b42a2d178b45c2/html5/thumbnails/18.jpg)
Y la programacion ?
![Page 19: Tecnologias web moderna, Gamificacion y analitica web (conferencia)](https://reader035.vdocuments.com.br/reader035/viewer/2022062419/557af82ad8b42a2d178b45c2/html5/thumbnails/19.jpg)
Y flash ?
![Page 20: Tecnologias web moderna, Gamificacion y analitica web (conferencia)](https://reader035.vdocuments.com.br/reader035/viewer/2022062419/557af82ad8b42a2d178b45c2/html5/thumbnails/20.jpg)
Y si flash a muerto que uso para animaciones?
![Page 21: Tecnologias web moderna, Gamificacion y analitica web (conferencia)](https://reader035.vdocuments.com.br/reader035/viewer/2022062419/557af82ad8b42a2d178b45c2/html5/thumbnails/21.jpg)
![Page 22: Tecnologias web moderna, Gamificacion y analitica web (conferencia)](https://reader035.vdocuments.com.br/reader035/viewer/2022062419/557af82ad8b42a2d178b45c2/html5/thumbnails/22.jpg)
Y la compatibilidad?
![Page 23: Tecnologias web moderna, Gamificacion y analitica web (conferencia)](https://reader035.vdocuments.com.br/reader035/viewer/2022062419/557af82ad8b42a2d178b45c2/html5/thumbnails/23.jpg)
Y todo eso ? No hay un paquete listo?
![Page 24: Tecnologias web moderna, Gamificacion y analitica web (conferencia)](https://reader035.vdocuments.com.br/reader035/viewer/2022062419/557af82ad8b42a2d178b45c2/html5/thumbnails/24.jpg)
La accesibilidad y usabilidad web
• <!doctype html>
• Primer pauta de accesibilidad : <html lang=”es”>
![Page 25: Tecnologias web moderna, Gamificacion y analitica web (conferencia)](https://reader035.vdocuments.com.br/reader035/viewer/2022062419/557af82ad8b42a2d178b45c2/html5/thumbnails/25.jpg)
Responsive web Design = RWD
• M.dominio.com• Copia de los contenidos
Ventajas• Posicionamiento web
optimizado• Profesionalidad y
personalidad• Mantenimiento todo en
uno
![Page 26: Tecnologias web moderna, Gamificacion y analitica web (conferencia)](https://reader035.vdocuments.com.br/reader035/viewer/2022062419/557af82ad8b42a2d178b45c2/html5/thumbnails/26.jpg)
Estadisticas de uso
![Page 27: Tecnologias web moderna, Gamificacion y analitica web (conferencia)](https://reader035.vdocuments.com.br/reader035/viewer/2022062419/557af82ad8b42a2d178b45c2/html5/thumbnails/27.jpg)
Estadisticas de 2008 a 2014
![Page 28: Tecnologias web moderna, Gamificacion y analitica web (conferencia)](https://reader035.vdocuments.com.br/reader035/viewer/2022062419/557af82ad8b42a2d178b45c2/html5/thumbnails/28.jpg)
OS mobil mas usados en el pais
![Page 29: Tecnologias web moderna, Gamificacion y analitica web (conferencia)](https://reader035.vdocuments.com.br/reader035/viewer/2022062419/557af82ad8b42a2d178b45c2/html5/thumbnails/29.jpg)
Resoluciones mas usadas
![Page 30: Tecnologias web moderna, Gamificacion y analitica web (conferencia)](https://reader035.vdocuments.com.br/reader035/viewer/2022062419/557af82ad8b42a2d178b45c2/html5/thumbnails/30.jpg)
![Page 31: Tecnologias web moderna, Gamificacion y analitica web (conferencia)](https://reader035.vdocuments.com.br/reader035/viewer/2022062419/557af82ad8b42a2d178b45c2/html5/thumbnails/31.jpg)
Que es lo que necesitamos saber• Breakpoints• Media Queries• Soporte en
navegadores viejos (respond.js)
![Page 32: Tecnologias web moderna, Gamificacion y analitica web (conferencia)](https://reader035.vdocuments.com.br/reader035/viewer/2022062419/557af82ad8b42a2d178b45c2/html5/thumbnails/32.jpg)
![Page 33: Tecnologias web moderna, Gamificacion y analitica web (conferencia)](https://reader035.vdocuments.com.br/reader035/viewer/2022062419/557af82ad8b42a2d178b45c2/html5/thumbnails/33.jpg)
![Page 34: Tecnologias web moderna, Gamificacion y analitica web (conferencia)](https://reader035.vdocuments.com.br/reader035/viewer/2022062419/557af82ad8b42a2d178b45c2/html5/thumbnails/34.jpg)
![Page 35: Tecnologias web moderna, Gamificacion y analitica web (conferencia)](https://reader035.vdocuments.com.br/reader035/viewer/2022062419/557af82ad8b42a2d178b45c2/html5/thumbnails/35.jpg)
![Page 36: Tecnologias web moderna, Gamificacion y analitica web (conferencia)](https://reader035.vdocuments.com.br/reader035/viewer/2022062419/557af82ad8b42a2d178b45c2/html5/thumbnails/36.jpg)
Mobile First
![Page 37: Tecnologias web moderna, Gamificacion y analitica web (conferencia)](https://reader035.vdocuments.com.br/reader035/viewer/2022062419/557af82ad8b42a2d178b45c2/html5/thumbnails/37.jpg)
1. Los usuario ya no buscan informacion, quiren resultados2. Diseñemos primero pensando en moviles
![Page 38: Tecnologias web moderna, Gamificacion y analitica web (conferencia)](https://reader035.vdocuments.com.br/reader035/viewer/2022062419/557af82ad8b42a2d178b45c2/html5/thumbnails/38.jpg)
Gamificacion
• Concepto como tal• Pregunta
• Ejemplos de gamificacion• Duolingo.com
![Page 39: Tecnologias web moderna, Gamificacion y analitica web (conferencia)](https://reader035.vdocuments.com.br/reader035/viewer/2022062419/557af82ad8b42a2d178b45c2/html5/thumbnails/39.jpg)
Gamificacion ?
Dopamina
![Page 40: Tecnologias web moderna, Gamificacion y analitica web (conferencia)](https://reader035.vdocuments.com.br/reader035/viewer/2022062419/557af82ad8b42a2d178b45c2/html5/thumbnails/40.jpg)
Gamificacion IconosDopamina El exito de facebook, twitter y pinterest
![Page 41: Tecnologias web moderna, Gamificacion y analitica web (conferencia)](https://reader035.vdocuments.com.br/reader035/viewer/2022062419/557af82ad8b42a2d178b45c2/html5/thumbnails/41.jpg)
Analitica web
• Que es la analitica web• Google analitics
• Herramintas para la analitica web
• La analitica para el alcance de objetivos y OKR