Publicidad

RSS CSS3

¿Se puede hacer operaciones matemáticas con CSS?: sí, con la función calc()

18 Comentarios
¿Se puede hacer operaciones matemáticas con CSS?: sí, con la función calc()

addEventListener('load', function (event) { prettyPrint() }, false);

Suena a ciencia ficción poder realizar cálculos en el CSS, pero así es, sin necesidad de JavaScript podemos realizar sumas, restas, multiplicaciones y divisiones gracias a la función calc().

Pero lo mejor es que nos permite sumar distintas unidades (como em, px, %...), lo que nos facilitará la labor de ajustar elementos con medidas relativas que tengan, por ejemplo, bordes o márgenes que suelen tener el tamaño en píxeles y descolocan gran parte del diseño, esto algo que dificulta los diseños adaptables. Y otra gran ventaja es que funciona hasta con Internet Explorer 9 (increíble, pero cierto).

Leer más »
Publicidad

¿Adobe quiere poco a poco llevar las funciones de su Creative Suite a HTML5?

9 Comentarios
¿Adobe quiere poco a poco llevar las funciones de su Creative Suite a HTML5?

Adobe es la mayor empresa desarrolladora de software destinado a la creación de contenidos multimedia (como Photoshop, InDesign, After Effects...), en su momento adquirió Flash (a Macromedia) y lo llevó a lo más alto, pero Flash ha muerto (sin contar Flex) y desde entonces decidió participar activamente en la elaboración de nuevos estándares web, proponiendo tecnologías muy similares a las que usa su suite, sin duda para poder crear un software que cree estos contenidos, pero los desarrolladores y los diseñadores somos los que más salimos ganado con tecnologías que ya están en uso como las transiciones y las animaciones de CSS3.

Leer más »

Responsive Design: puesta en marcha

49 Comentarios
Responsive Design: puesta en marcha

addEventListener('load', function (event) { prettyPrint() }, false);

Ya he contado la mayoría de lo que hay que saber sobre el Responsive Design, pero algunas veces lo difícil es aplicarlo de la forma que necesitamos o mostrar el contenido de una forma eficaz sin perder en diseño ni usabilidad, y en esto es en lo que me voy a centrar, en estructurar correctamente de distintas formas el contenido de una página que se adapta a distintos tipos de pantalla.

Leer más »

Responsive Design: adaptar imágenes y vídeos

30 Comentarios
Responsive Design: adaptar imágenes y vídeos

addEventListener('load', function (event) { prettyPrint() }, false);

Como comenté en el artículo sobre la estructura básica del Responsive Design, un diseño adaptable deja de serlo si cuando lo visualizas desde un móvil ves que las imágenes y los vídeos sobresalen de la página, por lo que os voy a enseñar como hacer que se adapten a distintos tipos de pantalla los contenidos multimedia (imágenes y vídeos de HTML5, Youtube y Vimeo).

Leer más »

Crea estilos a la carta con CSS3 Generator

4 Comentarios
Crea estilos a la carta con CSS3 Generator

addEventListener('load', function (event) { prettyPrint() }, false);

Aunque ya llevamos unos años con CSS3 entre nosotros (de hecho, los primeros borradores de esta versión se escribieron el último año del siglo pasado), es tal la cantidad de selectores, propiedades y espacios de nombres que nos ofrece, que todavía muchos de nosotros no sabemos muy bien cómo dar determinados estilos complejos, o lo que es peor, ni siquiera sabemos que esos formatos se pueden dar mediante hojas de estilos, y seguimos acudiendo a soluciones del pasado como diseñar algo en Photoshop para darle sombras o tridimensionalidad, para posteriormente exportarlo como imagen y aplicarlo a nuestros elementos HTML.

Por eso es de agradecer que existan herramientas como CSS3 Generator, que mediante simples selecciones nos permite modificar aspectos de nuestros elementos, a la vez que nos muestra una vista previa en tiempo real y el código asociado. Hacer un div con bordes redondeados de forma irregular, con sombra y múltiples columnas ya no tiene por qué suponer un dolor de cabeza.

Leer más »
Publicidad

Demostraciones de W3C en la Barcelona Mobile World Congress 2012

