Utilidades para Webmasters

Google lanza Webmaster Academy

noreply@blogger.com (Daniel Ulczyk) — Tue, 22 May 2012 15:54:00 PDT

Webmaster Academy es una iniciativa de Google, un recurso on-line para que los webmasters puedan comprender la manera en que trabaja el motor de búsqueda y vean la forma de mejorar su visibilidad en los resultados de búsquedas orgánicos. Webmaster Academy se presenta como una extensión de las Herramientas para Webmasters.

Google entiende que la información publicada en el Centro de Webmasters es valiosa, cuantiosa y—tal vez—abrumadora. De esta forma y publicado con fines pedagógicos y en especial atención a los webmasters que recién comienzan, la Academia se presenta como un compendio de materiales educativos.

El contenido está organizado en 3 secciones principales y la mayoría de las lecciones está acompañada por un video propio del canal de YouTube del Centro de Webmasters. Aunque de momento la Academia se presenta en idioma inglés, es de esperar la traducción a otros idiomas; con ansias esperaremos la versión en español.

Sitio Web | Webmaster Academy
Vía | Javier Perez

Infografía simplificada del proceso de creación de un sitio Web

noreply@blogger.com (Daniel Ulczyk) — Mon, 21 May 2012 10:04:00 PDT

En Lemongraphic han publicado una interesante infografía que describe claramente el proceso de creación de un sitio Web. La imagen, imprimible en tamaño A4 tiene por dimensiones 3250 × 4992px y sólo es condición pasar previamente por Pay with a tweet; pagar con un tweet o con una mención en Fecebook.

Infografía simplificada del proceso de creación de un sitio Web bit.ly/HIQqpM
— Daniel Ulczyk (@DanielUlczyk) mayo 21, 2012

La infografía se puede descargar en Lemongraphic

Todos los botones de redes sociales con Socialite

noreply@blogger.com (Daniel Ulczyk) — Mon, 14 May 2012 11:24:00 PDT

Socialite es un script que provee e implementa el feedback tan necesario en las redes sociales. Se trata de un script basado en Javascript que, minimizado y comprimido pesa poco menos de 2 kb.

Debido al método de carga—esto es: asincrónico—su utilización no interrumple ni afecta el tiempo de carga de la página Web.

Sus principales fortalezas son:

no tiene dependencias
lee recursos externos, sólo cuando los mismos son requeridos
menos de 2 kb cuando está comprimido
soporta las siguientes redes sociales; Twitter, Google+, Facebook, LinkedIn, Pinterest y Spotify
corre en todos los navegadores

Repositorio en GitHub | Socialite
Sitio Web | http://socialitejs.com/
Vía | WebResourcesDepot
Licencia | MIT

Browser Support | qué navegador soporta CSS?

noreply@blogger.com (Daniel Ulczyk) — Fri, 11 May 2012 05:21:00 PDT

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

Como crear cajas con flechas con CSS Arrow Please

noreply@blogger.com (Daniel Ulczyk) — Mon, 16 Apr 2012 05:29:00 PDT

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

Accesibilidad Web: curso a distancia de UNPL

noreply@blogger.com (Daniel Ulczyk) — Tue, 20 Mar 2012 05:54:00 PDT

A partir del 16 de abril, la Facultad de Informática de la Universidad de La Plata (Argentina) da inicio a un curso a distancia sobre Accesibilidad Web.

Sólo son requeridos conocimientos sobre HTML y está dirigido a todo aquel interesado en Desarrollo y Accesibilidad Web.

Este curso—cuya duración es de 10 semanas—pretende formar desarrolladores Web con un marcado énfasis en la Accesibilidad Web:

Formar desarrolladores Web concientes de la importancia de la accesibilidad Web y que sean capaces de construir sitios Web cuyos contenidos sean accesibles a todas las personas garantizando igualdad real de oportunidades y trato.

En la modalidad curso a distancia, este curso se divide en 4 unidades didácticas (1) e incluye la entrega, por parte de cada participante, de trabajos prácticos en forma programada y de un trabajo final.

(1) contenido:

Unidad 1 — La Problemática del discapacitado en la Web
Unidad 2 — Herramientas de adaptación de hardware y software
Unidad 3 — La Accesibilidad Web. Leyes, normas y validadores
Unidad 4 — Pasos para hacer accesible un sitio

La inscripción está abierta desde el 15 de marzo y así permanecerá hasta el 5 de abril. Favor completar el formulario de inscripción en http://accesibilidad.eshost.com.ar/inscripcion/
Sitio Web | Facultad de Informática (UNLP)
Vía Verónica Traynor

Como generar listas de reproducción con mixtape.li

noreply@blogger.com (Daniel Ulczyk) — Wed, 07 Mar 2012 10:09:00 PST

mixtape.li es una curiosa aplicación Web cuya única función es generar listas de reproducción basadas en una simple consulta.

Estas lístas de reproducción, que pueden descargarse en formato .m3u o .pls, pueden fácilmente ser reproducidas por cualquier reproductor de medios con acceso a la Web (ya que los tracks a reproducir se encuentran en mixtape, precisamente).

