Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Designing
Code

Técnicas Que Se Deben Conocer para el Diseño Responsivo HTML5

by
Difficulty:BeginnerLength:ShortLanguages:
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

The DNA of Responsive Web Design white paper

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:

Telerik Responsive Web Design Early Mobile Web Plugin for WordPress

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.

Telerik Responsive Web Design Media Queries

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:

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:

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.

Telerik Responsive Web Design Grid Examples

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.

Telerik Responsive Web Design Container

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:

Telerik Responsive Web Design Working with Content

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:

Telerik Responsive Web Design 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.

Telerik Responsive Web Design Zurb Foundation

Foundation cuenta con características avanzadas ajustables para equipos con experimentados desarrolladores front-end, particularmente esos que usan Sass.

Características Avanzadas de Maquetado

Telerik Responsive White Paper Advanced Layouts

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.

 Telerik Responsive Web Design The Kendo UI

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:

Telerik Kendo UI Grids

Calendario

Hay una vista de calendario:

Telerik Kendo UI Scheduler

Gráficas

Kendo UI incluye gráficas integradas:

Telerik Kendo UI Charts

Editor

Y hay un editor con numerosas funcionalidaes fácilmente configurable:

Telerik Kendo UI Rich Text Editor

Widgets

De hecho, hay una librería con más de 73 UI widgets para añadir:

Telerik Kendo UI Widgets

¿Qué sigue?

Básicamente en éste punto, hay dos cosas por hacer:

  1. 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.
  2. 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!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.