Etiqueta: Hoja de estilos

Emoji CSS, para incluir emojis en sitios web

Publicado el

por Fco. José Hidalgo

EmojiCSS

Los emojis ya forman parte de nuestras vidas digitales para proporcionarnos una manera de expresarnos de manera rápida y visual, evitándonos tener que expresar diferentes aspectos mediante frases de textos.

Para todos aquellos propietarios de sitios web que quieran integrar emojis en los mismos, Emoji CSS es una hoja de estilos pública de emojis, bajo licencia Creative Commons, que cualquier propietario de sitios web puede integrar de manera sencilla.

Tan sólo tienen que acceder al código HTML de sus sitios web e introducir la siguiente lí­nea:
< link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
Continúa leyendo «Emoji CSS, para incluir emojis en sitios web»

extractCSS, proyecto de código libre para extraer el CSS de cualquier documento HTML

Publicado el

por Juan Diego Polo

extract

Y vamos ahora a por un nuevo recurso para la categorí­a de Utilidades para diseñadores y programadores con extractcss.com, una aplicación que nos permite extraer la hoja de estilos de cualquier documento HTML que le indiquemos.

Solo tenemos que pegar el HTML deseado en el primer panel y seleccionar lo que queremos obtener del mismo. Permite extraer ids, clases y estilos, generando un .css que podemos utilizar posteriormente para adaptar el diseño a lo que tengamos en mente.

El proyecto es de código abierto, disponible en github para que sea posible navegar por sus entrañas. Lo divulgan en webresourcesdepot.com como la solución ideal para separar el css de un html en aquellos casos en los que no se separó inicialmente, algo extremadamente recomendable antes de comenzar cualquier diseño web moderno.

En febrero os listamos una serie de recursos útiles para trabajar con CSS, ideales para los que están aprendiendo a programar hojas de estilo. La mayorí­a de ellos están relacionados con la programación de páginas web viendo en tiempo real el efecto de las alteraciones realizadas, extractCSS puede ser una buena forma de «jugar» con pa´ginas web conocidas para alterar su diseño sin alterar su contenido.

Una buena idea para practicar y conocer mejor el mundillo del diseño web.

responsivewebcss nos ayuda a programar sitios web que se adapten a móviles y tabletas

Publicado el

por Juan Diego Polo

css

Crear un sitio web que se adapte a las pantallas de nuestros dispositivos móviles ha dejado de ser un lujo para ser una necesidad. Aunque la mayorí­a de las webs consigue verse de forma decente en un tablet, no ocurre lo mismo con los móviles, por lo que se hace necesario incluir algunas funcionalidades (extensiones o caracterí­sticas na hoja de estilos) que permitan adaptar de forma dinámica el contenido que presentamos.

Si preferí­s tener algo de libertad en lo que a diseño se refiere, la mejor forma es programar la web pensando, desde su inicio, en el aspecto móvil, y para eso tenemos responsivewebcss.com, para que nos ayude en ese punto.

Se trata de una aplicación, presentada hoy en webresourcesdepot.com, que genera el código CSS necesario para poder comenzar a trabajar. Solicita los tamaños y la estructura base de nuestra web y permite bajar archivos html y css para que sean incluidos o adaptados dentro de nuestro diseño, ahorrando mucho tiempo en programación y diseño.

Ya que el resultado es html, tendremos que abrir el código e incluir los elementos dinámicos adecuados para transformarlo en php o cualquier otro lenguaje con el que estemos trabajando, aunque el tener el css ya creado es un paso que muchos agradecerán, tanto para trabajos profesionales definitivos como para los que estén practicando y estudiando diseño web.

vidcaster – Crea en pocos minutos tu propio portal de ví­deos

Publicado el

por Juan Diego Polo

Vidcaster, con una versión gratuita que permite sincronizarse con nuestra cuenta de youtube, ofrece la posibilidad de crear un sitio web donde el ví­deo sea el protagonista.

Añadir ví­deos y descripciones serán tareas realizadas de forma automática una vez sincronizado con Youtube, existiendo la posibilidad de personalizar el aspecto estático y, en las opciones de pago, alterar la hoja de estilos.