La lista resultante tiene—generalmente—tracks del artista o banda consultado y otros que, en alguna medida, están relacionados (con la banda o artista). Lo bueno, que la consulta arroja siempre listas de reproducción únicas.

Sitio Web | mixtape.li
Vía | webdev2.0

Como obtener un markup más ordenado con Dirty Markup

noreply@blogger.com (Daniel Ulczyk) — Mon, 05 Mar 2012 07:44:00 PST

Dirty Markup es una aplicación Web que se encarga de indentar apropiadamente código HTML (y con esta versión HTML5 también) de forma tal que el markup muestre una visualización jerárquica.

De esta manera el mantenimiento es mucho más sencillo y el código se mantiene visualmente limpio.

Dirty Markup soporta HTML5, CSS y Javascript; lo cual lo lleva a cabo combinando toda la potencia de HTML Tidy, CSS Tidy and JS Beautify.

Su uso es simple, hay que copiar el HTML y pegarlo dentro de la ventana de la aplicación. Lo mismo si se tiene una hoja de estilos (CSS) o simplemente Javascript.

Sitio Web | Dirty Markup
Vísto en Web Resources Depot

Fuentes con íconos con Fontomas

noreply@blogger.com (Daniel Ulczyk) — Sun, 04 Mar 2012 13:14:00 PST

Las fuentes basadas en íconos han vuelto a resurgir. Yo, particularmente, las he estado utilizando a menudo en mis últimos proyectos en la Web.

Fontomas es una aplicación Web basada en un proyecto de código abierto. Utiliza 3 tipos de fuentes basadas en íconos y te permite—sólo en 3 sencillos pasos—obtener un conjunto de íconos bajo un set de fuentes.

Este conjunto se puede descargar como una fuente SVG que puede luego, mediante un generador en línea como el que brinda FontSquirrel, transformarlo en fuentes para uso Web.

Sitio Web | Fontomas
Via | WebResourceDepot

Como resaltar un página y compartirla en la Web

noreply@blogger.com (Daniel Ulczyk) — Wed, 29 Feb 2012 05:22:00 PST

inFocus es una herramienta social que permite en forma muy simple, compartir un área resaltada de un sitio Web. En definitiva, comparte toda la página pero permite que la selección, sea texto o bien una imagen se muestre en foco. El resto de la página queda detrás de un overlay que no distrae la atención.

De esta manera, quien recibe la URL que queremos compartir presta atención sobre lo que queremos mostrar. Aquí, un ejemplo.

Sitio Web | inFocus
Vía | Feedmyapps

Intype | el editor de texto que estabas esperando

noreply@blogger.com (Daniel Ulczyk) — Fri, 24 Feb 2012 14:01:00 PST

Camino a la versión final 1.0 Intype es un robusto editor de texto con soporte para múltiples idiomas. Tiene la capacidad de manejar grandes y múltiples projectos.

Posee resaltador de sintaxis y puede marcar los fragmentos de la mayoría de los lenguajes de programación conocidos.

Esta versión, la cual probé, es portable. Por lo que una vez descomprimida, la podés copiar a un pendrive o cualquier carpeta de uso frecuente.

Sitio Web | Intype
versión | 0.9.3
tamaño | 7.3 MB

Como crear esquemas de color con COLLLOR

noreply@blogger.com (Daniel Ulczyk) — Thu, 23 Feb 2012 11:04:00 PST

Colllor es una aplicación Web que permite crear paletas de colores a partir de un color inicial. De esta manera se pueden obtener sombras y tintas, tonos, mezclas y similares.

La aplicación entiende perfectamente la representación en hexadecimal de los nombres de los colores (en inglés). Además, usuarios de Chrome tienen disponible la extensión en la Chrome Web Store

Sitio Web | Colllor

Intro | Fuente gratis en Fontfabric

noreply@blogger.com (Daniel Ulczyk) — Tue, 21 Feb 2012 14:34:00 PST

En Fontfabric acaban de publicar la disponibilidad de descarga de un recurso interesante. Se trata de la fuente Intro, disponible en 2 versiones

