Navegación eficaz en tu sitio Web
Si la gente no puede navegar a través de tu sitio, pronto se irá. Así, la navegación efectiva en el diseño de tu sitio web es crucial. Pero hay algunas cosas básicas que necesitas hacer antes de poder empezar a preocuparte por enlaces, imágenes o Flash.
Arquitectura de la Información
Antes de que incluso puedas empezar a planear tu navegación, es necesario definir la arquitectura de información de tu sitio. La arquitectura de información es la taxonomía o la estructura de tu sitio Web.
Algunos elementos de taxonomía común en una página Web corporativa o de negocios son:
Productos - los productos o servicios que vende la compañía
Acerca de - información sobre la empresa
Relaciones con los inversores – Información específica para los inversores
Soporte técnico – Ayuda para los clientes
Algunos elementos de taxonomía común en una página Web personal son:
Acerca de mí – información sobre el autor de la página
Vínculos favoritos – Enlaces que al autor le gustan
Amigos y familia – información acerca de los amigos del autor y de la familia
Organización
Una vez que hayas determinado la arquitectura de tu sitio, necesitas decidir la forma de organizarlo.
Al pensar en la organización, debes pensar acerca de cómo tus clientes podrían pasear por ella. Los diagramas de flujo y storyboards te puede ayudar a trazar exactamente en qué te gustaría animar a tus lectores a utilizar el sitio.
Diseño de navegación
Una vez que tengas una idea de la arquitectura y organización, estas listo para pensar en el diseño de la navegación. Hay varias cosas que debes considerar al decidir sobre el diseño de su navegación:
1. Accesible
La navegación de tu sitio web es posiblemente la parte más importante de una determinada página. Así que deberías hacerla lo más accesible posible. Esto significa evitar los efectos especiales, como Flash, Java o JavaScript como su método de navegación solamente.
2. Significativa
Mantén el sentido de la navegación. Haz una vinculación clara. Alguien que nunca ha estado en tu sitio antes debe saber inmediatamente como usar los vínculos.
3. Prevalente
Tu navegación debe aparecer en cada página de tu sitio. Si bien no es necesario tener la navegación idéntica, la estructura básica debe ser la misma en todo el sitio, con los cambios utilizados sólo para indicar la ubicación dentro de la jerarquía.
Una vez que hayas diseñado tu navegación, entonces puedes comenzar a utilizarla. Ten en cuenta que es realmente tentador cambiar tu estructura de navegación mientras estas en el centro de tu aplicación. Pero si decides hacer esto, asegúrate que estas haciendo el cambio a nivel mundial y que se ajusta a los objetivos originales de la taxonomía y la arquitectura de la información.
Browser Shooter, el juego de los navegadores en JS
Browser 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í
Google patenta su página de inicio.
Después de 5 largos años de duro trabajo por parte de los abogados de Google lograron convencer a la oficina de patentes de los Estados Unidos.
El informe de la patente es más bien corto, tan sólo hay un esquema de la página de Google y poco más.
¿Qué supone esto?
De momento, muchas otras companias, que utilizán formas y diseños similares pueden verse obligadas a cambiar sus diseños y formatos de sus buscadores si los chicos de Google
optan por hacer respetar sus derechos recién patentados.
¿Cuál será el siguiente paso de la gran G?
Fuente: gawker.com
WPA/TKIP crackeado en 60 segundos
El protocolo de cifrado que está sustituyendo al vulnerable WEP no parece tan buena opción. Unos investigadores japonenes han demostrado cómo realizar un ataque a WPA que en el mejor de los casos consigue la clave maestra en 60 segundos y en el peor en unos 20 minutos.
Toshihiro Ohigashi, de la Universidad de Hiroshima, y Masakatu Morii, de la Universidad de Kobe, han llevado a la práctica la demostración teórica de la vulnerabilidad de WPA/TKIP que el año pasado se desveló en la conferencia PacSec. Se espera que para la conferencia PacSec de este año, que se celebrará en Noviembre.
Ahora sólo nos queda WPA2 como cifrado seguro…por ahora…
Fuente: Barrapunto
Accelerando Firefox desfragmentando su base de datos
Parece que aún hay necesidades y funciones que no están del todo cubiertas por los puglins existentes para Firefox, ya que hoy nos hemos enterado de que existe un plugin para desfragmentar la base de datos (SQLite) de nuestro Firefox y así hacer que funcione más rapido.
La extensión en concreto se llama Vacuum Places Improved y es compatible en versiones de Firefox 3.5 y superiores. En realidad la extensión optimiza la carga del historial y los marcadores, así, al teclear una dirección en la barra de direcciónes lo hará (supuestamente) más rapido.
Según los autores también mejora el tiempo de inicio de Firefox.
La extesión además se puede configurar para realizar desfragmentaciones automáticas cada cierto numuero de inicios de Firefox o programar recordatorios también cada cierto número de inicios.
Sin duda vamos a probarlo y veremos que tal.
Vacaciones A2SISTEMAS 2009
El verano ya esta aquí y con el llegan las vacaciones, después de un año lleno de proyectos y trabajo nos disponemos a tomarnos unos días de descanso. Será un buen momento para disfrutar, para descansar, para leer ese libro que tenemos pendiente, para pasear por la playa, tostarnos un poquito y como no, para recargar fuerzas y volver con las pilas puestas.
Vacaciones2009
Estaremos ausentes del 1 al 23 de Agosto. Sin embargo, ofreceremos soporte de desarrollo durante la semana del 5 de Agosto, únicamente para aquellos proyectos que ha sido ineludible interrumpir el ritmo.
Hemos preparado una pequeña presentación informativa que hemos enviado por Email a todos nuestros clientes. Para quien no haya recibido el Email, puede verla siguiendo este enlace.
A2SISTEMAS desea que todos paséis unas felices vacaciones, nos vemos a la vuelta!!
A través de Google
Gracias 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
En 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
Cuando 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.
Énfasis en el Diseño Web
Cuando estamos trabajando en un nuevo diseño, es necesario determinar cuál es la parte más importante de la página. El desafío es pedir a los clientes cual es la parte mas importante, aún a sabiendas que te contestarán casi siempre que ” todo es importante”. Si intentamos destacar todo el contenido de la página podemos acabar con una página que tendrá muy poco atractivo.
Con el fin de poner un poco de orden al caos que nos puede ocasionar, es necesario asignar una jerarquía de los elementos en el diseño. Una cosa será la más importante, seguido por el segundo elemento más importante (s) y, a continuación, la tercera, y así sucesivamente. Esto tiene dos propósitos:
1. La jerarquía le indica al usuario la forma en que la página está destinada a ser vista. Sus ojos se dirigen al más importante elemento de la página, seguido por el segundo, y así sucesivamente a través de la jerarquía.
2. La jerarquía proporciona atención a los elementos importantes de la página sin mezclar todo en una aburrida confusión.
Técnicas de prestación de atención y una jerarquía visual en las páginas Web
Para eso utilizaremos las hojas de estilo. Si desea que sus páginas Web esten bien diseñadas y tengan una buena jerarquía, deben tener los títulos en orden: H1, H2, H3, H4, H5, H6 y después. Si el H1 no le parece lo bastante atractivo pruebe a darle estilo para que se vea mejor. Mediante el uso de estas etiquetas, se asegurará de que su jerarquía se mantiene incluso cuando la página es vista por los navegadores no visuales.
<h1> el elemento más importante </ h1>
<h2> La 2 ª más importante </ h2>
<h3> La 3 ª </ h3>
<h4> El 4 </ h4>
<h5> La 5 ª </ h5>
<h6> El 6 </ h6>
El tamaño de la fuente es una manera fácil de ofrecer jerarquía visual y énfasis a sus páginas. Cuanto más grande es el tamaño de la fuente de un elemento, más importante parecerá.
Puede cambiar el tamaño de la fuente de cualquier texto en su página web, es la mejor forma de dar estilo a sus titulares y en el párrafo de texto al tamaño que desee. He aquí cómo podemos dar estilos a esos titulares o párrafos en su Web:
p (font-size: 1em;)
h1 (font-size: 2.5em;)
h2 (font-size: 2EM;)
h3 (font-size: 1.5em;)
h4 (font-size: 1em;)
h5 (font-size: .8 em;)
h6 (font-size: .7 em;)
El color es otra gran manera de dar énfasis. Utilizaremos contraste de colores con moderación. La clave para usar el color que nos dará énfasis es usarlo juiciosamente.
Puede adjuntar el color a los titulares o los bloques de texto. Esto solamente cambia la CSS h2 etiquetas que ha dado la categoría “importante” y los párrafos con la clase “calltoaction”:
h2.important (color: red;)
p.calltoaction (background-color: amarillo;)
