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
Un Explorador Web o Navegador es un programa que permite visualizar páginas web en la red y acceder a otros recursos y documentos almacenados, y que ofrece características como la gestión de pestañas, configuración y fijación de pestañas.
Este documento proporciona un resumen de tres oraciones o menos:
Este documento presenta los principios básicos de diseño y usabilidad web, incluyendo la importancia de centrarse en la experiencia del usuario y aplicar técnicas como el Diseño Centrado en el Usuario. También describe conceptos como usabilidad, conversiones y los beneficios de aplicar estas técnicas, como aumentar las ventas y fidelizar clientes. El documento termina con una bibliografía y recursos adicionales sobre el tema.
El documento describe las diferencias entre la Web 1.0, 2.0 y 3.0. La Web 1.0 era unidireccional y contenía principalmente texto. La Web 2.0 permitió la interacción entre usuarios y el contenido generado por los usuarios. La Web 3.0 usa datos semánticos y programas inteligentes para una manipulación de datos más eficiente.
El documento describe diferentes navegadores web, incluyendo sus características y popularidad. Explica que un navegador web permite ver páginas web y navegar entre ellas mediante enlaces. Luego discute navegadores específicos como Chrome, Firefox, Internet Explorer, Opera y Safari, destacando sus fortalezas y debilidades. Finalmente, incluye una tabla con estadísticas que muestran las cuotas de mercado de los principales navegadores.
Desarrollos de aplicaciones móviles con tecnologías webJulio Alfaro
Este documento describe las herramientas y tecnologías web para desarrollar aplicaciones móviles, incluyendo Responsive Web Design con media queries y JavaScript no obstrusivo, frameworks como jQuery Mobile y CSS como Less, y el uso de HTML5, polyfills y CSS3 con prefijos. También explica cómo crear páginas para navegar en el navegador móvil y soluciones híbridas como PhoneGap que permiten el acceso a periféricos nativos móviles con programación web.
El documento presenta una comparación de las características clave de la Web 1.0, Web 2.0 y Web 3.0. La Web 1.0 se caracteriza por páginas estáticas y el uso de marcos, mientras que la Web 2.0 se centra en el contenido agregado por los usuarios y las redes sociales. La Web 3.0 se describe como inteligente, rápida, ubicua y de fácil acceso, con énfasis en la sociabilidad y la tridimensionalidad. También se enumeran algunas ventajas y desventajas de
Estandares Web, Accesibilidad y Usabilidadricardogil
El documento habla sobre la historia y evolución de la web desde su creación en 1989 hasta la actualidad. Comienza describiendo los estándares web más importantes como XHTML, HTML, CSS y su importancia para que todos puedan acceder a la información de forma igual. Luego describe los principios de accesibilidad web y las ventajas de tener un sitio accesible. Finalmente, ofrece un curso sobre maquetación con estándares, accesibilidad y usabilidad web.
- WordPress es el CMS más popular del mundo debido a su fácil instalación y uso, pero tiene limitaciones en cuanto a escalabilidad para sitios de alto tráfico. Joomla es más flexible y escalable que WordPress aunque menos intuitivo. Drupal es el más poderoso y adecuado para sitios grandes y dinámicos pero requiere de mayores conocimientos técnicos. En general, WordPress es la mejor opción para la mayoría de proyectos pequeños y medianos, Joomla para proyectos medianos y grandes, y Drupal para los sitios más grandes
El documento compara las características de la Web 1.0, Web 2.0 y Web 3.0. La Web 1.0 consistía en páginas estáticas con información de sólo lectura. La Web 2.0 introdujo servicios de redes sociales y plataformas de publicación que permitieron una mayor interacción e inmediatez pero a veces con contenido de baja calidad. La Web 3.0 se centrará en búsquedas inteligentes pero inicialmente será inaccesible para muchos usuarios.
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.
El documento habla sobre los beneficios de diseñar sitios web usando estándares en lugar de código y marcado no estándar. Al usar estándares como HTML, CSS y XML creados por el W3C, los sitios web pueden funcionar de manera duradera en diferentes navegadores y dispositivos presentes y futuros sin necesidad de crear múltiples versiones. Además, los estándares permiten un mejor control sobre el diseño visual, comportamientos sofisticados y cumplir directrices de accesibilidad.
El documento presenta una comparación de las características, ventajas y desventajas de la Web 1.0, Web 2.0 y Web 3.0. La Web 1.0 tenía páginas estáticas y marcos, mientras que la Web 2.0 incluye redes sociales, blogs y etiquetas. La Web 3.0 pretende comprender mejor a los seres humanos y acceder a datos de manera descentralizada.
Introducción y características de webnodedavinanathy
Webnode es un sistema en línea para crear páginas web que utiliza tecnología arrastrar y soltar. Permite crear sitios web personales, empresariales y tiendas en línea. Funciona en los principales navegadores y permite edición de páginas desde dispositivos móviles. Ofrece plantillas optimizadas para móviles y versiones gratuita y premium.
Este documento habla sobre los widgets, que son pequeñas aplicaciones móviles que ofrecen funciones específicas como información o entretenimiento. Explica qué es un widget, cómo funcionan, dónde se pueden publicar, las tecnologías involucradas y herramientas para crearlos. También menciona algunas compañías que han integrado widgets en sus plataformas móviles.
El documento describe las nuevas características y capacidades de HTML5 como una plataforma para el desarrollo de juegos en la web, incluyendo nuevas API para almacenamiento, geolocalización, WebSockets y controladores de juegos. También recomienda bibliotecas como Processing.js que permiten el desarrollo de juegos visuales en HTML5 sin plugins. El documento concluye con una invitación a hacer preguntas y referencias adicionales sobre el tema.
Este documento define la accesibilidad web como la posibilidad de que un sitio web pueda ser accedido y usado por el mayor número de personas posible, independientemente de sus limitaciones o contexto de uso. Su objetivo principal es lograr que las páginas sean utilizables por todos, independientemente de sus capacidades o equipo. Algunos beneficios de la accesibilidad incluyen mayor cuota de mercado, eficiencia y responsabilidad social. El documento luego explica seis principios para lograr la accesibilidad web, como cumplir estándares,
El documento habla sobre los estándares web. Explica que el W3C creó especificaciones como HTML, CSS y DOM para promover la evolución de la web. También menciona a ECMA y sus estándares como ECMAScript (JavaScript). Luego detalla por qué usar estándares ayuda a mejorar la indexación, portabilidad, interoperabilidad y accesibilidad de los sitios web. Finalmente concluye que los sitios basados en estándares son más accesibles y que las empresas e instituciones deben seguirlos.
Student Mentoring Programs: The Why's, How's, and MoreCindy Pao
This document outlines how to establish student mentoring programs within English curriculums. It discusses pairing students with professionals in areas like creative writing, technical writing, and linguistics. It describes the benefits of mentoring for mentees, mentors, and organizations. It provides details on how to start a program, including recruiting mentors and mentees, suggested activities, and administrative materials that can be adapted from an existing mentoring program toolkit. The presentation aims to demonstrate how mentoring can strengthen student and professional communities within the field of English.
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
This document provides an introduction and overview of Bootstrap, an open-source front-end framework for developing responsive, mobile-first web sites and apps. It discusses what Bootstrap is, its mobile-first approach, rich component set, theming and customization options. It also demonstrates how to set up and configure Bootstrap, customize it using SASS and CSS overrides, and highlights some of the speaker's recent publications.
"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.
This document discusses bringing an atomic design approach to Sitecore development. It introduces atomic design principles which involve building up small reusable components (atoms) into larger molecules and organisms. These can then be assembled into templates and pages. The document demonstrates how this approach can be translated to Sitecore by creating renderings, data templates and other items to represent atoms, molecules, organisms etc. It discusses challenges of the approach and benefits such as improved portability, consistency and extensibility.
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.
This document summarizes an agenda for a responsive design roundtable discussion. The roundtable will cover topics including what responsive design is, the user continuum, and mobile web vs responsive design vs apps. It will take place on June 12, 2013 from 8am to 10am and be led by Christian Glover Wilson. The agenda includes 4 topics to discuss and time for Q&A.
The document discusses responsive web design and compares it to other approaches like adaptive web design. It addresses some myths around responsive design, including that every website should be responsive, that it hurts performance, and that it limits creativity. It also discusses technical aspects like media queries and their uses beyond mobile screens.
Joseph Labrecque gave a presentation on responsive web design. He defined responsive web design as allowing desktop web pages to adapt to different screen sizes. He discussed important concepts like CSS media queries and fluid grids. He demonstrated how to use media queries to apply different styles based on screen width. He also overviewed common CSS layout methods and responsive frameworks like Bootstrap and Foundation. Finally, he highlighted tools for responsive design like browser developer tools and Adobe programs like Dreamweaver and Animate.
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.
This document discusses the differences between domain models and relational database models. Specifically, it notes that in a domain model, a member entity can have a member status anywhere, but in a relational database, the member status is only available if joined from another table. It recommends using inversion of control and interfaces to decouple the view, domain, and data access layers so that domain entities never return null values for member status.
This document discusses the history and concepts of responsive web design. It covers topics like fluid grids and layouts, flexible images and videos, media queries, and the advantages of responsive design. The key points are:
- Responsive web design allows websites to automatically adjust to different screen sizes through fluid grids and layouts, flexible images and media queries.
- Media queries allow different CSS styles to be applied based on screen width and orientation.
- Responsive design helps create a better user experience by optimizing websites for various devices like desktops, tablets and phones.
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.
The document introduces modern web technologies including starting mobile/touch first, HTML5, CSS3, and AJAX/JavaScript. It provides overviews of new HTML5 features like semantic markup, forms, geolocation, web storage, canvas, and offline capabilities. It also discusses CSS3 features, single page applications enabled by AJAX and JavaScript improvements, and how these technologies can be used together to provide rich user experiences.
El documento habla sobre los principios de usabilidad web y el diseño web líquido o fluido. Explica que la usabilidad web se centra en la accesibilidad, ubicación y navegación clara para los usuarios. También describe el diseño web líquido como una técnica para crear plantillas que se ajustan automáticamente al tamaño de la pantalla usando CSS3, lo que permite mostrar el contenido en diferentes dispositivos de manera efectiva con un solo código.
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
Este documento describe la importancia de tener un diseño web responsivo para adaptarse a diferentes dispositivos. Explica que con el aumento del uso de dispositivos móviles, las páginas web deben adaptarse al tamaño de la pantalla para mejorar la experiencia del usuario. También destaca las ventajas de un diseño responsivo como mejor experiencia del usuario, menores costos y mejor posicionamiento en los buscadores.
Este documento describe los principios del diseño web responsivo. Explica que el diseño web responsivo construye un sitio adaptable a múltiples dispositivos mediante el uso de una grilla flexible, imágenes flexibles y consultas de medios. También cubre estrategias de contenido, optimización de recursos y carga condicional para adaptarse a las limitaciones y capacidades de cada dispositivo.
El documento resume los conceptos clave de internet y el desarrollo web, incluyendo la historia de internet, navegadores vs buscadores, lenguajes de programación web populares, tendencias frontend, y optimizaciones importantes como código limpio, usabilidad, y optimización para dispositivos móviles. El autor invita a los lectores a hacer preguntas o comentarios.
El diseño web implica la planificación, diseño e implementación de sitios web, requiriendo considerar la navegabilidad, interactividad, usabilidad y otros factores. Un buen diseño y jerarquía de contenidos mejoran la eficiencia de la web como canal de comunicación. El diseño web se ha aplicado ampliamente en sectores comerciales de Internet y también es usado por artistas para difundir su obra.
El documento habla sobre los aspectos fundamentales de la creación de páginas web. Explica que es importante diseñar para la audiencia objetivo, concebir el diseño gráfico de manera lógica y considerar aspectos técnicos como el tamaño de monitores. También discute editores como Dreamweaver y FrontPage, y navegadores como Internet Explorer, Firefox y Chrome. Resalta la importancia de probar las páginas en diferentes navegadores antes de publicarlas.
Este documento describe los principios de usabilidad web y diferentes tipos de diseño web como diseño líquido, responsivo e híbrido. Explica que el diseño responsivo permite que un sitio web se adapte a diferentes pantallas utilizando una sola hoja de estilos CSS, mientras que el diseño líquido requiere versiones separadas para cada tamaño de pantalla. El diseño híbrido combina enfoques de ancho fijo, líquido y elástico para lograr compatibilidad con diferentes resoluciones y tamaños de fuente.
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.
La web es un sistema de documentos interconectados accesibles a través de Internet usando un navegador. El documento discute cómo se usó la web en un laboratorio de física, incluyendo páginas populares como Google, Gmail y YouTube. También cubre temas como el acceso a la web, el uso de estándares como XHTML y hojas de estilo CSS, y las ventajas de las aplicaciones web como el acceso remoto.
Este documento describe las diferencias entre la Web 2.0 y la Web 3.0. La Web 2.0 permite a los usuarios crear y publicar contenido a través de aplicaciones como YouTube y blogs, mientras que la Web 3.0 permitirá ejecutar procesos y aplicaciones prácticas a través de estándares abiertos. La Web 3.0 consistirá en aplicaciones web interconectadas que gestionarán datos en la nube y podrán ejecutarse en cualquier dispositivo.
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
Este documento describe el diseño web, que consiste en la planificación, diseño, implementación y mantenimiento de sitios web. Explica que el diseño web involucra aspectos como el diseño gráfico, interfaz de usuario, interacción multimedia, estructura de la información y optimización para motores de búsqueda. También cubre las etapas del diseño web como el diseño visual, estructura jerárquica y posicionamiento SEO, así como consideraciones de accesibilidad, historia y evolución del HTML.
Los mapas de navegación proporcionan una representación de la estructura de un sitio web para orientar a los usuarios durante su navegación. Existen diferentes tipos de mapas como diagramas globales con los nodos principales o mapas "ojo de pez" que muestran diferentes niveles de detalle. Las páginas dinámicas generan contenido HTML a partir de lenguajes de programación ejecutados en el servidor, mientras que las páginas estáticas contienen información fija. El diseño centrado en el usuario busca crear experi
Dreamweaver permite el uso de "Extensiones", que son pequeños programas creados por desarrolladores web en HTML y Javascript que ofrecen funcionalidades adicionales. Dreamweaver cuenta con el apoyo de una gran comunidad de desarrolladores de extensiones que crean extensiones gratuitas y de pago para la mayoría de las tareas de desarrollo web. También se puede complementar con Fireworks para diseñar imágenes para un sitio web y luego exportarlas e incluirlas en Dreamweaver.
Dreamweaver permite el uso de "Extensiones", que son pequeños programas escritos por desarrolladores web en HTML y Javascript que ofrecen funcionalidades adicionales. Dreamweaver cuenta con el apoyo de una gran comunidad de desarrolladores de extensiones que crean extensiones gratuitas y de pago para la mayoría de las tareas de desarrollo web. También se puede complementar con Fireworks para diseñar imágenes y exportarlas a Dreamweaver.
Este documento resume las tecnologías web fundamentales como HTML, CSS y JavaScript, así como frameworks populares como jQuery y Bootstrap. Explica brevemente qué es cada tecnología y cómo funcionan juntas para crear sitios y aplicaciones web dinámicas e interactivas.
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
Informática al servicio de la investigación.pptxuriel255784
como usar la informatica para la investigación:
Clasificación de las fuentes de información
Búsquedas generales
Búsqueda específicas
Acceso a documentos
¿Cómo leer una publicación académica?
Ranking de journals, instituciones y países
Búsquedas de bases de datos
Búsquedas de patentes
Gestionar la información académica
Social bookmarking
Redes sociales
Generalidades
Planificación de proyecto, Objetivos, Estimaciones, Análisis de Riesgo y Viab...CODEC1
Investigación sobre la Planificación de Proyectos, ¿Como se debe hacer una Planificación de un Proyecto?, ¿Como se deben estimar los Objetivos? y ¿Como deben ser las estimaciones de tiempo y costo? ¿Qué es el análisis de riesgo y viabilidad del proyecto?
Planificación de proyecto, Objetivos, Estimaciones, Análisis de Riesgo y Viab...
Responsive Web Design
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