Blog sobre Accesibilidad Web, diseño Web, SEO y recursos gratis en la Web

lunes, 28 de febrero de 2011

HTML5 edición para desarrolladores

HTML5 edición para desarrolladores
HTML5 — Edition for Web Developers es una edición de HTML5 con el foco puesto en los desarrolladores; la facilidad de comprensión y de lectura también.

Esta edición—la cual el sitio Web solicita permiso para descargar en local, para futuras lecturas—está estructurada de la siguiente manera:
  1. Introduction
  2. Common infrastructure
  3. Semantics, structure, and APIs of HTML documents
  4. The elements of HTML
  5. 5 Microdata
  6. Loading Web pages
  7. Web application APIs
  8. User interaction
  9. Communication
  10. The HTML syntax
  11. The XHTML syntax
  12. Obsolete features
  13. IANA considerations
Un documento de lectura y referencia para el próximo estándard de marcado estructural Web.

Sitio Web | HTML5 — Edition for Web Developers
Share:

domingo, 27 de febrero de 2011

Google actualiza los perfiles de usuario

Aunque todavía no implementado en la interfase pero sí disponible desde la barra de direcciones; Google ha dejado disponible la nueva mejora para búsqueda de perfiles de usuarios.

Se trata de la siguiente sintaxis:
 
http://www.google.com/search?q=USUARIO&hl=en&tbs=prfl:1

Google actualiza los perfiles de usuario
Es de esperar que Google permita trabajar después con filtros y búsquedas avanzadas.

Vía | Google Operative System
Share:

viernes, 25 de febrero de 2011

La lista de deseos de Internet | Internet Whislist

The Internet Whishlist es el proyecto personal de Amrit Richmond. Una desarrolladora que vive en la ciudad de Nueva York.

Con este proyecto, Amrit, intenta recoger cuales son la mejores ideas que los usuarios tienen para incluir en su lista de deseos tanto para aplicaciones como para sitios Web, también.

La forma de participar es mediante tu cuenta de Twitter y utilizando el hashtag #theiwl en tu tweet.

La autora no asegura de manera alguna que el tweet sea incluído. Sólo serán incluídos los más relevantes.

La lista de deseos de Internet | Internet Whislist

El sitio Web cuenta con una canal de sindicación RSS que te permite mantenerte informado de las actualizaciones mediante tu lector de noticias preferido.

Sitio Web | The Internet Whishlist
Share:

La cascada de Escher

El video del viernes


Un usuario de YouTube ha construido un modelo funcional inspirado en la obra Waterfall de M. C. Escher

Video | 01:20 min


Ver para creer ;-)

Vía | Soygik
Share:

jueves, 24 de febrero de 2011

Un editor de texturas de madera sin borde | Wood Workshop

Un editor de texturas de madera sin borde | Wood Workshop

Wood Workshop es un programa gratuito de Spiral Graphics que permite al usuario diseñar sus propias texturas de madera sin borders (aka seamless).

Así, de esta forma, es posible utilizar el diseño como fondo de páginas o DIVs generando una repetición en ambos ejes.

Texturas de madera sin bordes

Requerimientos del sistema

Sistema operativo » Windows 2000/XP/Vista/7
Procesador » 1 GHz processor
Memoria » 1 GB
Espacio en disco » 6 MB

Sitio Web | Wood Workshop
Share:

martes, 22 de febrero de 2011

Descargar set de íconos semi-transparentes

De la mano de Productive Dream, Six Revisions ha publicado en forma reciente un interesante recurso que permite ser utilizado; tanto en proyectos personales como comerciales: 1 Set de íconos semi-transparentes

Descargar set de íconos semi-transparentes

El paquete incluye 48 íconos derivados de 20 íconos originales.Cada ícono es presentado en 6 medidas diferentes:
  • 32×32
  • 48×48
  • 64×64
  • 128×128
  • 256×256 y
  • 512×512

Se trata de un archivo en formato ZIP de 18.7 Mb

Sitio Web | Glossy: Free Icon Set
Share:

domingo, 20 de febrero de 2011

iConvert | Convertir online los iconos para Windows, Mac OS X y Linux

iConvert | Convertir online los iconos para Windows, Mac OS X y Linux

iConvert es una aplicación Web que te permite subir imágenes y obtener las diferentes resoluciones en respuesta a diferentes sistemas operativos.

Así, subiendo una imagen de se obtienen, por ejemplo:
  • Los formatos de íconos para Windows (.ico) y para Mac (.icns y .hqx)
  • La imagen en PNG para Linux de:
    • 512 x 512 px
    • 256 × 256 px
    • 48 × 48 px
    • 32 × 48 px
    • 16 × 48 px
  • Así también la imagen para Web .ico en 16 × 16 px y 32 × 32 px


Sitio Web | iConvert
Share:

sábado, 19 de febrero de 2011

Diseño | descargar cajas de búsqueda

