Utilidades para Webmasters

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

Son seguros los acortadores de URLs?

noreply@blogger.com (Daniel Ulczyk) — Wed, 11 Jan 2012 04:36:00 PST

Sí. Los acortadores de URLs son seguros. Pero, en la medida que conozcamos el destino al cual nos llevan.

Con el uso de Twitter y la capacidad de la red social de compartir recursos, es obligado el uso de acortadores de URLs. De hecho, clientes de Twitter como HootSuite y TweetDeck los tienen ya incorporados en forma nativa.

CheckShortURL es una aplicación Web que nos revela al URL detrás de una URL acortada. Soporta los acortadores más usados y conocidos.

Sitio Web | CheckShortURL
Entradas relacionadas:

Dabblet | para jugar con CSS

noreply@blogger.com (Daniel Ulczyk) — Tue, 10 Jan 2012 09:48:00 PST

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

El momento cero de la verdad

noreply@blogger.com (Daniel Ulczyk) — Fri, 30 Dec 2011 13:39:00 PST

Un nuevo e-book gratuito de Google

Un libro sobre marketing y estrategias; ideal para la lectura de vacaciones.

El momento cero de la verdad (aka ZMOT) es un libro electrónico que publica Google y que está disponible su descarga—en formato PDF—inclusive en castellano.

Qué es el momento cero de la verdad?

Video | 02:23 min

La manera de comprar está cambiando y las estrategias de marketing ya no pueden seguir el ritmo. Si quiere comprar hojuelas de maíz, entradas para conciertos o su luna de miel en París, Internet ha cambiado nuestra forma de decidir lo que compramos. Hoy en día todos somos exploradores digitales, en busca de calificaciones en línea, críticas de especialistas en los medios sociales, videos y los detalles del producto a medida que avanzamos en el ciclo de compra. El marketing ha evolucionado y las estrategias de marketing modernas tienen que evolucionar junto con el cambio en la forma de comprar.

En Google, llamamos al momento de tomar decisiones en línea el momento cero de la verdad o ZMOT.

Cómo ganar el momento cero de la verdad es un e-book nuevo y poderoso de Jim Lecinski, director general de Google en EE.UU. Jim comparte la forma de tener éxito en este momento crítico del marketing, con apoyo de estudios de mercado exclusivos, historias personales y contribuciones de altos ejecutivos de empresas líderes mundiales como General Electric, Johnson & Johnson y VivaKi.

Si usted es vendedor, director ejecutivo, representante de ventas o aspirante a empresario, este libro sobre las estrategias de marketing y el ZMOT lo ayudarán a comprender este cambio en el panorama del marketing y le mostrarán las estrategias necesarias para triunfar.

Descargar | ZMOT (en castellano)
Vía | Google Argentina

Como detectar contenido duplicado

noreply@blogger.com (Daniel Ulczyk) — Thu, 29 Dec 2011 16:57:00 PST

Plagiarisma.Net tiene una versión Web y una de escritorio

Detector de plagios y de contenido duplicado

El contenido duplicado es una de las prácticas que todo buen webmaster quiere siempre evitar a fin de ser penalizado por cualquiera de los motores de búsqueda.

Esta práctica tiene su impacto también sobre el contenido original ya que, en alguna medida, socaba la reputación de quien gestionó los contenidos por vez primera.

En mis pruebas, por ejemplo, la versión Web logró detectar en muy poco tiempo cerca de 126 millones de ocurrencias del texto que cito:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam odio lacus, varius euismod luctus sit amet, rutrum id velit. Morbi vel libero quis lacus dictum porttitor.

Mientras que Google (con su veloz respuesta de 1.24 segundos) me dice solo 1.310.000 (!)

La versión Web—aunque soporta más de 190 idiomas—tiene algunas limitaciones hasta que uno se registre; lo cual es sencillo y además gratis. No obstante, existe también una versión de escritorio; la cual—al momento de escribir estas líneas—todavía no he probado.

Imagen cortesía de gHacks

Al igual que la versión Web, la versión de escritorio soporta consultas en los principales motores de búsqueda (ie.: Google, Bing, Yahoo, Google Scholar o Google Books)

