Esto significa que, junto con Georgia, Arial y el resto, vamos a empezar a ver mucho más las Droide Serif, Molengo y Mandarina en la web.
Ademas de la biblioteca de Google y su API, también hay una asociación con Typekit para crear algo llamado WebFont Loader.
El gestor de WebFont es una librería JavaScript que funciona con la API de Google, pero que a la vez le da más control sobre la carga de la fuente, e incluso permite que incorpores fuentes web de otras bibliotecas.

Esto es sencillamente genial, ya que hasta hoy era bastante engorroso meter otras fuente en nuestros diseños, si bien existe la manera y en css3 es mucho mas simple gracias a esta API de Google va a ser muchísimo mas sencillo.

Estan listos para usar la API? Yo por mi parte ya la estoy usando

El Proyecto Webm se dedica al desarrollo de videos en alta calidad con formato abierto para la web y está disponible gratuitamente para todo el mundo.
Webm funciona en Mozilla, Opera, Google, más de cuarenta editores y proveedores de software y hardware.
Webm es un formato multimedia diseñado para la web, es open source y libre de regalías.
En definitiva Webm es una estructura  para reproducir archivos de vídeo y audio. La reproducción sobre Webm consiste en secuencias de vídeo comprimido con el códec VP8 y el audio es comprimido con el códec de Vorbis. La estructura de archivos de Webm se basa en Matroska.

Se anuncio hoy en el escenario de I / O, Google hizo la inauguración del nuevo proyecto Webm junto a una gran cantidad de socios (en particular: Mozilla y Opera en el lado del cliente) que reciben el códec On2 liberado. Esta es una gran noticia para la lucha del Open Video, y ahora todo el mundo va a tener los ojos puestos en Safari.

YouTube le va a dar un gran empujón al Webm, podes ir a su versión HTML5: http://www.youtube.com/html5 y comprobar que funciona perfecto. Ya está disponible en versiones de Chrome y Firefox y pronto en una versión beta de Opera…

Los puntos fuertes de WebM serian:

La apertura y la innovación:
Un factor clave en el éxito de la web es que la base de su tecnología, tales como HTML, HTTP y TCP / IP son open source para que cualquiera pueda implementar sobre ellas y mejorarlas. Como el vídeo se esta volviendo una parte importante en la red, una opcion open source es necesaria.
Webm es 100% libre y de código abierto bajo la licencia BSD-style.

Optimizado para la web:
Reproducir vídeo en la web es diferente a las radiodifusión tradicional.
Hay formatos de vídeo que fueron diseñados para satisfacer las necesidades de estos medios y funcionan muy bien.
Webm se centra en las necesidades básicas de la reproducción de vídeo en la web.
La tecnologia de WebM va a permitir la reproducción en cualquier dispositivo, incluso netbooks de baja potencia, dispositivos de mano, tablets, etc *
Formato simple del reproductor.
Mayor calidad de vídeo en tiempo real.
De la misma manera que se instalo el plug & play WebM nos dice click & encode (con un solo click vamos a poder pasar un video a este nuevo formato). Configuraciones minimas, sub-opciones, y cuando sea posible el codificador va a tomar las decisiones difíciles.

Bueno esto es un excelente avance en la reproducción de vídeo en la Web.

Por otro lado Flash dijo que también van a incorporar el codec VP8. Y Microsoft confirmo lo mismo para su próxima versión (IE9), asi que ahora solo queda la gente de Safari, esperemos…

Que les parece esto, es una buena de Google, o todo sea por controlar el mercado de vídeos online? :S
Lo dejo a su criterio.
La noticia fue tomada de http://ajaxian.com/archives/webm-the-on2-codec-is-here-with-support-from-google-mozilla-and-opera

Antes que nada les cuento que cambian bocha de cosas que no las voy a contar porque sino estaría hasta mañana escribiendo, solo voy a tirar las cositas que me parecen mas importantes.

Custom Post Types (Tipos de posts)

