Como darle formato al código con Code Beautify

Code Beautify es una aplicación Web que permite darle formato o, de otra manera, minificar varios tipos de archivos que son utilizados a cotidiano en páginas Web

De esta manera, permite las siguientes acciones:

• visualizar archivos JSON
• visualizar archivos XML
• visualizar archivos HTML
• visualizar archivos CSS
• visualizar archivos Javascript
• convertir archivos XML a JSON
• convertir archivos JSON a XML
• visualizar archivos RSS
• convertir archivos CSV a XML/JSON
• crear mapas de sitio (aka sitemap)
• crear archivos ROBOTS.TXT
• contador de palabras
• validación de archivos CSS
• validación de archivos Javascript

Para las acciones de identar código (beautify) o de comprimirlo (minify) es posible cargar el texto a mano o mediante la carga de archivo (load). De idéntica forma se puede copiar el resultado o bien descargarlo (download)

Es cierto que existen muchos y muy buenos servicios en línea para cada una de estas acciones; pero, no conozco otro que reúna estas prestaciones para tal variedad de formato de archivos.

Sitio Web | Code Beautify

Leer más

Como extraer estilos inline CSS

extractCSS es una aplicación Web que te permite extraer IDs, CLASSes y estilos CSS inline de cualquier documento Web que consigas copiar y pegar el mark-up

El formato de salida del CSS puede ser customizado y se trata de una herramienta de código abierto que puede ser descargada de https://github.com/adnantopal/extractcss