1 Comentario
Demostraciones de W3C en la Barcelona Mobile World Congress 2012

Hoy se ha iniciado uno de los acontecimientos tecnológicos del año en la ciudad de Barcelona, el Mobile World Congress 2012. Que constituye la reunión más importante a nivel mundial de todo lo relacionado con el mundo de la movilidad, que está tan pujante en la actualidad.

Los participantes son prácticamente todos los gigantes relacionados con los dispositivos móviles, tanto de hardware o de software. Y entre ellos nos encontramos con la gente de la W3C, encargados de definir el futuro de HTML5 y CSS3, entre otras muchas cosas.

Por lo cual creo muy recomendable, para los desarrolladores, acercarse a la capital catalana y disfrutar de la interesante agenda de demostraciones relacionadas con la Open Web Platform.

Leer más »

Diseñando tu nuevo proyecto web con Bootstrap 2.0

42 Comentarios
Diseñando tu nuevo proyecto web con Bootstrap 2.0

addEventListener('load', function (event) { prettyPrint() }, false);

Uno de los principales quebraderos de cabeza con los que se encuentra un desarrollador a la hora de iniciar un nuevo proyecto web, es la creación de un layout básico sobre el que trabajar.

Adicionalmente, si queremos que nuestro diseño sea capaz de adaptarse a los distintos navegadores, configuraciones o incluso dispositivos, la selección de un framework de apoyo puede ahorrarnos mucho tiempo y esfuerzo.

Por desgracia, en la actualidad sigue siendo necesario un profundo conocimiento de los distintos estándares y de como estos se aplican en cada navegador. De nuevo, la adopción de un framework que nos guie en la aplicación del conjunto necesario de buenas prácticas, puede ser crucial.

Con el fin de cubrir estas necesidades surgen frameworks como 960gs o Bootstrap. En este artículo nos centraremos en este último, el cual ha sido desarrollado por Twitter y cuya versión 2.0 ha sido liberada recientemente.

Leer más »

¿Se está convirtiendo CSS3 en el nuevo Flash?

7 Comentarios
¿Se está convirtiendo CSS3 en el nuevo Flash?


En los albores de Internet, con un HTML aún inmaduro en muchos aspectos, Flash encontró su hueco para suplir la carencia de elementos multimedia en las páginas web. Rápidamente ganó popularidad gracias a que las animaciones creadas con él estaban mejor definidas que las de las imágenes GIF y ocupaban menos que un vídeo (algo muy de agradecer con los anchos de banda predominantes en aquella época). Y, cómo no, también hay que tener en cuenta los juegos en el navegador, algo hasta entonces desconocido.

Pero no todo era del color de rosa. Con muchos diseñadores e incluso programadores especializándose en Flash, fue inevitable la proliferación de engendros tan innecesarios como las páginas web con menús en Flash y sin ni un sólo enlace en HTML, o las odiadas introducciones: una suerte de cabecera de programa de televisión que nos impedía acceder rápidamente al contenido buscado, a menos que encontrásemos el famoso texto “skip intro”.

Leer más »

Recopilación de siete tutoriales sorprendentes de CSS3

9 Comentarios
Recopilación de siete tutoriales sorprendentes de CSS3

Para los que están pensando en iniciar el año aprendiendo CSS3, aquí tenéis un recopilatorio de tutoriales que muestran diferentes aspectos o funcionalidades que podemos aplicar en nuestros proyectos. No hace falta explicar la importancia que tiene CSS para el desarrollo web. En ocasiones he encontrado soluciones utilizando muchas y engorrosas líneas en JavaScript que fácilmente se podrían haber resuelto conociendo debidamente las funcionalidades de CSS.

Con la llegada del estándar HTML5 y CSS3 es interesante experimentar con pequeñas prácticas y aprender comportamientos que se han incorporado en los nuevos estándares. Por ello, en este post vamos a referenciar a siete tutoriales que nos enseñaran a implementar siete prácticas experimentando con estos nuevos comportamientos y, de esta manera, no caeremos en el error de desarrollarlo con JavaScript.

Leer más »
Publicidad

Ver más artículos