Diseño | descargar cajas de búsqueda

En Design 3 edge han publicado un pack de cajas de búsquedas en formato PSD el cual—mediante Photoshop—puede ser modificado y adaptado, inclusive los colores.

Las fuentes utilizadas son Calibri y Arial y el archivo ZIP contiene:
  • archivo PSD en capas y editable
  • archivo JPG que oficia para la visualización del contenido

#LazyDesigners

Sitio Web | Design 3 edge
Share:

viernes, 18 de febrero de 2011

HTML5 será estándard en 2014

HTML5 será estándard en 2014

El W3C ha ampliado los estatutos de constitución del Grupo de Trabajo de HTML con planes concretos para que HTML5 pase a la siguiente fase dentro del proceso que la convertirá en Recomendación. "Aunque la innovación siga su curso, la evolución de HTML5 en el proceso que lo convertirá en Recomendación significa que el ecosistema web, en su conjunto, podrá contar con un estándar estable, interoperable y de eficacia probada", afirmó Jeff Jaffe, Director de Operaciones del W3C.

Vía | W3C España
Share:

Le Barzellette

El video del viernes


Le Barzellette es una comedia (2004) del director italiano Carlo Vanzina. A pesar que el video no está subtitulado, el uso del idioma—italiano—no debiera presentar barrera alguna para la comprensión de la graciosa escena.

video |
Share:

jueves, 17 de febrero de 2011

Como añadir sombras en CSS sin utilizar imágenes

Nicolas Gallagher presenta—desde su sitio Web—9 ejemplos de sombras diferentes mediante el uso de CSS3.

Como añadir sombras en CSS sin utilizar imágenes

Los efectos, son:
  • lifted corners
  • curled corners
  • perspective
  • raised box
  • single vertical curve
  • vertical curves
  • single horizontal curve
  • horizontal curves
  • rotated box
La implementación no require un markup extra:

HTML
<div class="drop-shadow lifted">
<p>Lifted corners</p>
</div>

CSS
        .drop-shadow {
            position:relative;
            float:left;
            width:40%;    
            padding:1em; 
            margin:2em 10px 4em; 
            background:#fff;
            -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 60px rgba(0, 0, 0, 0.1) inset;
               -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
                    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        }

        .drop-shadow:before,
        .drop-shadow:after {
            content:"";
            position:absolute; 
            z-index:-2;
        }
        
        .drop-shadow p {
            font-size:16px;
            font-weight:bold;
        }
        
        /* Lifted corners */

        .lifted {
            -moz-border-radius:4px; 
                 border-radius:4px;
        }
        
        .lifted:before,
        .lifted:after { 
            bottom:15px;
            left:10px;
            width:50%;
            height:20%;
            max-width:300px;
            -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);   
               -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
                    box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
            -webkit-transform:rotate(-3deg);    
               -moz-transform:rotate(-3deg);   
                 -o-transform:rotate(-3deg);
                    transform:rotate(-3deg);
        }
        
        .lifted:after {
            right:10px; 
            left:auto;
            -webkit-transform:rotate(3deg);   
               -moz-transform:rotate(3deg);  
                 -o-transform:rotate(3deg);
                    transform:rotate(3deg);
        }


Sitio Web | Nicolas Gallagher
Vía | WebAppers
Share:

martes, 15 de febrero de 2011

Como buscar las personas detrás de cualquier sitio Web

Motores de búsqueda alternativos


Bajo la consigna de Somos humanos, no máquinas Juanjo Bernabeu (aka cssbarcelona) es quien ha tenido la iniciativa y la visión para dar forma al proyecto Humans.txt

Este archivo sólo es necesario que esté al mismo nivel de tan conocido y mentado robots.txt y no es para nada intrusivo. Ni de cara al usuario ni a los motores de búsqueda.

Pero de ninguna manera humans.txt imparte directivas, sólo informa quienes son las personas detrás del sitio Web.

Como buscar las personas detrás de cualquier sitio Web

Humans Search es una herramienta que permite hacer una query sobre cualquier sitio Web y obtener como resultado—si lo hubiera—el contenido de humans.txt

Sitio Web | Human Search
Share:

viernes, 11 de febrero de 2011

Superman Classic

El video del viernes


Robb Pratt, quien ha animado películas para Disney como Pocahontas y Fantasia 2000, ha creado esta animación basada en la historia del "hombre de acero", Superman Classic. Un corto con el glamour de la vieja escuela ;-)

video | 02:35 min


Vía | IO9
Share:

Fuck Lorem Ipsum | +1 alternativa a Lorem Ipsum

Fuck Lorem Ipsum ae presenta como una alternativa al conocido generador de texto falso como Lorem Ipsum.

Fuck Lorem Ipsum | +1 alternativa a Lorem Ipsum

Esta aplicación Web ofrece—a los efectos de ser más competitiva—texto con markup de párrafos, con saltos líneas forzados (aka BR) y con enlaces o una combinación de todos.