La nueva función Custom Post Types va a hacer posible tener tipos de posts con características que nosotros necesitemos que tenga.
Una muy interesante característica de los Custom posts types es que vamos a poder personalizar que partes del editor necesitamos al momento de escribir el post.
A que nunca usas los extractos? Ahora podes  desactivalo.
No necesitas thumbnailes o los campos personalizados? Desactivalos!
¿Queres usar sólo el campo extracto y eliminar el editor WYSIWYG? También podes hacerlo con la nueva y muy util opción Custom Post Types.

Custom Taxonomies

Para el que no esta al tanto de lo que son los taxonomies les cuento que son lo mismo que las etiquetas, las que usan para etiquetar un post. Ok, ahora vamos a poder personalizar esas etiquetas, si bien ya se podía mediante plugins ahora esta opción viene onboard. Un ejemplo claro de donde pueden ser utilizados los custom taxonomies es si por ejemplo estamos haciendo un theme de venta de propiedades, nuestro cliente agrega una propiedad y los barrios van a ser siempre reutilizables asi que vamos a crear un nuevo custom taxonomies que se va a llamar Barrios, ahora vamos a poder filtrar o buscar por barrios en el sitio creando un filtro Barrios. En definitiva los custom taxonomies son etiquetas que vamos a necesitar re utilizar en varios posts y junto a la nueva opcion Custom Post Types va a ser mucho mas solido el sistema.
Si no me explique correctamente, lo que es casi seguro, dejen su comentario abajo con su pregunta y voy a responder lo mejor que pueda.

Menu

Para explicar esta nueva funcionalidad encontre este video que resume todo.

Multisitios / Red de blogs (Lo que antes era WP MU)

Una de las primeras cosas que adelantaron los muchachos sobre WordPress 3.0 es que iban a fusionar WordPress con la versión Multi Usuario que todos conocemos como WordPress MU. O sea que ahora vas a poder correr tu propia red de blogs sin necesidad de instalar WordPress MU. Y agregándole BuddyPress va a tener toda una red social en tu sitio.

Custom Background

Esta es una opción que venia en muchos themes profesionales y que ahora WordPress la trae onboard. Con un solo click vas a poder subir una imagen y activarla para cambiar el fondo de tu blog. El nuevo Theme Twenty Ten incluye está opción, si queres agregarlo en tu Theme vas a tener que agregar un pedacito de código.
En el archivo funcions.php van a tener que agregar esta linea:

add_custom_background();

Estas son para mi las cosas mas importantes que trae WordPress 3.0, todo lo demás son mejoras, mas que nada para desarrolladores y no tanto para usuarios finales.
Si quieren conocer todas las nuevas opciones y mejoras de WordPress 3.0 nuevamente te dejo este link: http://codex.wordpress.org/es:Versión_3.0

Esto fue todo lo nuevo de WordPress 3.0, espero que les haya gustado.
Si tienen algo que decir por ahi abajo pueden hacerlo.

Este artículo es una lista en constante cambio de algunos comunes, polémicos, y con frecuencia olvidados errores cometidos en el desarrollo web. La mayoría de ellos se aplicarán a cualquier sitio web o blog, pero tené en cuenta que habrá casos en que no sería aplicable.

1. Asumir que “Yo lo construyo, ellos vienen”

– Incluso si lograras el sitio web perfecto todavía tendrias que tomarte el tiempo de hacer correr la voz. Es cada vez más necesario hablar sobre tu sitio web ya sea dejando comentarios en blogs, chats, foros como tambien comentarlo offline. Si no te tomas el tiempo de presumir de tu sitio, nadie lo hará.

2. No se mezclan los anuncios con el contenido

– Se puede aumentar la tasa de click-through en corto plazo, pero cuando un usuario cree que está haciendo click en un enlace interno y luego descubre que fue engañado – la mayoría no vuelve.

3. Evitar páginas splash (intro) en tu sitio web

– Por suerte esto ya es una moda muerta. Pero en un momento una gran cantidad de sitios web mostraban un splash cuando un visitante accedia a su sitio web, en lugar del contenido que se queria mostrar. #FAIL!

