Banner

DESARROLLO Y DISEÑO WEB

Listado de Artículos sobre CSS3

Responsive Design: Primeros Pasos

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.

Responsive Design: Soporte y características de Media Queries

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: La plataforma para que los niños aprendan a programar

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.

Animate: Animaciones en SVG

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.

Pattern: Definición de patrones en SVG

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.

SVG Filters: Uso de feturbulence (Turbulencias)

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.

SVG Filters: Filtros en SVG

Los 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.

SVG Filters: Uso de feOffset (Compensaciones)

Esta 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.

SVG Filters: Uso de feMerge (Combinaciones)

El filtro feMerge permite la combinación de filtros de forma concurrente, en vez de secuencialmente. En lugar de que cada primitiva de filtro se aplique a la salida de la primitiva de filtro que le precede, feMerge nos proporciona una forma para almacenar temporalmente la salida de cada filtro, para así, colocarlas en el tapiz en orden de abajo hacia arriba. Es evidente que las capas superiores deberían tener cierta transparencia (o estar incompletas) dentro del en el área afectada por el filtro, a fin de permitir que esas capas por debajo sean visibles.

SVG Filters: Uso de feImage (Imágenes)

Esta primitiva de filtro se refiere a un gráfico externo al elemento de filtro que es cargado o renderizado y que, finalmente, se convierte en el resultado de la primitiva de filtro. Puede hacer referencia a una imagen externa o puede ser una referencia interna o externa de otra pieza de SVG. Se produce una imagen similar a la incorporada en el SourceGraphic de la imagen de entrada, excepto que el gráfico proviene de una fuente externa.

Página   1  2  3  4