Entradas etiquetadas ‘html’
Optimizar imágenes sin perder calidad con Smush.it
10 de Enero de 2009Con Smush.it con solo tan solo un click, mediante la instalación de una extensión del Firefox o a través de una URL o un Uploader, se puede optimizar las imágenes de un sitio Web sin perder su calidad. Solo exprimiendo al límite los bytes que la componen.
Es muy fácil de usar:
- Podemos entrar en la Web de Smush.it y subir nuestras imágenes con el navegador Web.
- Utilizar el Bookmarklet de Smush.it, lo que le permite a extraer todas las imágenes de la Web que estamos viendo.
- Entrar en la Web de Smush.it y escribir las URL de nuestras imágenes.
- O usar la extensión de Firefox de Smush.it, que con tan solo un click pasa todas las imágenes de la Web que estamos viendo a Smush.it para que las procese en cuestión de segundos.
Viendo la portada de la Web de A2SISTEMAS y activando con un click el plugin del Firefox de Smash.it, podremos apreciar el resultado de la optimización de las imágenes de la portada en la siguiente captura:
Resultado de la optimización con Smush.it
El resultado representa un ahorro de casi un 10% del peso total de todas las imágenes. Un verdadero revés a la optimización cotidiana, teniendo en cuenta que todas y cada una de la imágenes que componen esta portada fueron debidamente optimizadas para ganar en tiempo de carga sin perder su calidad con programas de edición de imágenes profesionales como el Gimp y el Photoshop.
También podemos apreciar que al final del listado, la última imagen estaba en un formato GIF que Smush.it automáticamente ha convertido al formato PNG. Lo que no representa un problema, pero sí un cambio, ya que tendríamos que actualizar el HTML para actualizar a este nuevo formato. ¡Es la hora de dejarnos de GIF!
El resultado es una carpeta comprimida con todas las imágenes optimizadas, que se descarga del sitio Web de Smush.it. Así de fácil.
El IE7.js es una alternativa de compatibilidad con menos esfuerzo
7 de Enero de 2009Ser compatible con el IE6 y el IE7, lo que significa adaptar los estándares de la Web a estos navegadores bastante populares, implica invertir mucho tiempo y esfuerzo. Además, requiere el conocimiento de hacks compatibles con las validaciones de las páginas por la W3C e incluso la separación de hojas de estilo en los peores casos.
El IE7.js es una librería liviana (de 11Kb comprimidos) de Javascript que permite convertir los navegadores Microsoft Internet Explorer desde la versión 5 hasta la 8 en vavegadores compatibles con los estándares de la Web, tanto a nivel de código HTML como de hojas de estilo CSS. También añade soporte de transparencia de imágenes PNG para el IE5 y el IE6.
EL IE7.js es una alternativa de compatibilidad con menos esfuerzo. Ahora con una evolución significativa en la velocidad y estabilidad, se ha convertido en una versión BETA, tras permanecer un largo periodo de tiempo en ALPHA. El motor del sistema opera con base2: Una librería de Javascript que permite trabajar con un Javascript multinavegador con un único DOM, siguiendo los estándates ECMAScript. Esta librería esta teniendo un fuerte impulso de desarrollo, lo que ha permitido mejorar notablemente el rendimiento del IE7.js. Ambas librerías son mantenidas por el mismo equipo de desarrollo de Dean Edwards.
¿Pero por qué significa un menor esfuerzo? Solo imagina implementar una única hoja de estilos compatible para todos los navegadores, válida para la W3C (tanto en HTML como en CSS) y solamente incluyendo los tags:
<!--[if lt IE 7]> <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script> <![endif]-->
¿Debe ser único el valor de un atributo ID en HTML o XHTML?
5 de Enero de 2009En concepto, se trata de la asociación de un identificador único a un elemento del HTML que soporte dicho atributo. Por lo tanto, sí debe ser único. Y esto parece algo sencillo de entender y fácil de aplicar. Pero resulta a la práctica un problema, ya sea por descuido del maquetador o por desinterés.
Para comprender por qué debe ser único, hay que entender los principales usos de un identificador de elemento de HTML:
- Referenciar elementos de la página para su uso a través del DOM + getElemenByID.
- Referenciar selectores para la aplicación de estilos en las Hojas de estilos CSS.
- Referenciar navegaciones con anclas en la misma páginao para acceder a fragmentos de un documento directamente referenciados a través de un hiperenlace.
- Asociar controles de formularios de HTML con etiquetas (labels).
Si bien es cierto que una página Web en un determinado momento puede no requerir que este atributo esté presente o que cuando esté presente no sea único, no hay que descartar las buenas maneras o hábitos en la maquetación del HTML. Porque en un futuro próximo, con la mera implementación de scripts de validación de formularios más accesibles, se deberá hacer un mayor esfuerzo para conseguir el resultado esperado.
Información para el Nuevo Diseño Web
5 de Enero de 2009El Diseño de la información para la Web ha cambiado.
La gente está cambiando la forma en que consumen información en línea, así como sus expectativas acerca de su entrega. La naturaleza social de la web trae consigo una expectativa de interacción con la información y moderno diseño web que se refleja. En la actualidad existen formas alternativas de navegación, incluida la capacidad para navegar por el usuario, las nubes de etiquetas, con pestañas de navegación etc avances en la tecnología junto con estos cambios en las expectativas de los usuarios están afectando a la forma en que la información se presenta en una página web. Hoy son sitios web con el objetivo de utilización intuitiva y las interfaces que están en continua evolución en respuesta a las necesidades de los usuarios. Los diseñadores de página web se están acercando a la información de diseño diferente y sencillo diseño, páginas web interactivas que incorporen los avances en el diseño de la interfaz Web, Web actual filosofías y las necesidades de los usuarios. El diseño de la información para la nueva web es sencilla, es social y que abarca otro tipo de navegación.
Simplicidad de Aplicaciones Web
El diseño de aplicaciones web de hoy está dirigido por un principio de simplicidad. Los autores de Aplicaciones están creando software que tienen menos funcionalidades y una menor curva de aprendizaje para los usuarios finales. La funcionalidad que se incluye es la que es necesaria, nada más. Los días de las aplicaciones que están demasiado cargadas de características están pasando. Hoy son la potenciación de programas de software a los usuarios, ya que no necesitan un manual para utilizarlas, que son simples e intuitivas. No hay ningún software para instalar, y con el compromiso de muchos de registro de usuarios no es necesaria para probar la funcionalidad.
Esta filosofía de “menos es más” se puede ver en la actualidad en herramientas de productividad como Google Docs y Hojas de cálculo (antiguo Writely), además de un montón de otras aplicaciones Web. Estos nuevos sitios web se rigen por una singularidad de propósito y la sencillez en su funcionalidad.
Simplicidad de diseño
Esta nueva tendencia de la simplicidad de la funcionalidad de la aplicación web se refleja en el diseño y el estilo de las páginas web de hoy. Si bien se utilizó para tratar de meter tanta información como sea posible en nuestras páginas web, y de preferencia “por encima de la tapa”, en la actualidad las páginas web de los diseñadores se esfuerzan por eliminar lo innecesario, mostrando una interfaz limpia y simple para los visitantes. Ellos están intentando involucrar a la atención de los usuarios de la Web aprovechando sus ojos a lo que es importante.
Muchos de los nuevos cambios en el diseño web han sido influenciados por las tendencias estilísticas de la Apple y la interfaz de Mac OSX. Un léxico de diseño moderno que se ha desarrollado para la Web que se ha establecido como el diseño con un propósito, no sólo el diseño para su propio bien.
*Diseño Centrado
Somos capaces de presentar nuestra información en un lugar limpio y seguro de sí mismo centrado en la orientación. Este diseño es una opción práctica porque es mucho más compatible con distintos tamaños de pantalla y resoluciones.
*Bordes redondeados
La tendencia actual es para redondear las esquinas, incluso en las fuentes – no presentar nada agudo o grave. Es el reflejo de la actitud y el tono informal de hoy en la Web.
*San Serif y Fuentes minúsculas
En armonía con el tono casual de la nueva web, y la tendencia a redondear las esquinas, hay un montón de fuentes san serif que se encuentran en la actualidad de las nuevas páginas web. Del mismo modo, las minúsculas son las fuentes utilizadas, sobre todo en el logotipo para transmitir una cómoda y ocasional relación con el usuario.
*Fuentes grandes
Estas son a menudo utilizadas por los nuevos sitios Web para señalar los conceptos clave a los usuarios, o para transmitir con valentía un simple y claro mensaje acerca de la finalidad principal del sitio web.
*Navegación simple
La navegación por páginas Web Nueva es distinta y clara, se establece además de los ocupados del contenido y el cuerpo de la página. A menudo se encuentra en ejecución en la parte superior de la página. Es persistente el sentido de que aparece en cada página en todo el sitio web.
*Logos en Negrita
Las nuevas aplicaciones Web son audaces y confiadas y también lo son los logotipos de la compañía que representan sus marcas.
*Colores fuertes
Estos son utilizados por los sitios web de hoy a hacer hincapié en conceptos importantes, así como para la creación de la distinción entre zonas de una página.
*Colores complementarios
Los sitios web modernos tienden a no ser monocromáticos, pero ricos en color. Muchas de las nuevas páginas web están utilizando los colores complementarios, como los azules y naranjas, y amarillos y violetas para enriquecer su diseño.
*Sutil 3D
No encontraremos efectos chillones 3D o ilusiones ópticas en las nuevas páginas web de hoy, sino un sutil uso de sombras, gradientes, y reflejo de superficies que añaden un borde realista a la interfaz.
Superficies reflectantes
Esta tendencia de crear el efecto de una reflexión, o espejos de superficie se puede encontrar en muchos de los nuevos sitios web, a menudo en torno a un logotipo.
Iconos simples
Debido a la verdadera naturaleza de la Nueva Web hay muy pocas o ninguna fotografía. En el lugar de la comercialización de estas imágenes con gente de negocios felices agitando las manos, tenemos originales iconos que representan las acciones que pueden ser adoptadas por el usuario.
Blanco
Diseño y mantenimiento de un sitio simple y Zen-como la disposición por el aumento de alturas y añadiendo la línea de los lotes a las páginas en blanco. En lugar de exclusión de la página con la sobrecarga de información, la nueva web de los diseñadores se centra en lo esencial, y en la producción limpia y fresca páginas.
Starbursts
La emocionante explosión de formas está muy de moda en los sitios web. Se pueden encontrar en toda la Web, y la mayoría de las veces son utilizados para promover y destacar un servicio gratuito.
Los avances en interfaces de usuario
Además de los estilos de diseño, se han producido varios avances recientes en diseño de interfaz de usuario que han hecho de la web un simple lugar para estar.
AJAX – es una evolución en el diseño de la interfaz web que permite que la ver la información que se procesa sin volver a cargar la página. Este adelanto ha traído consigo varias nuevas capacidades en el diseño de página web.
Grandes pestañas
Alternar entre las pestañas es ahora totalmente posible sin volver a cargar la página, los diseñadores Web están haciendo un buen uso de ellas.
Drag & Drop
La funcionalidad de arrastrar y soltar que permite AJAX permite a los diseñadores crear ricas experiencias interactivas para los visitantes del sitio web. Muchas de las actuales aplicaciones de la página de inicio personal utilizan esta funcionalidad, que permite a los usuarios arrastrar los widgets y gadgets que desee en su espacio personalizado.
Mapas
Hace apenas unos años era ridículo pensar que se podía combinar cualquier conjunto de información con un mapa del mundo y permitir a los visitantes de su sitio web ampliar la foto en la calle e incluso obtener una foto de satélite de la zona. Sin embargo, las capacidades de mapeo se están convirtiendo en un lugar común y parte integral de la experiencia del usuario de hoy. Y son algo que los usuarios llegan a esperar.
Wysiwyg
Ya no es necesario conocer el código HTML para crear contenido en línea. Blogs, wikis, sistemas de gestión de contenidos, y otras aplicaciones basadas en web están ofreciendo “Lo que usted ve es lo que obtiene” editores que imitan una palabra-como el interfaz de contenidos.
Previas
Acerca de esta tipo de web a los visitantes ya no les es necesario el compromiso de hacer clic a través de otro sitio antes de saber exactamente lo que veremos allí. A través de aplicaciones tales como el ajuste, es posible proporcionar a los usuarios con página web todas las vistas previas de los enlaces de una página.
Social
Existen al menos dos tendencias que se perfilan en el diseño de sitios web de hoy, y cada vez hay mas cruce entre los dos.
La socialización de los medios de comunicación y sus aplicaciones
Ha surgido en la Web una tendencia hacia la socialización de las cosas que no son inherentemente social, tales como libros, fotos, videos, y el texto como artículos de noticias, documentos. Esta inclinación se extiende a las aplicaciones Web como la colaboración en la gestión de los proyectos incluidos en programas de Base, documentos para compartir aplicaciones como Google Docs y Hojas de cálculo, y muchos otros. Con estos cambios se añade una expectativa entre los usuarios que ahora supongo que será capaz de interactuar con la información a descubrir en la Web.
Comentando
Los visitantes del sitio Web ya no son pasivos lectores, sino que activamente quieren unirse a la conversación y añadir sus comentarios.
Calificación y Revisión
Calificación de autoría de los artículos y comentarios son capacidades que se están convirtiendo rápidamente en requisitos para los sitios web con los productos y medios de comunicación.
Compartir
En el día de hoy la página web de un usuario es una colaboración que espera que las aplicaciones web, documentos, calendarios y de otras herramientas de creación de contenido para ser compartidos con un equipo.
Guardar
Multitarea Web de los usuarios que esperan para poder marcar los artículos para leer más tarde, de entretenimiento, favoritos, de videos, y otros. Guardar el contenido de la Web en su propio servicio de marcadores con un clic.
Variedad de opiniones
Cuando los lectores encuentran una noticia interesante en un sitio web, quieren saber lo que otros están diciendo sobre el tema. Esto es posible a través de servicios tales como SphereIt y otros.
Para el bien social
Además de los sitios web que socializan los medios de comunicación y las aplicaciones, existen sitios web que son de índole social para el bien social. Estos sitios web son todos acerca de la conexión de las personas y la construcción de comunidad. Son los sitios web de redes sociales como el MySpace, Facebook y las redes de Ning. El principal componente en estos sitios es el perfil de usuario en torno a la cual tanto la navegación y la actividad gira. Este tipo de sitio web requiere también una interfaz de línea de base de la funcionalidad social.
Perfil de Usuario
El ingrediente principal en cualquier sitio de redes sociales es el perfil de usuario que puede adaptarse para que coincida con la personalidad de un usuario.
Listas de amigos
¿Cuál es el punto de unirse a una comunidad social si no se puede hacer amigos? La lista de amigos permite a las personas crear su propia red de relaciones sociales y mostrarlos al mundo.
Mensaje y comunicación
Una parte integral de cualquier red social es un medio con el que comunicarse con los demás miembros, ya sea un sistema de mensajería interna, correo electrónico, mensajería instantánea, hablar o vivir.
Suscribir Usuario
Al igual que con sitios web de medios de comunicación social, los miembros de las comunidades de redes sociales esperan encontrar las herramientas que les permite suscribirse a los miembros que encuentran interesante.
Grupos
Estas sub-comunidades están dentro de un ecosistema social en la que los miembros se asocian con un grupo enfocado de personas que comparten un mismo interés, la profesión, o característica.
Herramientas para la expresión
Populares sitios de redes sociales a disposición de sus miembros con las herramientas para crear contenidos tales como diarios personales y blogs, así como la posibilidad de cargar los medios de comunicación y otros elementos como fotografías, diapositivas, videos y todo tipo de artilugios.
A diferencia de los medios de comunicación social el diseño de estas herramientas de la comunidad debe ser fácil para los miembros de utilizar, al alcance de la mano, y obvio.
El usuario
No es suficiente sólo encontrar información, la gente quiere explorar y encontrar uno al otro como individuos. Este tipo de navegación es natural en los sitios web de redes sociales donde el objetivo principal es conectar con otros miembros.
La Nube de etiquetas
Este es un complemento de la taxonomía para el vocabulario controlado de un sitio web creado por los diseñadores, que es orgánico a la comunidad de usuarios. No hay instrucciones exigidas con esta herramienta intuitiva que es, obviamente, hacer clic y con frecuencia.
El Comienzo de la página
Incluye tales como listas de los más populares, más buscado, más reciente, comentarios arriba, mas votado… Esta característica proporciona un resumen de lo que es más importante en una comunidad en un momento dado. Todavía hay espacio para la lista de los editores a sus propios elementos, junto con estas listas de la comunidad.
El Zeitgeist
Este es un contenedor para todos los de la parte superior y la mayoría de las listas, así como las nubes de etiquetas, proporcionando una visión de la cultura y la personalidad de un determinado sitio web.
Widgets – Gadgets
Se trata de la agregación de datos personalizados en un solo lugar, y navegar desde ahí. Los Sitios web ya no muestran simplemente texto, pero son aplicaciones que contienenn otras aplicaciones.
Mashups
Los usuarios de la Web están creando sus propias maneras de navegar por la información, remezclar el contenido de diferentes servicios para crear nuevas aplicaciones.
Principios de Diseño para la nueva web
* Manténgalo Simple – Incluir sólo la funcionalidad necesaria y proporcionar un eficiente diseño limpio.
* Hágalo Social – Conozca las expectativas de los usuarios que permitan conexiones a través de herramientas sociales.
* Oferta de navegación alternativa – reflejar el espíritu de la época de la web la comunidad y abrazar las vías alternas a la información, también la utilización de herramientas visuales.
Nueva Web de Filosofías
* Evolucionar – Hoy en día los creadores de sitios Web no tienen miedo a probar cosas nuevas. No hay ninguna respuesta correcta y no todo necesita ser resuelto desde el principio.
* Ser Ágil y abierto- Responder a los avances en la tecnología y los cambios en las necesidades del mercado. Estar dispuestos a abandonar malas ideas
Beneficios de las de URL Browser-friendly en el posicionamiento
27 de Diciembre de 2008Los beneficios de la reescritura de una URL Browser-friendly son diversos, y estos no estan relacionados directamente con el posicionamiento. Existen, pues, beneficios directos e indirectos de la implementación de este tipo de direcciones URL. Por ello hace falta conocer el significado de una URL Browser-friendly.
En Internet hay una clasificación de las URL según la facilidad de comprensión en su lectura y la mayor descripción del contenido de la página que contiene:
- Dirty-URL (dirección URL sucia)
- Browser-friendly (dirección URL amigable).
Las Dirty-URL vienen de la práctica de la programación, en la que evidentemente hay que implementar variables para indicar los caminos o estados de un proceso en una aplicación. Este tipo de datos la mayoría de veces resulta incomprensible para los usuarios de las páginas Web. Sin embargo, no solo se presentan este tipo de direcciones URL en páginas Web dinámicas, ya que pueden presentarse en páginas Web estáticas, cuando el maquetador HTML, por desconocimiento plantea unas rutas nada inteligibles.
De todas formas, no en todos los casos una Dirty-URL es convertible a una URL Browser-friendly. Incluso en algunos casos no sería correcto:
- Cuando se requieren diversos parámetros en una aplicación Web. Estos normalmente no son sustituibles en casos de complejidad alta.
- Cuando la información con la que se trabaja no tiene por qué ser legible para el usuario o debe estar mas bien ofuscada.
- Cuando se implementan formularios.
Las URL Browser-friendly son fáciles de comprender por el usuario y además aportan un valor descriptivo del contenido de la página. Sus principales características son.
- Describen el contenido de la página Web que indican.
- Se muestran fáciles de comunicar, dado que presentan una estructura mas bien corta (no más de 60 caracteres).
- No contienen espacios entre palabras, sino guiones y barras.
- Todas las letras que componen la URL deben estar en minúsculas, para evitar errores.
- Son persistentes en el tiempo.
Por eso los primeros beneficios de la implementación de direcciones URL Browser-friendly saltan a la vista, ya que facilitan la lectura, memorización y escritura de las URL, mejorando principalmente la comunicación y la navegabilidad de la Web.
Luego, la ventaja de que una URL sea Browser-friendly es efectivamente el texto que expone la URL, que sirve para que el buscador también obtenga una información importante sobre el contenido de la página que esta indexando. Que puede ser tan importante como el contenido de la misma página.
Artículos relacionados:
Primeros con Google Maps
28 de Noviembre de 2008Google Maps se ha extendido entre los internautas muy rápidamente. Es una herramienta muy útil a la hora de encontrar sitios, lugares recomendados, pasear por alguna ciudad gracias al Street View (hace poco se publico en España para las ciudades de Madrid, Barcelona y otras más). Veamos como integrar un mapa dentro de nuestra página Web gracias a la potente API de Google Maps.
Obtener una API Map key para nuestro sitio Web
Para poder usar la API dentro de nuestro sitio Web debemos registrar el dominio en la API de Google Maps para obtener una llave válida y poder usar la API. Para ello usar este enlace: http://www.google.com/apis/maps/signup.html
Después de leer y aceptar el contrato de licencia y escribimos el dominio en el cuadro de texto. Por ejemplo, para el caso debería escribir http://www.a2sistemas.com
Después solo queda pulsar el botón “Generate API Key”. Al pulsar el botón se cargará una página indicándonos cual es nuestra API Key y mas abajo un pequeño ejemplo de código para insertar en nuestra web. Es el Hello World de Google Maps.
Obtención de la API Key
Por cierto, debemos disponer una cuenta Google para usar este servicio. Si no dispones de cuenta Google, puedes crearte una siguendo el enlace: https://www.google.com/accounts/NewAccount
Hola Mundo de Goolge Maps
Veamos el siguiente código:
Google Maps JavaScript API Example<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script
src="http://maps.google.com/maps?file=api&v=2&key=APIKEY"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>
El código anterior crea un mapa dentro de un DIV con id “map” de 500px con 300px, situando el centro del mapa en las coordenadas: 37.4419, -122.1419.
Recordad que hay que cambiar en la llamada del primer <script> el valor de “key=” por el de vuestro dominio. De lo contrario aparecerá un alert() informando de un error en la clave.
Puedes ver un ejemplo del código anterior aquí.
Cambiar el centro inicial del mapa
Para ello hay que modificar la siguiente linea:
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
setCenter es un método que nos permite indicar cuál será el centro inicial del mapa. Usando una latitud y una longitud. Para conocer estos datos de cualquier punto del planeta de forma exacta, usaremos también Google Maps. Para ello abrimos en nuestro navegador Web la dirección http://maps.google.es/ ahora buscamos la úbicación de la cuál deseamos obtener la latitud/longitud, para aseguranos de que la ubicación esté centrada, pulsando con el botón derecho del ratón seleccionamos la opción Centrar mapa aquí ahora pegamos el siguiente código Javascript en la barra de direcciones del navegador Web y pulsamos Intro:
javascript:void(prompt('',gApplication.getMap().getCenter()));
Se abrirá un cuadro de diálogo con la latitud y longitud del centro del mapa. ¡Perfecto!
Añadir elementos de control
Para poder interactuar con el mapa, moverte por él, hacer zoom y cambiar el tipo de mapa, hay que insertar los controles para ello:
map.addControl(new GLargeMapControl()); map.addControl(new GScaleControl()); map.addControl(new GMapTypeControl());
- GLargeMapControl -> Te pemite hacer zoom y moverte mediante botones por el mapa, además poder volver al centro inicial.
- GScaleControl -> Añade una leyenda en la parte inferior izquierda con la escala del mapa.
- GMapTyeControl -> Te permite cambiar entre los diferentes modos de ver un mapa.
Puedes visualizar un ejemplo aquí.
Añadir un punto en el centro del mapa
Ahora vamos a insertar un marcador en el mapa, justo en el centro inicial. Cuando se haga “click” al punto se centrará la vista al punto en cuestión. Además tendrá un globo con información. Se pueden añadir tantos puntos como se quieran y donde quieran. Pero para este caso vamos a añadir solo uno:
var punto = new GLatLng(41.548929,2.42609); var marcador = new GMarker(punto); GEvent.addListener(marcador, "click", function() { map.panTo(new GLatLng(41.548929,2.42609)); }); map.addOverlay(marcador); marcador.openInfoWindowHtml("<b>Mi primer PUNTO</b>");
Con la función GMarker creamos el marcador en el punto localizado por la variable punto.
Con GEvent, creamos un evento al hacer click en marcador, para este caso lo que hace el evento es ir a la posición ( map.panTo ) 41.548929,2.42609 y con openInfoWindowHtml abrimos una ventanita en forma de globo con información en formato Html.
Puedes ver el resultado aquí y también aquí
Más ayuda
Puedes obtener más ayuda e información con ejemplos en el sitio Web de la API de Google Maps. Toda la documentación sobre todo lo que puedes llegar a crear. Un ejemplo es la siguiente aplicacion: el tráfico maritimo y aéreo de España en tiempo real: http://www.atlantic-source.com/trafico-maritimo ¡Genial!
De momento eso es todo, en una futura entrega hablaremos de como cargar puntos geográficos dinámicamente desde una base de datos o vía un archivo XML.
Nuevo Firmware del iPhone 2.2
22 de Noviembre de 2008La semana pasada habían rumores de que por fin Apple actualizara el Firmware del iPhone a la versión 2.2, del mismo modo que para el iPod touch 2.2 y el iTunes 8.0.2. Esta última se debe hacer antes para poder actualizar el Firmware del iPhone y el iPod touch.
Mejoras del Firmware 2.2
Hay 2 mejoras importantes:
- Los Mapas: Que ahora incluyen el Google Street View, soporte para crear itinerarios a pie y a través de transporte público en la búsqueda de direcciones, visualización de las direcciones de los alfileres (o pines) y la posibilidad de enviar por Email tu ubicación, a través de una URL a Google Maps.
- Mail: Mejoras en la aplicación Fetch que sirve para la programación de recepción automática de Email y un mejor soporte del formato HTML en los correos.
También tenemos otras mejoras:
- Mejoras que previenen errores de configuración y cortes de llamadas.
- Mejora de la estabilidad del Safari.
- Mejora de la calidad de del sonido del buzón de voz visual.
- Mejoras de accesibilidad en botón Home y la autocorrección.
- Y por últmo tenemos la capacidad de descargarse podcast a través del iTunes y sincronizarlos y reproducirlos en el iPhone.
Sin embargo, existe una desmejora importante a tener en cuenta: La nueva casilla de búsqueda en Google en la barra de direcciones del Safari, que atenta contra la usabilidad del dispositivo móvil, dejando un espacio ínfimo para la lectura de la URL actual del usuario. Lo que menos mal que Apple planea dejar como una preferencia del usuario en una futura actualización del Firmware.
Quedan frentes insalvables por mejorar y algunos tremendamente urgentes:
- No hay mejoras de la calidad de la cobertura 3G.
- Todavía no se ha mejorado el error que produce un bloqueo repentino de la tarjeta SIM.
- No hay soporte para mensajes multimedia.
- Las actualizaciones de Firmware siguen dejando muchas aplicaciones de terceros sin funcionar. Lo que efectivamente se resuleve con la actualización de cada una de estas aplicaciones por parte del usuario.
Flash o no Flash
22 de Noviembre de 2008Este es uno de esos populares temas de debate en foros de diseño web. ¿Qué tipos de sitios web deben utilizar esta nueva tecnología y qué tipos de sitios no? Para aquellos que no están familiarizados con Flash: Flash es un plug-in y el programa desarrollado por Macromedia que ofrece sitios de dinámica de animación y interactividad.
Lo único es que, a fin de ver sitios que utilizan esta tecnología, primero se debe descargar el plug-in, que en algunos equipos puede tomar desde 5 minutos a 15 minutos dependiendo de su velocidad de conexión. Esto no es un obstáculo para la mayoría de los usuarios, sin embargo, para algunos, no es una cuestión de rapidez o la lentitud de carga – algunos usuarios son muy cautos sobre lo que descargar de internet, y es posible que vean este “Download Now” como una amenaza a su sistema. Otros usuarios ni siquiera entran en los sitios que requieren plugins por esta razón solamente. Y algunos no entran porque no les gusta esperar a los componentes y las animaciones de carga. Estas son las personas que quieren información y que han ido al sitio para eso – no para ver un oso animado al introducirse en el.
E-Comercio y Flash no pueden mezclarse
No se recomienda para los sitios de comercio electrónico utilizar tecnología Flash. La finalidad de un sitio de comercio electrónico es vender artículos a los consumidores que visitan su sitio web. Los visitantes quieren ver los productos y obtener la información de manera rápida y fácil. Mediante la implementación de un sitio de comercio electrónico en Flash, la empresa está limitando la cantidad de consumidores que van al sitio, y, potencialmente, podrían perder ventas.
La mayoría de los sitios que utilizan Flash también ofrecen una versión HTML para los clientes que no tienen el plugin, o que deciden no descargarse dicho plugin.
Esto es altamente recomendable para todas las empresas al hacer el uso de Flash en su sitio de comercio electrónico.
Vamos a decirlo de esta manera: Pongamos que nuestra empresa de venta de productos la hemos construido en una isla en el Pacífico muy cerca de la costa. ¿Se le requerirá a todo el mundo que quiere entrar en su tienda a obtener un barco para llegar hasta ella? ¿O a construir un puente para cruzar? Mejor aún, probablemente habría sido mejor construirla en la orilla principal en el primer lugar de “fácil acceso”. Este es el problema con Flash el día de hoy. Aunque un alto porcentaje de consumidores ya tienen sus plugins de Flash instalados, no es aconsejada la aplicación de Flash para un sitio de comercio electrónico. Por supuesto, que es, en última instancia la decisión de la empresa.
El lado bueno de Flash
Sí, Flash tiene sus buenos puntos. Flash es muy beneficioso para los sitios web de entretenimiento. Los sitios que son principalmente para fines de entretenimiento. Webs de información también empiezan a utilizar Flash en partes de sus sitios para representar imágenes en movimiento y sonido como una visita guiada o clips de información que hacen que el sitio sea más interesante. Flash también es ideal para los niños y los sitios de juego. Con la tecnología Flash, su sitio puede interactuar con los visitantes en forma de divertidos juegos o dibujos animados. Añade la diversión y emoción a la web con los sonidos de la música, voces, colores y imágenes en movimiento. Así que sí, Flash puede ser muy bueno para algunos sitios.
Cómo mantener tu HTML limpio
21 de Noviembre de 2008Durante el desarrollo de un proyecto surgen nuevos elementos o cambios que se van añadiendo al código que generamos. Con el avance del proyecto se tiende a no ser muy metódico, lo que provoca que se el resultado final sea igual de funcional y que cumpla los requisitos pero que para nosotros mismos, los desarrolladores, sea un verdadero caos mantener y comprender el proyecto. El caos que estoy comentado se agrava cuantas más personas están dedicadas al proyecto.
Estos consejos o puntos a tener en cuenta son específicos para el HTML, pero si bien, la mayoría de estos casos pueden ser aplicados a otros lenguajes.
1. Usa el doctype STRICT
Si ya dispones de algo más de soltura, usa siempre que sea posible el modo STRICT en el doctype.
Recursos:
- W3C: Recommended DTDs to use in your Web document
- Fix Your Site With the Right DOCTYPE!
- No more Transitional DOCTYPEs, please
2. Usa la codificación correcta para los caracteres especiales
Los caracteres especiales deben ir codificados según el estándar, nos evitaremos problemas con las validaciones de la W3C.
Recursos:
3. Indentación del código
Con la indentación se consiguen dos cosas:
- Mantener el código de alguna manera mas ordenado y poder visualizar los condicionales e iteraciones más rápido de un vistazo. Además que se facilita toda la comprensión al poder ver “bloques” de código de forma clara.
- Que dentro de 3 meses otra persona o nosotros mismos pueda entender el código. Más vale dedicarle a este aspecto un tiempo durante la fase de desarrollo que no después.
4. Separa los archivos CSS y de JavaScript del HTML
Mantener separados los archivos CSS y de Javascript es una buena idea, pero siempre pensando en que mantener muchos archivos “externos” también puede suponer un problema, hay que encontrar la justa medida en función de la envergadura del proyecto.
La idea es poder hacer modificaciones sin necesidad de modificar TODOS los archivos del proyecto.
5. Usa los TAGS de forma correcta
Es fundamental conocer las propiedades de los tags HTML, aunque los navegadores consigan mostrar lo que queremos mostrar hay que tener en cuenta la estandarización, si todos cumplimos con dichos estándares nuestro proyecto Web se podrá visualizar dentro 10 años sin problemas, de lo contrario nadie te puede asegurar que si ahora se ve “bien” se siga viendo en el futuro.
6. Elimina los elementos que no necesites
Cuando hemos trabajado siempre con tablas y empezamos a trabajar en una estructura con capas (divs), nos puede suceder que entremos en lo que los desarrolladores profesionales llamamos “divitis”. Esto produce un uso excesivo de div’s para todo, lo cuál no es bueno. Hay que tratar de mantener la estructura simple y clara.
Recursos:
7. Usa nombres para las clases con sentido
Claros y descriptivos, así deben ser los nombres de las clases. Cómo las variables en los lenguajes de programación, se debe tratar de aplicar un sentido semántico a lo que se refiere ese nombre. Lo ideal seria poder identificar dentro de un archivo CSS a que aplica dicha clase sólo con leer su nombre.
8. Validar, Validar, Validar
La validación de nuestro trabajo es mucho más que para poner el icono en el pie de página. La validación implica mantener una mínima calidad en lo que producimos, no implica que esté mejor o peor hecho, pero si nuestro código valida con el estándar nos aseguramos de que funcionará dentro de un tiempo igual que el primer día.
Recursos:
- The W3C Markup Validation Service
- XHTML-CSS Validator
- Free Site Validator (checks entire site, not just one page)
9. Usa la lógica para la estructura
La lectura de un código se hace de forma natural, de arriba hacía abajo. No tiene mucho sentido colocar el píe de página antes que el contenedor principal o menú de navegación. Funcionar, funcionará seguro.
10. La experiencia es un grado
Por poco que te esfuerces, notarás que aplicando unos sencillos pasos en la fase de desarrollo, los futuros cambios pueden hacerse más llevaderos ya que todo tendrá lógica. Es una gran ventaja trabajar sobre un código limpio y ordenado.
La primera vez costará seguir al pie de la letra muchos de los aspectos comentados. Requieren pararse a pensar un poco más antes de ponerse manos a la obra, pero con el tiempo todo se hace más sencillo y con el tiempo llega la recompensa.
Firefox X-Ray
19 de Noviembre de 2008
Firefox es el navegador por excelencia hoy en día. Aunque la mayoria de los usuarios usa el internet explorer de microsoft eso no significa que sea el mejor navegador del mercado. Firefox interpreta con más inteligencia el código html, hasta cuando se encuentran errores en este código, dependiendo de qué tipo de fallo, lo puede resolver él mismo para mostrar la página web correctamente.
El tema es que firefox tiene un add-on denominado X-Ray que permite ver las páginas web como si las veamos con rayos X sin la necesidad de ver el código fuente. Eso quiere decir que se pueden ver los tags de la página web con sólo visualizarla como un usuario culaquiera. Esto permite desarrollar mejor o poder aprender de otros desarrollos ajenos con el fín de mejorar las propias habilidades de maquetación.
Aquí os dejo un pequeño ejemplo de como se puede ver una web instalando fácilmente este add-on.
