Sitios web para construir, limpiar y comprimir archivos CSS

En speckyboy han publicado una excelente lista de sitios web que podemos usar para crear o limpiar archivos de estilo (css). Ideal para diseñadores organizados y para documentar el código de alguna aplicación existente.

1 – flumpCakes Online CSS Optimiser/Optimizer
2 – Styleneat ”“ CSS Organizer
3 – Clean CSS ”“ Optmize and Format your CSS
4 – CSS Compressor ”“ Online Code Compressor
5 – Code Beautifier ”“ CSS Formatter and Optimiser
6 – CSS SuperScrub
7 – Online CSS Optimiser
8 – CSS Compressor ”“ CSS Drive
9 – CSS Analyser
10 – CSS Redundancy Checker
11 – CSS Code Formatter and Optimizer ”“ CSS Portal

Si conocéis alguna otra opción, soy todo oí­dos.

15+1 excelentes sitios para aprender CSS

En webdesignfan.com publican una lista de 15 sitios excelentes para aprender CSS y diseñar sitios web como Dios manda. Yo añado mi preferido en español: xyberneticos.com

Aquí­ os dejo los enlaces:

1 – css-tricks.com: Blog con consejos y algún screencast.
2 – threestyles.com: Tutoriales de varios niveles. También hay consejos para photoshop.
3 – sixrevisions.com: La categorí­a CSS de tan famoso blog dedicado al diseño.
4 – cssglobe.com: Para programadores. Algo más técnico que los anteriores.
5 – sohtanaka.com: Excelentes consejos sobre XHTML y CSS.
6 – net.tutsplus.com: Otro mito de la web con una categorí­a dedicada a CSS
7 – davidwalsh.name: Un gran diseñador que habla sobre JS, CSS, PHP, etc.
8 – buildinternet.com: Consejos sencillos y prácticos
9 – aext.net: Excelentes consejos para diseñadores y programadores.
10 – woorkup.com: un buen lugar para conocer artí­culos de todo tipo relacionados con CSS.
11 – line25.com: tutoriales de varios niveles.
12 – tutorialzine.com: Tutoriales y fuentes para principiantes.
13 – web-kreation.com: Artí­culos y tutoriales útiles.
14 – alistapart.com: La categorí­a CSS del famoso List Apart.
15 – smashingmagazine.com: Sin mucha necesidad de presentación, smashingmagazine también dedica su categorí­a al CSS

Galerí­as CSS para enviar nuestros diseños web

Muchas veces necesitamos un poco de inspiración antes de empezar un trabajo de creación web, por eso existen galerí­as en Internet que hacen ese papel perfectamente, además de permitir a los diseñadores mostrar sus obras y divulgar su talento al mundo.

En listelog han publicado una enorme cantidad de sitios web que podemos usar para subir nuestros trabajos o navegar entre verdaderas obras de arte. Aquí­ tenéis la lista:

101 Best Websites

101bestwebsites
Continúa leyendo «Galerí­as CSS para enviar nuestros diseños web»

PageLime – Un CMS para gestionar contenido usando CSS

pagelimePageLime nos permite gestionar el contenido de cualquier sitio web que use CSS. Solamente tenemos que añadir la clase adecuada en los pedazos de texto que queremos poder alterar remotamente, sin necesidad de instalar ningún software adicional.

Es una solución perfecta para permitir a los clientes alterar el contenido de su página web sin miedo a que puedan tocar elementos crí­ticos del sistema. Solamente con unas pocas lí­neas de código permitiréis a un editor de texto remoto la gestión del contenido configurado.

Una muy buena opción entre todas las comentadas en la categorí­a CMS.

Publicado en

Halogy – Un CMS para los que no quieren complicarse la vida

halogyHalogy es un nuevo sistema de gestión de contenido que nos permite crear un sitio web de forma rápida y gratuita en pocos minutos.

Solamente tenemos que indicar nuestro dominio (tendremos que modificar los DNS para que apunte a Halogy, claro) y esperar el email con los datos de acceso al área de administración. En caso de no tener dominio podéis trabajar con un subdominio del propio Halogy.

Los temas disponibles inicialmente son muy limitados, aunque ofrecen una estética limpia y muy sencilla de navegar y liberan los archivos para que podamos hacer alteraciones en los CSS, editando el aspecto.

Aquí­ tenéis la captura del panel de control (click para ampliar) desde donde pueden subirse fotos y páginas con espacio ilimitado y derecho a estadí­sticas.

