1. Web 1.0 Expositiva, Emisin Conocimiento vertical Multimedia Poder del emisor Imitando a los medios tradicionales Web social 2.0 Participativa, Dilogo Inteligencia (?) colectiva (folcksonomas, wiki) Integracin de fuentes (mapas, geolocalizacin, RSS) Tiempo real Multidispositivo Personalizacin Web como plataforma, Poder al usuario (humano) Cambio de paradigma

2. Web 1.0 Esttico Contenido y visualizacin juntos Tablas, frames

Texto

Se ve mejor con Explorer Meta tags Web social 2.0 Dinmico y flexible Contenido separado de la visualizacin: CSS (Cascade Style Sheet) Estndares W3C, Accesibilidad SEO (Search Engine Optimization) Publicidad contextual (palabras clave) Cambio de paradigma: cdigo 3. Web semntica 3.0 Profundizacin web social Agentes inteligentes (no humanos) Marketing semntico (contextual+ relevancia) Prdida de privacidad Poder procesadores de informacin Web mvil Multiplicidad infinita de dispositivos Cdigo semntico Contenido estructurado semntico (datos con descripcin, significado y relacin) + Profundizacin Contenido/visualizacin HTML 5 y CSS 3 Microdata, RDF, OWL Cdigo adaptativo Apps nativas e hbridas Responsive web design Cambio de paradigma: profundizacin 4. Multiplicidad de dispositivos Web mvil 5. Aplicaciones nativas, hbridas o web Web mvil 6. Aplicaciones nativas, hbridas o web Web mvil 7. App nativa Aprovecha toda la capacidad del dispositivo (tel, cmara, sensores, gps, mapas, notificaciones, ...) Mayor seguridad Se puede acceder sin conexin Costoso Desarrollo para cada SO Mantenimiento y actualizacin Pago por distribucin Distribucin en store de cada entorno (vidriera o limitacin) Posibilidad de pago por descarga Requiere instalacin Web responsive Requiere conexin Menor seguridad Distribucin libre + SEO No necesita instalacin Econmico. Desarrollo nico para todos los entornos (Es ms costoso que una web no responsive) Mantenimiento y actualizacin simples Web mvil 8. Contenido adaptativo Responsive Web Design http://mediaqueri.es/ 9. Multiplicidad de formatos: estructura adaptable Responsive Web Design 10. Distancia de lectura variable Legibilidad: escalar tamao letra Responsive Web Design 11. Diseo de estados segn ancho Cantidad de breakpoints segn diseo Responsive Web Design 12. Diseo de estados segn ancho Determinar breakpoints relevantes Responsive Web Design 13. Diseo de navegacin Select, icono, footer http://bradfrostweb.com/blog/web/responsive-nav- patterns/ Responsive Web Design 14. Cdigo Evitar miniaturizacin 20. HTML 5 Sintaxis tolerante HTML o XHTML Case insensitive Cierre de etiquetas opcional /> Atributos booleanos = 21. Etiquetas Obsoletas http://www.w3.org/TR/html5/obsolete.html Atributos Obsoletos HTML 5 22. Nuevos elementos estructurales HTML 5 23. Nuevos elementos multimedia Animacin (+ JS) SVG (scalable vector graphics) HTML 5 24. Formularios: nuevos search, tel, url, email, number, range, datetime, datetime-local, date, month, week, time, color Validacin sin procesar Mvil Interfase del navegador Placeholder, required HTML 5 25. Pseudoclases (estado/estructura) :hover a:hover{ color:red } Form :valid, :invalid, :required :first-child, :last-child, :nth-child()

elemento 1

elemento 2

:lang(es)

Pseudoelementos (posicin) ::first-letter ::first-line ::before, ::after p:before { content: "Cuidado!"; background-color: yellow;} ::selection CSS 3 26. Transformaciones Transiciones Animaciones Fuentes propias Columnas Transparencia Degrad Bordes redondeados CSS 3 27. Transformaciones a:hover {transform: scale(1,5)} transform: translate(30px,10px) Prefijos .ejemplo { /* Safari and Chrome */ -webkit-transform:rotate(17deg); /* IE 9 */ -ms-transform:rotate(17deg); /* Firefox */ -moz-transform:rotate(17deg); /* Opera */ -o-transform:rotate(17deg); } Transiciones transition: 1s; transition: all 2s easy; Animaciones @keyframe nombre #objeto {animation-name:nombre;} Ejemplo http://tiny.cc/ofbjjx CSS 3 28. Fuentes propias @font-face { font-family: nombre; src: url('fuente.woff') src: url('fuente.ttf') } h1{ font-family: nombre, arial, sans- serif; } Columnas column-width: 120px; column-gap: 24px; column-rule: 2px solid #666; CSS 3 29. Color: transparencia background-color: rgb(100,20,40); background-color: rgba(100,20,40,0.5); Degrad background-image: linear- gradient(red, white); Bordes redondeados border-radius: 15px 0px 25px 0px; Sombra box-shadow: 10px 10px 5px #999; http://css3gen.com/ CSS 3 30. Microdata (atributos) microformato (class)

Avatar

Director: James Cameron (born August 16, 1954)

Science fiction Trailer

Microdata