Añadir jQuery UI al proyecto web

jQuery UI es una librería muy conocida y útil que nos permite añadir de una forma muy sencilla elementos dinámicos a nuestro interface de usuario (la página web).

jQuery UI nos permitirá añadir cuadros de diálogo, selectores, desplegables, botones, animaciones, etc.

Lo único que debemos hacer es añadir la librería javascript

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css" />

y la hoja de estilo

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

en la cabecera de nuestra página web.

Para poder usar esta librería también debemos añadir la librería jQuery a nuestra página web.

La forma más sencilla de encontrar las últimas versiones de estas librerías y hojas de estilo es visitando el blog de jQuery UI.
Allí podremos encontrar enlaces al CDN de Google, al CDN de Microsoft o descargar las últimas versiones de la librería y de las hojas de estilo (hay varias, una para cada combinación de colores).

Muy sencillo.

Usar css media queries

Podemos usar css media queries para detectar el espacio disponible en el navegador del cliente y así cambiar el tamaño de los elementos de nuestra página web (incluso podemos cambiar el tamaño de la letra, por ejemplo) dependiendo del tamaño disponible.

El fichero css será algo así:

@CHARSET "UTF-8";

/* valores por defecto */
.contenedor {
    width: 984px;
    margin: 0 auto;
    position: relative;
}
.header {
    width: 216px;
    position: absolute;
    left: 0px;
}
.nioos {
    margin: 0;
    font-size: 91px;
    font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
    line-height: 147px;
    text-align: center;
}
.subtitle {
    font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
    font-size: 13px;
    line-height: 21px;
    text-align: center;
}
.principal {
    width: 728px;
    position: absolute;
    left: 256px;
}
#mapa {
    width: 100%;
    height: 450px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 13px;
    line-height: 21px;
}
.gs-newsResult {
    height: 168px;
}
.gs-publisher, .gs-publishedDate, .gs-clusterUrl {
    font-size: 11px;
    line-height: 17px;
}
.barra-busqueda {
    width: 100%;
    margin-bottom: 5px;
    position: relative;
}
#direccion {
    width: 645px;
}
.control {
    font-family: "Lucida Console", Monaco, monospace;
    font-size: 13px;
}
#buscando {
    position: absolute;
    left: 625px;
    top: 4px;
    visibility: hidden;
}
#placeAttr {
    width: 100%;
    height: 20px;
    font-family: Arial,sans-serif;
    font-size: 11px;
    text-align: right;
    padding-top: 2px;
}

/* valores para un ancho de navegador de entre 1365px y 1280px */
@media (max-width: 1365px) and (min-width: 1280px) {
    .contenedor {
        width: 1240px;
    }
    .header {
        width: 280px;
    }
    .nioos {
        font-size: 105px;
        line-height: 170px;
    }
    .subtitle {
        font-size: 21px;
        line-height: 34px;
    }
    .principal {
        width: 920px;
        left: 320px;
    }
    #mapa {
        height: 569px;
        font-size: 21px;
        line-height: 34px;
    }
    .gs-newsResult {
        height: 306px;
    }
    #direccion {
        width: 810px;
    }
    .control {
        font-size: 21px;
    }
    #buscando {
        left: 790px;
        top: 7px;
    }
}

/* valores para un ancho de navegador de entre 1439px y 1366px */
@media (max-width: 1439px) and (min-width: 1366px) {
    .contenedor {
        width: 1324px;
    }
    .header {
        width: 301px;
    }
    .nioos {
        font-size: 105px;
        line-height: 170px;
    }
    .subtitle {
        font-size: 21px;
        line-height: 34px;
    }
    .principal {
        width: 983px;
        left: 341px;
    }
    #mapa {
        height: 608px;
        font-size: 21px;
        line-height: 34px;
    }
    .gs-newsResult {
        height: 306px;
    }
    #direccion {
        width: 870px;
    }
    .control {
        font-size: 21px;
    }
    #buscando {
        left: 850px;
        top: 7px;
    }
}

/* valores para un ancho de navegador de entre 1679px y 1440px */
@media (max-width: 1679px) and (min-width: 1440px) {
    .contenedor {
        width: 1400px;
    }
    .header {
        width: 320px;
    }
    .nioos {
        font-size: 126px;
        line-height: 204px;
    }
    .subtitle {
        font-size: 21px;
        line-height: 34px;
    }
    .principal {
        width: 1040px;
        left: 360px;
    }
    #mapa {
        height: 643px;
        font-size: 21px;
        line-height: 34px;
    }
    .gs-newsResult {
        height: 306px;
    }
    #direccion {
        width: 900px;
    }
    .control {
        font-size: 21px;
    }
    #buscando {
        left: 880px;
        top: 7px;
    }
}

/* valores para un ancho de navegador de entre 1919px y 1680px */
@media (max-width: 1919x) and (min-width: 1680px) {
    .contenedor {
        width: 1640px;
    }
    .header {
        width: 380px;
    }
    .nioos {
        font-size: 147px;
        line-height: 238px;
    }
    .subtitle {
        font-size: 21px;
        line-height: 34px;
    }
    .principal {
        width: 1220px;
        left: 420px;
    }
    #mapa {
        height: 754px;
        font-size: 21px;
        line-height: 34px;
    }
    .gs-newsResult {
        height: 306px;
    }
    #direccion {
        width: 1105px;
    }
    .control {
        font-size: 21px;
    }
    #buscando {
        left: 1085px;
        top: 7px;
    }
}