El código fuente utilizado para la captura de pantalla pertenece a Google Ads (https://www.google.com/intl/es/ads/)

Sitio Web | extractCSS

Leer más

Efectos especiales de imágenes en listas desordenadas

Liffect es una aplicación Web que nos genera el CSS necesario para dotar de animación a las miniaturas de imágenes incluídas en listas desordenadas.

Es necesario:

1. Individualizar el encabezado de la lista desordenada con el atributo relacionado con el tipo de animación. Por ejemplo: 

   <ul data-liffect="fadeIn">

2. Utilizar el CSS que la aplicación genera
3. Utilizar el Javascript generado

La lista de efectos es la siguiente, pudiéndose además elegir la duración y el delay general

• Fade In
• Zoom In
• Zoom Out
• Slide Left
• Slide Right
• Slide Top
• Slide Bottom
• Flip
• Flip In horizontal
• Flip In vertical
• Bounce In
• Bounce In Up
• Bounce In Right
• Bounce In Down
• Bounce In Left
• Page Top
• Page Top (back)
• Page Right
• Page Right (back)
• Page Bottom
• Page Bottom (back)
• Page Left
• Page Left (back)
• Star Wars

Sitio Web | Liffect
Vía | Juaniquillo @ Delicious

Leer más

Normalize | un reset CSS para HTML5

Quienes nos ocupamos del diseño Web sabemos que resetear valores en las hojas de estilo es n buena práctica que nos permite que luego los elementos hagan render en forma adecuada; sin que cuenten los valores, que por defecto los navegadores tienen.

Normalize es un reset que se basa en HTML5 centrándose precisamente en que todos los elementos sean consistentes en línea con los estándares actuales.

La propuesta está contenida en un pequeño archivo, tan solo 6.7 KB

Normalize soporta los siguientes navegadores:

• Google Chrome
• Mozilla Firefox 4+
• Apple Safari 5+
• Opera 12+
• Internet Explorer 8+

Sitio Web | Normalize
Licencia | MIT
Requermientos | Ninguno
Vía | DZone

Leer más

Font Stack Builder

Font Stack Builder es una interesante aplicación Web que nos pone las cosas bien fáciles a la hora de definir un font stack en tiempo de diseño.

Mi ejemplo, el cual no es siquiera una recomendación (y no debiera tomarse como tal) resulta en la siguiente declaración para insertar en la hoja de estilos (aka CSS)

font-family: Corbel, "Helvetica Neue", "Lucida Sans Unicode", "Dejavu Sans", Arial, sans-serif ;

Sitio Web | erin-lawrence.com

Leer más

Como editar en línea botones de navegación

Da Button Factory es una buena aplicación Web que de forma rápida y sencilla permite crear botones para ser usados en diseño Web.

El sitio Web cuenta con algunos ejemplos interesantes a partir del cual se pueden hacer modificaciones. Los aspectos básicos como fuentes y colores pueden ser rápidamente modificados y luego descargar el botón en formato PNG

Un aspecto interesante es que—además—es posible descargar el botón en formato CSS

En mi ejemplo, unas líneas de prueba

a.button {
   display: -moz-inline-stack;
   display: inline-block;
   width: 174px;
   height: 39px;
   background: url("http://dabuttonfactory.com/b.png?t=Lorem%20Ipsum&f=Zenhei&ts=24&tc=ffffff00&tshs=2&tshc=22222200&it=png&c=10&bgt=gradient&bgc=47c&ebgc=238&be=on&hp=20&vp=11") no-repeat;
   line-height: 39px;
   vertical-align: text-middle;
   text-align: center;
   color: #ffffff;
   font-family: Zenhei;
   font-size: 24px;
   font-weight: normal;
   font-style: normal;
   text-shadow: #222222 2px 2px 0;
}
a.button > span {
   display: -moz-inline-block;
}

Sitio Web | Da Button Factory

Leer más

Snippets en CSS3 y HTML5

En WebinterfaceLab están llevando a cabo una interesante colección de piezas de código (aka snippets) generadas en CSS3 para todos aquellos diseñadores de interfases (aka UI) que no requieran re-inventar la rueda para llevar a cabo sus diseños.



Hay calendarios, indicadores, pestañas, botones, cajas de búsquedas redondeadas y un largo etcétera que vale la pena recorrer.

Sitio Web | WebinterfaceLab
Vía | HTML-Five
Licencia | Open Source

Leer más

Browser Support | qué navegador soporta CSS?

Motores de búsqueda alternativos

Browser Support es un sencillo motor de búsqueda que le permite al webmaster y al diseñador mismo consultar sobre cualquier propiedad CSS y comprobar el estado de soporte para cualquiera de los navegadores.

Este buscador cuenta con la facilidad del autocompletado a nivel consulta, lo cual hace más sencillo la obtención de resulatdos. De manera opcional y no obligada, se puede consultar—al pulsar sobre el ícono del navegador correspondiente—sobre la compatibilidad ante versiones antiguas de navegadores.

Sitio Web | Browser Support

Leer más

Como crear cajas con flechas con CSS Arrow Please

CSS Arrow Please es una aplicación que de modo fácil e interactivo nos permite generar esas llamativas cajas con flechas sin siquiera utilizar una imagen: puro CSS

Una muestra de ejemplo de las declaraciones en CSS para generar ese tipo de cajas, se ve a continuación:

.arrow_box { position: relative; background: #88b7d5; border: 4px solid #c2e1f5; } 
.arrow_box:after, .arrow_box:before { left: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } 
.arrow_box:after { border-left-color: #88b7d5; border-width: 30px; top: 50%; margin-top: -30px; } .arrow_box:before { border-left-color: #c2e1f5; border-width: 36px; top: 50%; margin-top: -36px; }

Tanto el sentido de la flecha como el color de fondo y el color del borde son completamente personalizables a conocimeinto previo del código hexadecimal deseado.

Sitio Web | CSS Arrow Please

Leer más

Tu navegador soporta CSS3?

Con cada versión que actualizan los navegadores mayor es el soporte que se está dando a CSS3. The CSS3 Test es una aplicación que tras detectar el navegador con el cual se accede al sitio Web confirma el nivel de soporte a CSS3.

Es importante destacar que esta comprobación sólo detecta si el navegador soporta la especificación, distinto es si la renderiza adecuadamente.

La siguiente es la lista de items que—a la fecha—se comprueban:

• Fondos y bordes
• Valores de imágenes y reemplazo de contenido
• Selectores
• Consultas de medios
• Interfase básica del usuario
• Transiciones
• Animaciones
• Transformaciones 2D
• Transformaciones 3D
• Texto
• Fuentes
• Colores
• Diseños multi-columnas
• Valores y unidades

Notas

Recordemos que la versión 3 de CSS es todavía una versión candidata; no homologada por W3C
La captura de pantalla (anterior) corresponde a la Firefox 10.0

Sitio Web | The CSS3 Test

Leer más

Botones CSS3: nunca tan fácil!

Bootstrap Buttons es una aplicación online que te permite—de forma visual y de una manera muy intuitiva—modificar cualquier estilo CSS según 4 variables que se manejan vía sliders:

• Hue
• Saturation
• Lightness
• Puffiness

De esta manera, se puede experimentar cambios a partir de los siguientes presets o, de otra manea, desde un reset total.

CSS generado por Bootstrap Buttons

.btn.custom { 
background-color: hsl(0, 0%, 77%); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="hsl(0, 0%, 123%)", endColorstr="hsl(0, 0%, 77%)"); 
background-repeat: repeat-x; background-image: -khtml-gradient(linear, left top, left bottom, from(hsl(0, 0%, 123%)), to(hsl(0, 0%, 77%))); 
background-image: -moz-linear-gradient(top, hsl(0, 0%, 123%), hsl(0, 0%, 77%)); 
background-image: -ms-linear-gradient(top, hsl(0, 0%, 123%), hsl(0, 0%, 77%)); 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, hsl(0, 0%, 123%)), color-stop(100%, hsl(0, 0%, 77%))); 
background-image: -webkit-linear-gradient(top, hsl(0, 0%, 123%), hsl(0, 0%, 77%)); 
background-image: -o-linear-gradient(top, hsl(0, 0%, 123%), hsl(0, 0%, 77%)); 
background-image: linear-gradient(top, hsl(0, 0%, 123%), hsl(0, 0%, 77%)); 
border-color: hsl(0, 0%, 77%) hsl(0, 0%, 77%) hsl(0, 0%, 65.5%); 
color: #333; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); 
-webkit-font-smoothing: antialiased; 
}

