Archivo para ‘Varios’ Categoria
Optimización de Páginas Web
27 de Febrero de 2010Todos queremos tener la web más atractiva y dejar a nuestros visitantes con los ojos abiertos y completamente deslumbrados. Por lo general un diseño muy atractivo implica gran cantidad de elementos gráficos, aumentando el tamaño de la página. Aquí hablaremos de algunos consejos útiles sobre cómo mantener un diseño web atractivo, pero con descargas rápidas.
Debido a la tasa media de ancho de banda de Internet por ordenador, los webmasters dejan de desarrollar sitios web complejos cargados con fuertes elementos gráficos. En casos extremos se pueden encontrar sitios web que toman unos minutos para cargar el contenido en su navegador. Por supuesto el usuario no va a esperar ese tiempo para que un sitio web cargue, y pasará a la siguiente página web en sus resultados de búsqueda.
¿Entonces por qué algunos webmasters aún desarrollan páginas de carga lenta? Principalmente debido a la falta de conocimiento de sencillas técnicas de optimización de gráficos que les permitan mantener un sitio web atractivo, manteniendo el tamaño de página más pequeño.
¿Cuántos somos conscientes del hecho de que un cuadro con esquinas redondeadas puede conseguirse utilizando el código CSS solamente, sin la necesidad de cualquier imagen gráfica. Los que están familiarizados con CSS saben que un nivel relativamente alto de la programación es necesario, los errores más comunes pueden tener relación con la optimización de las soluciones simples.
Se podría hacer la afirmación de que lo que un diseñador Web puede hacer con el software gráfico es imposible de aplicar al código. No estoy de acuerdo. Cuando el diseño está terminado y está listo para cortarlo en pequeñas imágenes a utilizar en el código html, la creatividad se ha probado. Todo lo que se hace en esta etapa afectará al tamaño de página total. Si el diseño contiene formas redondeadas que se superponen unas a otras o zonas con gradientes de color, entonces deberemos cortarlas con cuidado para que el resultado sea tamaño de archivo pequeño.
Veamos lo que significa cortar eficientemente:
- No hacer cortes grandes que contiengan gran cantidad de colores diferentes. Utilizaremos un pequeño número de cortes en cada porción contieniendo un número limitado de colores.
- No haremos una gran parte que contenga la estructura del mismo gráfico. Cortarmeos una pequeña parte de él y se repetirá en el código. Esto suele ser un error muy común que los webmasters / programadores hacen cuando se trata de fondo de color degradado.
- No usaremos el formato de archivo JPEG siempre. En algunos casos, un formato GIF será mucho menor en tamaño. Una regla de oro – un segmento con un elevado número de colores será más pequeño de tamaño con el formato JPEG en lugar del formato GIF, y lo contrario también es cierto. Comprobaremos cada opción por separado. Cada 1KB que nos permita reducir el tamaño de archivo de la imagen finalmente se sumará a una reducción significativa en el tamaño de página.
- Si tenemos texto sobre un fondo de color sólido, utilizaremos el código para crear el fondo en su lugar. Recordemos que se puede definir tanto el estilo de fuente y color de fondo de la zona utilizando CSS.
Técnicas avanzadas
Gráficamente la optimización de un sitio web es algo más que saber hacer optimizaciones de la imagen. Existen algunas técnicas avanzadas que requieren un alto nivel de programación. CSS2 tiene mucho más que ofrecer que el CSS. Aunque no todos los navegadores han adoptado esta norma todavía se debe estar listo para cuando lo hagan. JavaScript también nos da un conjunto de opciones para crear algunos efectos interesantes sin necesidad de sobrecargar la página con Flash. El uso de herramientas limitadas, como JavaScript, frente a una aplicación avanzada, como Flash para crear los efectos deseados puede ser difícil. Sin embargo, pensemos en el resultado del esfuerzo que puede diferenciar el sitio web de los demás. Obtendremos un atractivo sitio web de aspecto profesional y que carga rápidamente.
Regreso al futuro
Las PDAs, teléfonos móviles y ordenadores portátiles mini son usados con conexiones a inalámbricas para navegar por Internet, la publicación de páginas web de carga rápida mejorará la experiencia de navegación, no sólo para aquellos que utilizan conexiones de gran ancho de banda, sino también hará que el usuario tenga una experiencia de navegación fácil.
Para aquellos que insisten en que la optimización del diseño web no es necesaria porque todos tendrán conexiones de banda ancha alta con el tiempo, estoy de acuerdo, hasta cierto punto. Sin embargo, las empresas de software están creando aplicaciones que utilizan más ancho de banda porque saben que están disponibles para que se utilicen. Acostumbrémonos a optimizar bien las páginas web, porque este juego del gato y el ratón no terminará nunca, y es mejor aprender las reglas del juego, que ser mordido.
¿Por qué buena Navegación es importante?
25 de Febrero de 2010La navegación web es uno de los elementos más cruciales en la determinación de la eficacia de un sitio web.
Para que la navegación web se eficaz, ante todo debe tener sentido. Si bien siempre hay espacio para la creatividad, los sitios web bien diseñados tienden a tener esquemas de navegación similar.
Un diseñador de páginas web siempre debe tener en cuenta la finalidad básica de la web y la audiencia prevista en el diseño de los elementos de navegación. La mayoría de sitios web existentes tienen a bien informar al visitante sobre un producto o servicio o vender realmente ese producto o servicio. Por lo tanto, hay algunas pautas básicas a seguir:
Asegurémonos de que todos los elementos de la navegación están claros y que los vínculos tienen el uso de las convenciones estándar de los enlaces, tales como botones, menús, subrayando del texto o cambio de color en el ratón.
Cuando no utilicemos los enlaces convencionales, hay que indicar explícitamente al visitante que se trata de un enlace. Por ejemplo, supongamos que diseñamos una página web en la que se utiliza un mapa que muestra distintas ciudades y deseamos que el usuario haga clic en el nombre de la ciudad para obtener información sobre la misma. Hemos de asegurarnos de informar al usuario que haga clic en el nombre de la ciudad para obtener más información acerca de ella.
Recuerde la regla de los “Tres clics”. Los estudios han demostrado que la mayoría de los usuarios no suelen hacer clic en más de tres enlaces para obtener la información que desean. Así, cada página del sitio web debe ser accesible dentro de esos tres clics.
No se recomienda el uso de flash o de otro tipo de página de bienvenida en el sitio web. Hay que mantener el diseño de la página web de sencillo y atractivo. Pero si decidimos usar uno, asegurémonos de usar la etiqueta META REFRESH, que permita al visitante saltar la página de inicio después de unos segundos y proporcionar un botón en el que pueda hacerse clic, claramente marcado para que el visitante puede pasar la página de entrada e ir directamente a su página de inicio, de lo contrario un gran porcentaje de los visitantes no volverán jamás. Recuerde que la mayoría de los visitantes buscan información, no entretenimiento.
Elementos de navegación
Top Menús - La barra de menú de la página normalmente se encuentra debajo de la cabecera que contiene el logotipo del sitio. Estos elementos de menú pueden ser individuales, menús desplegables, o con ampliación. Cada elemento del menú puede ser representado por un gráfico o solo de texto.
Lateral izquierdo de navegación – La navegación del lado izquierdo normalmente se implementa como la columna A o área de texto en la parte superior izquierda de la página web. Al igual que el menú superior, cada elemento puede ser un simple enlace o un menú en expansión.
Lateral derecho de navegación – La navegación del lado derecho no se utiliza muy a menudo, pero cuando se utiliza, se implementa como una columna o área de texto en la parte superior derecha de la página web. La mayoría de los diseñadores utilizan esta área para la publicidad en lugar de navegación del sitio.
Menús de fondo – Los menús de fondo pueden ser una barra de menú o pie de página.
Elementos importantes de navegación
Enlaces – Todas las páginas del sitio web deben estar dentro de dos o tres clics de la página de inicio. Las páginas importantes se deben estar a un clic. El tipo de sitio web determina los vínculos que son más destacados.
Cajas de inicio de sesión - Las cajas de inicio de sesión deben ser bien visibles. Los lugares comunes son parte superior izquierda, arriba a la derecha o dentro de la cabecera de la página.
Carros de la compra - Si usted usamos un carrito de compra para vender productos, debemos mostrar el botón de compra en un lugar destacado sobre cada página. La localización más común es la parte superior derecha justo debajo o como parte de la cabecera.
Botones de Orden – Si utilizamos botones de orden individual deben ser grandes y visibles. Usaremos el menor número de clics para entrar a la página.
Barra de migas – La barra de migas, son los vínculos o representación gráfica de dónde nos encontramos. La barra de migas generalmente está situada en la parte superior izquierda de la página justo debajo de la cabecera. Cada palabra es un enlace a la página anterior. Suelen estar en esta forma: Inicio-> Artículos-> Marketing
Enlaces externos – Los enlaces externos pueden ser utilizados en cualquier lugar, pero son más utilizados dentro de las áreas de texto de la página web. Pueden ser referencias a más información que se encuentra en otro sitio, a los productos recomendados, o para cualquier otra cosa.
Anuncios – Los anuncios son normalmente gráficos o texto con un hipervínculo asociado. Los anuncios pueden ser colocados en cualquier lugar de una página web, pero normalmente se utilizan sólo en el banner, por el lado derecho de la página, debajo de los elementos de navegación en el margen izquierdo, en la parte inferior de la página o intercalados en las zonas de ensayo de las página. Los estudios demuestran que los anuncios “por encima de la tapa” son más eficaces.
( “Por encima de la tapa” se refiere a la zona de una página web que es visible sin tener que desplazarse.)
Elementos descargables – Si ofrecemos elementos descargables, tales como archivos de audio, video o pdf, asegurémonos de informar al usuario del tamaño del archivo o si hay una aplicación para utilizar el archivo. Si se necesita una aplicación, proporcionaremos un vínculo a la aplicación. Por ejemplo, proporcionaríamos un vínculo de Acrobat, si estamos ofreciendo archivos PDF.
Mapa del Sitio - Un mapa del sitio es una buena forma de la distribución de todo el sitio para sus visitantes. Es sólo una lista jerárquica de cada página del sitio.
Resumen
Un sistema de navegación bueno puede aumentar el número de páginas vistas por cada visitante. Esto a su vez puede aumentar las suscripciones, los clientes, ventas, los miembros y hacer que el sitio web sea más exitoso.
¡Felices fiestas y prospero año nuevo!
23 de Diciembre de 2009En estas fiestas, el equipo de A2sistemas le acerca un especial saludo a todos nuestros clientes y público en general.
Desde aquí, queremos desearles lo mejor para el 2010 donde se colmen todas sus expectativas, en paz y armonía y agradecerles su confianza. Esperamos poder seguir estando a la altura de sus exigencias y necesidades, seguiremos trabajando duro para seguir mejorando.
Prometemos regresar a nuestro compromiso el próximo 7 de Enero con más noticias y comentarios de interés.
¡Felices Fiestas y Próspero Año Nuevo!
Alineación en el diseño de una página Web
19 de Noviembre de 2009La mayoría de los desarrolladores Web, cuando piensan en la alineación piensan en el atributo o la propiedad CSS. Pero la alineación de los elementos de la página es tan importante como si el texto está justificado o su imagen flota a la izquierda. La alineación proporciona el marco estructural de un diseño. La alineación puede afectar el estado de ánimo de la página, así como su eficacia para conseguir su mensaje.
Pero el diseño de la página puede ser tan estructurado, con un sistema rígido que es evidente, o puede ser más sutil. Si entendemos cómo alinear los elementos de manera efectiva en la página web, seremos capaces de romper las reglas de una manera eficaz también.
Estas imágenes muestran una página Web con tres simples elementos y cómo podemos diseñar dichos elementos de la página para crear diseños diferentes.
La alineación a la izquierda es, probablemente, la alineación más común en cualquier diseño. Es organizada y segura. Proporciona un ambiente conservador para cualquier diseño, ya que es confortable y familiar.
El alineado a la derecha es similar a la alineado a la izquierda en la que todos los elementos están de acuerdo pero alineados en el lado derecho del contenedor. Esta disposición es un poco menos común que la alineación a la izquierda, y proporciona una sensación de diseño menos conservador.
La forma más sencilla de hacerlo es con propiedades CSS, movemos los elementos a la derecha y luego los obligamos a permanecer por debajo de otros en el flujo del documento.
El centrado en las alineaciones es popular en el diseño web, especialmente con los diseñadores noveles. El centrado proporciona un enfoque convencional, pero hay que tener cuidado, ya que si centramos el diseño puede parecer plano y aburrido, a menos que lo hagamos realmente bien. Cuando la alineación está perfectamente equilibrada, no hay nada que el ojo pueda enfocar, de modo que el diseño se ve plano.
El centrado es fácil de hacer. Sólo tenemos que utilizar el CSS para alinear los distintos elementos de la página Web.
Algo que recordar cuando se utilizan las alineaciones de centrado, es que los grandes bloques de texto pueden ser muy difíciles de leer.
“En caso de duda, no centremos”.
El justificado de los diseños es muy similares a los diseños centrados, pero en lugar de tener un borde dentado en el elemento de texto, se centra en ambos lados. Los diseños justificados tienen un aspecto más formal y sencillo que los diseños centrados, y pueden crear un diseño más elegante.
Los diseños justificados utilizan las mismas técnicas de centrado que la alineación centrada, también se añade la propiedad text-align al estilo de cualquier bloque de texto para justificarlo.
Hay una sutil diferencia entre esta imagen y la imagen de página de alineación centrada. En este ejemplo, la imagen y el título están muy centrados en el diseño -, pero el texto está alineado a la izquierda. El texto no coincide con la alineación del resto de la página.
En la página siguiente ofrecemos una sugerencia de cómo solucionar este problema.
Este diseño utiliza un centrado de elementos en un punto. En cambio, hay un borde visible alrededor del texto. Esto resuelve el problema que teníamos en el ejemplo anterior, porque está claro que el cuadro de texto es lo que está centrado.
Este diseño también tiene la ventaja de resolver el problema del textos centrados que son difíciles de leer.
La estructura de este diseño esta creada por la asociación de los diferentes elementos. Por ejemplo, las líneas de cabecera con la parte inferior de la imagen. El bloque de texto se alinea en la misma línea vertical como el titular.
La mayoría de los diseñadores Web prefieren este tipo de diseño porque ofrece más interés en el mismo. No es tan conservador como las alineaciones a la izquierda o a la derecha y tampoco es tan plano como un diseño centrado.
Contraste y colores de fondo
19 de Noviembre de 2009El contraste es una parte importante del diseño Web, ya que muchas veces significa la diferencia entre una página que se ve muy bien y una página que es ilegible o dolorosa para mirar. Pero a veces puede ser difícil decidir qué colores funcionan bien en contraste con los demás. Esta tabla nos ayudará en los colores y contrastes de frentes y fondos.
Una cosa que debemos tener en cuenta es que el contraste es algo más que el brillo de un color que se compara con el fondo. Como podemos ver, algunos de estos colores son muy brillantes y vibrantes sobre el color de fondo – como el azul sobre negro. Pero la etiqueta nos marca que es como tener un contraste pobre, porque si bien es brillante, hace que el texto sea difícil de leer. Si fuéramos a crear una página con texto azul sobre un fondo negro, causaríamos rápidamente un gran cansancio en la vista de nuestros lectores.
Teoría del color, conceptos básicos
16 de Noviembre de 2009¿Qué es la teoría del color?
La teoría del color es un conjunto de principios para crear combinaciones de color armoniosos. Las relaciones de color se pueden representar visualmente con una rueda de colores – el espectro de color envuelto en un círculo.
La rueda de colores es una representación visual de la teoría del color:
Las combinaciones de colores armoniosos son llamados esquemas de color. Los esquemas de color armoniosos permanecen independientemente del ángulo de rotación.
Esquemas clásicos de color:
Combinación de colores monocromáticos
El esquema de color monocromático utiliza variaciones de luminosidad y la saturación de un solo color. Este esquema se ve limpio y elegante. Los colores monocromáticos van bien juntos, produciendo un efecto calmante. El esquema monocromático es de fácil visualización, sobre todo en tonos azul o verde.
Colores Análogos
El esquema de color análogo utiliza colores que son adyacentes entre sí en la rueda de color. Un color se utiliza como color dominante, mientras que otros son utilizados para enriquecer. El esquema análogo es similar al monocromático, pero ofrece más matices.
Combinación de colores complementarios
El esquema de color complementario consta de dos colores que están uno enfrente del otro en la rueda de color. Este esquema se ve mejor cuando se coloca un color cálido en contra de un color frío, por ejemplo, rojo contra verde-azul. Este esquema es intrínsecamente de alto contraste.
Split de colores complementarios
La división de régimen complementario es una variación del régimen complementario estándar. Se utiliza un color y los dos colores adyacentes a su complementario. Esto proporciona un alto contraste sin la fuerte tensión del esquema complementario.
Triádica de colores
El esquema de color triádica utiliza tres colores equidistantes en la rueda de color. Este esquema es muy popular entre los artistas, ya que ofrece un contraste visual fuerte, manteniendo la armonía y la riqueza de color. El esquema triádico no es tan contrastante como el esquema complementario, pero parece más equilibrado y armonioso.
Tetrádica (Doble Complementario) Combinación de colores
El tetrádicos (doble complementarios) del sistema son más variados, ya que utilizan dos pares de colores complementarios. Este régimen es difícil de armonizar, si los cuatro colores se utilizan en cantidades iguales, el sistema puede parecer desequilibrado, por lo que debe elegir un color para ser dominante o someter a los colores.
Browser Shooter, el juego de los navegadores en JS
4 de Septiembre de 2009Browser Shooter es un juego desarrollado con Javascript que nos recuerda al famoso Puzzle Bobble pero con los logos de navegadores
web.
El juego usa jQuery 1.3.2 y con una gran cantidad de archivos JS se controla la física de los rebotes, el movimiento del lanzador y demás efectos del juego.
Puedes probarlo aquí
A través de Google
3 de Agosto de 2009Gracias a un algoritmo que produce los resultados más relevantes para cualquier consulta, Google se ha convertido, indiscutiblemente, el mejor motor de búsqueda en Internet. En el último recuento, Google ha indexado más de 4 millones de páginas y se ocupa de unos 200 millones de búsquedas al día! Un grupo de 100 mil servidores se utilizan para almacenar, y arrojar a los resultados de la consulta con la velocidad de la luz que está tan acostumbrados a ver.
Si bien, Google está constantemente agregando nuevas características de gran utilidad, la mayoría de nosotros, lamentablemente, no utilizamos todas las capacidades de ese motor de búsqueda. Los siguientes consejos harán que su navegación en Internet sea mas eficaz.
Seleccione palabras de búsqueda más específicas
Google devuelve páginas web que contienen todas las palabras que usted consulta. Si desea ver las páginas más relevantes en la primera página de su resultado de búsqueda, debe ser muy específico con la elección de las mismas. Por ejemplo: si quiere investigar sobre el ex jugador de baloncesto Juan Antonio Corbalán, deberá iniciar la búsqueda con Juan Antonio Corbalán no como ex jugador de baloncesto. Aún mejor si busca las palabras: ex jugador de baloncesto Juan Antonio Corbalán. Porque sólo la palabra Juan Antonio Corbalán mostrará las páginas web sobre “Juan Antonio Corbalán”. Las refinerías de la consulta en Google significan añadir más palabras específicas para su búsqueda inicial.
Establece una nueva característica
¿Qué pasa si usted está buscando un par de pantalones vaqueros de diseño de Valentino, pero no puede recordar el nombre del diseñador? Consulta sobre los pantalones vaqueros de diseño italiano que pueden traer el resultado, sin embargo, hay una mejor herramienta que Google tiene llamada “Conjuntos”.
Llene los nombres de algunos diseñadores que recuerde en la forma determinada, como Levis, Wrangler, Versace y haga clic en cualquiera de los dos botones y ¡voilá! Obtendrá una lista de los nombres de diseñadores y probablemente, el de Valentino esté allí.
Calculadora
El otro día, estaba sentada en la oficina de un amigo que necesitaba el cálculo de algunos productos alimenticios básicos y buscaba su calculadora en el escritorio. Muy a su pesar no logró encontrarla y comenzó a buscar en sus programas de Microsoft una calculadora. Me di cuenta que estaba en línea y que el navegador estaba abierto. Yo, educadamente, le pregunté si el sabía que Google podría calcular las expresiones matemáticas más comunes. Me dijo que no muy sorprendido! Pues si, Google es capaz incluso de efectuar unidades de conversión! ¡Pruébelo!
Definición
Si está buscando la definición de una palabra o una frase, Google es el mejor lugar para hacerlo. En el cuadro de búsqueda de Google, escriba “define: la palabra o la frase” sin las comillas y haga clic en botón de búsqueda. Si hay una definición para el término de búsqueda, sin duda, la encontrará.
Sinónimos
Usted puede pensar que los motores de búsqueda son demasiado tontos para mostrar los resultados de las consultas de los sinónimos. No es así! Al menos, en el caso de Google! Si utiliza tilde “~” delante de una palabra clave en el término de búsqueda, Google aportará resultados sobre los sinónimos de esa palabra también.
Cómo buscar en un sitio web
Otra interesante característica del motor de búsqueda de Google es que permite que usted haga su consulta dentro de un sitio web específico. En primer lugar, escribir el término de búsqueda en el cuadro de búsqueda de Google y, a continuación, escriba “site: el sitio web o nombre de dominio”. Por ejemplo: si usted busca la palabra “Microsoft” en el sitio web www.micromedia.com le escribe a: sitio de Microsoft: micromedia.com.
Comprobar los vínculos de su sitio web
Si usted tiene un sitio web, el motor de búsqueda de Google también tiene una característica que le muestra las páginas web que enlazan con la suya. En el cuadro de búsqueda, escriba: Enlace: su dirección.
Otros consejos importantes para recordar:
* No hay necesidad de recurrir a la “Y”. Google siempre se refiere a todas las palabras en el término de búsqueda usando el operador booleano “y”. ( O mejor dicho como unir una palabra con otra)
* Sin embargo, si usted desea hacer su consulta para dos palabras – una u otra – puede usar “O”. Tiene que escribir “o” en mayúsculas para darle valor booleano.
* Google no es sensible a mayúsculas. Usted puede escribir los términos de búsqueda ya sea en mayúsculas o en minúsculas. Incluso las puede mezclar entre ellas.
* Google omite la mayoría de las palabras muy comunes, como el, en, etc Para buscar una palabra con mas fuerza, deberá hacer uso del signo más (+) delante de esa palabra. De la misma manera, se puede excluir una palabra de la búsqueda poniendo el signo menos (-) delante de ella.
* Si desea realizar una búsqueda exacta de una frase o expresión, deberá poner las palabras entre comillas. De esta forma, en su resultado de búsqueda sólo se mostrarán las páginas en las que la expresión exacta fue encontrada. Con el fin de buscar la frase: El Anillo de Moebius, escribirá “El Anillo de Moebius” en el cuadro de búsqueda.
También sugiero descargarse la barra Google. Aparte de la caja de búsqueda y su capacidad para bloquear los pop-ups, la barra Google también muestra el pagerank de la página web que esté visitando. El PageRank es un sistema de evaluación de páginas web desarrollado por Google y utilizados como base en el motor de búsqueda del algoritmo. La barra de herramientas también incluye la función de la capacidad de llenar formularios online de la información almacenada automáticamente. También puede mantener su diario o blog desde la barra de herramientas.
Para las delicias de gran parte de los usuarios de la red, Google, con su ambiciosa misión de organizar información de todo el mundo y hacerla universalmente accesible y útil, hasta el momento está haciendo un gran trabajo como motor de búsqueda muy útil en sus características y servicios. Sólo podemos esperar que el flujo de ideas innovadoras de Google no disminuyan en el futuro.
CSS: 3 simples pasos para que sus hojas de estilo sean más eficientes
24 de Julio de 2009En este artículo se pretende cubrir como podemos generar las hojas de estilo en su forma más eficiente.
1. Una hoja de estilo debe ser fácil de leer.
2. Una hoja de estilo debe ser fácil de mantener.
3. Una hoja de estilo debe ser bien comentada
4. El tiempo para alcanzar estos objetivos no debería afectar negativamente el tiempo de desarrollo de un sitio web.
Sugerencia 1: Comentario de su hoja de estilo
Lo primero sería componer la hoja de estilos por secciones. Esto tiene una serie de beneficios. Es decir, cabecera, navegación, el pie de página, etc -, esto hace que sus hojas de estilo sean mucho más manejables. El segundo beneficio es la legibilidad. Le tomará sólo un momento tener en cuenta cuando la sección de encabezado y la sección de navegación comienza.
1. /**** Cabecera ****/
2. /**** Contenido ****/
El segundo es explicar el uso poco ortodoxo de los estilos. Esto le permite recordar rápidamente la razón por la que ha insertado un truco o propiedad. Esto puede ser muy útil a la hora de regresar a una hoja de estilo después de un número de meses, y también ayudará a entender a otros desarrolladores porque se utilizó esa declaración.
1. ! Importante / ** Hack para hacer la navegación del IE correcta ** /
Sugerencia 2: Organice sus estilos alfabéticamente.
Eche un vistazo al siguiente ejemplo.
1 .#header {
2. width:200px;
3. margin:0 auto;
4. height: 80px;
5. background:url(../images/header.png) no-repeat;
6. padding:1px 0;
7. }
Ahora compárelo con la siguiente.
1. #header {
2. background:url(../images/header.png) no-repeat;
3. height: 80px;
4. margin:0 auto;
5. padding:1px 0;
6. width:200px;
7. }
Por orden alfabético la lista de atributos mejora la legibilidad de la hoja de estilos. Es mucho más fácil elegir rápidamente un elemento y modificarlo.
Sugerencia 3: Ficha de elementos anidados
Esto es algo similar a lo de comentar sus hojas de estilo. En un esfuerzo para hacer su hoja de estilo más fácil de leer es una buena idea la ficha de elementos anidados. Veamos el siguente ejemplo.
01. #header{ }
02.
03. #header #logo { }
04.
05. #header #logo a { }
06.
07. #header #logo a:hover { }
08.
09. #container { }
10.
11. #container #sidebar { }
12.
13. #container #content { }
Ahora compárelo con el siguiente.
01. #header{ }
02.
03. #header #logo { }
04.
05. #header #logo a {}
06.
07. #header #logo a:hover { }
08.
09. #container { }
10.
11. #container #sidebar { }
12.
13. #container #content { }
La Tabulación de elementos anidados le permite ver rápidamente lo que está anidado y lo que a su vez le permite ver fácilmente cómo se anidan los elementos que afectan a uno u otro.
Cómo crear un favicon.ico
17 de Julio de 2009Cuando usted visita un sitio web como Google, Youtube o Facebook, es posible que observe que hay un pequeño icono situado a la izquierda de la barra de direcciones. Esto se conoce como un favicon.
Pasos
1. Crear una imagen que es 16×16 píxeles de tamaño. Debe ser una imagen sencilla, para que sea inmediatamente reconocible.
2. Convertir la imagen a un archivo favicon.ico. Debe ser exactamente esto, o el navegador no lo reconoce. Una manera fácil de hacerlo es utilizar un Generador online, hay muchos de ellos.
3. Subir el archivo generado a su sitio web.
4. Agregue el siguiente código a su sitio web HTML. Usted lo debe poner en la sección <head> del código, y asegúrese de que la ruta hacia el icono es la correcta, en relación con la página web.
Código:
* <link Rel=”shortcut icon” href=”/favicon.ico” />
5. Actualizar la página y comprobar que visualizamos el icono.