/* valores para un ancho de navegador mayores de 1920px */
@media (min-width: 1920px) {
    .contenedor {
        width: 1880px;
    }
    .header {
        width: 440px;
    }
    .nioos {
        font-size: 168px;
        line-height: 272px;
    }
    .subtitle {
        font-size: 42px;
        line-height: 68px;
    }
    .principal {
        width: 1400px;
        left: 480px;
    }
    #mapa {
        height: 865px;
        font-size: 21px;
        line-height: 34px;
    }
    .gs-newsResult {
        height: 306px;
    }
    #direccion {
        width: 1280px;
    }
    .control {
        font-size: 21px;
    }
    #buscando {
        left: 1260px;
        top: 7px;
    }
}

Para conocer cuales son las resoluciones más habituales, y así construir nuestro fichero css para las resoluciones que consideremos más importantes, podemos visitar las siguientes webs:

http://www.w3schools.com/browsers/browsers_display.asp
http://www.w3schools.com/browsers/browsers_resolution_higher.asp
http://gs.statcounter.com/
http://en.wikipedia.org/wiki/Display_resolution
http://www.screenresolution.org/

También hay que tener en cuenta que ciertos navegadores antiguos (como internet explorer 8 y versiones anteriores) no tienes soporte para media queries de css, por lo que deberemos indicar los valores por defecto del tamaño de los elementos de nuestra página web para estos browsers.

Mostrar y ocultar una imagen de carga con css

Es muy importante mostrar información al usuario sobre lo que está pasando con la página web que está visualizando.

De esta forma es conveniente, por ejemplo, mostrar una pequeña imagen cerca del botón de búsqueda cuando el usuario está esperando a que se devuelvan los resultados.

Hay muchas posibles imagenes que se pueden usar, la que usamos en nuestro ejemplo es una que hemos descargado de Ajaxload - Ajax loading gif generator.

Esta pequeña "ruedecita" se situa en nuestra página mediante el elemento:

<img id="buscando" src="images/ajax-loader.gif" />


Este elemento tiene un estilo css asociado que inicialmente no lo muestra (el elemento está oculto).

#buscando {
    position: absolute;
    left: 790px;
    top: 7px;
    visibility: hidden;
}

Posteriormente, mediante un javascript muy simple, lo mostramos y ocultamos a nuestra conveniencia para informar al usuario de que la página está realizando alguna acción y todavía no ha terminado.

Para mostrar:

document.getElementById("buscando").style.visibility = "visible";


Para ocultar:

document.getElementById("buscando").style.visibility = "hidden";


Es un efecto simple y da una muy buena impresión al usuario de nuestra web.

Usar etiquetas html5 en browsers antiguos

Es posible usar las nuevas etiquetas HTML5 (header, section, hgroup) en browsers antiguos, tales como Internet Explorer 8 y anteriores, mediante el siguiente truco.

1.- Las nuevas etiquetas HTML5 no reconocidas se muestran como si fueran "inline", cuando en realidad deben ser mostradas por el browser en modo "block". Esto es fácil de solucionar con una hoja de estilo especial que incluya las etiquetas HTML5 no reconocidas y las ponga en modo "block".

(fichero ie.css)

header, section, hgroup {
    display: block;
}

2.- El segundo problema surge cuando Internet Explorer no aplica estilos sobre etiquetas no reconocidas. Sin embargo podemos hacer que las "reconozca" mediante un javascript en la cabecera que "defina" esas etiquetas nuevas.

(fichero ie.js)

document.createElement('header');
document.createElement('section');
document.createElement('hgroup');

Finalmente podemos cargar estos nuevos elementos, la hoja de estilo y el fichero javascript, usando otro truco más, esta vez uno própio de Internet Explorer, que no permite, mediante unos comentarios HTML especiales, detectar si la página es ejecutada por un browser Internet Explorer inferior al 9.

<!--[if lt IE 9]>

  <script type="text/javascript" src="ie.js"></script>

  <link rel="stylesheet" href="ie.css" />

<![endif]-->

Por supuesto, también es posible usar directamente html5shiv, que básicamente hace esto mismo.

Facil, ¿verdad?

Añadir un mapa de Google Maps a una página web

Google Maps dispone de un API público que permite añadir un mapa de Google Maps a nuestra página web usando javascript.

Sería algo así:


<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8" />
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
        <title>Demo</title>
    </head>
    <body>
        <div id="mapa" style="width: 500px; height: 500px;"></div>
        <script type="text/javascript">

          var divMapa = document.getElementById("mapa");
          var madrid = new google.maps.LatLng(40.416691, -3.700345);

          var myOptions = {
            zoom: 6,
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          var map = new google.maps.Map(divMapa, myOptions);
          map.setCenter(madrid);
        </script>
    </body>
</html>

La línea
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
importa las API de Google Maps que nos permitiran pintar el mapa.

La línea

<div id="mapa" style="width: 500px; height: 500px;"></div>

define el tamaño del mapa y su posición en nuestra página web.

La línea

var madrid = new google.maps.LatLng(40.416691, -3.700345);

define la latitud y longitud de Madrid, donde posteriormente centraremos el mapa con

map.setCenter(madrid);

La línea

var myOptions = {

  zoom: 6,
  mapTypeId: google.maps.MapTypeId.ROADMAP

};

permite definir los parámetros iniciales del mapa, como el nivel de zoom y el tipo de mapa.

Añadir una hoja de estilo css a un proyecto de eclipse

Para añadir una hoja de estilo css a un proyecto de eclipse lo más cómodo es cambiar a la perspectica "Web".

Después sólo hay que seleccionar el menú

File - New - CSS File

Luego basta con rellenar el diálogo.