Banner

DESARROLLO Y DISEÑO WEB

Listado de Artículos

Responsive Design: Menú de Navegación Multinivel

Hoy os voy a exponer un menú desplegable experimental multinivel. La idea principal es ahorrar espacio para menús que tienen una gran cantidad de contenido y subniveles. Cada sub-nivel se muestra en su propio contexto, por lo que el nivel del elemento padre desaparece, aunque pulsando la opción de back ( o atrás) vuelve a aparecer. Esto se hace con animaciones sutiles que se definen en clases de animación separadas y de forma fluida, de manera que se puede utilizar fácilmente en cualquier dispositivo y resolución.

Cómo sacar el slider de Prestashop de la columna central

Hoy, en este tutorial vamos a aprender cómo extraer el módulo HomeSlider de PrestaShop de la columna central a la zona de la cabecera. Por defecto, este módulo no puede ser movido o trasplantado fuera de la columna central. Sin embargo, es más simple y fácil de lo que parece a primera vista. Probablemente, cuando se trata de hacer este cambio, a la fuerza bruta, se muestre este error:

Drag and Drop desde cualquier dispositivo y navegador

Una de las cosas que siempre me ha gustado es la tecnología Drag and Drop pero por temas de Cross Browser, casi nunca lo he desarrollado en ninguna página. Pues bien, Redisp.net tiene desarrollado un plugin en JavaScript que funciona perfectamente, o casi, en todos los navegadores y dispositivos que he tenido la suerte de probar, desde portatiles, PCs de sobremesa hasta mis 2 móviles.

Responsive Design: Imágenes escalables

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.

Responsive Design: calc y la propiedad box-sizing de CSS3

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:

Responsive Design: Tablas CSS3 II

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.

Responsive Design: Tablas CSS3

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.

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.

Página   1  2  3  4  5