Entradas etiquetadas ‘web’
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;)
Fiesta de Mozilla en Madrid
3 de Julio de 2009Mozilla Europe celebrará, con motivo de la publicación de la versión final de Firefox 3.5, una Launch Party el 13 de julio de 2009 a las 20h en el Teatro Lara de Madrid (mapa).
El evento contará con invitados especiales, como Pascal Chevrel, secretario general de Mozilla Europe, quien nos hablará de las nuevas características del navegador estrella de Mozilla.
Aunque el evento es gratuito, es necesario confirmar tu asistencia enviando un formulario disponible en la web de Mozilla-Hispano.
Lo que trae el nuevo Firefox 3.5
25 de Junio de 2009Tras publicar la última RC (Release Candidate) de Firefox 3.5, Mike Beltzner, Director de Desarrollo de Firefox presenta este vídeo que describre lo nuevo en la versión 3.5:
Resumiendo:
- Mayor velocidad de navegación, Firefox 3.5 será la versión más rapida creada por Firefox.
- La privacidad ante todo: Firefox 3.5 traerá el popularmente conocido “modo porno” que no deja rastro de tus andadas por la red ya que borrará todos los elementos “sensibles” de la sesión.
- El historial podrá ser eliminado basado en tiempo, es decir, borrar solo lo que hace 24h qué visitaste o 1 semana…
- El ¡deshacer cerrar ventana!
- Podremos ver los vídeos en línea sin ningún complemento “extra” gracias al soporte HTML5.
- Firefox 3.5 incorpora un “geolocalizador” (se puede desactivar) incorporado que permitirá a los sitios Web detectar de forma exacta el lugar desde donde procede la visita.
Fuente: Mozilla.com
La línea del tiempo del desarrollo Web
16 de Junio de 2009
El gráfico creado por Felipe Micaroni Lalli, representa la historia de las tecnologías, estándares y navegadores que han hecho posible el crecimiento de la Web.
Lo más probable es que el gráfico deberá ser reescrito en breve ya que poco a poco vemos llegar HTML5, Silverlight 3 está a punto de ver la luz (programado para el 10 de Julio ) y por si fuera poco, Opera hoy acaba de reinventar la Web con su ¡navegador-servidor!
Controlar el tiempo de navegación
12 de Junio de 2009ThinkWasabi escribe sobre MinutesPlease.com, un interesante servicio para controlar el tiempo que pasamos en una web.
¿Cuántas veces nos ha pasado que tenemos 10 minutos y nos ponemos a twitear y cuando nos damos cuenta ya han pasado más de 25 minutos?
Para evitar que nos ocurran estas cosas podemos utilizar este servicio. Basta con introducir la url que queremos visitar y el tiempo en minutos y darle al botón 
Existen 3 formas de usar MinutesPlease:
Navegación Normal
Es la forma comentada anteriormente, entras, introduces la url y el tiempo y pulsas el botón. Se abrirá una pestaña nueva con la url introducida y en la pestaña en la que tenías MinutesPlease verás un contador de tiempo para saber cuánto te falta para volver al trabajo.
URL “pregrabadas”
Si quieres puedes guardarte unas URL para no tener que rellenar cada vez el formulario de MinutesPlease, por ejemplo puedes usar http://minutesplease.com/5minutes/a2sistemas.com/ para navegar por la web de A2Sistemas durante 5 minutos
Bookmarklet
El bookmarklet de MinutesPlease te permite visitar durante 10 minutos cualquier web. Solo tienes que guardar el bookmarklet de MinutesPlease y hacer clic en él cuando visitas una web en la que quieres limitar el tiempo de navegación.
Bonus:
Realmente la idea es original, pero para que esto funcione y te sea útil debes ceñirte al tiempo que te marcas al principio ya que siempre te da la opción de More time… así que puedes ir dándote más tiempo.
Fuente: ThinkWasabi
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.
Como elegir un proveedor de Hosting para nuestro Sitio Web
17 de Abril de 2009Elegir un proveedor de alojamiento web puede ser una tarea de enormes proporciones con los muchos proveedores y opciones disponibles. No necesita ser un ejercicio agotador, sin embargo, si sabemos cómo buscar las características que son importantes para nuestro sitio web ya jugaremos con ventaja. A continuación presentaremos algunos de los aspectos más importantes que debemos considerar al elegir un proveedor de alojamiento web.
Ancho de banda
El Ancho de banda se refiere a la cantidad de datos que se pueden transferir hacia y desde nuestro sitio web en cualquier momento. Los sitios web son accesibles para muchos usuarios a la vez, y es importante considerar esta demanda y elegir un ancho de banda bajo ese concepto. Si contratamos una cantidad fija quiere decir que nuestro sitio estará limitado a cierta cantidad de visitas mensuales.
Asignación de Tráfico
La mayoría de los paquetes de hospedaje también incluye una asignación mensual de tráfico, lo que significa que el sitio web sólo permite la transferencia de una cierta cantidad de datos cada mes. Es importante sopesar el costo del paquete y la asignación de tráfico para encontrar el equilibrio que necesita el sitio web en conjunto. Una buena opción es elegir un paquete de hosting con un proveedor que nos permita comenzar con una menor asignación de tráfico a un menor costo, pero nos permita ampliar el paquete fácilmente si el sitio web comienza a necesitar un subsidio adicional de tráfico.
Características
Es importante considerar las características que nos gustaría tener en el sitio web antes de elegir un paquete de hospedaje, el proveedor debería ofrecer determinados servicios a fin de poder hacer uso de diversas tecnologías web. Si elegimos la opción de cambiar el contenido de la página web utilizando una base de datos entonces necesitamos asegurarnos de que el proveedor nos proporcione las funciones que necesitamos a un coste razonable. Si necesitamos recursos específicos, debemos solicitarlos claramente. La posibilidad de utilizar un determinado lenguaje de programación en alguna parte del sitio, el acceso a bases de datos y la cantidad de direcciones de correo electrónico que tendremos disponibles son algunos de ellos.
También es bueno saber que sistema de copia de resguardo tienen para nuestros datos.
Soporte
El soporte es un elemento importante para elegir un servicio de hosting. Nos hemos de asegurar de contratar un hosting con soporte 24/7 (veinticuatro horas al día, los siete días de la semana) y que podamos contactarlos por email, por chat o por teléfono de ser necesario. No tenemos porque tener problemas, pero es posible que cualquier día lo podamos necesitar y ese día puede ser crucial para nuestra empresa o negocio.
Acceso
A menudo pasamos por alto una característica de los paquetes de hospedaje y es la forma en que se nos permite acceder a nuestro espacio de archivos. File Transfer Protocol (FTP) es un método común a causa de su simplicidad y eficacia cuando se trata de la transferencia de archivos en línea y está bien apoyado en muchos paquetes de software y sistemas operativos.
Fiabilidad
En un mercado con muchos proveedores que ofrecen servicios de alojamiento similares puede ser difícil evaluar quien puede proporcionarnos un servicio fiable. Los sitios web deben ser accesibles las 24 horas del día, no hace ningún bien que alguien se haya tomado su tiempo para acceder al sitio web y no esté en condiciones para acceder a él. Tenga cuidado con los paquetes de alojamiento muy baratos ya que estos suelen tener servidores con problemas de conexiones a internet. Debemos tener en cuenta la trayectoria y experiencia del proveedor y asegurarnos que lleva varios años en el mercado, eso nos permitirá evaluar la experiencia de la misma.
Un buen lugar para comenzar a investigar los proveedores de alojamiento se encuentra en los diversos foros donde tienen lugar los debates.
Aspectos económicos
Debemos encontrar un equilibrio entre lo económico y las prestaciones que necesitamos. Ya que más barato puede significar también más limitaciones.
Con estos aspectos en cuenta a la hora de elegir un paquete de hospedaje y proveedor para nuestro sitio web, podemos eliminar las opciones que no nos interesan y elegir el Hosting que es adecuado para nosotros.
Carga Google Analytics y Google Maps asincronamente
13 de Marzo de 2009Seguramente tanto Google Analytics cómo Google Maps sean usadas por muchas de las aplicaciones Web de hoy en día.
Precisamente estas dos aplicaciones pueden provocar, en muchas situaciones, retrasos en los tiempos de carga o lo que es peor, que no se cargue el contenido de forma correcta.
Google Analytics
Analytics es el gestor de estadísticas gratuito de Google, es usado por muchísimos sitios Web y quizás debido a eso, se suele producir un retraso en la carga de la página, para evitar este retraso simplemente hay que dejarle la carga al evento onload del navegador. Con jQuery esto se traduce así:
$(document).ready(function(){
$.getScript('http://www.google-analytics.com/ga.js',function(){
if (typeof(_gat) == 'object'){
var pageTracker = _gat._getTracker('UA-XXXXXXX-Y');
pageTracker._initData();
pageTracker._trackPageview();
}
});
});
Pero si no estamos usando jQuery podemos usar la función como addLoadEvent() que nos permite añadir funcionalidades al evento onload con compatibilidad en todos los navegadores, sería algo así:
addLoadEvent(function(){
// Insertamos el Código que Google Analytics
var analyticsCode = 'UA-XXXXXXX-Y';
var s = document.createElement("script");
s.type = "text/javascript";
s.src = "http://www.google-analytics.com/ga.js";
s.onload = s.onreadystatechange = function() {
if (typeof _gat == 'object'){
var pageTracker = _gat._getTracker(analyticsCode);
pageTracker._initData();
pageTracker._trackPageView();
}
}
document.getElementsByTagName("head")[0].appendChild(s);
});
En ambos casos se debe reemplazar (UA-XXXXXXX-Y) por el código que Google Analytics nos asigna.
Google Maps
La mayor y posiblemente mejor aplicación de mapas de Internet y de dónde la gran mayoría de sitios Web obtienen la información sobre mapas, es sin duda la que más problemas produce. Las largas esperas producen, por ejemplo, en Internet Explorer 6 que el tiempo de carga de las imágenes nos desesperen antes de poder visualizarlas….
Para solucionar el problema basándonos en una solución sobre jQuery podemos usar:
function cargarMapa(){
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("MAPA"));
map.setCenter(new GLatLng(39.578678,2.646021), 16);
}
};
$(document).ready(function(){
var api='AQUI TU GOOGLE MAPS API KEY';
$.getScript('http://maps.google.com/maps?file=api
&v=2.x&key='+api+'&async=2&callback=cargarMapa');
});
Si se prefiere, también podemos usar el ya conocido addLoadEvent()
addLoadEvent(function(){
var api='AQUI TU GOOGLE MAPS API KEY';
function cargarMapa(){
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("MAPA"));
map.setCenter(new GLatLng(39.578678,2.646021), 16);
}
};
var s = document.createElement("script");
s.type = "text/javascript";
s.src = 'http://maps.google.com/maps?file=api
&v=2.x&key='+api+'&async=2&callback=cargarMapa';
document.getElementsByTagName("head")[0].appendChild(s);
})
Fuente: anieto2k
¿Habéis tenido problemas antes con los tiempos de carga usando estos servicios de Google en vuestras aplicaciones Web?
Validar el código HTML completo de nuestro blog Wordpress
15 de Enero de 2009Que el HTML de nuestro blog o cualquier página web sea válido es el primer paso para conseguir que funcione como esperamos (especialmente en dispositivos típicamente poco flexibles como son los teléfonos móviles u otros dispositivos de nueva generación).
Un código correcto es una buena muestra de rigor de cara a los usuarios y a nosotros mismos, si son las normas estandarizadas de la web, ¿por qué no cumplirlas?.
El problema es mantener esa validez post tras posts, he explico, si nuestro código de la plantilla es válido, no significa que lo vaya a ser siempre, ya que a veces ocurre por integrar objetos incrustados mal codificados (vídeos de YouTube, galerías fotográficas, etc.) ya no valida como debería.
Ejemplo de validación
Para verificar la validez de todas y cada una de las entradas de nuestro blog viene tenemos Validated para WordPress, es tan sencillo como instalarlo y ponerlo a trabajar para descubrir todas las entradas con problemas.
Además este plugin nos enlaza directamente con el validador de W3C para ver el detalle de los fallos de cada entrada y así saber donde tenemos los problemas y poder remediarlo.
