JQUERY

EXCELENTE LISTADO! LOOK!
http://www.martiniglesias.eu/blog/excelente-listado-de-240-plugins-para-jquery/12

Cambio de estilo que cambia

Buen ejemplo para clientes mañosos...http://www.golfmidamateur.cl/

Importante para el posicionamiento web en el momento de armar y diseñar una página web:

Utilización de palabras clave y relevancia del contenido

A pesar de que la densidad de las palabras clave es un antiguo factor que ya no es tenido en cuenta, utilizar tus palabras clave inteligentemente y crear páginas relevantes para la búsqueda a la cual queremos apuntar es crítico si queremos aparecer en las primeras posiciones. Las mejores prácticas en lo que respecta a la utilización de la principal palabra clave son:

• Una vez en el title y tal vez dos (o como una variante) si tiene sentido y suena bien.
• Una vez en el H1.
• Por lo menos 3 veces en el cuerpo (si hay mucho contenido, tal vez mas)
• Por lo menos una vez en negrita
• Por lo menos una vez en el alt de una imagen
• Una vez en la URL
• Al menos una vez en el meta tag description

NOTA: Antes de armar las páginas de un sitio web debemos tener las palabras claves.

Búsqueda avanzada en Google

Puede utilizar nuestra página Búsqueda avanzada para saber cómo se ha indexado su sitio. A continuación encontrará algunas de las búsquedas que hemos realizado.

Ejemplos de sus páginas de Google:

Operador	Descripción	Resultado
site:	Páginas indexadas de su sitio	site:www.webmanager.cl
link:	Páginas que enlazan a la página de presentación de su sitio web	link:www.webmanager.cl
cache:	Caché actual de su sitio	cache:www.webmanager.cl
info:	Información de que disponemos sobre su sitio	info:www.webmanager.cl
related:	Páginas similares a su sitio	related:www.webmanager.cl

Cómo insertar un mapa en un sitio web o en un blog

Puedes insertar un mapa, una ruta, una búsqueda local o bien mapas creados por otros usuarios. A continuación te indicamos cómo:

1. Comprueba que el mapa que deseas incrustar aparezca en la vista de mapa actual.
2. Haz clic en Enlazar con esta página, en la esquina superior derecha del mapa.
3. En el cuadro que aparece, copia el código HTML que se muestra en "Pegar HTML para incrustar en el sitio web" y pégalo en el código fuente de tu sitio web o de tu blog.

Si deseas ajustar el tamaño del mapa antes de incrustarlo, haz clic en Personalizar y obtener vista previa del mapa que se va a insertar., selecciona el tamaño que quieras y obtén una vista previa del mapa. Cuando estés satisfecho con el resultado, copia el código HTML que aparece en el cuadro situado al final de la ventana.

Ver Hotel Germania en un mapa ampliado

NOTA: se pueden personalizar los iconos y agregar fotos

Estilo cursor mano

Sirve para que salga la manito en un botón de un formulario creado con estilo u otro elemento.
Agregar al estilo, para que funcione en Explorer y Mozilla, lo siguiente:

/cursor: hand;/*IE*/
cursor: pointer; /*Mozilla*/

Nota: Lo que está entre /**/ es un comentario y no es imprescindible ponerlo.

Grey Box

GreyBox se puede utilizar para visualizar páginas web, imágenes y otros contenidos.
más información: http://orangoo.com/labs/GreyBox/

ModalBox

Muy útil para pop up y formularios...investiguen!!!

más información es:
http://www.wildbit.com/labs/modalbox/

Conectar skype a mi web

Fácil y bonito...seguramente varios clientes lo van a empezar a pedir,
por ejemplo:
http://www.melablu.cl/contacto.html

De aquí se puede sacar el código:

http://www.skype.com/share/buttons/

CSS para móviles

