CSS (mejores prácticas) para principiantes

6 10 2009

Les dejo el siguiente link donde explica las mejores prácticas que hay que tener en cuenta a la hora de armar nuestras css.

Espero que les sirva.

link: http://net.tutsplus.com/tutorials/html-css-techniques/30-css-best-practices-for-beginners/





BrowserShots – Muchos navegadores, muchas capturas

18 09 2009

http://browsershots.org/ Lo que hace es justamente armar capturas de pantalla de la url que indiques. Solo tiene que poner tu url y hacer clic en el boton “submit” y listo. Te genera las capturas de todos los navegadores seleccionados.
Cabe destacar que tarde un rato en hacerlo, lo que dependerá de cuantos navegadores tengas seleccionados.

Estos son algunos de los navegadores que puede generarte la captura de pantalla:
Epiphany 2.22
Firefox 1.0
Firefox 2.0
Firefox 3.0
Firefox 3.1
Firefox 3.5
Flock 1.2
Flock 2.0
Galeon 2.0
Iceape 1.1
Iceweasel 2.0
Iceweasel 3.0
Kazehakase 0.4
Kazehakase 0.5
Konqueror 3.5
Konqueror 4.2
Minefield 3.2
Minefield 3.6
Navigator 9.0
Opera 10.0
Opera 9.63
Opera 9.64
SeaMonkey 1.1
SeaMonkey 2.0
Shiretoko 3.1
Shiretoko 3.5
Avant 11.7
Chrome 0.2
Chrome 2.0
Chrome 3.0
Firefox 0.9
Firefox 1.5
Firefox 2.0
Firefox 3.0
Firefox 3.1
Firefox 3.5
Flock 1.1
Flock 1.2
Flock 2.0
Flock 2.5
Flock 3.0
K-Meleon 1.1
K-Meleon 1.5
Minefield 3.2
Minefield 3.6
MSIE 4.0
MSIE 5.0
MSIE 5.5
MSIE 6.0
MSIE 7.0
MSIE 8.0
Navigator 8.1
Navigator 9.0
Opera 0.27
Opera 10.0
Opera 7.0
Opera 7.11
Opera 7.54
Opera 8.0
Opera 8.53
Opera 8.54
Opera 9.25
Opera 9.26
Opera 9.27
Opera 9.50
Opera 9.51
Opera 9.52
Opera 9.60
Opera 9.61
Opera 9.62
Opera 9.63
Opera 9.64
Safari 3.0
Safari 3.2
Safari 4.0
SeaMonkey 1.1
SeaMonkey 2.0
Shiretoko 3.5

Sitio: http://browsershots.org/






Google explica cómo interpreta meta tags y búsquedas en la web

12 09 2009

Gracias a meta tags bien hechos, Google revisa, indexa y muestra tu sitio en los resultados del buscador. Los meta tags proveen información de toda clase de clientes, tales como navegadores y motores de búsqueda. En su Blog de Webmaster Central, Google nos cuenta cómo interpreta cada meta tag. Esto es de suma importancia para los webmasters que deseen sacar el mejor partido de su sitio web.

El siguiente es un código de ejemplo de una página web, para que veamos cómo se comporta Google frente a cada meta tag.

<BODY>
<!DOCTYPE …><head>

<title>Recetas tradicionales de comida china<title>

Este tag es usado por Google, la precisión es valiosa para los webmasters.

<meta name="description" content="Comida china es …">

También usado por Google, puede ser usado en los resultados de las búsquedas.

<meta name="revisit-after" content="14 days">

Este no es usado por Google ni por otros grandes buscadores.

<META name="verify-v1" content="e8JG…Nw=" />

Este es opcional, sirve para Google Webmaster Tools.

<meta name="GoogleBot" content="noOdp">

Es opcional

<meta …>

<meta …>

</head>

<meta name="description" content="A description of the page">

Este tag provee una breve descripción de la página.

<title>The title of the page</title>

Este tag se usa mucho junto con “description.” El contenido de este tag es usado como título en los resultados de búsquedas.

<meta name="robots" content="…, …">

<meta name="googlebot" content="…, …">

