This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.
() translation by (you can also view the original English article)
Introducción
Cuando las tablets y los teléfonos inteligentes empezaron a emerger, muchos editores desarrollaron distintas versiones de sitios web, o al menos árboles de código HTML generados de forma distinta, buscando personalizar la experiencia de los visitantes en diferentes dispositivos. Ciertamente soluciones surgieron para hacerlo más fácil, como éste plugin de tema de WordPress para dispositivo móvil:
Pero, para realmente proporcionar una experiencia sólida para los visitantes en todos los dispositivos, la mayoría de los proyectos requerían duplicar o triplicar el diseño, la codificación y los esfuerzos de testeo.
El concepto de diseño web responsivo buscaba unificar el árbol de código, eliminar las copias de código, y proporcionar un enfoque más sencillo para proporcionar una experiencia de usuario de alta calidad a través de los dispositivos. Primero, requería un poco de experimentación y algo de experiencia, pero hoy, se ha convertido en una práctica masiva. Es un testamento para la orientación alrededor de la ingeniería DRY. (No te repitas)
Cuando lancé mi sitio WordPress personal, elegir un diseño responsivo era aún un gran salto-y muchos sitios ejecutaban con diferentes niveles de calidad la experiencia para sus visitantes.
La liberación de Bootstrap de código abierto de Twitter ayudó a transformar tremendamente la adaptabilidad en diseño web. Probablemente, como yo, ejecutas un tema responsivo en tu sitio web y estás familiarizado con los conceptos generales de presentación dinámica. Pero ¿sabes como funciona realmente el diseño web responsivo? ¿Sabes como construir algo responsivo desde cero? ¿Te gustaría aprender más?
El ADN del Diseño Web Responsivo
En éste tutorial, te alentamos a revisar el libro blanco más reciente de Telerik sobre diseño web responsivo (RWD). Las Técnicas que se deben conocer para Elaborar Aplicaciones HTML5 para Cualquier Tamaño de Pantalla, que puedes descargar gratis ahora mismo, proporciona una guía detallada para responder éstas interrogantes y te ayuda a adentrarte rápidamente en el tema.
Hay muchas razones de por qué el diseño web responsivo ha pasado de ser llamado una tendencia a ser sinónimo de mejores prácticas web. Es una forma rápida y efectiva para proporcionar una experiencia ajustable a usuarios web de escritorio o de dispositivos móviles. Puedes usar las habilidades con las que cuentas, tener un código base, un conjunto de URLs y un lenguaje de diseño.
El libro blanco te enseña lo que debes saber de las prácticas web responsivas de manera que puedas elaborar aplicaciones para cualquier tamaño de pantalla. Te enseña cómo:
- aprovechar los elementos de conjunto básicos de diseño web responsivo-sistemas de grillas, media queries y contenido flexible-para crear maquetados responsivos que cambian y ocultan o muestra elementos basándose en el dispositivo del visitante.
- elegir un framework de diseño web responsivo como Bootstrap o Zurb's Foundation.
- usar características avanzadas de Bootstrap, como contenedores fluidos, desplazar columnas, empujar/jalar y más, para lograr aún los más complejos escenarios web responsivos.
En éste tutorial, te daré un breve resumen de lo que ofrece el libro blanco. También, participo en las discusiones de abajo. Si tienes alguna pregunta o sugerencia de tópico, por favor publica un comentario o mandame directamente un correo electrónico o un tuit.
Aquí están algunas de las áreas que el libro blanco te enseñará.
Media Queries
Media queries son parte de CSS3, y es lo que hacen posible el diseño web responsivo.
Esencialmente, media queries ayudan al navegador a decir los condicionales en tu código CSS de como aplicar estilos, ocultar o revelar elementos de contenido.
Aquí está un ejemplo para el tamaño de dispositivo más pequeño con una anchura mayor a 768 px:
1 |
/* Base style for small devices small and up */
|
2 |
.hero-text { font-size: 22px; } |
3 |
/* For large and up */
|
4 |
@media only screen and (min-width: 768px) { |
5 |
.hero-text { font-size: 48px; } |
6 |
}
|
Frameworks populares como Bootstrap, Foundation y Telerik RadPageLayout hacen uso extensivo de media queries para crear sus poderosos sistemas de grillas.
Grillas y Puntos de Quiebre
Usando media queries en tu código, puedes construir hojas de estilo con grillas que responden fluídamente a dispositivos-ajustando dinámicamente qué y cómo el visitante ve tu contenido basándose en su dispositivo y la anchura de su navegador.
La sintaxis puede variar entre frameworks, pero el concepto general es el mismo. Cada tamaño de dispositivo tiene una correspondiente media query y propiedades de estilo que crean el efecto de maquetado deseado. Éstas media queries son referidas como puntos de quiebre. Bootstrap identifica sus puntos de quiebre como xs (extra pequeños), sm (pequeños), md (medianos), lg (largos). Éstos se refieren al tamaño del dispositivo.
Aquí están algunos ejemplos de Bootstrap y que podrían renderizar en dispositivos de diferentes tamaños:
1 |
<div class="col-sm-12 col-md-6 col-lg-4"> <!-- some navigation --> |
2 |
</div>
|
3 |
<div class="col-sm-12 col-md-6 col-lg-8"> |
4 |
<!-- some content -->
|
5 |
</div>
|
Arriba a la izquierda se refiere a dispositivos pequeños y tabletas más pequeñas, arriba a la derecha se refiere a dispositivos de tamaño mediano. Más abajo se refiere a dispositivos más grandes y computadoras de escritorio.
Otro concepto común es el contenedor de contenido básico. El elemento contenedor es el elemento más exterior del maquetado. Su propósito es crear el espacio en blanco entre el maquetado y el borde de la ventana del navegador.
Trabajando con Contenido
El libro blanco también muestra el contenido de instrucciones de tu diseño web responsivo para expandir o contraer basándose en el tamaño del dispositivo del visitante:
Seleccionando un Framework
Creo que elegir estándares es increíblemente importante para el éxito en el desarrollo de software. Ayuda a equipos a comunicarse y permite que nuevas personas se adentren en el tema de manera rápida. Hace la contratación de gente más fácil sabiendo sus habilidades en tecnologías estándar. Y facilita la actualización para seguridad, desempeño y funcionalidades más fácil con el tiempo-especialmente cuando se usan tecnologías de código abierto.
Elegir un framework estándar en el diseño web responsivo puede hacer una enorme diferencia para el éxito o fracaso de tu proyecto. El libro blanco de Telerik te guía por los pros y los contras de uno de los más populares, Bootstrap:
Bootstrap ofrece lo mejor en características de clase como grilla responsiva sólida, diseño móvil primero, clases asistentes CSS, componentes JavaScript adaptables y muchas más. La grilla es, por defecto, una grilla estándar de 12 columnas con una sintaxis simple para crear maquetados que soportan múltiples tamaños de pantalla.
El libro blanco también destaca Zurb Foundation. Es un framework de código abierto que evolucionó desde Bootstrap.
Foundation cuenta con características avanzadas ajustables para equipos con experimentados desarrolladores front-end, particularmente esos que usan Sass.
Características Avanzadas de Maquetado
El libro blanco incluye también un número de tópicos avanzados:
- Contenedores Fluídos
- Filas anidadas
- Desplazamientos de Columnas
- Empujar/Jalar
Sin ir demasiado lejos, nos da a la mayoría de nosotros una muy detallada introducción a los aspectos más importantes que necesitas saber.
¡Descarga el Libro Blanco ahora!
Espero que te haya intrigado lo suficiente para que quieras aprender más. Como administrador de proyecto que regularmente maneja personas con experiencia en éstos asuntos, encontré que ésta es un guía sobre el funcionamiento del diseño web extremadamente fácil de entender.
¿Quieres indagar más sobre esto? Visita la colección del Libro Blanco de Telerik y descarga ahora Técnicas que se Deben Conocer para Elaborar Aplicaciones HTML5 para cualquier tamaño de pantalla.
Una Cosa Más...
Éstos frameworks responsivos son importantes puntos de inicio e incluyen componentes UI para comenzar tu proyecto. Los componentes generalmente contienen las características básicas necesarias para operar y elaborar prototipos. Sin embargo, tus aplicaciones más avanzadas y de más funcionalidades requieren características de interfaz de usuario más robustas. Pronto, buscarás una suite UI compatible con diseño web responsivo.
Telerik Kendo UI
El Telerik Kendo UI tiene una grilla, gráficas, calendario responsivo, y más-componentes que funcionan perfectamente con cualquier framework de diseño web responsivo que estés usando. Es hecho por nuestro auspiciante que creó el libro blanco RWD de arriba.
Solo quiero darte un rápido recorrido visual de lo que puedes esperar de Kendo UI:
Grillas
Elaborar controles avanzados de grillas interactivas nunca es fácil. Kendo UI proporciona una poderosa y flexible grilla lista para usarse:
Calendario
Gráficas
Kendo UI incluye gráficas integradas:
Editor
Y hay un editor con numerosas funcionalidaes fácilmente configurable:
Widgets
De hecho, hay una librería con más de 73 UI widgets para añadir:
¿Qué sigue?
Básicamente en éste punto, hay dos cosas por hacer:
- Descargar las Técnicas que se Deben Conocer para Elaborar Aplicaciones HTML5 para Cualquier Tamaño de Pantalla para aprender sobre diseño web responsivo y frameworks.
- Regístrate para el Período de Prueba Gratuito del Framework Kendo UI y comienza con la descarga del código.
Espero que estés intrigado por lo que el libro blanco del HTML5 de Telerik puede ofrecerte (y por el Framework Kendo UI). Por favor con toda confianza publica tus experiencias en la sección de abajo, así como tus preguntas y comentarios. También puedes enviarme directamente un tuit a @reifman o un correo electrónico, y navegar por mi página de instructor en Evato Tuts+ para ver otros tutoriales que he escrito.
Enlaces Relacionados
¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!