Un gran mercado que en Chile está despegando, lentamente dado en parte por el alto costo de la tecnología y los teléfonos móviles que la soportan, es el del webdesign para móviles. En general, del diseño de multimedios orientado para dispositivos móviles: teléfonos, PDA’s, etc. Por ello, es imprescindible que los diseñadores sepan que existe esta posibilidad, que está abierta a ser utilizada y que no es nada del otro mundo implementarla. Si ya tienes tu sitio tableless, es cosa de ‘esconder’ algunos div’s para que no sean desplegados, y formatar algunos espacios para el ancho de pantalla del móvil.

Tamaños de pantallas:

Aquí comienzan los problemas. Claro, nada es perfecto. La mayoría de las pantallas son verticales; las menos apaisadas, y menos aún las que puedes escoger entre ellas. El tamaño más común hoy en dia corresponden a 176 x 208px. Algunos más antigos tienden al cuadrado (128 x 128px y 120 x 144px). PDA’s usualmente usan VGA (480 x 640px). Otros tamaños comunes son de 200 x 640px y 320 x 640px.

Peso de imágenes:

La mayoría de los móviles no soportan millones de colores, como las pantallas. así que usar GIF en 32 colores, bien manejados, será suficiente. Simplificar al máximo los tonos utilizados será importante, ya que la pequeña pantalla y las condiciones en que el sitio será visto (en oscuro, a contraluz, caminando, acostado, etc.) no serán las mismas que en un computador, donde lo que se pretende es tener la mejor orientación posible del monitor.

Browsers:

Opera lleva la delantera. Sus browsers v7 han destacado por su simplicidad, y se presentan con gran cobertura en sus diferentes soportes: Symbian, Windows CE. Además, tiene buen soporte y renderizado de CSS 2.

Adaptando tu sitio:

Tan fácil como crear una nueva hoja de estilos. Aquí, deberás simplificar el contenido, mostrando sólo lo importante y esencial que quieres que el usuario vea. Nada de parafernalia. Importante es darle la propiedad al HTML que pertenezca a esta nueva hoja de estilo. A continuación:

Screen: para desktops

HandHelds: para celulares, PDA´s, etc

display: none; es lo que usarás para ocultar div, p o lo que sea necesario. Mejor dicho, no necesario. Por ejemplo:

No necesitamos que una imagen gigante se van en nuestro celular. No lo queremos tampoco.

width: 240px; será necesario formatear el ancho al deseado. max-width: 208px; también es importante, ya que permite que la columna o el contenedor no se pase de ese ancho.

Probándolo:

No necesitas utilizar un celular para ello. Opera trae una opción llamada Small Screen, donde te permite visualizar tu sitio con el media="handheld". Muy útil.

Links:

• http://my.opera.com/community/dev/device/writing/
• http://www.opera.com/products/mobile/dev/multiple/

Validar flash en XHTML y HTML

A todos los puristas de la validación web y el seo nos agrada cumplir con los estándares web de la W3C, por este motivo la inserción de contenidos flash dentro de nuestro código XHTML y HTML siempre nos había supuesto un quebradero de cabeza, ya que la etiqueta embed no se encuentra incluida dentro de los estándares web de la W3C.

Por este motivo, voy a aportar una manera de validar flash de forma accesible ya que validación flash no cumple con las pautas de accesibilidad web de prioridad 1 a menos que incluyamos una etiqueta noembed.

Características validar flash, validar swf, validar embed

• No se hace uso de javascript.
• No se hace uso de la etiqueta embed y noembed.
• No hay redundancia de información en la inicialización del contenido flash.
• Cumple los estándares web de la W3C y las pautas de accesibilidad web.

(VER EJEMPLO EN EL SITIO DE LA LEONERA, ESTA EN MI WEBSITE)

http://www.cooperativa.cl/google-lanzara-funcionalidad-para-mejorar-las-busquedas/prontus_nots/2009-04-01/134739.html

"Suggest" aconsejará al usuario al momento de escribir una consulta.

Esta herramienta está en pruebas hace algunas semanas.

Para mejorar la búsqueda por países, Google presentó oficialmente "Suggest", una herramienta del buscador que permite acelerar y mejorar la localización de las consultas, y que estará disponible a partir del próximo jueves en 36 idiomas, entre ellos google.cl.

