IslaVisual
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.
Leer másUna 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.
Leer másHoy 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.
Leer másComo 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.
Leer másTynker, 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.
Leer másSVG 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.
Leer másLos 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.
Leer másEsta 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.
Leer másLos filtros se beden declarar en la etiqueta defs. Para aplicar un filtro a un determinado elemento se establece la propiedad filter que contiene un conjunto de primitivas de filtro y realiza una sóla operación fundamental gráfica (por ejemplo, un desenfoque gaussiano o un efecto de iluminación) en una o más entradas, produciendo, así, una imagen. Debido a que gran parte de las primitivas de filtro representan alguna forma de procesamiento de imágenes, en la mayoría de los casos, la salida de filter dará como resultado una única imagen de mapa de bits RGBA. Sin embargo, se regenerara si se cambia a una resolución mayor.
Leer másEsta primitiva se utiliza para mover un elemento o pedazo de imagen, típicamente la referenciada por SourceGraphic o BackgroundImage, alrededor del lienzo o tapiz dentro de un filtro con propósitos de la realineación. Es importante si queremos producir sombras paralelas.
Leer másSobre el autor
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.