La cantidad de párrafos generados es customizable (hasta 10 párrafos). Tiene—como un buen valor agregado—filtro para agregar diálogos de TV de:
  • comedias
  • dramas
  • niños
  • varios
Sitio Web | Fuck Lorem Ipsum
Share:

miércoles, 9 de febrero de 2011

El nuevo Photoshop que debieras tener

El nuevo Photoshop que debieras tener es el Photoshop que el cliente piensa que los diseñadores gráficos tienen.

El nuevo Photoshop que debieras tener
Incluye nuevas y fascinantes prestaciones, por cierto.

Imagen gentileza de Jaume Estruch
Se puede reproducir tantas veces como quieras siempre y cuando cites la fuente original ;-)
Share:

lunes, 7 de febrero de 2011

Guía SEO para principiantes

SEOMoz ha publicado una interesante guía (en inglés) para principiantes en SEO.

Guía SEO para principiantes

Los temas de este manual, se desarrollan a través de los siguientes 10 capítulos:

  1. como trabajan los motores de búsqueda
  2. como la gente interactúa con los motores de búsqueda
  3. por qué los motores de búsqueda son una herramienta de marketing necesaria
  4. lo básico del diseño amigable y el desarrollo para los motores de búsquedas
  5. recursos para palabras claves
  6. de como la usabilidad, la experiencia de usuario y el contenido afecta en el ranking
  7. crecimiento de popularidad y enlaces
  8. herramientas para motores de búsquedas y servicios
  9. mitos y preconceptos acerca de los motores de búsqueda
  10. métricas y seguimientos de eventos
La guía (ya en su segunda edición) está disponible en el enlace publicado (abajo); de otra manera se puede descargar vía PDF. Previa solicitud en el sitio Web, SEOMoz te envía el enlace para descarga por correo.
PDF | 14.4 MB - 51 páginas

Sitio Web | SEOMoz
Share:

Dónde busco información cuando la necesito?

Durante el fin de semana participé en una charla informal que luego devino en fuerte discusión sobre el uso de la información y el modo en que ésta, hoy y a cotidiano es suministrada, manipulada, indexada y vuelta a poner a nuestra disposición en los motores de búsqueda.

Se dice y se sostiene que Google—por ejemplo—mantiene y conserva poco más del 80% de participación en el mercado.

¿Es acertado buscar cualquier tema en Google?

Decididamente no. En especial atención, si el tema te preocupa no debieras empezar a buscar por ahí.

Dónde busco información cuando la necesito?

  1. Si escribís sobre el tema, debieras empezar a buscar en tus blogs.
  2. Si existe alguna opinión que compartís con alguien (o no) debieras buscar en los foros donde participás.
  3. Si recordás que alguna vez visitaste alguna página al respecto; debieras buscar en tus marcadores sociales. Yo utilizo Delicious, por ejemplo.
  4. Si el tema está incluído en algún blog que seguís, debieras buscar en tu lector de noticias; Google Reader, en mi caso.
  5. Concluído este camino, recién ahí busco en Google ;-)
Share:

sábado, 5 de febrero de 2011

Como sincronizar tu cuenta de Twitpic con Flickr

Twitpic to Flickr es una ingeniosa aplicación Web que te permite que cada vez que publicás una foto en Twitpic—en especial atención si usás periódicamente este servicio junto con Twitter, esa imagen se suba a tu galería de Flickr.

Como sincronizar tu cuenta de Twitpic con Flickr

Sitio Web | Twitpic to Flickr
Share:

viernes, 4 de febrero de 2011

Auto Follow Friday para Twitter

Auto Follow Friday para Twitter

Follow Friday es la tradición de los viernes—en Twitter—de recomendar y promover a usuarios.

Auto Follow Friday es una aplicación Web que analiza tus últimos tweets (tu cuenta no debe estar protegida) y contabiliza a qué usuarios le has hecho más retweets y/o has citado. Esto, a ojos de cualquiera, marca en detalle el nivel de interés hacia estos usuarios.

El uso de esta herramienta no requiere registración ni requiere tampoco conceder permisos de acceso; sólo trabaja sobre el perfil público.

Sitio Web | Auto Follow Friday
Share:

miércoles, 2 de febrero de 2011

CSS: hojas de estilos dinámicas con less.js

less - hojas de estilo dinámicas

Less es un proyecto desarrollado por Alexis Sellier (aka cloudhead) que se resume en un script del lado del cliente; se trata de una librería en Javascript que extiende el comportamiento de CSS.

Ya que permite el uso de variables y operadores y funciones.

CSS: hojas de estilos dinámicas con less.js

Funciona perfectamente en IE6 y superiores, Webkit y Firefox.

Ejemplo de CSS con Less
@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}

Resultado del CSS una vez compilado
#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}
Sitio Web | Less
Vía | Delicious
Share:

Publicidad

Estadísticas