tecnologias web moderna, gamificacion y analitica web (conferencia)
DESCRIPTION
Tecnologias web modernas, termino gamificacion, iconos de la gamificacion, analitica web e importancia en el panorama digital junto al bigdata y cambios de paradigama en la webTRANSCRIPT
Tecnologias web modernas, gamificacion y analitica webTendencias en el desarrollo web moderno y diseño
centrado en el usuario (DCU)
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)
Al finalizar
• Se entregaran incentivos a las personas que respondan algunas preguntas….. Asi que a poner atencion
Agenda
1) HTML5 , CSS3 y JAVASCRIPT (fundamentos de Fronted)
2) Gamificacion
3) Analitica web
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)
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
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
Entonces que es realmente html?
• Lenguaje de estructuracion de informacion (maquetacion de info.)• No tablas,
En el principio:
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
Y html5 ya es compatible?
html5
Testeando (probando) los navegadores?
CSS ?
• Cascading Style Sheets Hojas de Estilo en Cascada• Estilos para las estructuras de html
Y la programacion ?
Y flash ?
Y si flash a muerto que uso para animaciones?
Y la compatibilidad?
Y todo eso ? No hay un paquete listo?
La accesibilidad y usabilidad web
• <!doctype html>
• Primer pauta de accesibilidad : <html lang=”es”>
Responsive web Design = RWD
• M.dominio.com• Copia de los contenidos
Ventajas• Posicionamiento web
optimizado• Profesionalidad y
personalidad• Mantenimiento todo en
uno
Estadisticas de uso
Estadisticas de 2008 a 2014
OS mobil mas usados en el pais
Resoluciones mas usadas
Que es lo que necesitamos saber• Breakpoints• Media Queries• Soporte en
navegadores viejos (respond.js)
Mobile First
1. Los usuario ya no buscan informacion, quiren resultados2. Diseñemos primero pensando en moviles
Gamificacion
• Concepto como tal• Pregunta
• Ejemplos de gamificacion• Duolingo.com
Gamificacion ?
Dopamina
Gamificacion IconosDopamina El exito de facebook, twitter y pinterest
Analitica web
• Que es la analitica web• Google analitics
• Herramintas para la analitica web
• La analitica para el alcance de objetivos y OKR