WebMatrixArmando dinámicamente nuestros sitios con HTML5, PHP y MySQL

Peter Concha RegattoMicrosoft Student Partner JrMiembro Avanet Colombia

@PeterConchaRwww.ptrconcha.wordpress.com

Agenda

• WebMatrix– Conociendo un entorno para desarrolladores

• HTML5– Semántica y Contexto

• CSS3– Estilos y Maquetado

• PHP– MVC

• MySQL– Centralizando Contenido

DEMOWebMatrix

HTML5

Semántica

Multimedia

CSS3 y Estilos

Gráficos y Efectos

Acceso de Dispositivos

Conectividad

Y aún hay más…

Compatibilidad

SEMANTICA

Vieja Estructura

Nueva Estructura

DEMOSemántica

CSS3 Y ESTILOS

Antes Del CSS3

Llego CSS3

Llego CSS3

DEMOCSS3

DEMOPHP

DEMOMySQL

COMPATIBILIDAD

Soporte HTML5

• Chrome• Firefox• Safari• Opera• Internet Explorer 9+

¿Qué podemos hacer para trabajar hoy con HTML5?

Modernizrhttp://www.modernizr.com/

No se detecta HTML5.Se detectan cualidades de

HTML5.

• 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

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.

Mapeo HTML5

W3C

HTML

HTM

L5Canvas 2D

ContextM

icrodataH

TML+RD

FaH

TML5 M

arkup

HTM

L5 Diff from

H

TML4

Polyglot Markup

Text alternatives

CSS

CSS Snapshot 2007CSS N

amespaces

CSS Paged Media

CSS Print ProfileCSS Values and

Units

CSS Cascading and Inheritance

CSS TextCSS W

riting Modes

CSS Line Grid

CSS RubyCSS G

enerated Content for Paged M

edia

CSS Backgrounds and Borders

CSS FontsCSS Basic Box M

odelCSS M

ulti-column

LayoutCSS Tem

plate LayoutCSS M

edia Queries

CSS SpeechCSS Color

CSS Basic User

Interface CSS Scoping

CSS Grid Positioning

CSS Flexible Box Layout

CSS Image Values

CSS 2D

Transformations

CSS 3D

Transformations

CSS TransitionsCSS Anim

ations

Web Apps

CORS

Element TraversalFile API

Index DB

Programm

able HTTP

Caching and ServingProgress Events

Selectors APISelectors API L2

Server-Sent EventsU

niform M

essaging Policy

Web D

OM

CoreW

eb SQL D

atabaseW

eb IDL

Web Sockets APIW

eb StorageW

eb Workers

XmlH

ttpRequest

XmlH

ttpRequest L2

DO

M L1

DO

M L2 Core

DO

M L2 View

sD

OM

L2 EventsD

OM

L2 StyleD

OM

L2 Traversal and Range

DO

M L2 H

TML

DO

M L3 Core

DO

M L3 Events

DO

M L3 Load and

SaveD

OM

L3 ValidationD

OM

L3 XPathD

OM

L3 Views and

Formatti

ngD

OM

L3 Abstract Schem

as

SVG

Docum

ent StructureBasic Shapes

PathsText

Transforms

Painting, Filling, Color

ScriptingStyling

Gradients and

Patterns

SMIL

FontsFilters

Geolocation

Geolocation API

ECMA

ECMA Script 262

ECMAScript 262

El futuro, que sigue, que falta?

Sitios Listos con

HTML5

Desarrollando más

Características

Estándares en Prueba y Desar

beautyoftheweb.com ietestdrive.com html5labs.com

IE9 IE Platform Previews

HTML5 Labs

www.cuttherope.ie

www.disneydigitalbooks.go.com/tron/

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

Recursos para el Desarrollador

• cristalab.com• mejorandola.la• maestrosdelweb.com• avanet.org

• html5test.com• chromeexperiments.com• html5rocks.com

Firebug

Web Developer

Lipsum

PREGUNTAS@PeterConchaR

CONTACTANOS

www.avanet.org @avanet

GRACIAS!