4. Hacer los links no visitados de un color diferente al de los links visitados

– Este es un tip basico de usabilidad. Los usuarios reconocen el color del link por defecto fácilmente y entienden que ya visitaron un link cuando este cambio de color – Esto ayuda a asegurarse de no volver a clickear un link visitado sin querer.

5. Asegúrate de que tu sitio web es cross-browser compatible

– Los navegadores no son iguales, y no todos interpretan el código de la misma manera. Nos guste o no, es necesario asegurarse de que nuestro sitio se vea correctamente en los navegadores más populares – http://www.browsershots.com es una gran herramienta para chequear esto.

6. Reproductores de Música

– No pongas un reproductor de música en tu sitio web, si alguien quiere escuchar música va a abrir su reproductor. Simplemente molesta a los visitantes, y también tiene que hacer click en el boton de stop cada vez que se carga una página. Si es un sitio relacionado con la música, tiene que arrancar en stop y darle al usuario la opción de iniciar el reproductor cuando esté listo.

7. No uses Flash si no es necesario

– El Flash no sólo aumenta el tiempo de carga de un sitio web, tambien le duele al SEO, y el uso excesivo de Flash también podría molestar a algunos visitantes. Yo diría que sólo se utilice cuando sea necesario.

8. Mantener intactas las características del navegador

– No romper el botón de retroceso, botón de avance, los ajustes de enfoque o cualquier otra funcion del navegador – algunas personas dependen de ellos.

9. No hacer que los links se abran en nuevas ventanas

– Dejá que el usuario controle su destino, si desea volver a tu sitio lo va a hacer usando el botón Atrás o características del navegador.

10. Dar tu punto de vista rápidamente

– Tenes que asegurarte de que el usuario en los primeros segundos de visitar tu página entienda de que se trata la página, si no pueden adivinarlo enseguida entonces lo mas común es que simplemente se vaya. Escribi en el título y en los encabezados un mensaje claro para el usuario.

11. No ajustar el tamaño de la ventana del navegador

– Hay que dejar que los usuarios controlen su navegador, cambiar el tamaño de un navegador puede afectar a las otras pestañas y ventanas que tienen actualmente abiertas.

12. No utilizar texto oculto

– Nunca tenes que intentar engañar a los motores de búsqueda mediante texto oculto para llenar la página con palabras clave o contenido para mejorar el ranking del motor de búsqueda – esto es simplemente una manera fácil de ganarte un ban en los resultados de búsqueda.

13. No abusar de las palabras clave

– Cuando agregues palabras clave a tus páginas asegurate que las palabras clave son relevantes para el contenido de la página. Lo mejor que se puede hacer es asegurarse de que cada palabra clave se menciona en el contenido varias veces. Si decidís no seguir esta regla algunos motores de búsqueda te va a castigar.

14. No usar los contadores de visitas visibles

– No sólo que es no profesional, sino que son completamente inútiles para los visitantes. En su lugar podes usar una aplicación como Google Analytics para realizar el seguimiento en voz baja y que la información la tengas solo vos.

15. No usar subrayado o cambiar los colores del texto normal

– los usuarios han llegado a identificar que el texto subrayado es un link. Trata de seguir esta sencilla regla para que los usuarios no confundan un texto común con un link.

16. Formatear el contenido correctamente

– Hay diferentes normas que se aplican a la escritura de contenido en Internet – no estás escribiendo un libro. Hace uso de los elementos como viñetas, headers, sub headers, y listas.

17. No usar pequeños tamaños de fuente

– Hay que asegurarse que el contenido sea legible para todos los diferentes tipos de visitantes. Los visitantes mas viejos es probable que tengan más dificultades para la lectura del contenido, y la mayoría de estas personas no son conscientes de cambiar el tamaño en las opciones del navegador.

18. Se consistente

– No cambies el diseño o el color de los links a mitad de camino en el sitio. Asegúrate de que el diseño sea igual en todo el sitio.

19. No coloques texto (contenido) en imágenes

