Presentación dada en el Barcamp Milagro

1. WebMatrix
Armando dinámicamente nuestros
sitios con HTML5, PHP y MySQL
Peter Concha Regatto
Microsoft Student Partner Jr
Miembro Avanet Colombia
@PeterConchaR
www.ptrconcha.wordpress.com

3. Agenda
• WebMatrix
– Conociendo un entorno para desarrolladores
• HTML5
– Semántica y Contexto
• CSS3
– Estilos y Maquetado
• PHP
– MVC
• MySQL
– Centralizando Contenido

5. WebMatrix
DEMO

6. HTML5
Y aún hay más…
Semántica Gráficos y Efectos
Multimedia Acceso de Dispositivos
CSS3 y Estilos Conectividad
Compatibilidad

7. SEMANTICA

8. Vieja Estructura

9. Nueva Estructura

10. Semántica
DEMO

11. CSS3 Y ESTILOS

12. Antes Del CSS3

13. Llego CSS3

14. Llego CSS3

15. CSS3
DEMO

16. PHP
DEMO

17. MySQL
DEMO

18. COMPATIBILIDAD

19. Soporte HTML5
• Chrome
• Firefox
• Safari
• Opera
• Internet Explorer 9+

20. ¿Qué podemos hacer para
trabajar hoy con HTML5?
Modernizr
http://www.modernizr.com/
No se detecta HTML5.
Se detectan cualidades de
HTML5.

21. • La mejor librería de detección de
caractetísticas detecta:
– Todas las características principales de
HTML5
– Todas las principales características de
CSS3
• Incluye HTML5 Shim para el soporte de
tag semánticos
• Adopción generalizada
• Updates continuos
• Se incluye con ASP.NET MVC 3

22. Polyfills & Shims
• Qué son?
Normalmente JavaScript CSS y HTML y CSS
• ¿Qué permiten hacer?
Proporcionan la tecnología que nosotros, los
desarrolladores, esperaríamos que el navegador
ofreciera nativamente.
Provee características que faltan.
• ¿Cuando se utilizan?
Se utilizan para generar la llamada “fallback
Gracefully” o imitar una funcionalidad.

23. Mapeo HTML5

24. El futuro, que sigue, que falta?
beautyoftheweb.com ietestdrive.com html5labs.com

25. www.cuttherope.ie

26. www.disneydigitalbooks.go.com/tron/

27. HERRAMIENTAS
• Cualquier editor y un navegador!
• SublimeText, Notepad++, Bloc de Notas
• VS 2012 – HTML5 Schema y Intellisense
• WebMatrix – Incluye HTML5 default doctype
• ASP.NET MVC 3 tools update
• HTML5 template para nuevos proyectos
• Modernizr 1.7 incluido en nuevos proyectos
• Expression Web 4 SP1 – HTML5 Schema y
Intellisense
• Editor CSS preparado!
• SuperPreview

28. Recursos para el Desarrollador
• cristalab.com
• mejorandola.la
• maestrosdelweb.com
• avanet.org
• html5test.com
• chromeexperiments.com
• html5rocks.com

29. Firebug

30. Web Developer

31. Lipsum

32. PREGUNTAS
@PeterConchaR

33. CONTACTANOS

34. www.avanet.org @avanet

35. GRACIAS!