Archivo para Noviembre, 2008
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.
Menús estilo acordeón en JQuery
27 de Noviembre de 2008Uno de los lenguajes que nos sirve para poder hacer desarrollos más vistosos, en el sentido de animaciones o realizar efectos, fue en su momento javascript. Pero gracias a la aparición de Jquery podemos realizar muchas más cosas más fácilmente de lo que podiamos hacer con Javascript. En este caso queremos exponer el plugin de jquery “accordion”, esto nos permite hacer unos menús desplegables que hoy en día se usan en Webs reconocidas como por ejemplo la de Apple. En este tipo de menús constan de apartados importantes que contienen un “listado” de enlaces que dan accesos a los distintos apartados de la web. El funcionamiento es sencillo, simplemente cuando seleccionas uno de estos grandes apartados se despliega el menú que contiene dando paso a la lista de enlaces de ese ámbito. Veamos un ejemplo con el menú de Apple:
Vemos en la parte izquerda este tipo de menu.
Estos menús se realizan con el uso de los tags UL i LI que nos permiten realizar listados. En estos tags se le deben añadir los id’s pertinentes para que se pueda identificar el elemento que se selecciona y se pueda desplegar. Este es un ejemplo:
<ul class=”drawers” id=”menu”>
<li class=”drawer”><h2 class=”drawer-handle”>Sección 1</h2>
<ul class=”submenu”>
<li class=”elemento”><a href=”#”>Elemento 1.1</a></li>
<li class=”elemento”><a href=”#”>Elemento 1.2</a></li>
<li class=”elemento”><a href=”#”>Elemento 1.3</a></li>
<li class=”elemento”><a href=”#”>Elemento 1.4</a></li>
<li class=”elemento”><a href=”#”>Elemento 1.5</a></li>
<li class=”elemento”><a href=”/”>Salir</a></li>
</ul>
</li>
<li class=”drawer”><h2 class=”drawer-handle”> Sección 2 </h2>
<ul class=”submenu”>
<li class=”elemento”><a href=”#”>Elemento 2.1</a></li>
<li class=”elemento”><a href=”#”>Elemento 2.2</a></li>
<li class=”elemento”><a href=”#”>Elemento 2.3</a></li>
</ul>
</li>
</ul>
Este es un sencillo menú con 2 apartados con varios subelementos cada uno de los apartados. Una vez hecho esto tendremos que inicializar el menú y dar la acción de despliegue en Jquery. Tanto se puede desplegar con un click del ratón, como simplemente pasando el ratón por encima (al hacer hover). La inicialización (que debería ir englobada dentro del <head> por ejemplo) de este menú podria ser tal que así:
$(document).ready(function () {
$(’LI.drawer UL:not(:first)’).hide();
$(’LI.drawer UL:first’).addClass(’open’);
$(’H2.drawer-handle’).click(function () {
$(’LI.drawer UL:visible’).hide();
$(’H2.open’).removeClass(’open’);
$(this).next().show(”slow”);
$(this).addClass(’open’);
});
});
En esta inicialización empezamos cerrando todos los elementos principales menos el primero (cada uno lo puede hacer a su gusto). Entonces se le añade a este primer elemento la clase “open”. Entonces solo se debe determinar con que evento se mostraran los elementos de los otros submenus, en el ejemplo seria con el click del elemento principal. Entonces se esconde el elemento actual, se le quita la clase open y se le asigna al nuevo elemento que se mostrará.
Son menus bastante útiles y vistosos para mostrar los accesos a los diferentes apartados de la web de una manera organizada y vistosa.
Diseño minimalista de páginas web
26 de Noviembre de 2008Con el aumento de la asequibilidad de espacio web y ancho de banda, el creciente uso de módems de alta velocidad, y la abundancia de la aplicación de tecnologías como Flash, audio y video, viene la tentación de la sobreexplotación en el diseño web.
Una característica importante que siempre ha diferenciado a los buenos diseñadores de los malos es el limitar cada nueva tecnología que viene. Los buenos diseñadores deben centrarse en primer lugar en la funcionalidad y asegurarse de que la página web logre los objetivos para los que fue creada, mientras que los malos diseñadores hacer uso gratuito de elementos como gráficos, animaciones flash y javascript, simplemente “porque pueden” o porque ” se ve bien “.
“Minimalismo” es un término acuñado en el arte y la literatura para describir un movimiento hacia la extrema simplificación de forma y color. Extrapolando el concepto a las páginas web, se refiere a diseño, colores y otros aspectos de la presentación, a la que la dimensión de la usabilidad se ha añadido.
Del minimalismo es la estética y la funcionalidad de trabajar juntos. En diseño web, el minimalismo implica la eliminación de todos los adornos innecesarios, centrándose en el usuario, y la creación de una interfaz que es al mismo tiempo agradable a la vista, fácil de navegar, intuitiva y eficaz en ayudar a los usuarios alcanzar sus objetivos de manera rápida y sin esfuerzo.
Minimalismo se aplica a muchos aspectos de diseño web. Por ejemplo:
- La codificación de las páginas: cuando se trata de escribir código para páginas web, el uso de hojas de estilo en cascada es un buen ejercicio en el minimalismo, por la concentración de las definiciones de estilo en un archivo externo y, a continuación, la vinculación a la misma de cada página web, eso reduce la cantidad de código en cada página, y, en consecuencia, las páginas serán más pequeñas, se cargaran más rápido y será más fácil de mantener.
- El uso de gráficos: Se utilizaran los gráficos sólo cuando sea absolutamente necesario, eso es otro buen ejemplo de diseño minimalista web. Los Gráficos deben añadir valor a lo que se presenta, en lugar de ser sólo decoración. El uso de los gráficos, y utilizarlos con moderación, eliminan el desorden en una página, hará que el contenido sea más fácil de entender, y permitirá que la página tenga una descarga rápida, que en definitiva es lo que los usuarios quieren.
- El uso del color: buen uso de colores para separar la página en diferentes categorías, y hacer hincapié en lo que es importante. Por ejemplo, cada sección de un menú de navegación se puede dar un color diferente para indicar que las tareas están relacionadas. Además, el uso de colores brillantes para los botones en los que queremos que los usuarios hagan clic es una buena manera de subrayar la importancia de esa tarea. Si todo en una página tiene color, nada hará hincapié en la página y será un lío.
- El uso de un amplio espacio en blanco: algunas páginas web se asemejan a los anuncios caóticos que vemos en algunas revistas con cantidad de gráficos e información que parece que nos quieren gritar. La lectura de la pantalla de un ordenador es mas difícil, por lo que debemos esforzarnos por hacerla lo más fácil posible para nuestros visitantes. Podemos mejorar la legibilidad de pantalla por la separación de las diferentes secciones de la página con un montón de espacio en blanco. Eso va a hacer la visita de los usuarios mucho más cómoda, y que tienden a quedarse en nuestro sitio durante más tiempo.
- Legible y de fuentes lo suficientemente grandes: el minimalismo no significa que las fuentes sean pequeñas. Una buena página minimalista debe usar una fuente fácil, como por ejemplo Verdana, en un tamaño lo suficientemente grande como para ser leído sin esfuerzo. Además, el número de tipos de fuente por página debería limitarse a dos o tres: una para los titulares, otra para los contenidos y, posiblemente, el resto para los botones de navegación. Eso es todo. El uso de más fuentes hará ver la página ocupada y poco atractivo.
- Search Engine Optimization: los motores de búsqueda no reconocen las imágenes. Reconocen texto. El texto es la comida favorita de las arañas de los motores de búsqueda. Los motores de búsqueda también tienen problemas con Flash y Javascript. Si desea que sus páginas sean indexadas rápidamente, recuerde tener un diseño minimalista en mente: mantener las cosas simples y reducir en lo posible el uso de Flash, Javascript y la carga de imágenes.
En resumen, un diseño web minimalista requiere:
- Singularidad
- Fácil Navegación
- Simplicidad
- Sencillez con elegancia
- Funcionalidad
- Uso de elementos fundamentales y necesarios
- Pequeño número de formas
- Texturas y colores naturales
- Limpieza y buenos acabados
- A veces el uso de contraste de colores para la estética, o para hacer hincapié en lo que es importante
- El uso de CSS (hojas de estilo en cascada) para hacer las páginas más pequeñas y más rápidas en la carga
- El uso de gráficos sólo cuando sea absolutamente necesario
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.
¿Qué pasa en el mundo?
21 de Noviembre de 2008Si alguna vez te has preguntado que esta pansando en el mundo en estos momentos. Este artículo te interesa, y aunque no sea así, también te puede resultar curiosa la Web que comentaremos a continuación. Es una página realmente espectacular y también dicho sea de paso con un peso, que a la hora de carga se nota, bastante grande. Con esto tambien le dan espectacularidad a la interfície y interacción del usuario, ya que puede ir actualizando los datos poniendo el cursor encima de las diferentes casillas o secciones que tratan cada uno de los datos que tienen en cuenta. También hay una voz en “off”, que va comentando estadísticas o datos en inglés.
Si la pregunta es que tipo de datos podemos encontrar en esta Web tenemos datos tales como:
- Bebés que estan naciendo.
- Correos electrónicos que se estan mandando.
- Palabras más usadas en internet.
- Bosques que se estan talando.
- Gente atrapada en un ascensor.
- Huevos prodcidos.
- Tazas de café producias.
- Vuelos que se estan dando.
- Energía usada en todo el mundo (comparando:petroleo, gas, nuclear,carbon, agua).
- Correos electrónicos de spam recibidos.
- Dinero que se está gastando a través de internet.
- Transplantes realizados (comentando los organos).
- La población del mundo (se ve que no para de crecer).
- Las búsquedas más realizadas en google.
- Coches producidos.
- Casas construidas.
En definitiva muchos datos curiosos que no está mal de visitar para ser consciente del ritmo de muchas cosas a nivel mundial. También puedes ver videos que se estan visionando o música que se está escuchando, a parte de cámaras situadas por todo el mundo que te ofrecen imágenes.
Todo esto adornado con animaciones y unos contadores que van cambiando a un ritmo frenético que pueden dar consciencia de que el mundo no para, y que realmente nuestro entorno es insignificante en comparación con todo lo que se mueve en todo el planeta.
Aquí os dejo el enlace por si tenéis curiosidad de visitar este sitio. Clicka aquí.
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.
Selecciona el tiempo con JQuery
17 de Noviembre de 2008Jquery es una tecnologia que cada vez ofrece mas prestaciones de cara a poder aplicarlas a las páginas web. No sólo ofrece poder tener gestionar eventos de una manera más vistosa, si no que permite tener efectos que realmente llaman la atención del usuario. Pero lo mejor de todo es que se pueden conseguir resultados realmente buenos sin tener que hacer un sobreesfuerzo. Aquí tenemos un ejemplo con el selector de tiempo que se nos ofrece. Si hay algun formulario en el que debes almacenar los datos de tiempo sin tener que preocuparte excesivamente por el control de datos esta es una buena solución. Ya que le das al usuario una interfície con la que los podrá introducir con relativa facilidad. Un proceso escalonado para ir introduciendo las horas y los minutos, manteniendo el fomato correcto de tiempo. Como vemos en la siguiente imagen.
Este proyecto esta echo simplemente por diversión. Como muchos de estos plugins que nos pueden ayudar a tener las aplicaciones cuidadas mas al detalle.
Eso si los usuarios deberán tener claro cuando es AM y cuando es PM.
Para mayor información haz click aquí.
Search Congress Barcelona 2009
14 de Noviembre de 2008Primer Search Congress en Barcelona del 28 al 30 de Enero de 2009 en el Hotel Rey Juan Carlos I y el Palacio de Congresos de Cataluña.
Search congress Barcelona 2009
Search Congress es el primer congreso de buscadores en Barcelona. Un tema único, un formato original, ponencias de calidad y expertos de renombre, todos los ingredientes para ofrecer el conocimiento esencial sobre los buscadores. El evento esta enfocado a los buscadores, seo – sem, y search marketing.
Programa del Search Congress Barcelona 2009
Para conocer más detalles sonbre el evento:
