Responsive web design
Upcoming SlideShare
Loading in...5
×
 

Responsive web design

on

  • 553 views

Introducción al concepto de responsive web, css3 y html5,

Introducción al concepto de responsive web, css3 y html5,

Statistics

Views

Total Views
553
Views on SlideShare
553
Embed Views
0

Actions

Likes
0
Downloads
18
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Responsive web design Responsive web design Document Transcript

  • Introducción alRESPONSIVEWEB DESIGN#HTML5 + CSS3#Diseño fluido #diseño receptivo#Concepto #Ventajas
  • HTML5 + CSS3Introducción a El cambio en las tecnologías del que hablamos también se ve reflejado en la evolución de los navegadores y la necesidad de actualizar el lenguaje HTML a los tiempos moder- nos, con el fin de superar las capacidades hoy limitadas, del HTML 4 y Adobe FLASH. Tanto CSS 3 como HTML 5, establecen los nuevos estandares para el desarrollo de apli-Responsive caciones web: Audio, video, Acceso a las webcams, animaciones, etc. Todas estas ven- tajas independientemente de que navegados se este usando y sin plugins de por medio. En cuanto al diseño, el HTML5 incorpora Etiquetas semánticas, que amplían notable- mente el significado y la funcionalidad de una web.web design <header> <nav>Concepto <section> <aside>Olvidemos la necesidad de diseñar una web para resoluciones de pantalla específicas, <article>dejemos de lado las medidas en pixels y hagámonos amigos de los porcentajes. Este esel momento donde ya no son los desarrolladores quienes deben adaptar un sitio web alas diversas pantallas y dispositivos sino las mismas webs quienes lo hagan automáti-camente. <footer>Traduciendo Literalmente al español, “Responsive design” sería diseño sensible. A pesarde que las traducciones son variadas y en ocasiones también se lo denomina adaptati-vo o adaptable, lo cierto es que el concepto es una respuesta a la necesidad de mejorarla usabilidad de quienes navegan la web.En los últimos años los sitios web pasaron de poseer un cierto tipo estandarizadode resolución a lo que hoy es una diversidad de dispositivos PC, Notebooks, Tablets y Diseño fluido y diseño receptivoSmartphones con diferentes resoluciones de pantalla. Antes teníamos un diseño webpara lo que se conoce como PCs de escritorio, y se tenía que diseñar a su vez otra web El diseño fluido no debe ser confundido con el diseño receptivo. Ambas técnicas sonpara dispositivos móviles . complementarias, y un usuario puede detectar rápidamente si un sitio web ha sido desa- rrollado de esta manera.Ahora el paradigma cambió totalmente, y una web debe ser receptiva y ser adaptable al La principal evidencia para detectarlo fácilmente, es que no crea un scroll horizontaldispositivo en el cual estamos navegando. debido a que la estructura del diseño web se va adaptando al tamaño del dispositivo y la resolución en la que se la está visualizando. Esta adaptación es posible por el cambio de los valores de medida relativos y el uso de media queries.
  • Para el diseño receptivo se tiene en cuenta que para determinado dispositivo, es probable Diseño fluido:que se pueda omitir el uso y la visualización de algún elemento. Por ejemplo, es muy co- • No trabaja con pixel perfect. Para una determinada resolución de pantalla.mún que se transforme un menú de navegación en un menú desplegable. O bien, tenga- • Uso de valores de medida relativos (em, %)mos la decisión que determinado elemento de la web no se visualice para Smartphone. • Determinar mínimos y máximos previamente Diseño receptivo: • Utilización de diseño fluido • Estructura de elementos flexibles • Uso de media queries. (Detecta la resolución de salida) Ventajas Links Google recomienda a los webmasters el uso del “Responsive web design”: http://googlewebmastercentral.blogspot.com.ar/2012/06/recommendations-for-buil- ding-smartphone.html https://developers.google.com/webmasters/smartphone-sites/ http://es.scribd.com/doc/104313542/Multiscreenworld-Final Encuentre más ejemplos en http://mediaqueri.es/
  • ¿Qué es lo que sigue?Si bien las aplicaciones del diseño responsable están avanzadas y su aplicación masifi-cada, siempre es bueno tener una mirada hacia el futuro. Qué otros usos es posible quenos brinde esta técnica. Cuál será el techo, si es que lo tiene. Para muestra basta conun botón dicen, por lo que para terminar, presentamos “Responsive Typography”.Utilizando detección de rostro mediante una cámara en tiempo real, el texto del disposi-tivo mantendrá siempre la proporción en relación a la distancia en la que estemos le-yendo. Si nos acercamos, el tamaño de la letra disminuye y por el contrario al alejarnos,aumenta.Fuente: http://webdesign.maratz.com/lab/responsivetypography/realtime/Librería: https://github.com/auduno/headtrackr/Autor: Marko Dugonjić http://maratz.com/Más información: http://informationarchitects.net/blog/responsive-typography-the-basics/Fuente: www.g2khosting.com/blog