– El texto tiene que ser en HTML siempre que sea posible. Los diseñadores web muchas veces usan imágenes para su contenido o información, ya que mutilan las fuentes y los tamaños fácilmente. Pero esto no es amigo de los robots (SEO), no es fácil de cambiar el tamaño (como el texto que si se puede), no funciona con el software de lectura de texto para ciegos, y aumenta el tiempo de carga.

20. Evita los colores brillantes y fuertes

– Asegúrate de que el color de la fuente es fácil de leer sobre el color de fondo. También tené en cuenta que sólo porque vos podes leer la fuente rosa brillante sobre un fondo amarillo no significa que todos pueden. Siempre, la letra en negro sobre fondo blanco va a ser la mejor opción.

21. Proporcionar una función de búsqueda básica

– La capacidad de búsqueda es una forma de navegación muy importante en un sitio web. Ahora podes darle a tus visitantes la búsqueda personalizada de Google.

22. Uso del ALT y el atributo TITLE

– Asegúrate de usar estos atributos, ya que no sólo ayuda al SEO, también ayuda a los ciegos con los lectores de texto.

23. No requerir un registro a menos que sea necesario

– No obligues a los usuarios a registrarse cuando no es necesario.

24. Hacer uso de las fuentes estándar

– Es conveniente utilizar fuentes de Internet estándar al crear una página web, porque si un visitante no tiene la fuente que seleccionaste, se elegirá una diferente para reemplazarla.

25. Uso de Pop-ups

– Hacer uso de pop-ups con publicidad, o incluso de páginas con contenido del sitios se ha convertido en una mala idea desde hace años con el aumento de los bloqueadores de pop-ups.

26. Sitio web sobrecargado

– Es bastante común para los diseñadores web añadir muchos elementos a las páginas. Esto da origen a un aspecto poco profesional y es difícil de navegar a través de toda la información.

27. Páginas largas

– La gente evita leer páginas largas. Ser breve en el mensaje normalmente hará que las páginas tengan una mayor tasa de lectores. Si el contenido es muy extenso no hay nada mejor que un paginador.

28. Páginas de carga lenta

– Creelo o no, la gente todavía tiene acceso telefónico. Los visitantes rápidamente se pasarán a una página web diferente si la tuya no carga lo suficientemente rápido. Intentar acortar las páginas para que incluso los visitantes con la peor conexión a Internet puede acceder a la información es siempre una buena idea.

29. Navegación basada en JavaScript

– No sólo Google promueve evitar el uso de JavaScript en la navegación, sino que algunos usuarios y empresas navegan sin Javascript con lo cual no van a poder navegar correctamente tu sitio web.

30. Crear un Sitemap

– Los Sitemaps son básicamente una página con la lista de lo más importante o la totalidad de las páginas de tu sitio web. Crear un Sitemap en XML para tu sitio web garantiza que los motores de búsqueda descubran las páginas de tu sitio fácilmente.

31. No deshabilitar el click derecho

– Normalmente lo que los webmasters hacen con esto es tratar de frenar el acceso al código fuente, rutas de imagenes o para que no puedan copiar imagenes, pero es muy molesto y ademas los usuarios pueden acceder a dichas áreas, aunque tengan el click derecho desactivado, mediante el menú principal del navegador.

32. Abstenerse de direcciones URL complejas

– Una URL basada en palabras clave no solo mejora el posicionamiento en los buscadores, sino que también ayudará a los visitantes a identificar fácilmente el contenido de la pagina por el nombre de la URL.

33. No utilices imágenes de los enlaces de navegación

– Al crear la navegación de tu sitio web tenes que hacer uso de texto en lugar de imágenes. La navegacion basada en texto no sólo mejora el tiempo de carga, sino que ademas nunca tenes que hacer algo que no pueda ser fácilmente creado con una hoja de estilo.

34. No pongas tu dirección de correo electrónico en tu sitio web

– Las direcciones de correo electrónico en tu sitio web o blog no son un secreto para los robots de spam. Es bueno para vos y aún mejor para tus visitantes, si se proporciona un formulario de contacto. Otra solución es poner una imagen con la dirección de correo electrónico.

