Este documento presenta la filosofía del diseño web adaptable o responsive design. Explica que con el aumento de dispositivos conectados a Internet, es necesario crear sitios web que se adapten a diferentes tamaños de pantalla. Define el responsive design como una filosofía que permite que un mismo sitio web se vea bien en todo tipo de dispositivo sin importar las resoluciones o tamaños, gracias a técnicas como media queries, proporciones flexibles y elementos adaptables. Finalmente, recomienda herramientas como frameworks front-end como Bootstrap para facilit
El diseño web responsivo o adaptativo, cómo su nombre lo indica tiene la finalidad de adaptar o diseñar sitios a la medida de cualquier tamaño de pantalla lo cuál es una gran ventaja hoy en dia.
El diseño web responsivo o adaptativo, cómo su nombre lo indica tiene la finalidad de adaptar o diseñar sitios a la medida de cualquier tamaño de pantalla lo cuál es una gran ventaja hoy en dia.
Estandares Web, Accesibilidad y Usabilidadricardogil
divulgar las tareas del W3C y tratar de concienciar a los desarrolladores de las ventajas del uso de los estándares, de la importancia de hacer páginas web accesibles y de lo importante que resulta una buena experiencia de usuario en nuestras webs a través de la usabilidad
Conferencia dictada por Javier Gómez Corio sobre el tema de la movilidad y cómo Joomla! lo ha asumido. Participación de alto interés, para quienes se orientan al mercado de los teléfonos celulares.
This is the thing that U are looking for. This is the best tutorial about responsive web design.I assure U after watching this presentation you definitely will be an expert as responsive web designer. This tutorial will teach you how to make fit your web site in every kinds of device .
This Slide will Provide you with tips and ideas related to each of the qualities that a successful responsive web design must have.
For hire me on fiverr:-
https://goo.gl/Ouv3VL
Web Design And Development With Open SourceBaki Goxhaj
This is my presentation at "Software Freedom Kosova Conference 2009" where I spoke about Web Design and Development with Open Source tools. The conference was held in Pristina, Kosova on 29 and 30 August 2009. This presentation was done with Open Office Impress.
It's been 6 years since the term Responsive Web Design (RWD) was coined and today is difficult to see new projects without implementing it. But this time has allowed us to see the implementation can be even more important than the technique and the theory.
The RWD covers from the performance to the implementation of patterns and "standard" behaviors to improve usability.
In this session reviewed tools, techniques and concepts to improve our projects:
- Performance and best practices
- CSS structuring and optization (BEM, SMACSS, etc.)
- Fixed-Pixel vs rem, em and %
- Responsive images. Drupal non-Drupal solutions and SVGs
- Asynchronous Javascript loading
- Typography in a responsive environment and FOUT, FOIT effects
- How proxy-based browsers like Opera Mini can affect, and how accessibility and Progressive Enhancement can help.
- Beyond the Mouse: Touch and keyboard events
- Using RWD patterns
Estandares Web, Accesibilidad y Usabilidadricardogil
divulgar las tareas del W3C y tratar de concienciar a los desarrolladores de las ventajas del uso de los estándares, de la importancia de hacer páginas web accesibles y de lo importante que resulta una buena experiencia de usuario en nuestras webs a través de la usabilidad
Conferencia dictada por Javier Gómez Corio sobre el tema de la movilidad y cómo Joomla! lo ha asumido. Participación de alto interés, para quienes se orientan al mercado de los teléfonos celulares.
This is the thing that U are looking for. This is the best tutorial about responsive web design.I assure U after watching this presentation you definitely will be an expert as responsive web designer. This tutorial will teach you how to make fit your web site in every kinds of device .
This Slide will Provide you with tips and ideas related to each of the qualities that a successful responsive web design must have.
For hire me on fiverr:-
https://goo.gl/Ouv3VL
Web Design And Development With Open SourceBaki Goxhaj
This is my presentation at "Software Freedom Kosova Conference 2009" where I spoke about Web Design and Development with Open Source tools. The conference was held in Pristina, Kosova on 29 and 30 August 2009. This presentation was done with Open Office Impress.
It's been 6 years since the term Responsive Web Design (RWD) was coined and today is difficult to see new projects without implementing it. But this time has allowed us to see the implementation can be even more important than the technique and the theory.
The RWD covers from the performance to the implementation of patterns and "standard" behaviors to improve usability.
In this session reviewed tools, techniques and concepts to improve our projects:
- Performance and best practices
- CSS structuring and optization (BEM, SMACSS, etc.)
- Fixed-Pixel vs rem, em and %
- Responsive images. Drupal non-Drupal solutions and SVGs
- Asynchronous Javascript loading
- Typography in a responsive environment and FOUT, FOIT effects
- How proxy-based browsers like Opera Mini can affect, and how accessibility and Progressive Enhancement can help.
- Beyond the Mouse: Touch and keyboard events
- Using RWD patterns
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...Yandex
Responsive web design challenges web designers to apply a new mindset to their design processes, as well as to techniques they are using in design and coding. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.
Responsive web design allows you to create websites that provide an optimal user experience across devices. In this session, attendees learned why the process for designing a (good) responsive website can be very different than the traditional web design process—and how to change their workflow to create a great responsive site.
Presented in 2015 at McFullStack (McGill University, Montreal). Presented in 2014 at HOW Interactive Design Conference in Washington, DC & HOW Interactive Design Conference in Chicago, IL.
Responsive is the new buzzword!
The main idea here is to:
* kill the buzzword, and replace it with some accurate truth
* and talk about the very difficult industrialization of the wireframing process, and some ideas for solutions to it (experimental part!)
HTML5 and CSS3 have taken shape and are being put to use everyday. What does this mean for you and how do you know if you are leveraging them correctly? Shay Howe, user interface engineer at Groupon, will break down HTML5 and CSS3 showing you how to build a better user interface and improve the over all user experience. New HTML5 input types and CSS3 rounded corners are just the begging, learn what else can help bring your website to the next level.
A hands-on workshop at EuroIA in Brussels, Belgium, on 27 Sept. 2014.
Learn the process for creating responsive websites. Gain an understanding of the HTML & CSS behind responsive design, so you can design responsive experiences that can be easily implemented by a multi-disciplinary team. Target audience: UX designers with at least a basic knowledge of HTML & CSS.
Presentación realizada en la Institución Universitaria CEIPA (Colombia) que aborda -desde la comunicación y la producción Web- aspectos relevantes para el diseño responsive web.
Si quieres tener website amigables para dispositivos móviles, esta presentación puede aportar elementos de interés.
Esta presentación está en constante construcción.
Consejos Prácticos para Mejorar tu Web y Vender MásAlojate.com
Mientras muchas empresas han ido innovando y actualizando tanto su diseño web como su usabilidad, adaptándose a los continuos cambios en el mundo online, hay otras muchas empresas cuyas webs siguen con diseños obsoletos y sin preocuparse por la usabilidad.
Hablar de tecnología es sinónimo de evolución constante, todo a nuestro alrededor está inmerso en los avances tecnológicos lo que significa que quienes la dominan se ven obligados a la creación de algo cada vez más llamativo para captar la atención de los usuarios tal es el caso de los diseñadores web.
Estándares Web y Accesibilidad en ColombiaGabriel Porras
Ponencia para el "3er Congreso de Investigación y Tecnología en Usabilidad, Realidad Virtual y Robótica" (http://www.uniquindio.edu.co/sinfoci/congreso.htm)
Oct. 21 de 2006
Un sitio web de presentación se define como una aplicación construida para mostrar información en forma de presentación de diapositivas. Cualquier herramienta de presentación debe tener tres funciones fundamentales:
Un editor de texto: para introducir el contenido de la presentación.
Una función de importación: insertar y manipular imágenes y otros contenidos.
Un modo de presentación de diapositivas o presentador: que muestra el contenido de una manera agradable y formateada.
PROGRAMAS BASICOS
- Adobe Muse
- Pingendo
-Bluegriffon
PROGRAMAS NIVEL MEDIO
1. Adobe Dreamweaver
2. Brackets
3. microsoft visual Stude Code
4. Adobe Animate
PROGRAMAS AVANZADOS:
1. Webstorm o Phpstorm
2. Eclipse
3. Aptanastudio
Catalogo general Ariston Amado Salvador distribuidor oficial ValenciaAMADO SALVADOR
Distribuidor Oficial Ariston en Valencia: Amado Salvador distribuidor autorizado de Ariston, una marca líder en soluciones de calefacción y agua caliente sanitaria. Amado Salvador pone a tu disposición el catálogo completo de Ariston, encontrarás una amplia gama de productos diseñados para satisfacer las necesidades de hogares y empresas.
Calderas de condensación: Ofrecemos calderas de alta eficiencia energética que aprovechan al máximo el calor residual. Estas calderas Ariston son ideales para reducir el consumo de gas y minimizar las emisiones de CO2.
Bombas de calor: Las bombas de calor Ariston son una opción sostenible para la producción de agua caliente. Utilizan energía renovable del aire o el suelo para calentar el agua, lo que las convierte en una alternativa ecológica.
Termos eléctricos: Los termos eléctricos, como el modelo VELIS TECH DRY (sustito de los modelos Duo de Fleck), ofrecen diseño moderno y conectividad WIFI. Son ideales para hogares donde se necesita agua caliente de forma rápida y eficiente.
Aerotermia: Si buscas una solución aún más sostenible, considera la aerotermia. Esta tecnología extrae energía del aire exterior para calentar tu hogar y agua. Además, puede ser elegible para subvenciones locales.
Amado Salvador es el distribuidor oficial de Ariston en Valencia. Explora el catálogo y descubre cómo mejorar la comodidad y la eficiencia en tu hogar o negocio.
En este documento analizamos ciertos conceptos relacionados con la ficha 1 y 2. Y concluimos, dando el porque es importante desarrollar nuestras habilidades de pensamiento.
Sara Sofia Bedoya Montezuma.
9-1.
Catalogo Refrigeracion Miele Distribuidor Oficial Amado Salvador ValenciaAMADO SALVADOR
Descubre el catálogo general de la gama de productos de refrigeración del fabricante de electrodomésticos Miele, presentado por Amado Salvador distribuidor oficial Miele en Valencia. Como distribuidor oficial de electrodomésticos Miele, Amado Salvador ofrece una amplia selección de refrigeradores, congeladores y soluciones de refrigeración de alta calidad, resistencia y diseño superior de esta marca.
La gama de productos de Miele se caracteriza por su innovación tecnológica y eficiencia energética, garantizando que cada electrodoméstico no solo cumpla con las expectativas, sino que las supere. Los refrigeradores Miele están diseñados para ofrecer un rendimiento óptimo y una conservación perfecta de los alimentos, con características avanzadas como la tecnología de enfriamiento Dynamic Cooling, sistemas de almacenamiento flexible y acabados premium.
En este catálogo, encontrarás detalles sobre los distintos modelos de refrigeradores y congeladores Miele, incluyendo sus especificaciones técnicas, características destacadas y beneficios para el usuario. Amado Salvador, como distribuidor oficial de electrodomésticos Miele, garantiza que todos los productos cumplen con los más altos estándares de calidad y durabilidad.
Explora el catálogo completo y encuentra el refrigerador Miele perfecto para tu hogar con Amado Salvador, el distribuidor oficial de electrodomésticos Miele.
Catalogo Buzones BTV Amado Salvador Distribuidor Oficial ValenciaAMADO SALVADOR
Descubra el catálogo completo de buzones BTV, una marca líder en la fabricación de buzones y cajas fuertes para los sectores de ferretería, bricolaje y seguridad. Como distribuidor oficial de BTV, Amado Salvador se enorgullece de presentar esta amplia selección de productos diseñados para satisfacer las necesidades de seguridad y funcionalidad en cualquier entorno.
Descubra una variedad de buzones residenciales, comerciales y corporativos, cada uno construido con los más altos estándares de calidad y durabilidad. Desde modelos clásicos hasta diseños modernos, los buzones BTV ofrecen una combinación perfecta de estilo y resistencia, garantizando la protección de su correspondencia en todo momento.
Amado Salvador, se compromete a ofrecer productos de primera clase respaldados por un servicio excepcional al cliente. Como distribuidor oficial de BTV, entendemos la importancia de la seguridad y la tranquilidad para nuestros clientes. Por eso, trabajamos en colaboración con BTV para brindarle acceso a los mejores productos del mercado.
Explore el catálogo de buzones ahora y encuentre la solución perfecta para sus necesidades de correo y seguridad. Confíe en Amado Salvador y BTV para proporcionarle buzones de calidad excepcional que cumplan y superen sus expectativas.
1. Responsive Web Design
Interfaces Web Adaptables al dispositivo
empleando HTML5 y CSS3
Adrián Alonso Vega
RESPONSIVE DISPOSITVOS CSS3ADAPTABLE HTML5
1/32
2. Introducción
Este proyecto tiene como objetivo
presentar la filosofía “Responsive Web
Design” que actualmente se encuentra
en auge
• 5000 millones de dispositivos conectados a Internet
• En 2020, 31.000 millones de dispositivos
• Triplicada la venta de tablets en mercado español
BUSCAR SOLUCIONES
Adaptar UI a tamaños y resoluciones diversas
• 2000. Páginas webs optimizadas a resolución
• 2007. Lanzamiento de Iphone
• 2008. W3C en “Mobile Best Practices” definió el concepto One Web
• 2010. Responsive Web Design por Ethan Marcote
ADELANTARSE AL FUTURO
UNA WEB PARA GOBERNARLOS A TODOS
2
3. ¿Qué es Responsive Web Design?
• Filosofía para solucionar problemas de diseño para la diversidad de
dispositivos
• Una misma web para todo tipo de dispositivo (Un solo código)
• No debe importar resoluciones, tamaños ni orientaciones, la web
debe adaptarse al dispositivo
3 CLAVES: Media Queries Proporciones Elementos Flexible
3
4. Crecimiento del dispositivo Móvil
• En India el uso del dispositivo móvil ha
superado al de escritorio
• Se estima que entre finales de este año
y 2015 el dispositivo móvil reine sobre el
de escritorio a nivel global
• Comercio electrónico cada vez más
importante en estos dispositivos
• En 2012 3000 millones de dólares
mas que en 2011 en EBAY
• En 2011 el tráfico de Twitter fue del 55%
• En 2011, 1 de cada 7 búsquedas en Google a través de dispositivo
móvil
• Actualmente, 68% de penetración móvil en Facebook
Dispositivos indispensables en nuestras vidas,
siempre se llevan encima.
4/30
5. Aplicación Nativa vs Aplicación Web
- Fácil Mantenimiento
- Última versión actualizada
- No requiere supervisión
- En cualquier plataforma.
- Muy eficientes
- Características del dispositivo
- Apoyo de los markets de apps
- Compatibilidad con navegadores
- Requieren conexión a internet
- Privacidad
- Propio entorno y lenguaje
- Mayor coste
- Necesario portar para otras
plataformas
VENTAJAS
INCONVENIENTES
VENTAJAS
INCONVENIENTES
5/30
8. Media Queries
@media screen and (min-width: 960px)
{
/* Código CSS*/
}
MAX-WIDTH MIN-WIDTH ORIENTATION MIN-DEVICE-WIDTH
8/30
9. Viewport
• Zona visible del navegador
• Por defecto, navegadores muestran sitio completo
• Gracias a la meta viewport definimos
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1">
9/30
10. Medidas Relativas
#column1 { width: 45%; }
#column2 { width: 30%; }
#column3 { width: 35%; }
CAMBIAR LA FORMA DE PENSAR
#wrapper { width: 90%}
10/30
12. Fuentes Flexibles
<body>
<p> Responsive <span>Design</span> mola! </p>
</body>
body{ font-size: 100%}
14px/16px= 0.875 em
p { font-size: 0.875em}
18px/14px = 1.2757em
p span { font-size: 1.2857em }
12/30
13. Mostrando y ocultando contenido
display:none
visibility
Inconveniente:
Se carga todo aunque no se muestre
13/30
14. Rendimiento Web
Preocupante, por que mostrar la web en móvil requiere un coste
Objetivo: Mejorar experiencia de usuario
Recomendaciones:
• Emplear herramientas para analizar tiempo de cargas y evaluar rendimiento
• No abusar de display:none
• CSS Y JS en únicos ficheros, evitar muchas peticiones HTTP
• Evitar embeber CSS Y JS, siempre en ficheros, se cachean
• Minimizar código
• CSS en el header y JS al final.
• Evitar redireccionamientos
14/30
15. Compatibilidad de Navegadores
CROSS BROWSER: Diseño de páginas webs que se ven y se comportan
exactamente igual sin importar el navegador
SOLUCIONES:
Hojas de estilos específicas
Validar HTML y CSS
RESET CSS
15/30
16. IE y los MediaQueries
Microsoft no da soporte a IE7 ni IE8 para interpretar mediaqueries
SOLUCION: RESPOND.JS
<script type=”text/javascript” src=”js/respond.min.js”></script>
https://github.com/scottjehl/Respond)
16/30
17. Librería javascript que detecta funcionalidades de HTML5 y CSS3
que son compatibles con el navegador.
Permite escribir CSS y Javascript condicional
if (Modernizr.canvas)
{
// Pintar Canvas
}
else
{
alert(‘Su navegador no soporta la funcionalidad HTML5 Canvas') ;
}
17/30
18. Ventajas de RWD
• Reducción de costes de desarrollo, una sola implementación
• Eficiencia al realizar procesos de mantenimiento y
actualización
• Mejora de la usabilidad, experiencia de usuario única
• Google premia RWD, posicionamiento web
• Informes de tráfico mas reales
• Beneficio de tecnologías móviles
• Innovador
Desventajas de RWD
• Tiempos de carga en dispositivos móviles
• Mayor tiempo de optimización de diseño y de código
• Todo el mundo quiere cambiar su web a Responsive
• Compatibilidad con navegadores
18/30
21. ¿Cómo probar RWD?
Existen multitud de herramientas Online, que nos permiten
probar dispositivos del mercado, redimensionar nuestro
navegador, plugins que nos proporcionan las dimensiones del
viewport
Quirktools.com / Screenfly
(https://quirktools.com/screenfly/)
21/30
22. ¿Qué es un framework front-end?
Un framework para front-end es un conjunto de conceptos y
herramientas que nos facilita considerablemente el trabajo de
diseñar una web proporcionándonos una base o esqueleto para
nuestros nuevos diseño
- Agilidad y rapidez
- Funcionalidad
- Apoyo de la comunidad web
- Emplea buenas prácticas
- Abstracción para decisiones como
breakpoints
- Pérdida de Libertad
- Código menos flexible
- Menos control
- Curva de aprendizaje
INCONVENIENTESVENTAJAS
22/30
23. Twitter Bootstrap es una colección de herramientas de software
libre para la creación de sitios y aplicaciones web.
Contiene plantillas de diseño basadas en HTML y CSS con
tipografías, formularios, botones, gráficos, barras de navegación y
demás componentes de interfaz, además de extensiones
de JavaScript.
Agilidad Multinavegador
Integrable Ligero
http://twitter.github.io/bootstrap/
23/30
30. Muchas Gracias
Espero que haya sido
una presentación
agradable para ustedes
• Importancia del usuario móvil
• Buenas experiencias de usuario y accesibilidad
• Objetivo: llegar a todo tipo de usuario sin excepción de
navegador o dispositivo
• Herramientas suficientes: HTML5 y CSS3, mediaqueries,…
• Empleando frameworks o construir el sitio desde cero
Conclusión
30/30