En los resultados encontrados no figura completa la ruta del documento; sino el la URL de primer nivel.

Como enviar grandes archivos con Kicksend

noreply@blogger.com (Daniel Ulczyk) — Mon, 26 Dec 2011 11:40:00 PST

Con el uso de Kicksend se está descubriendo una nueva manera de compartir archivos

Kicksend es una aplicación de escritorio—tanto para Windows, como para Mac—que permite enviar a cualquier destinatario archivos de cualquier tamaño en forma gratuita y segura. Sólo es preciso contar con una dirección de correo válida para que el destinatario sea apropiadamente notificado.

Si se quiere prescindir de la instalación de la aplicación de escritorio; la aplicación Web permite la misma funcionabilidad pero con la limitación de tamaño de archivo de 150 MB.

En cualquiera de ambos casos, Kicksend mantiene en sus servidores por 2 semanas el archivo enviado; luego de lo cual es borrado en forma automática.

La aplicación, permite manejar métricas tanto de descargas como de visualizaciones sin la instalación adicional de cualquier otra App.

Sitio Web | Kicksend

Como adherir una nota a la ventana de un programa

noreply@blogger.com (Daniel Ulczyk) — Sun, 25 Dec 2011 16:40:00 PST

Stick A Note es un aplicación de escritorio en formato portable que permite adherir una nota a la ventana de cualquier aplicación Windows.

De esta manera, es posible dejar una nota para que sea leía cuando la aplicación está en ejecución; de esta manera es visible en el borde superior derecho de la ventana.

Sitio Web | Stick a Note
Vía | ghacks
Licencia | Freeware
Instalación | Portable
Versión | 1.0.1

Se puede hacer del mundo un lugar mejor

noreply@blogger.com (Daniel Ulczyk) — Fri, 23 Dec 2011 19:27:00 PST

¡Felices Fiestas!

Accesibilidad Web en Argentina

noreply@blogger.com (Daniel Ulczyk) — Thu, 22 Dec 2011 05:37:00 PST

A través de la noticia El Centro de Referencia en Accesibilidad Web cumple un año de vida, me he enterado de la existencia del Centro de Referencia en Accesibilidad Web (CRAW) dependiente de la Oficina Nacional de Tecnologías de Información (ONTI) de Argentina.

La misión principal del CRAW es "permitir que las páginas web pertenecientes al Estado Nacional, puedan ser accedidas por un mayor número de personas, independientemente de sus propias limitaciones o de las derivadas de su entorno". Para ello, "el CRAW validará el grado de cumplimiento de estándares de accesibilidad web. Asimismo, ofrecerá servicios de capacitación a la Administración Pública Nacional y dispondrá de un observatorio tendiente al cumplimiento de la legislación vigente en materia de la Sociedad de la Información y accesibilidad web universal de las personas con capacidades diferentes a fin de garantizar la igualdad de oportunidades y la no discriminación".

Recordemos que en Argentina a finales de noviembre de 2010, fue aprobada la Ley 26.653 de Accesibilidad de Información en las Páginas, que "compromete al Estado nacional a respetar en el diseño de sus páginas Web las normas y requisitos sobre accesibilidad de la información que faciliten el acceso a sus contenidos a todas las personas con discapacidad, con el objeto de garantizarles la igualdad real de oportunidades y trato, evitando así todo tipo de discriminación".

La Resolución 69/2011 aprueba la "Guía de Accesibilidad para Sitios Web del Sector Público Nacional", que es una transposición directa de las Pautas de Accesibilidad al Contenido en la Web 1.0 del W3C.

Visto en Accesibilidad en la Web
Imagen gentileza Benitez62

Cómo se hacen las fichas de Tetris?

noreply@blogger.com (Daniel Ulczyk) — Wed, 21 Dec 2011 16:17:00 PST

Posiblemente, Tetris sea uno de los juegos más populares de la historia de la PC. Pero... ¿cómo se hacen las fichas de Tetris?

Vía | SoyGik

Shelfster | una plataforma para escritores

noreply@blogger.com (Daniel Ulczyk) — Wed, 21 Dec 2011 05:50:00 PST

