Cuando desarrollamos un proyecto web en Responsive Web Design, uno de los retos al que nos enfrentamos es el dilema de las imágenes escalables. Existen formas sencillas para escalar una imagen (por ejemplo, determinando el tamaño de la misma relativo a su contenedor). Sin embargo estás soluciones no son a menudo lo más óptimo. A finales del año pasado la W3C publicaba el primer borrador para el uso imágenes en Responsive Design, pero como puede pasar mucho tiempo hasta que veamos resultados debemos mirar otras opciones.
Las nuevas versiones de los navegadores traen un hermoso regalo referente al CSS3. Hoy os voy a comentar la función calc, la cual, nos permite de forma sencilla gestionar el ancho y alto de los elementos cuando, estos, tienen padding o margin. Según la especificación W3C la función, básicamente, lo que permite es sustituir el valor fijo de cualquier dimensión que se aplica a una propiedad por una expresión de un cálculo matemático sencilla como sumas, restas, multipliaciones y / o divisiones. De esta manera, a través de esta función podemos escribir cosas como:
Como os prometí, hoy haremos otro vistazo rápido a algunas técnicas para el diseño de formatos de tablas Responsive. Unas más utilizadas como el método unseen o olumna oculta y otras menos como el Flip Scroll o desplazamiento volteado pero, seguro, interesantes. Esta técnica, descrita por primera vez por Stuart Curry implica simplemente ir ocultando columnas de menor importancia en función de la resolución del dispositivo.
Una de los problemas más frecuentes que nos encontramos cuando nos metemos en el mundo del Diseño Responsive es el diseño de tablas. Esta tarea podemos hacerla tan complicada como se quiera pero, por ello, hoy vamos a hablar únicamente de este tema. Como se trata de aprender la metodología Responsive pondremos 2 ejemplos sin demasiadas complicaciones aunque, sin duda, muy útiles y didácticos. Uno con DIV's y otro con TABLE.
Hoy empezamos un nuevo tutorial en el que intentaremos aprender lo que tan de moda esta, el Responsive Design. Muchos ya habréis oido hablar del concepto y otros, incluso, ya lo habréis usado. Empezaremos definiendo qué es Responsive Design. Responsive Web Design (RWD) es un enfoque de diseño web, destinado a la elaboración de sites, que intenta conseguir una visualización y experiencia óptima en cualquier dispositivo, desde los monitores de ordenador de escritorio hasta dispositivos móviles. Se centra en mejorar la navegación, facilitar la lectura ajustando el contenido al dispositivo e intenta evitar los desplazamientos.
Como decíamos en el artículo de ayer, las Media Queries tienen soporte en Internet Explorer 9+, Firefox 3.5+, Safari 3+, Opera 7+, así como en los smartphones más modernos y otros dispositivos móviles. Aunque versiones viejas de IE no soporten los Media Queries, puedes -y deberías- empezar a usarlos ahora. Más adelante se discute como lidiar con versiones viejas de navegadores. A continuación se muestra la lista de características de dispositivos que se pueden usar con Media Queries.
Tynker, una startup californiana, ha lanzado una nueva plataforma diseñada para que niños de todas las edades aprendan programación de una forma intuitiva, creativa y colorida. Su cofundador y CEO, Krishna Vedati, explica en TechCrunch que tuvo la idea de crear Tynker después de gastarse 1.100 dólares en un curso de programación para su hijo de 9 años. Durante dos semanas aprendió a diseñar un juego, pero no aprendió nada de cómo construir un programa.
SVG nos proporciona una manera sencilla de realizar animaciones. Antes de meterse en esta sección uno debería asegurarse de que entiende el código SVG básico, ya que este artículo usa muchas de las cosas ya explicadas con anterioridad. Aún así, si se está familiarizado con HTML y CSS3 debería ser capaz de entenderlo en una pequeña o mayor medida. Hay cinco elementos disponibles que producen movimiento en SVG. Cada uno de ellos tiene un propósito diferente. Lo primero de todo para aprender a crear actividad en gráficos vectoriales escalables es entender los elementos y qué acciones se realizan. Una vez que comprendamos cada uno de ellos de forma individual, seremos capaces de hacer animaciones complejas.
Los patrones ofrecen una de las formas más atractivas de relleno para SVG, pero también el más confuso. La clave es empezar poco a poco y construir capa sobre capa. En este punto, no te preocupes por nada, pero los elementos del patrón. La creación de patrones, aunque en principio parezca complicado, es tan sencillo como utilizar formas, trayectorias, imaágenes, etc. Sólo hay que agruparlas dentro de una cláusula pattern. La relación entre el tamaño del lienzo y el patrón definirá su aspecto.
Esta primitiva de filtro crea una imagen utilizando la función de turbulencia de Perlin. Se permite la síntesis de texturas artificiales como nubes o mármol. La imagen resultante llenará toda la subregión de la primitiva de filtro dada en el elemento filter. A menudo se utiliza para crear texturas. Crea patrones de ruido suave visual que rellenan un rectángulo con remolinos bastante agradables de color pastel.
Imagen de Pablo Enrique Fernández CasadoPablo Enrique Fernández Casado
CEO de IslaVisual, Manager, Full Stack Analyst Developer y formador por cuenta ajena con más de 25 años de experiencia en el campo de la programación y más de 10 en el campo del diseño, UX, usabilidad web y accesibilidad web. También es escritor y compositor de música, además de presentar múltiples soft kills como la escucha activa, el trabajo en equipo, la creatividad, la resiliencia o la capacidad de aprendizaje, entre otras.
Especializado en proveer soluciones integrales de bajo coste y actividades de consultoría de Usabilidad, Accesibilidad y Experiencia de Usuario (UX), además de ofrecer asesoramiento en SEO, optimización de sistemas y páginas web, entre otras habilidades.
Consentimiento para cookies y datos
Este sitio web utiliza cookies para permitir la navegación entre páginas, procesar información de dispositivos finales, cargar imágenes desde CDNs externos (como pixabay) y extraer datos personales recopilados por Google Analytics (como objetivo analilzar el tráfico o la IP origen, entre otros).
Ten en cuenta que, al rechazar las cookies, se eliminará todo rastro dejado y se abandonará la página de manera inmediata.
IslaVisual