Estos meta tags controlan la forma en que los motores de búsqueda indexan la página.

<meta name="google" value="notranslate">

Este tag es usado para dar la opción de traducir la página automáticamente a cualquier idioma. Generalmente no modifica la posición de la página en el ranking.

<meta name="verify-v1" content="…">

Es usado en la parte superior de la página para verificar la propiedad del sitio en Webmaster Tools.

<meta equiv="Content-Type" content="…; charset=…">

Este meta tag se usa para definir el tipo de contenido y set de caracteres (fuente) del sitio.

<meta equiv="refresh" content="…;url=…">

</BODY>
</HTML>

Este se usa para redireccionar al usuario a una nueva URL luego de una cierta cantidad de tiempo. Pero al no estar soportado por todos los navegadores a veces confunde al usuario.





HTTP caching

6 09 2009

Fuente: http://code.google.com/intl/es-ES/speed/articles/caching.html

Para ver más detalles al respecto, pueden ver el siguiente link.
http://code.google.com/intl/es-ES/speed/page-speed/docs/caching.html





¿Cómo funciona la compresión gzip?

6 09 2009

Este video explica claramente como funciona la compresión de sites en gzip. En un próximo post, les mostraré como hacerlo en nuestros sites de .NET.

¿Cómo comprime gzip?

En pocas palabras, la compresión gzip obras de encontrar una cadena de similares dentro de un archivo de texto, y que sustituyen a las cadenas temporalmente para que el tamaño total del archivo más pequeño. Esta forma de compresión es especialmente adecuado para la web, porque los archivos HTML y CSS por lo general contienen un montón de cadenas repetidas, como los espacios en blanco, etiquetas y definiciones de estilo.

Fuente: http://code.google.com/intl/es-ES/speed/articles/gzip.html





CSS: Uso de cada declaración de una sola vez

5 09 2009

Recomendado: Conocimiento de trabajo de CSS

Una manera lógica de hacer que su sitio web más rápido es hacer que el código de cliente que usted envíe a los más pequeños del navegador. Cuando se busca optimizar los archivos CSS, una de las medidas más poderosas que puedes emplear es utilizar cada declaración sólo una vez.

Uso de cada declaración de una sola vez significa hacer uso estricto de la agrupación de selección.

Por ejemplo, se pueden combinar estas reglas:

h1 { color: black; }

p { color: black; }

En una sola regla:
h1, p { color: black; }

Si bien este ejemplo parece sencillo, casi obvio, las cosas se ponen más interesantes y más difíciles de cuantificar cuando se habla de las hojas de estilo complejo. En nuestra experiencia, con cada declaración de una sola vez puede reducir el tamaño del archivo CSS en un 20-40% en promedio.

Echemos un vistazo a otro ejemplo:

h1, h2, h3 { font-weight: normal; }

a strong { font-weight: normal !important; }

strong { font-style: italic; font-weight: normal; }

#nav { font-style: italic; }

.note { font-style: italic; }

La aplicación de la “cualquier declaración de una sola vez” regla aquí los resultados en:

h1, h2, h3, strong { font-weight: normal; }

a strong { font-weight: normal !important; }

strong, #nav, .note { font-style: italic; }

Tenga en cuenta que la declaración important! Hace una diferencia aquí.

Fuente: http://code.google.com/intl/es-ES/speed/articles/optimizing-css.html





Properly including stylesheets and scripts

4 09 2009

Páginas web típicas gastan un 80-90% de su tiempo de espera de carga de la red. Una técnica de gran alcance para reducir la cantidad de tiempo gastado bloqueado en la red es la de deshacerse de los patrones que causan algunos de los navegadores para serializar descargas de recursos.

Fuente: http://code.google.com/intl/es-ES/speed/articles/include-scripts-properly.html





Prefetching resources

4 09 2009

Fuente: http://code.google.com/intl/es-ES/speed/articles/prefetching.html





Optimizing web graphics

3 09 2009

Explicación breve y sencilla de como tenemos que optimizar nuestras imágenes.

Fuente:http://code.google.com/intl/es-ES/speed/articles/optimizing-images.html








Seguir

Get every new post delivered to your Inbox.