35. Optimización del CSS y las imágenes

– Tómate el tiempo para optimizar el CSS y las imágenes – esto ayudará a garantizar que los tiempos de carga sean más bajos y el peso total de tu sitio web será reducido.

Articulo original (en Ingles) http://netjelly.com/2009/10/25/list-of-web-design-mistakes-you-should-avoid/

Ustedes que opinan?
Habitualmente evitan estos errores?

Hoy vamos a aprender a hacer una botonera simple, íntegramente en Actionscript, estilo CSS.
Cuando trabajas freelance muchos clientes te piden que le hagas el logo y la botonera animada, si bien hay diversas técnicas para hacer una linda botonera con CSS y Javascript también hay formas de hacerlo muy fácil con flash.

En el archivo final van a tener todos los pasos mas detallados.
Descarga el archivo de acá

En nuestra botonera vamos a usar Tweener para las animaciones

import caurina.transitions.*;
import caurina.transitions.properties.*;
caurina.transitions.properties.ColorShortcuts.init();
caurina.transitions.properties.DisplayShortcuts.init();

Primero que nada vamos a crear el sprite que va a contener la botonera

var navholder:Sprite = new Sprite();
navholder.name = "navholder";
navholder.x = 10;
navholder.y = 40;

Ahora creamos el fondo de nuestra botonera

var navbackground:Sprite = new Sprite();
navbackground.graphics.beginFill(0x666666, .5);
navbackground.graphics.lineStyle(1,0x333333);
navbackground.graphics.drawRect(0, 0, 500, 30);
navbackground.x = 0;
navbackground.y = 0;

Ahora vamos a agregar los Sprites que creamos al Display List

navholder.addChild(navbackground);
addChild(navholder);

Ahora vamos a crear un array con los nombres de nuestros botones

var menuArr:Array = ["Inicio", "La Empresa", "Servicios", "Contacto"];

El segundo array que creamos es para los links, deben ir en el mismo orden que el array anterior.

var menuLinks:Array = ["inicio", "la-empresa", "servicios", "contacto"];

Hora de empezar con los botones

Ahora vamos a crear el movieclip que luego se va a transformar en nuestro botón

var btn:MovieClip;

Y acá definimos algunas variables para nuestra botonera

var btnXPos:Number = 2;
var btnYPos:Number = 2;
var btnMargin:Number = 2;
var i:int = 0;