Esta funcionalidad estaba online desde agosto en Estados Unidos y, dado su éxito, ahora se expande al resto del mundo. El servicio actúa como una guía local de términos que se ajusta y adelanta a las necesidades y particularidades de la cultura chilena.

La herramienta ayudará a formular búsquedas: al tipear "matador", Google despliega una lista de opciones no sólo relevantes sino también contextualizadas, según el gusto local: "matador salas", "matador letra" o "matador records".

Además, reduce los errores de ortografía, pues ya no es necesario esperar a que aparezca la función "Quizás quiso decir" en la página de resultados. Los errores de ortografía y tipeo ahora son corregidos al instante.

Por último, el buscador sugerirá resultados sin escribir toda la palabra. Así, en lugar de tipear "radio cooperativa", con sólo tipear "radio coo" se despliega la lista de opciones con el término buscado.

Optimizar código CSS con CleanCSS

CleanCSS es una aplicación online para limpiar y optimizar el código CSS, el procedimiento es sencillo de utilizar, se introduce el código o se sube el archivo .CSS, se eligen los parámetros a optimizar y listo. Esta aplicación modifica lo que considera adecuado para obtener un archivo con un menor peso y por consecuencia, hace que tu sitio web sea más liviano.

Visitar | Página Oficial

Buenos ejemplos de menues con CSS

http://www.cssmenus.co.uk/index.html

Easy Scroll: desplegando el contenido de tu sitio con CSS

EASY SCROLL un script que te permite generar un desplazamiento en el contenido de tu sitio (scroll) con CSS (y con la ayuda de Javascript). Con él podrás incluir dos “botones”, uno para desplazar hacia arriba y viceversa, que generen un scroll en el texto o contenido de un sector de la página.

Este efecto tan popular en aplicaciones y sitios hechos en Flash ahora está al alcance de tu mano. ¡Sólo tienes que copiar y pegar el código en tu página web!

Desplazando contenido con CSS: Easy Scroll

Cómo funciona:

Al posar el cursor sobre los botones “desplazar hacia arriba” o “…hacia abajo” comenzará automáticamente el scroll. Si cliqueamos sobre ellos duplicaremos la velocidad.

Presionando el botón “reset” dejaremos el texto, imágenes, etc. en su lugar original.

Puedes ver una demo haciendo clic aquí.

La demo sólo contiene texto, pero puede usarse con cualquier cosa ^_^.

Cómo usar CSS Easy Scroll en tu sitio o blog:

Para comenzar, puedes descargar el script. Luego deberás incluir la siguiente línea de código dentro del de tu HTML:

También necesitarás un

con un id determinada (por default usaremos “myContent”). Dentro deberá ir el contenido desplazable, obviamente:

¡Aunque no lo creas, eso es todo lo que hay que hacer con markup!

El script se encarga de seguir desde aquí, generando un div con el id=”easyscroll”, donde incluye todo el contenido, acomodando los botones, etc.

Seteando las variables en Javascript

Dentro de los archivos descargados encontrarás uno llamado easyscroll.js, que incluye estas variables configurables:

var id = "myContent";

Esta variable es la que nombramos en el

del HTML. Puedes cambiarla si lo has hecho antes.

var nav = ["Scroll Up", "Scroll Down", "Reset"];

Este es el texto que aparece en cada botón (supongo que no querrás dejarlo en inglés ^_^).

var navId = ["btnUp", "btnDown", "btnReset"];

Estas ids son opcionales, una para cada botón, por si quieres cambiar su apariencia con CSS.

var speed = 5;

Obviamente, el número marca la velocidad del desplazamiento (mayor múmero = mayor velocidad).

var height = 200;

Altura deseada para el área desplazable.

Usa más CSS para personalizar todo el contenido dentro del div.

Fantástico ¿no?

MAS INFORMACION CLICK AQUI

(O ME AVISAN QUE LO TENGO EN MI PC)