Una herramienta ideal si se desean implementar modificaciones a partir de degradados en el estilo de los botones.

Sitio Web | Bootstrap Buttons

Leer más

Como crear texto curvo con CSS3

Mientras que CSS3 te permite rotar texto, es medianamente complicado el arreglo de un texto a lo largo de path curvo.

Arctext.js es un script en jQuery inspirado en Lettering.js

Este script calcula la correcta rotación en CSS3 de cada letra a través del path curvo; distribuyendo así la letras en forma uniforme a través del arco (imaginario) según el radio informado.

Las siguientes opciones están disponible para implementar el efecto

radius  : 0,
// the minimum value allowed is
// half of the word length.
// if set to -1, the word will be straight.
 
dir     : 1,
// 1: curve is down,
// -1: curve is up
 
rotate  : true,
// if true each letter should be rotated.
 
fitText : false
// if you want to try out the
// fitText plugin (http://fittextjs.com/)
// set this to true.
// Don't forget, the wrapper should be fluid.

Sitio Web | Arctext

Leer más

Como maquetar con 1 K de CSS

Jacob Rask es un desarrollador Web del equipo Opera—en Suiza—y suyo es el mérito y la inicativa de promover el desafío de maquetar con 1 K de CSS

Podemos remontarnos al 2003, cuando David Shea impulsó el proyecto Zen Garden; mostrándonos al mundo entero la potencia y versatibilidad del CSS a la hora del diseño Web.

Más acá en el tiempo Peter van der Zee impulsó JS1k. Alentando a utilizar hasta 1 Kb de Javascript en las páginas presentadas.

Ahora, muchas cosas han ido ocurriendo en CSS desde los tiempos de Zen Garden. Por eso mismo, Jacob Rask considera que si el promedio de páginas carga con 27 Kb es interesante mostrar lo que 1 Kb puede aportar.

La participación es libre y sólo hace falta cumplir 6 requisitos:

1. Sólo hay que enviar un solo archivo CSS
2. El archivo debe tener un tamaño de hasta 1 K (1024 bytes)
3. Los prefijos propietarios no cuentan para el total de bytes
4. Cualquier recurso externo como imágenes, @font-face e @import están prohibidos
5. El resultado final no debe tener necesariamente la misma apariencia en todos los navegadores (pero se anima a mostrar ligeras variaciones)
6. El código enviado será tomado como lilicensed under the MIT License

Si no tenés cuenta en GitHub, podés hacer efectivo el envío vía mail.

Sitio Web | CSS1K
Vía | RogerTM @forosdelweb

Leer más

99 Lime - HTML QuickStart

HTML KickStart es un framework; un conjunto formado por fragmentos de HTML5, CSS y archivos jQuery.

Este framework contiene elementos de diseño que le dan al Webmaster una buena ventaja inicial al momento de dar inicio a un nuevo proyecto Web.

El tagline del producto, es más que elocuente: "Si sabés tipear HTML y editar CSS, esto es para vos". El frameworks es sencillo de utilizar; contiene layouts, slideshows, menúes, grillas (muy flexibles), trabaja con contenedores para las imágenes (aka image placeholders), y ofrece botones, pestañas y un largo, largo etcétera.