Intro (versión estándard)
Intro Inline (idéntica pero con un línea interna distintiva

Ambos archivos, dentro del ZIP, en formato OTF. Si necesitás llevar a cabo alguna conversión, tal vez te convenga llevar a cabo la lectura de Un conversor de fuentes online

Lo que es distintivo en esta fuente es la fuerza con que está expresada la geometría de la misma. Las letras básicas del alfabeto; esto es la A, la O o bien la H están diseñadas con los principios de la geometría más simple.

Sitio Web | Fontfabric

Guía de campo para aplicaciones Web

noreply@blogger.com (Daniel Ulczyk) — Wed, 15 Feb 2012 05:09:00 PST

Bert Appward, del equipo de Desarrolladores de Google Chrome; acaba de publicar una guía llamada Guía de campo para aplicaciones Web

El objetivo de esta publicación es guiar a los desarrolladores para que creen aplicaciones Web. Además, toca temas como las propiedades de las aplicaciones web, los fundamentos del diseño y algunos estudios de casos mediante el uso de buenas prácticas.

La guía no sólo es sencilla de leer (aunque en inglés), sino que, además, contiene una buena cantidad de ejemplos.

Basada en el uso de canvas mediante HTML5 y con la inclusión de CSS3 provee una buena experiencia al lector. El sitio permite la sincronización de datos para consultar este material sin conexión a Internet.

Sitio Web | Guía de campo para aplicaciones Web
Vía | Web Resources Depot

Una fuente con pictogramas modernos

noreply@blogger.com (Daniel Ulczyk) — Mon, 13 Feb 2012 10:06:00 PST

Modern Pictograms es una fuente en formato OTF que puede descargarse gratis desde Font Squirrel.

Esta fuente contiene varios pictogramas que pueden ser utilizados en variados diseños Web.

Descargar fuente | Modern Pictograms

W3C estrena el servicio de validación para HTML5

noreply@blogger.com (Daniel Ulczyk) — Wed, 08 Feb 2012 04:42:00 PST

Desde el sitio Web de W3C se anuncia—en forma oficial—el lanzamiento y puesta en línea de una herramienta de validación automática para HTML5

De esta manera, esta aplicación Web no sólo podrá validar el correcto marcado en HTML5 sino que, también podrá controlar tanto RDFa Core 1.1 como RDFa Lite 1.1

W3C conserva, asimismo, su anterior herramienta de validación basada en DTD

Sitio Web | Nu Markup Validation Service
Vía | W3C

Si mi sitio Web está caído UptimeFu me avisa

noreply@blogger.com (Daniel Ulczyk) — Tue, 07 Feb 2012 03:37:00 PST

UptimeFu es una aplicación Web que se encarga de controlar si nuestro sitio Web está en línea o no.

Su uso es simple, sencillo y gratuito. Sólo es necesario informar el nombre del dominio que deseamos controlar y la dirección de correo donde deseamos recibir los alertas.

Sitio Web | UptimeFu
Vía | Feedmyapp

Flotr2 | librería para manejar canvas en HTML5

noreply@blogger.com (Daniel Ulczyk) — Sun, 05 Feb 2012 04:17:00 PST

Flotr2 es una librería open source que permite el manejo de canvas en HTML mediante tablas y gráficos.

Esta librería soporta los siguientes formatos de gráficos:

líneas
barras
velas
tortas
burbujas

El gráfico resultante posee muchas opciones de personalización; como títulos, subtítulos, colores, etiquetas, etc. y permite interacciones con el usuario.

La documentación en línea ofrece soporte para móbiles y la adición de plugins adicionales

Sitio Web | Flotr2
Vía | Web Resources Depot

Tu navegador soporta CSS3?

noreply@blogger.com (Daniel Ulczyk) — Sat, 04 Feb 2012 14:02:00 PST

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

Botones CSS3: nunca tan fácil!

noreply@blogger.com (Daniel Ulczyk) — Wed, 01 Feb 2012 14:45:00 PST

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

Como agregar una calculadora científica en la barra de estado de Firefox

noreply@blogger.com (Daniel Ulczyk) — Wed, 01 Feb 2012 11:57:00 PST

Status-bar Scientific Calculator es una extensión para Firefox que agrega una calculadora científica en la barra de estado de Firefox.

Esta calculadora no solo soporta las funciones básicas sino que, además, provee la posibilidad de calcular operaciones matemáticas avanzadas; como ser el uso de números complejos, por ejemplo. Y, también, operar con números hexadecimales, decimales y con números base desde 2 hasta 24.

En esta calculadora es posible definir constantes y funciones y soporta hasta 10 dígitos más allá del punto flotante.

Instalar | Status-bar Scientific Calculator
Vía | Ghacks

Como crear texto curvo con CSS3

noreply@blogger.com (Daniel Ulczyk) — Mon, 30 Jan 2012 10:42:00 PST

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

Como maquetar con 1 K de CSS

noreply@blogger.com (Daniel Ulczyk) — Thu, 26 Jan 2012 15:24:00 PST

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:

Sólo hay que enviar un solo archivo CSS
El archivo debe tener un tamaño de hasta 1 K (1024 bytes)
Los prefijos propietarios no cuentan para el total de bytes
Cualquier recurso externo como imágenes, @font-face e @import están prohibidos
El resultado final no debe tener necesariamente la misma apariencia en todos los navegadores (pero se anima a mostrar ligeras variaciones)
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

99 Lime - HTML QuickStart

noreply@blogger.com (Daniel Ulczyk) — Wed, 25 Jan 2012 14:00:00 PST

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!)

Como desgargar Cassannet gratis

noreply@blogger.com (Daniel Ulczyk) — Thu, 12 Jan 2012 07:21:00 PST

Cassannet es una fuente en estilo deco, muy útil para encabezados en diseño Web o bien para diseño de posters en diseño gráfico.

Cassannet puede descargarse mediante una de 2 tipos de donaciones; cash o mediante un Tweet. Así es, si tenés una cuenta de Twitter podés descargarla donando un tweet.

Sitio Web | Cassannet