Listo, terminamos. Ya creamos todos los elementos que necesitamos para armar nuestra botonera.
Recordemos que la botonera es bastante simple y básica pero ustedes pueden mejorarla, agregarle mas efectos y hasta pasar el script a una class y re-usarlo (:

Ahora vamos a crear la funcion que va a crear los botones

function botonera():void {
	if (i < menuArr.length) {
			btn = new MovieClip;
			btn.name = "btn_"+i;
			btn.id = i;
			btn.link = menuLinks[i];
			btn.alpha = 0;

			var fondo:Sprite = new Sprite();
			fondo.name = "fondo";
			fondo.graphics.beginFill(0x000000);
			fondo.graphics.drawRect(0, 0, 28, 28);
			fondo.alpha = 1;

			var formato:TextFormat = new TextFormat();
			formato.font = new btnFont().fontName;
			formato.color = "0xFFFFFF";
			formato.size = "11";

			var texto:TextField = new TextField();
			texto.name = "texto";
			texto.embedFonts = true;
			texto.autoSize = TextFieldAutoSize.LEFT;
			texto.antiAliasType = AntiAliasType.ADVANCED;
			texto.selectable = false;
			texto.defaultTextFormat = formato;
			texto.multiline = false;
			texto.wordWrap = false;
			texto.text = menuArr[i];
			texto.x = 0;
			texto.y = 0;

			btn.addChild(fondo);
			btn.addChild(texto);

			fondo.width = texto.width + 10;
			fondo.height = texto.height + 10;
			texto.x = fondo.width/2 - texto.width/2;
			texto.y = fondo.height/2 - texto.height/2;
			navbackground.height = fondo.height + 4;

			btn.x = btnXPos;
			btn.y = btnYPos;
			btnXPos += btn.width + btnMargin;

			navholder.addChild(btn);

			Tweener.addTween(btn, {alpha:1, time:.35, delay:.1*i, transition:"easeOutQuad"});

			btn.buttonMode = true;
			btn.mouseChildren = false;
			btn.addEventListener(MouseEvent.ROLL_OVER, rollover);
			btn.addEventListener(MouseEvent.ROLL_OUT, rollout);
			btn.addEventListener(MouseEvent.CLICK, onclick);

			i++;

			if (i < menuArr.length) {
				botonera();
			}
	}
}

Ahora vamos a crear las funciones del boton

function rollover(e:MouseEvent):void {
	var btn:MovieClip = MovieClip(e.currentTarget);
	Tweener.addTween(btn.getChildByName("fondo"), {alpha:.5, time:.35, transition:"easeOutQuad"});
}

function rollout(e:MouseEvent):void {
	var btn:MovieClip = MovieClip(e.currentTarget);
	Tweener.addTween(btn.getChildByName("fondo"), {alpha:1, time:.35, transition:"easeOutQuad"});
}

function onclick(e:MouseEvent):void {
	var link = e.currentTarget.link;
	var url:String = "?page="+link;
	var request:URLRequest = new URLRequest(url);
	try {
		navigateToURL(request, '_blank');
	} catch (e:Error) {
		trace("Ha ocurrido un error!");
	}
}

Y ahora para finalizar llamamos a la función que crea la botonera

botonera();

Bueno con esto terminamos la botonera, pero no se olviden que en el archivo esta explicado linea por linea.
Recuerden que es un ejemplo simple y básico, es super mejorable asi que espero su feedback en los comentarios!

Hasta el jueves que viene

Para mi sorpresa funcionoó perfecto, y es super simple de implementar en tus desarrollos. Paso a comentar los parametros que admite.

Configuración:

• mode: ‘slide’, ‘fade’, ‘ticker’
• speed: tiempo de transición en milisegundos.
• auto: si es false, las transiciones son controladas por el click del usuarios
• pause: tiempo estren una transicion y otra (auto: solo true)
• width: Ancho del contenedor  (en pixels)
• prev_text: Texto (link) que se muestra para pasar al elemento anterior
• next_text: Texto (link) que se muestra para pasar al proximo elemento
• prev_img: Url de la imagen (link) que se muestra para pasar al elemento anterior
• next_img: Url de la imagen (link) que se muestra para pasar al proximo elemento
• ticker_direction: Direccion del slider (solamente en modo: ‘ticker’)
• wrapper_class: class name del contente wrapper generado automaticamente (para skinear y controlar mejor)

Aca les doy un ejemplo de como armar su slider de imagenes.

Primero que nada incluimos los archivos.

<script type=’text/javascript’ src=’http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js’></script>
<script type=’text/javascript’ src=’js/jquery.bxSlider.js’></script>

Ahora llamamos al Script:

$('#example3').bxSlider({
mode: 'fade',
speed: 3000,
next_text: 'next image',
prev_text: 'previous image',
width: 307,
wrapper_class: 'example3_container'
});

Y ahora creamos los elementos:

<ul id="example3">
	<li><a href="http://ehackettworks.com/pix.php"><img src="images/fade1.jpg" width="307" height="307" alt=""></a></li>
	<li><a href="http://ehackettworks.com/pix.php"><img src="images/fade2.jpg" width="307" height="307" alt=""></a></li>
	<li><a href="http://ehackettworks.com/pix.php"><img src="images/fade3.jpg" width="307" height="307" alt=""></a></li>
</ul>

Listo! ya tienen su slider de imagenes!

Pruebenlo che, aca les dejo la url de bxSlider donde tambien van a encontrar algunos demos…

Cuentenme si les gusta, o si prefieren usar otro Script. Cual?