Con CSS y un poco de HTML e imaginacin podemos crear cosas

sorprendentes; una de estas cosas es lo posibilidad de crear formas

geomtricas como veremos a continuacin.

Cuadrado
El ms simple de todas las formas geomtricas; el cuadrado la
podemos crear de la siguiente forma:
Cdigo CSS:
.Cuadrado {
width: 100px;
height: 100px;
background: #08B;
}

Cdigo HTML:
<div class="Cuadrado"></div>

Resultado:
Por definicin un cuadrado tiene sus cuatro lados iguales, por lo tanto
el ancho (width) debe ser igual al alto (height).

Rectngulo
El rectngulo es otra forma geomtrica bastante fcil de crear;
veamos:
Cdigo CSS:
.Rectangulo {
width: 100px;
height: 200px;
background: #08B;
}

Cdigo HTML:
<div class="Rectangulo"></div>

Resultado:
Cambiando la anchura (width) o altura (height) para variar la forma
del rectngulo.

Tringulo
El tringulo no es tan evidente como los casos anteriores; sin embargo
es muy fcil de crear:
Cdigo CSS:
.Triangulo {
width: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #08B;
}

Cdigo HTML:
<div class="Triangulo"></div>

Resultado:
Cmo funciona la regla CSS anterior? Border-left y Borderright Indican las dimensiones del borde izquierdo y derecho
respectivamente; el truco aqu est en colocar el color del borde
transparente (transparent) para que no se muestre dicho borde dando
as la forma de tringulo al div.
Si queremos que el tringulo apunte hacia abajo utilizaremos Bordertop en vez de Border-bottom:
Cdigo CSS:
.Triangulo_2 {
width: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #08B;
}

Cdigo HTML:
<div class="Triangulo_2"></div>

Resultado:
Podemos obtener diversas formas del tringulo cambiando los valores
del Border-left y Border-right; si por ejemplo queremos obtener un
tringulo rectngulo podramos hacer lo siguiente:
Cdigo CSS:
.Triangulo_rectangulo {
width: 0;
border-right: 100px solid transparent;
border-bottom: 100px solid #08B;
}

Cdigo HTML:
<div class="Triangulo_rectangulo"></div>

Resultado:
Le hemos quitamos el borde izquierdo para as crear un
tringulo rectngulo.

Crculo
Podemos crear crculos fcilmente con CSS usando la
propiedad border-radius y asignndole un valor del 50%:
Codigo CSS:
.Circulo {
border-radius:50%;
width: 100px;
height: 100px;
background: #08B;
}

Cdigo HTML:
<div class="Circulo"></div>

Resultado:

Ovalo
Como en el caso de los rectngulos; para crear un valo solo
debemos de variar la anchura (width) o la altura (height); es decir el
ancho debe ser distinto de la altura:
Cdigo CSS:
.Ovalo {
border-radius:50%;
width: 200px;
height: 100px;
background: #08B;
}

Cdigo HTML:
<div class="Ovalo"></div>

Resultado:

Trapecio
El trapecio es muy parecido a como creamos los tringulos, pero
tiene como diferencia que aqu la anchura (width) es distinto de cero:
Cdigo CSS:
.Trapecio {
width: 80px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #08B;
}

Cdigo HTML:
<div class="Trapecio"></div>

Resultado:

Conclusiones

Como vimos en este tutorial es realmente fcil crear formas

geomtricas evitando as el uso de imgenes; si queremos
crear formas geomtricas como estas o alguna otra debemos
recordar que la consola JavaScript es una gran aliada para realizar
esta labor y muchas otras ms.
Diseo REsponsive

Un o de los grandes retos para los diseadores web es lograr adaptar

las aplicaciones web para que se visualice correctamente en la

inmensa cantidad de dispositivos que cuentan con un
navegador web incorporado; ustedes se podrian preguntar porque es
esto tan importante?, la respuesta a esta pregunta reside en el hecho
de que el trfico mvil engulle ms del 17% y se prev que esta cifra
seguir en aumento.
El diseo web responsivo nos permite adaptar nuestras
aplicaciones web a distintos tamaos de pantalla (PC, tablet, telfonos
inteligentes, televisores, etc) aplicando solo CSS (o casi todo); sin la
necesidad de crear una pgina para cada dispositivo o tamao de
pantalla.
Bsicamente debemos de adaptar todo el contenido en una
pagina web para que se vea "bien" en todos los dispositivos, sin que
aparezca el muy molesta scroll horizontal; es decir se reajusta el
contenido de toda la pgina web.
En esta tcnica utilizamos principalmente los media queries y
tamaos de los elementos en porcentajes, todo con CSS (o casi todo);
los media queries nos permite activar y desactivar secciones del CSS
segn el tamao de pantalla; nos permite definir nuevos estilos al sitio
para ajustarse a las diferentes resoluciones de pantalla:
1.
2.
3.
4.

@media screen and (max-width: 1024px) {

/* ventanas de menos de 1024px */
}
@media screen and (max-width: 480px) {

5.
6.
7.
8.
9.

/* ventanas de menos de 480px */

}
@media screen and (max-width: 320px) {
/* ventanas de menos de 320px */
}

Geolocalizacin y Google Maps

Para poder utilizar Google Maps debemos de seguir los siguientes

pasos.

1
Obtener la ubicacin del usuario, tema ya explicado en el
artculo pasadoGeolocalizacin con JavaScript:

1.
2.
3.
4.

myLatlng = {
Lat: position.coords.latitude,
Lng: position.coords.longitude
}

2
Incluimos un enlace al API de Google Maps en nuestro
documento HTML para poder utilizarla:

1.

<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

3
Luego incluimos el lienzo (canvas) en donde se dibujara el
mapa:

1.

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

Ntese que el mapa puede ser de distintos tamaos; para efectos de

este ejemplo ser de 500px X 500px.

4
El penltimo paso consiste en construir el objeto utilizado
para la manipulacin de las opciones del mapa:

1.
2.
3.
4.
5.

var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(myLatlng.Lat, myLatlng.Lng),
mapTypeId: google.maps.MapTypeId.ROADMAP
};

Tipos de mapas que se encuentran disponibles en el API de Google

Maps:
o MapTypeId.ROADMAP muestra la vista de mapa de carretera
predeterminada.
o MapTypeId.SATELLITE muestra imgenes de satlite de Google
Earth.
o MapTypeId.HYBRID muestra una mezcla de vistas normales y de
satlite.
o MapTypeId.TERRAIN muestra un mapa fsico basado en
informacin del relieve.
Los niveles de zoom posibles oscilan entre 0 y 21 para el ms lejano.

5
El ltimo paso consiste en construir el mapa:
var map = new
google.maps.Map(document.getElementById("map_canvas"),
2.
mapOptions);
1.

Construyendo nuestro mapa bsico

1+2+3+4+5
Ahora veamos todos los pasos en conjunto:

Conclusin
Aqu podemos ver un ampliacin de nuestro artculo
pasado: Geolocalizacin con JavaScriptutilizando las mismas bases
explicadas; pero esta vez utilizando la API de Google Maps para
mostrar la ubicacin del usuario.