admin Halogy

Podéis crear blogs, tiendas, forums.. todo de forma sencillí­sima y controlando lo que los clientes pueden o no alterar aunque, infelizmente, sólo en inglés.

Publicado en

TypeKit – La solución para hacer sitios web con cualquier tipo de fuente

fuentesUna de las cosas que más limita el trabajo de los diseñadores web es la imposibilidad de mostrar texto con cualquier tipo de fuente. Siempre depende de las fuentes instaladas en las máquinas de los lectores, con lo que no podemos confiar en tipos de letra diferentes de las habituales.

Tecnologí­as como sIFR o Flir usan algún JS o flash para darle estilo al texto como si estuviéramos trabajando con CSS, pero acaban resultando muy limitadas en la práctica.

Estamos cerca del mundo CSS3 y su propiedad @font-face que, en teorí­a, nos permitirá usar cualquier fuente pero, hasta entonces, tenemos que continuar conviviendo con los lí­mites impuestos… ¿o no?

Hace un par de dí­as recibí­ la invitación para probar TypeKit, una solución que permite instalar cualquier fuente de los packs que dispone en cualquier sitio web.

El pack de fuentes gratuitos es el más limitado, pero aún así­ es infinitamente superior a las opciones existentes hoy.
tipos letra
Lo único que tenemos que hacer es incluir unos scripts en el código de nuestro sitio y elegir las fuentes que queremos usar.

Si os interesa podéis pedir la invitación en https://typekit.com

Actualización: Fernando, uno de los lectores, recomienda el uso de Cufón, una alternativa que permite el uso de cualquier fuente enviada.

LESS – Aumenta el poder de CSS

LESS - Leaner CSSAunque no me dedico al diseño web sí­ soy un reconocido fan de la técnica CSS a la hora de diseñar páginas. Cuesta un poco acostumbrarse después de tantos años peleándose con tables, td, tr y demás, pero el resultado vale la pena: flexible, limpio y dócil ante cualquier futura modificación.

El caso es que ayer un amigo me habló de LESS y de la posibilidad de aumentar el poder de las técnicas CSS usando variables, por ejemplo.

variables

También podemos organizar las reglas dentro de una misma entidad, dejando el código más limpio y sencillo de entender.

reglas

O incluso añadir operaciones matemáticas para facilitar el diseño geométrico del proyecto.

operaciones

Podéis programar la hoja de estilos en LESS y, al finalizar, compilar el código para que se genere el archivo CSS de toda la vida. Tenéis toda la documentación necesaria en https://lesscss.org

MeCSS – Enví­a tu sitio web a varias galerí­as CSS de una sola vez

css

Existen muchos sitios que muestran verdaderas obras de arte en lo que a diseño web se refiere. Cssmania, cssvault, cssbeauty, webcream… verdaderas referencias para encontrar inspiración o conocer nuevas webs hechas con buen gusto.

MeeCSS es una aplicación que permite indicar nuestra web (en caso de tener un diseño css original y bien trabajado) en más de 100 galerí­as al mismo tiempo. Sólo tenéis que rellenar un formulario y esperar a que el enví­o sea realizado en todas las webs indicadas, pasando una por una para confirmar que los datos son incluidos correctamente.

CSSTXT – Aplica estilos a textos en pocos segundos

css

csstxt.com es una aplicación que nos permite definir hojas de estilo (css) para nuestros textos sin tener que pelearse mucho con las caracterí­sticas del formato.

Lo primero que tenéis que hacer es escribir el texto en cuestión, dándole formato con las herramientas que incluye (tamaño, tipo de fuente, espacios, párrafo…). El resultado es un código y archivo css que podréis copiar y pegar en vuestro sitio web, así­ de simple.

Una herramienta más que ayudará a nuestros diseñadores a trabajar más rápido y de forma más eficiente.

Actualización: Acabo de conocer otra herramienta sencilla pero útil, para ayudar a los que trabajan con CSS, transformando posiciones absolutas en relativas: https://riddle.pl/emcalc/

SlickMap CSS – Crea un SiteMap elegante para tu sitio web

sitemap-css

SlickMap CSS es una hoja de estilos capaz de transformar una lista de elementos de HTML en un mapa de navegación tan agradable como el que veis en la imagen superior.

En la web podéis bajar los archivos necesarios para entender y replicar el proceso, permitiendo ofrecer una original y elegante navegación entre el contenido de cualquier web.

Un buen recurso para la categorí­a de Utilidades para diseño.