El título del post no debiera sonar ostentoso ni mucho menos; Shelfster es una aplicación Web dirigida no sólo a escritores, sino—también—a cualquiera que desee desarrollar un contenido; manteniendo sus archivos en la nube.

Esta aplicación es gratuita y funciona con independencia del sistema operativo que se utilice. Sea este Windows, Mac OS, smartphones y/o cualquier navegador moderno.

Shelfster es ideal para anotar ideas, registrar notas de voz, capturar imágenes y pegar partes de texto. Todos estos elementos son enviado a tu cuenta en línea y luego—más tarde—es posible organizar todo para generar un contenido adecuado.

En cualquier momento, el contenido puede ser descargado como un archivo PDF, ZIP o migrarlo a tu cuenta de Google Docs.

Sitio Web | Shelfster
Vía | Feedmyapp

Como buscar archivos con FilesHut

noreply@blogger.com (Daniel Ulczyk) — Thu, 15 Dec 2011 09:43:00 PST

Motores de búsqueda alternativos

FilesHut es un motor de búsqueda que tiene la capacidad de rastrear archivos a través de los principales servidores de alojamiento de archivos gratuitos.

Con crawlers propietarios, este motor de búsqueda, tiene ya indexados sitios como:

Rapidshare
Megaupload
4Shared
Hotfile
Mediafire
Netload
Filesonic
Wupload

A la fecha, la base de datos de FilesHut tiene ya, poco más de 17 petabytes (un millón de gigabytes) e indexados 261 millones de archivos (y contando...).

En todo momento, la query puede llevarse a cabo filtrando los resultados por tipo de archivo.

Constantemente, el sitio muestra actualizadas las últimas búsquedas; así también como las tendencias.

Sitio Web | FilesHut

Como crear aplicaciones móviles con Zoey

noreply@blogger.com (Daniel Ulczyk) — Wed, 14 Dec 2011 05:40:00 PST

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

Como obtener una imagen de cualquier objeto con JpgTo

noreply@blogger.com (Daniel Ulczyk) — Sat, 03 Dec 2011 15:31:00 PST

JpgTo is a free to use web service that provides you with an image of any object. There are not any details available on the site as to how these images are selected and where they are selected from; but one thing is for sure: it works.

JpgTo es un servicio Web gratuito que provee una imagen de cualquier objeto. No hay detalles—en el sitio web—sobre cual es el método por el cual es seleccionada la imagen final a partir de la consulta; pero algo es cierto: esto trabaja.

Y no sólo para consultas en inglés, como es de suponerse; funciona muy bien, también para consultas en castellano. Sólo es necesario usar la URL y anteponer a jpg.to el nombre del objeto. Así, para la imagen siguiente, utilicé pixels. De tal manera que la URL quedó formada como http://pixels.jpg.to/

Sitio Web | jpg.to
Vía | Make Use of

Un generador de sprites basado en HTML5

noreply@blogger.com (Daniel Ulczyk) — Thu, 01 Dec 2011 09:27:00 PST

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

Como vigilar tu sitio Web con Web Security Monitor

noreply@blogger.com (Daniel Ulczyk) — Tue, 29 Nov 2011 07:20:00 PST

Web Security Monitor es una aplicación Web lanzada ayer—precisamente—en una beta pública. Web Security Monitor es fácilmente configurable, sólo es necesario informar el sitio Web sobre el cual se llevarán a cabo los análisis, una cuenta de correo donde recibir los informes (si los hubiera) y uan palabra clave para administrar la cuenta.

Las principales fortalezas donde Web Security Monitor registra cambio o comportamientos anómalos son:

Malware
Caídas del servidor
Blacklist
Software desactualizado( WordPress, Tomcat, Apache )
Falta de configuración adecuada en el sitio Web
Certificados SSL expirados
Próxima expiración del dominio
DNS Server Uptime
DNS Server Hijacking
Cambios en el contenido no autorizados

Los autores de la aplicación señalan que no están terminadas todas las características pero aún siguen trabajando en ellas.

El uso y la registración permanecen gratuitos y abierto al público y a los usuarios en general.

Sitio Web | Web Security Monitor