Si querés ahorrarte recursos a la hora de trabajar en tiempo de diseño; podés descargarte gratis este valioso framework.

Sitio Web | HTML KickStart
Vía | Los marcadores de Delicious de Juaniquillo (Gracias Víctor!)

Leer más

Dabblet | para jugar con CSS

Dabblet es un playground, una aplicación online que nos permite jugar con HTML y piezas de código CSS. Corre adecuadamente sobre cualquier navegador moderno:

• Chrome
• Safari
• Firefox

Y no necesita de prefijos propietarios para declarar CSS3 ya que tiene implementado en forma nativa -prefix-free

Su uso es libre; pero con una cuenta gestionada (la cual es gratis) es posible guardar nuestras páginas generadas en "tiempo de diseño".

Si bien el foco de la aplicación está centrada en CSS; es posible ejecutar también algo de Javascript. El área de trabajo, siempre dentro de la ventana del navegador, es posible dividirla en forma vertical (HTML y CSS) o en forma horizontal o en la divertida (!) superposición o bien, en pestañas separadas (HTML, CSS y el resultado final).

Una iniciativa interesante para codear on fly, sin editor alguno y con una preview instantánea.

Sitio Web | Dabblet
Handcoded | Lea Verou
Licencia | Open Source
Vía | Popacular

Leer más

Como crear aplicaciones móviles con Zoey

Zoey es un framework basado en HTML5 y CSS3 diseñado para crear aplicaciones móviles; está basado en el script Zepto.js y pesa—comprimido—sólo 6 KB: combinando CSS y Javascript. de otra manera, son 21.58 KB

Zoey tiene componentes para diseñar inerfases de usuario (aka UI) como:

• navegación
• listas
• botones
• grupos de control
• formularios
• grillas

Este framework es compatible con iOS y con Android y viene con una aplicación con todas las características.

Sitio Web | Zoey
Compatibilidad | todos los navegadores modernos (iOS 4.2 y Android 2.2)
Vía | Web Resources Depot

Leer más

Un generador de sprites basado en HTML5

Stitches es un proyecto alojado en Github que permite al usuario armar un sprite al vuelo. Basado en HTML5 esta aplicación Web permite el arrastar los archivos desde la PC del usuario y soltarlos dentro de la aplicación.

De esta manera, se genera—finalmente—un único archivo de imagen y el CSS correspondiente para cargar lo necesario. El ahorro de solicitudes al servidor es tal que no impacta de manera alguna cargar una única imagen con la suma total de KB requeridos.

La aplicación permite descargar el CSS y la imagen única generada.

Sitio Web | Stitches
Web | Web Resource Depot

Leer más

Como consultar cualquier duda en CSS con InstaCSS

De la mano de UserRules disponemos de un auténtica enciclopedia online de CSS.

InstaCSS es un impresionante recurso online que nos permite, especialmente a quienes hacemos diseño Web a cotidiano; llevar a cabo consultas mediante expresiones regulares sobre declaraciones y sintaxis en CSS

Todo se presenta aquí muy ordenado y claro; desde una descripción acerca de la regla a consultar, la sintaxis y valores permitidos hasta verdaderos ejemplo online.

Sitio Web | InstaCSS
github | https://github.com/rgarcia/instacss

Leer más

Prefixfree

prefixfree es un script que permite al diseñador escribir un CSS limpio sin necesidad de recurrir a declaraciones propietarias de los navegadores. Trabaja en segundo plano y utiliza las declaraciones sólo cuando son necesarias y adaptadas a cada navegador.

Los navegadores a partir de los cuales la autodetección y aplicación son válidad son:

• IE9+
• Opera 10+
• Firefox 3.5+
• Safari 4+
• Chrome

La página de donde puede el script descargarse contiene una sección; test drive, donde puede comprobarse la efectividad del script según sea el navegador con que se acceda.


Sitio Web | prefixfree

Leer más

Una hoja de estilos eco-friendly

Se trata de una campaña de parte de David Bushell—diseñador y desarrollador que trabaja en Londres, UK—para tomar conciencia acerca de recursos—como el papel—que no son fácilmente renovables.

Contenido de la hoja de estilos—CSS—print.css:

@media only print
{
    body * { display: none !important; }
    body:after { content: "Don't waste paper!"; }
}

Naturalmente, el mensaje en body:content, puede fácilmente customizarse.

Sitio Web | print.css

Leer más