Con estadí­sticas de acceso y herramientas para facilitar la distribución en redes sociales, vidcaster incluye varios temas predefinidos, con opción de incluir nuestro logo y guardar el resultado en un subdominio (ej: diegopolo.vidcaster.com).

Todas las opciones incluyen 14 dí­as de prueba, suficiente para saber si realmente es lo que buscamos (con opción de personalizar nuestro dominio con una tasa de 20 dólares al año).

Web Developer – La extensión con decenas de herramientas para diseñadores web

Publicado el

por Juan Diego Polo

Eliminar la hoja de estilos de las páginas, destacar ciertos elementos, eliminar imágenes, alterar formularios, modificar tamaños… Web Developer es una extensión disponible para Firefox y Chrome que nos permite trabajar en diseño web de forma mucho más productiva, teniendo siempre a mano varias utilidades que agilizan el trabajo.

La versión de Firefox ya cuenta con más de 1 millón de usuarios, teniendo la de Chrome más de 300.000 instalaciones.

Chris Pederick es su creador, con una web (chrispederick.com) donde comentan los detalles de éstas y otras creaciones.

Links: Para Chrome | Para Firefox

Extensión permite personalizar al máximo el aspecto de Google+

Publicado el

por Juan Diego Polo

Hay muchas extensiones que nos permiten ocultar comentarios, crear fondos diferentes, distribuir información y cambiar algunos aspectos de la hoja de estilos de Google Plus, pero hasta ahora no conocí­a ninguna que pudiera personalizarse tanto como con Google + CSS.
En su sección de opciones podemos definir cómo queremos leer la información, siendo así­ posible que el aspecto de dicha red social sea exactamente como lo deseamos, escondiendo o mostrando la información que nos sea útil en cualquier momento.

Podéis instalarla desde chrome.google.com y empezar a probar las muchas opciones existentes en su sección de configuración.

WebPutty – Un interesante editor de CSS en la web

Publicado el

por Juan Diego Polo


Si trabajáis con programación de hoja de estilos, prestad atención a webPutty, un editor de css, con posibilidad de hospedaje, bastante completo.
Podemos trabajar con el código viendo en tiempo real el resultado, dividiendo para ello el panel de trabajo en dos columnas sincronizadas. Con detector de palabras clave, ofrecen todo lo que un diseñador puede necesitar en este aspecto, incluyendo la optimización del código para que se baje comprimido.
En el ví­deo que muestran en su página principal podemos ver una demostración, aunque podemos entrar usando nuestra cuenta de Google hoy mismo.

i2style – Generador de banners y badgets en CSS

Publicado el

por Juan Diego Polo


Si trabajáis con diseño web y queréis empezar a jugar con las propiedades CSS de banners, echad un vistazo en i2style, la nueva herramienta de sciweavers.org.
Se trata de una aplicación en la que podemos alterar las propiedades de texto, colores, tamaños y sombras de un banner, creando desde botones hasta anuncios enormes que podremos incluir en nuestro sitio web.
El resultado es un código limpio en CSS y HTML, siendo excelente también para uso educativo, aprendiendo a ver los efectos causados en un diseño cuando se modifican los valores de las variables de la hoja de estilos.

ProCSSor – Mejora la apariencia de tus hojas de estilo

Publicado el

por Javier Muñiz

ProCSSor es una herramienta online muy sencilla, con la que dar un formato correcto a las hojas de estilo (CSS) de nuestras páginas web.

La aplicación goza de un buen acabado visual, nada recargado lo cual la hace muy intuitiva y usable. Podremos elegir entre escribir directamente el código fuente a mano, subirlo desde nuestro PC, u obtenerlo a través de su URL, en el caso de que ya esté subido a un servidor.

Una vez lo tengamos, deberemos elegir el formato que queremos usar, los espacios que dejaremos entre las instrucciones y cosas por el estilo.

Cuando demos con la configuración que buscábamos, sólo tendremos que procesar el archivo y descargarlo a nuestro PC para empezar a trabajar con él.