Archivo para ‘Varios’ Categoria
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.
Énfasis en el Diseño Web
17 de Julio de 2009Cuando 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;)
Wordpress 2.8 publicado
12 de Junio de 2009WordPress 2.8 ha visto la luz, en está ocasión con el sobrenombre de “Baker”.
Los chicos de Wordpress.tv ya han realizado un vídeo para ir conociendo las novedades de esta nueva versión a modo de introducción.
Pero realmente el vídeo interesante es el que nos ofrecen directamente desde wordpress.org dónde se comentan todos los cambios relevantes de la nueva versión.
Mantenerse al día con las últimas tendencias en Diseño Web
5 de Junio de 2009Desde el comienzo de la World Wide Web, ha habido muchas tendencias en diseño web. La primera etapa comenzó con un enfoque académico y se orientaba hacia el simple intercambio de información. Con el tiempo hemos fuimos experimentado un cambio en el diseño con la llegada de gráficos, lo que dio nacimiento a la moda tecno-era en la que los diseñadores y los clientes buscaron nuevas formas para resaltar y llamar la atención con los últimos trucos de la web. En ese momento, hubo un mayor énfasis en el brillo y el glamour de los applets, flash, videos y en contraposición a contenido.
Hoy en día, estamos en una etapa de evolución de la web donde una buena experiencia web es el resultado de la colaboración mutua entre la presentación (diseño visual), la interacción (la respuesta a los usuarios), y la organización (estructura del sitio). Esta etapa se refiere a la facilidad de uso. Lo que alguna vez fue considerado un “cool” del sitio ya no es tan fresco como inicialmente se pensó que fuera. La atención se centra ahora en los estudios de usuarios y la usabilidad.
Un profesional de sitios web crea diseños de página web para lograr un equilibrio entre los dos extremos, el visual y la información. Implementamos el texto y los gráficos que mejoran la legibilidad y la percepción del mensaje que se transmite a un público objetivo.
Las tendencias futuras se inclinan más hacia la red como estructuras, diseños limpios, y un montón de espacio en blanco. PDD (Programa de Desarrollo Directivo) se halla en la cima de las últimas tendencias en el desarrollo de un sitio web de la red formando la estructura que pone toda la información pertinente delante de los ojos del espectador y hace que sea fácil para él o ella para encontrar exactamente la página que contiene la información que desea. Este tipo de diseño de sitios web requiere de tiempo, la investigación, y esfuerzo por parte del Departamento de Asuntos de Desarme del sitio web de los desarrolladores profesionales, pero bien vale la pena para los sitios web que abarcan grandes cantidades de información.
La presencia en la web es muy importante en estos días sobre todo para las empresas que pretenden obtener la mayor cantidad de visitantes y clientes. Con su alcance mundial, cualquier sitio web tiene una gran oportunidad de llegar a un público objetivo más amplio lo que aumenta el tráfico y las ventas.
La consideración primordial es crear un atractivo y bien diseñado sitio web en que los visitantes se mantengan pegados a lo que tiene que ofrecer. Implica el desarrollo de un sitio web, teniendo en cuenta los diversos elementos de diseño, pero lo principal a tener en cuenta es la sencillez.
Simplicidad en el diseño web significa ser sencillo y directo en un montón de aspectos.Podemos hacer un diseño simple para una cómoda experiencia de navegación sin forzar los ojos. Esto significa que de izquierda a derecha y de arriba abajo, los lectores son capaces de leer todo el contenido sin mucha dificultad.
El diseño del contenido es otra de las últimas tendencias. Si bien el diseño de la página de fondo era popular en los últimos años, el contenido es ahora recibir más atención en un esfuerzo por llamar la atención de los visitantes a la información proporcionada en el sitio. Los diseñadores también somos conscientes del hecho de que el contenido de un sitio es lo más importante.
En términos de color, la mayoría de los fondos de color blanco liso y suave, tonos neutrales están en boga. El fondo blanco es muy popular hoy en día en muchos sitios web, ya que dan un efecto claro y limpio. Esto crea un efecto enfriador en los ojos. En cuanto a los colores más brillantes, son los que mejor reservamos para los aspectos más destacados o los más importantes de la página web y si es posible, se debe utilizar con menos frecuencia.
El blanco es esencial en la construcción de un sitio web. Proporcionar más los márgenes y la talla de línea adicionales para ayudar a los lectores a absorber la información en el sitio. Recordar siempre que Menos es mejor.
Los tipos de letra y el tamaño no deben ser olvidados. Texto grande para resaltar la información más importante en su sitio y dejar el texto de tamaño normal para los detalles.
Los diseñadores donde quiera que nos encontremos hacemos el trabajo de acuerdo a las necesidades del cliente, por lo tanto, es muy importante estar en constante comunicación y consultar con ellos la creación de un sitio apropiado para sus necesidades. Especificación de su público objetivo, la información comercial y de diseño de estilo durante su consulta inicial será de gran ayuda para el diseñador.
Resaltado de mapas con jQuery
29 de Mayo de 2009Los mapas de imágenes HTML són muy útiles para por ejemplo una página con un mapa político y de las diferentes oficinas de una empresa, etc… también está la posibilidad de usar google maps para tal caso, pero eso ya es otro tema. Con jQuery maphilight podemos hacer estos mapas más atractivos muy fácilmente, el resultado:
Fuente: jQuery Maphi
Cómo personalizar tu página 404
14 de Mayo de 2009En algún momento de su navegación por Internet ha aterrizado en una página web que dice Error 404 No se encuentra la página. Puede ser molesto para los visitantes, pero con un poco de cuidado y atención, puede crear una página que intrigue a sus visitantes.
¿Qué es una página 404?
Una página 404 es un código de respuesta HTTP estándar que indica que el cliente es capaz de comunicarse con el servidor, pero el servidor no pudo encontrar lo que se había solicitado. Esto puede suceder por varias razones;
1. La página se ha trasladado
2. Un enlace de otro sitio es incorrecto
3. El visitante puede haber cometido un error de mecanografía en una URL
¿Qué hace una buena página de error 404?
- Piense en la página de error 404 como si debiera tomar de la mano a sus visitantes y guiarlos con cuidado a otra parte de su sitio.
- Explicar qué es la página. No asuma que todo el mundo está familiarizado con el término 404. El promedio laico puede pensar que algo ha ido radicalmente mal (y estoy pensando en mis padres, por ejemplo) cuando ven el error 404 en grandes letras en su pantalla.
- No permita que el visitante se sienta como si fuera culpa suya que la página no se puede encontrar, y no sólo les diga que deben corregir su ortografía.
- Incluir enlaces a otras partes de su sitio.
- Ofrecer a los visitantes una manera de ponerse en contacto con el webmaster para que sepan que el vínculo está roto.
- Utilice cuadros de Búsqueda
- Un interesante o gracioso gráfico lleva hacia el camino de una buena voluntad.
Al personalizar su página de error 404 usando todos o algunos de estos consejos, va en gran medida a mantener a las personas en su sitio.
Cinco maneras de hacer su sitio Web más popular
14 de Mayo de 20091. El Hosting
Este primer punto es importante principalmente para aquellos que no tienen su propio sitio web. Después de haber seleccionado el nombre de dominio, el siguiente paso es elegir un plan de alojamiento. Hay muchas alternativas asequibles, por supuesto, la búsqueda de un buen alojamiento suele ser más fácil decirlo que hacerlo. Esta industria a crecido bastante en los últimos años y esto ha dado lugar a un gran número de empresas que ofrecen diversos servicios de alojamiento, pero no se deje engañar, elija una que cuente con una sólida reputación y experiencia. Busque comentarios y otras informaciones para ayudarle a encontrar el ajuste correcto.
Cuando se trata de alojamiento web, usted debe comparar las diferentes características que se incluye con el plan. Asegúrese de que está garantizado al menos el 99,9% el tiempo de actividad y de que tenga una buena atención al cliente. Del mismo modo, también es bueno saber exactamente qué clase de números en términos de espacio en disco y ancho de banda va a estar autorizados a utilizar y gestionar. Es importante pedir asistencia al cliente para resolver las cuestiones antes de comprar un plan.
2. Optimice su sitio Web
Con el fin de tener éxito, usted tendrá que conseguir un alto ranking en los motores de búsqueda. Para eso, usted debe aprender tanto como le sea posible acerca de optimización de motores de búsqueda (SEO). El tema de SEO es amplio y puede ser bastante intimidante al principio, pero una vez se le coge el truco, usted podrá ver los beneficios de inmediato. Asegúrese de utilizar las palabras claves correctas.
Cuando esté satisfecho con las palabras clave y el contenido de su sitio, es hora de empezar a trabajar con la construcción de vínculo. Los motores de búsqueda determinan el valor de una determinada página / sitio mirando el número de enlaces entrantes.
3. Tome ventaja de la optimización de los medios de comunicación social
A pesar que SEO debe ser una parte importante de la optimización de su sitio, no debería terminar allí. la optimización de los medios de comunicación social es, probablemente, igual de importante, ya que es una de las más fuertes herramientas de marketing disponibles en la actualidad.
4. Obtenga Participación de sus Visitantes
Un punto esencial para hacer crecer su sitio en número de visitantes es por conseguir que participen mediante la inclusión de un foro o posibilidad de hacer comentarios en sus entradas o artículos. Todo el mundo quiere expresar sus propias ideas y pensamientos sobre diferentes temas, y permitiéndoles hacerlo, también aumentan las posibilidades de que los visitantes regresen.
5. Hacer hincapié en la utilidad del diseño
Invertir en un buen diseño es más importante de lo que algunas personas pueden pensar. Con un bello diseño, cerecerá la confianza entre sus lectores / visitantes. Un hecho importante a tener en cuenta además de un buen diseño es que el usuario sepa como usarlo. Si les resulta fácil, permanecerán.
Es difícil decir exactamente que es un buen diseño o no. Lo que a una persona le parece bien a otra le puede parecer horrible. Sin embargo, hay tendencias en diseño web, y si usted las sigue, puede estar seguro de obtener un buen resultado. Algunas tendencias del diseño web para el 2009 son diseños de columna, grandes ilustraciones, y un montón de espacio en blanco.
Si quiere estar seguro de que su sitio será efectivo disponga de un buen diseño, de fácil acceso y sencillo de entender. Evite el exceso de animaciones en Flash. Algunas personas pueden tener la configuración del navegador que les impiden la visualización de Flash, lo que significa que podría perder valiosos visitantes. Trate de pensar cómo piensa el visitante, y su sitio web crecerá, será mas popular y respetado día tras día.
