Share
Cuando empezaron a surgir las tabletas y los teléfonos inteligentes, muchos editores desarrollaron sitios web claramente separados o, al menos, árboles de código HTML, para personalizar la experiencia de los visitantes en diferentes dispositivos. Ciertamente, surgieron soluciones para hacerlo más fácil, como este complemento de tema de WordPress móvil:
Pero, para proporcionar realmente una experiencia sólida para los visitantes en todos los dispositivos, la mayoría de los proyectos requirieron esfuerzos de diseño, codificación y prueba duplicados o triplicados.
El concepto de diseño web sensible buscaba unificar el árbol de código, eliminar las bifurcaciones de código y proporcionar un enfoque más simple para proporcionar una experiencia de usuario de alta calidad en todos los dispositivos. Al principio, requirió un poco de experimentación y algo de experiencia temprana, pero hoy en día, se ha convertido en la corriente principal. Es un testimonio de orientación en torno a la ingeniería DRY..
Cuando lancé mi sitio personal de WordPress, la elección del diseño receptivo fue todavía un gran salto, y muchos sitios se realizaron con diferentes niveles de calidad para la experiencia de su visitante.
La versión de código abierto de Bootstrap en Twitter ayudó a transformar enormemente la capacidad de respuesta en el diseño web. Probablemente, como yo, ejecute un tema sensible en su sitio web y esté familiarizado con los conceptos generales de la presentación dinámica. ¿Pero sabes cómo funciona el diseño web sensible bajo el capó? ¿Sabes cómo construir algo sensible desde cero? Te gustaría aprender mas?
En este tutorial, lo alentamos a que consulte el último documento de Telerik sobre diseño web adaptable (RWD). Técnicas indispensables para crear aplicaciones HTML5 para cualquier tamaño de pantalla, que puede descargar de forma gratuita en este momento, proporciona una guía extraordinariamente detallada para responder a estas preguntas y ayudarlo a ponerse al día..
Hay muchas razones por las que el diseño web responsivo ha pasado de llamarse tendencia a ser sinónimo de mejores prácticas web. Es una manera rápida y rentable de brindar una experiencia personalizada a los usuarios de web de escritorio y móviles. Puede utilizar su conjunto de habilidades existentes, tener una base de código, un conjunto de URL y un idioma de diseño.
El documento técnico le enseña lo que debe saber acerca de las prácticas web receptivas para que pueda crear aplicaciones para cualquier tamaño de pantalla. Te enseña cómo:
En este tutorial, solo le daré un breve resumen de lo que ofrece el libro blanco. Además, participo en las discusiones a continuación. Si tiene alguna pregunta o sugerencia sobre un tema, por favor, publique un comentario o un tweet en mí @reifman o envíeme un correo electrónico directamente.
Estas son algunas de las áreas sobre las cuales le enseñará el libro blanco..
Las consultas de medios son parte de CSS3, y son las que hacen posible el diseño web sensible.
Esencialmente, las consultas de medios ayudan al navegador a indicar los condicionales en su código CSS cómo diseñar, ocultar o revelar elementos de contenido.
Aquí hay un ejemplo para el tamaño de dispositivo más pequeño en hasta uno con un ancho mayor que 768 px:
/ * Estilo base para dispositivos pequeños y pequeños * / .hero-text font-size: 22px; / * Para pantalla grande y superior * / @media only y (min-width: 768px) .hero-text font-size: 48px;
Marcos populares como Bootstrap, Foundation y Telerik RadPageLayout hacen un uso extensivo de las consultas de los medios para crear sus potentes sistemas de red..
Al usar consultas de medios dentro de su código, puede construir hojas de estilo con cuadrículas que responden de manera fluida a los dispositivos, ajustando dinámicamente cómo y cómo el visitante ve su contenido según su dispositivo y el ancho de su navegador..
La sintaxis puede variar entre marcos, pero el concepto general es el mismo. Cada tamaño de dispositivo tiene una consulta de medios y propiedades de estilo correspondientes que crean el efecto de diseño deseado. Estas consultas de medios se conocen como puntos de ruptura. Bootstrap identifica sus puntos de ruptura como xs (extra pequeño), sm (pequeño), md (med), lg (grande). Estos se refieren al tamaño del dispositivo..
Aquí hay algunos ejemplos de Bootstrap y lo que pueden representar en dispositivos de diferentes tamaños:
La parte superior izquierda es dispositivos pequeños y tabletas más pequeñas, la parte superior derecha es dispositivos de tamaño mediano. Baja es dispositivos y escritorios más grandes..
Otro concepto común es el contenedor de contenido básico. El elemento contenedor es el elemento más externo del diseño. Su propósito es crear espacios en blanco entre el diseño y el borde de la ventana del navegador.
El documento técnico también muestra que el diseño web sensible indica al contenido que se expanda o se contraiga según el tamaño de visualización del visitante:
Creo que elegir los estándares es increíblemente importante para el desarrollo exitoso de software. Ayuda a los equipos a comunicarse y permite que nuevas personas se aceleren rápidamente. Facilita la contratación de personas conociendo su conjunto de habilidades en tecnologías estándar. Y hace que las actualizaciones de seguridad, rendimiento y funciones sean más fáciles con el tiempo, especialmente cuando se utilizan tecnologías de código abierto..
La elección de un marco estándar en diseño web sensible puede hacer una gran diferencia en el éxito o fracaso de su proyecto. El libro blanco de Telerik lo guía a través de los pros y los contras de uno de los más populares, Bootstrap:
Bootstrap ofrece las mejores características de su clase, como una grilla de respuesta sólida, primer diseño móvil, clases de ayudante de CSS, componentes de JavaScript adaptativos y mucho más. La cuadrícula es, de manera predeterminada, una cuadrícula estándar de 12 columnas con una sintaxis simple para crear diseños que admitan múltiples tamaños de pantalla.
El libro blanco también destaca la Fundación Zurb. Es un marco de código abierto que evolucionó desde Bootstrap..
La Fundación está repleta de funciones avanzadas adecuadas para equipos con desarrolladores front-end experimentados, particularmente aquellos que usan Sass.
El documento técnico también incluye varios temas avanzados:
Sin ir demasiado lejos, nos brinda a la mayoría de nosotros una introducción muy detallada de los aspectos más importantes que debe conocer..
Espero haberte intrigado lo suficiente como para que quieras aprender más. Como gerente de proyecto que administra regularmente personas con experiencia en estos temas, encontré que esta es una guía estupenda y fácil de entender para el diseño web sensible y cómo funciona..
¿Quieres bucear? Visite la colección del Libro Blanco de Telerik y descargue Técnicas indispensables para crear aplicaciones HTML5 para cualquier tamaño de pantalla ahora.
Estos marcos de respuesta son puntos de partida importantes e incluyen componentes de la interfaz de usuario para iniciar su proyecto. Los componentes generalmente contienen las características básicas necesarias para operar y construir prototipos. Sin embargo, sus aplicaciones más avanzadas y completas de características requieren características de interfaz de usuario más robustas. Pronto, está buscando una suite de interfaz de usuario compatible con la web sensible.
La interfaz de usuario de Telerik Kendo tiene una cuadrícula, gráficos, programador y más componentes que funcionan a la perfección con cualquier marco de diseño web sensible que esté utilizando. Está hecho por nuestro patrocinador que creó el documento técnico de RWD anterior..
Solo quiero ofrecerle un recorrido visual rápido de lo que puede esperar de la interfaz de usuario de Kendo:
Crear controles de cuadrícula interactivos avanzados nunca es fácil. La interfaz de usuario de Kendo proporciona una cuadrícula potente y flexible lista para usar:
Hay una vista de calendario (o calendario):
La interfaz de usuario de Kendo incluye gráficos incorporados:
Y hay un editor rico en funciones y fácilmente configurable:
De hecho, hay una biblioteca llena de 73 widgets más de UI para agregar:
Básicamente, en este punto, hay dos cosas que debes hacer:
Espero que esté intrigado por lo que el documento técnico HTML5 de Telerik puede ofrecer (y por el marco de la interfaz de usuario de Kendo). Por favor, siéntase libre de publicar sus experiencias a continuación, así como preguntas y comentarios. También puedes twittearme en @reifman o enviarme un correo electrónico directamente, y navegar por la página de mi instructor Envato Tuts + para ver otros tutoriales que he escrito..
Accentsconagua