Archivo
Mi primer mapa con Leaflet
En primer lugar, entro en la web de descarga de Leaflet:
http://leafletjs.com/download.html
Y me descargo la versión estable (en este caso era la Leaflet 1.0.3). Descomprimo el zip en mi directorio de trabajo (en una carpeta llamada js, lógicamente hay que tenerlo todo ordenado).
Si no queremos hacer esto, podemos directamente:
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js">script>Si miramos lo que hemos descargado, vemos que tenemos un fichero con Leaflet minimizado (leaflet.js), otro fichero con las css (leaflet.css), una carpeta con imágenes, un fichero js con el fuente legible de Leaflet (leaflet-src.js).
Por lo tanto, en nuestro head tendremos que poner:
En el body de nuestra página deberemos poner un DIV con ID sobre el que queramos poner un mapa:
Asegúrate que le pones altura en los CSS a este DIV:
#mimapaleaflet{
height:180px;
}
Después del código que inserta el DIV, insertaremos un script javascript para cargar una capa base:
var mymap = L.map('mimapaleaflet').setView([51.505, -0.09], 13);L.map es la clase central de la API. Se usa para crear y manipular el mapa. En el mapa establecemos unas coordeanas de la vista y un nivel de zoom.
A continuación añadimos un mapa base como tile layer, en este caso las imágenes de OSM. Crear un tile layer lleva implícito establecer la URL, el texto con la atribución y el máximo nivel de zoom de la capa:
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © CloudMade',
maxZoom: 18
}).addTo(map);
Añadimos un control de escala:
Y un marcador (un POI), que se podrá mover al establecerlo como draggable.
L.marker([51.50, -0.071],{draggable: true}).addTo(mymap);
El resultado es algo así:
Añadir un popup:
Es simple, únicamente hay que añadir a la sentencia de creación del marcador:
.bindPopup(«<b>Hello world!</b><br>I am a popup.»);
Con esto añadimos un popup que, aparece al hacer clic sobre el marcador y desaparece al hacer clic sobre otro marcador.
.
Carga asíncrona de una página en un DIV en jQuery
Bueno, en realidad no tiene por qué ser un div, sería la carga de una página en un elemento del DOM con jQuery.
Es algo muy sencillo, para ir empezando con jQuery.
En primer lugar en el HEAD incluimos jQuery:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
y también tendremos que cargar la página en el elemento que queramos:
<!-- Para cargar en el DIV "capa" la página correspondiente -->
<script>
$(document).ready(function(){
$("#capa").load("pagina.php");
});
</script>
Por último, en el BODY, en el lugar que queramos, incluimos el DIV:
<div id="capa"></div>
jQueryUI Tabs
Voy a utilizar unos paneles con jQuery que me van a servir a modo de pestañas o tabs.
La fuente de todo esto la encontramos en la página de jQueryUI.
Primero tenemos que insertar en nuestro HEAD las siguientes líneas:
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <script> $(function() { $( "#tabs" ).tabs(); }); </script>
Ya dentro del BODY debemos tener una DIV con ID tabs.
Dentro de esta capa, primero una UL con tantas LI como pestañas queramos tener. En estas LI debemos tener un enlace (A) cuyo href haga referencia al ID de la DIV que más abajo queramos cargar.
Después de esta UL pondremos todas las DIV con sus IDs correspondientes.
El código sería algo como:
<div id="tabs"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> <li><a href="#tabs-2">Proin dolor</a></li> <li><a href="#tabs-3">Aenean lacinia</a></li> </ul> <div id="tabs-1"> <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> </div> <div id="tabs-2"> <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p> </div> <div id="tabs-3"> <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p> <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p> </div></div>
El resultado puede ser algo así:
Sombras en CSS3
Tan simple como cogerte cualquier DIV o cualquier elemento cuyo display esté a block. Quieres ponerle una sombra. Gracias a CSS3 ahora es más simple:
El atributo box-shadow
Ejemplo:
box-shadow: 5px 3px 3px #000;
Con esto conseguimos una sombra difuminada negra a la derecha y abajo de nuestra caja.
Por orden de aparición, los valores que se indican en box-shadow son:
Desplazamiento horizontal de la sombra
Desplazamiento vertical de la sombra
Difuminado
Color de la sombra
Como siempre, recuerda que esto es CSS3, a tu navegador Internet Explorer 8 le van a dar arcadas.
Más semántica en HTML5. Nuevas etiquetas
Aparecen en HTML5 unas cuantas etiquetas semánticas que se utilizarán en lugar de DIV. No significa que hayamos acabado con los DIV, simplemente los utilizaremos cuando realmente queramos crear una capa con unos objetivos nos previstos para los siguientes.
Ahora, en lugar de escribir:
<div id=»cabecera»> Contenido de la cabecera </div>escribiremos:
<header> Contenido de la cabecera </header>
Algunas de estas nuevas etiquetas son:
<header>
Cabecera
<hgroup>
El SEO nos dice que debemos tener un H1 único en nuestra página. Para poder poner un segundo H1 en la cabecera y que no afecte al SEO utilizaremos hgroup
<nav>
Para poner el menú principal (normalmente puesto mediante un UL interior). Sólo un NAV por página
<section>
Define un área de contenido única dentro del sitio. Por ejemplo, la sección de noticias de una página.
<article>
Define zonas únicas de contenido independiente. Imagina un artículo es un post de un blog.
<aside>
Cualquier contenido que no esté relacionado con el objetivo principal de la página. Lo usaremos para los laterales, por ejemplo.
<footer>
Es el pie de página
Estructura básica semántica en HTML5
<header>
<hgroup>
<h1>Otro blog de @guirado_</h1>
<h2>Blog de programación de Pedro Guirado</h2>
</hgroup>
</header>
<nav>
<ul>
<li><a href="#">Menú 1</a></li>
<li><a href="#">Menú 2</a></li>
</ul>
<section>
<article>Aquí va un post, con su título en h2</article>
<article>Aquí va un post, con su título en h2</article>
<article>Aquí va un post, con su título en h2</article>
</section>
<aside>
Barra lateral, por ejemplo un widget de Twitter.
</aside>
<footer>
Pie de página, copyright, etc.
</footer>
Toda la información actualizada se puede encontrar aquí:
http://www.w3schools.com/html/html5_new_elements.asp
Etiquetas deprecadas
No serán ya válidas las siguientes etiquetas en HTML5:
- <acronym>
- <applet>
- <basefont>
- <big>
- <center>
- <dir>
- <font>
- <frame>
- <frameset>
- <noframes>
- <strike>
- <tt>
La Ley de Cookies
Bueno, pues otra tontería que tenemos que actualizar. El rollo de las cookies.
En el BOE publicado el pasado 31 de marzo se detalla el Real Decreto-ley 13/2012, de 30 de marzo, por el que se transponen directivas en materia de mercados interiores de electricidad y gas y en materia de comunicaciones electrónicas, y por el que se adoptan medidas para la corrección de las desviaciones por desajustes entre los costes e ingresos de los sectores eléctrico y gasista
«Todos los sitios web deben ofrecer de forma clara y completa métodos para que el usuario de su consentimiento expreso para almacenar datos sobre su navegación en el sitio, a no ser que éste ya haya dado su consentimiento mediante opciones en el navegador que esté utilizando».
Qué es todo esto??
¿No os suena ese típico mensajito que sale ahora contínuamente en las webs informando sobre que usan cookies, que lo Aceptemos o que podemos ver más información?
Así que ya sabes, a poner una capita (DIV) en tu página con un formulario para que el usuario tenga más información y pueda pulsar Aceptar.
Otra solución: Quitar las cookies, a tomar por saco.
Más información en el PDF a continuación:
Guía sobre el uso de las cookies
…
Ejercicio web completa
Intentaremos hacer una web parecida a la siguiente:
Puedes utilizar el siguiente esqueleto:
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="pagina.css"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript" src="mimapa.js"></script>
<!-- La anterior línea la sustituiríamos por un include de PHP
si los mapas de Google Maps API 3 van a leer de MySQL -->
</head>
<body> <!-- Si utilizamos Google Maps hay que poner onload="inicializar() dentro de la etiqueta body"-->
<div id="principal">
<div id="banner">
<?php
include ("banner.inc");
?>
</div>
<div id="menu">
<?php
include("menu.inc");
?>
</div>
<div id="content">
<div id="contenido">
<?php
include("paginaprincipal.php");
?>
</div>
<div id="mapa">
<?php
include("mapaderecha.php");
?>
</div>
</div>
<div id="pie">
<?php
include("pie.inc");
?>
</div>
</div>
</body>
</html>
Continuamos desarrollando. Para ver como va quedando todo, creamos un fichero de CSS que nos muestre el aspecto de las capas, luego cambiaremos los colores:
PAGINA.CSS
*{
margin-top:0px;
margin-bottom:0px;
padding-top:0px;
padding-bottom:0px;
}
body {
text-align:center;
margin: 0 auto;
padding:0px;
background: #999999;
}
#principal{
text-align:left;
margin: 0 auto;
padding:0px;
background: white;
width: 850px;
}
#banner{
background: url('imagenes/desert.jpg') orange;
height: 150px;
}
#menu{
background: green;
}
#content{
width:100%;
float:left;
min-height: 500px;
background:white;
}
#contenido{
background: blue;
width:650px;
float:left;
min-height: 500px;
}
#mapa{
background: yellow;
width:200px;
float:right;
}
#pie{
background: red;
}
/* ***************** CSS PARA MAPA DE CONTACTOS ************************ */
#map_canvas{
margin: 0 auto;
padding: 0 auto;
width:200px;
height:400px;
}
#mapa h1{
color:red;
font-size: 18px;
text-align: center;
}
Esquema del sitio
MENU.INC
<ul>
<li><a href=»#»>Nuevo contacto</a></li>
<li><a href=»paginalistado.php»>Listado</a></li>
<li><a href=»#»>Borrar</a></li>
<li><a href=»#»>Búsqueda</a></li>
</ul>
PAGINAPRINCIPAL.PHP
<h1>Contenido principal</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
BANNER.INC
<h1>Mi página personal</h1>
PIE.INC
<ul> <li><a href="#">Contacto</a></li> <li><a href="#">Como llegar</a></li> <li><a href="#">Copy right</a></li> </ul>
MAPADERECHA.PHP
<h1>Mapa de mis contactos</h1> <div id="map_canvas"> </div>
MAPA.INC
<script type="text/javascript">
function inicializar(){
var ventana;
var latitudlongitud = new google.maps.LatLng(37.206167,-3.614254);
var opciones = {
zoom: 12,
center: latitudlongitud,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapa = new google.maps.Map(document.getElementById("map_canvas"),opciones);
<?php
// Conecta con BD y ejecutar consulta
// Conectar con el Servidor
$link = mysql_connect("localhost", "root", "acrear2012") or die ("No puedo conectarme con el servidor");
// Usar la BD
mysql_select_db("agenda",$link) or die ("No puedo abrir la BD");
// Hacer la consulta
$consulta= "SELECT * FROM agenda"; // Consulta por defecto
$resultado = mysql_query($consulta, $link) or die ("No puedo ejecutar la consulta");
// Voy leyendo fila a fila
while ($fila = mysql_fetch_array($resultado)){
$latitud=$fila['X'];
$longitud=$fila['Y'];
$id=$fila['id'];
$nombrecompleto= $fila['nombre'].' '.$fila['apellido1'].' '.$fila['apellido2'];
$direccion=$fila['direccion'];
$provincia=$fila['provincia'];
$telefono=$fila['telefono'];
$correo=$fila['email'];
$fecha=$fila['fechanacimiento'];
echo "var coordenadas = new google.maps.LatLng($latitud,$longitud);
var marcador$id = new google.maps.Marker({
position: coordenadas,
map: mapa,
title: '$nombrecompleto',
icon: 'imagenes/statue-2.png'
});
var cadena$id='<div>'
+'<h1>$nombrecompleto</h1>'
+'<p>$direccion ($provincia)</p>'
+'<p>Teléfono: $telefono</p>'
+'<p>email: $correo</p>'
+'<p>Fecha de nacimiento: $fecha</p>'
+'<p><img src=\"imagenes/pepito.jpg\" alt=\"foto de pepito\" width=50px/></p>'
+'</div>';
google.maps.event.addListener(marcador$id, 'click', function() {
if (ventana) ventana.close();
ventana = new google.maps.InfoWindow({content: cadena$id});
ventana.open(mapa,marcador$id);
});
";
}
mysql_close($link);
?>
}
</script>
PAGINALISTADO.PHP
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="pagina.css"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<?php
include("mapa.inc");
?>
<!-- <script type="text/javascript" src="mimapa.js"></script>
La anterior línea la sustituiríamos por un include de PHP
si los mapas de Google Maps API 3 van a leer de MySQL -->
</head>
<body onload="inicializar()"> <!-- Si utilizamos Google Maps hay que poner onload="inicializar() dentro de la etiqueta body"-->
<div id="principal">
<div id="banner">
<?php
include ("banner.inc");
?>
</div>
<div id="menu">
<?php
include("menu.inc");
?>
</div>
<div id="content">
<div id="contenido">
<?php
include("provincia.inc");
?>
</div>
<div id="mapa">
<?php
include("mapaderecha.php");
?>
</div>
</div>
<div id="pie">
<?php
include("pie.inc");
?>
</div>
</div>
</body>
</html>
PROVINCIA.INC
<SCRIPT LANGUAGE=’JavaScript’>
<!–
function actualizaPagina ()
{
i = document.forms.formulario.prov.selectedIndex;
categoria = document.forms.formulario.prov.options[i].value;
window.location = ‘paginalistado.php?prov=’ + categoria;
}
// –>
</SCRIPT>
<h1>Todos mis contactos</h1>
<form name=»formulario» action=»paginalistado.php» method=»get»>
Mostrar contactos por provincia:
<select name=»prov» onchange=’actualizaPagina()’>
<?php
if (!isset($_GET[‘prov’])){ // Si yo he escrito listadoporprovincia.php sin parámetros
echo «<option value=’Todas’ selected>Todas</option>»;
}
elseif ($_GET[‘prov’]==»Todas»){
echo «<option value=’Todas’ selected>Todas</option>»;
}
else{
echo «<option value=’Todas’>Todas</option>»;
}
// Conectar con el Servidor
$link = mysql_connect(«localhost», «root», «acrear2012»)
or die («No puedo conectarme con el servidor»);
// Usar la BD
mysql_select_db(«agenda»,$link)
or die («No puedo abrir la BD»);
// Hacer la consulta
$consulta= «SELECT provincia FROM agenda GROUP BY provincia»;
$resultado = mysql_query($consulta, $link)
or die («No puedo ejecutar la consulta»);
// Voy leyendo fila a fila
while ($fila = mysql_fetch_array($resultado)){
echo «<option value='».$fila[‘provincia’].»‘»;
if (isset($_GET[‘prov’]))
if ($_GET[‘prov’]==$fila[‘provincia’])
echo » selected»;
echo «>».$fila[‘provincia’].»</option>\n»;
}
mysql_close($link);
?>
</select>
</form>
<table>
<tr>
<th>NOMBRE</th><th>DIRECCIÓN</th><th>TELÉFONO</th><th>EMAIL</th><th>PROVINCIA</th>
</tr>
<?php
// Conectar con el Servidor
$link = mysql_connect(«localhost», «root», «acrear2012»)
or die («No puedo conectarme con el servidor»);
// Usar la BD
mysql_select_db(«agenda»,$link)
or die («No puedo abrir la BD»);
// Hacer la consulta
if (!isset($_GET[‘prov’]))
$consulta= «SELECT * FROM agenda»;
elseif ($_GET[‘prov’]==»Todas»)
$consulta= «SELECT * FROM agenda»;
else
$consulta=»SELECT * FROM agenda WHERE provincia='».$_GET[‘prov’].»‘»;
$resultado = mysql_query($consulta, $link)
or die («No puedo ejecutar la consulta»);
// Voy leyendo fila a fila
$i=0;
while ($fila = mysql_fetch_array($resultado)){
if ($i%2==0){
echo «<tr>»;
}
else{
echo «<tr id=’naranja’>»;
}
$i++;
// Celda del Nombre completo = Nombre + Apellido1 + Apellido2
echo «<td>».$fila[‘nombre’].» «.$fila[‘apellido1’].» «.$fila[‘apellido2’].»</td>»;
// Celda de la dirección
echo «<td>».$fila[‘direccion’].»</td>»;
// Celda del teléfono
echo «<td>».$fila[‘telefono’].»</td>»;
// Celda del email
echo «<td>».$fila[‘email’].»</td>»;
echo «<td>».$fila[‘provincia’].»</td>»;
echo «</tr>\n»;
}
mysql_close($link); // Cerrar la conexión
?>
</table>
…
Construyendo un sitio con HTML y CSS
Primero vamos a construir la siguiente página dentro de una capa centrada de 980px:
La capa NOTICIAS y DONDE tienen 200px de ancho.
El código necesario para construirlo sería:
sitio1.html
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>HTML</title> <link rel="stylesheet" type="text/css" href="sitio.css" /> </head> <body> <div id="todo"> <div id="banner"><h1>BANNER</h1></div> <div id="menu"><h1>MENU</h1></div> <div id="derecha"> <div id="noticias"> <h1>NOTICIAS</h1> <ul> <li>Sube la prima de riesgo</li> <li>Baja la prima de riesgo</li> <li>Prohibida la prima de riesgo</li> </ul> </div> <div id="donde"> <h1>Dónde Estamos</h1> </div> </div> <div id="usabilidad"><h1>USABILIDAD</h1></div> <div id="contenido"><h1>CONTENIDO</h1></div> <div id="pie"><h1>PIE</h1></div> </div> </body> </html>
sitio.css
*{
margin:0px; /*No aparezcan huecos "indeseados" */
}
body {
margin: 0px auto; /* Para centrar el contenido */
text-align: center; /* Para centrar el contenido */
background:#ddd;
}
#todo{
text-align: left;
background: #7092BE;
margin: 0px auto; /* Para centrar el contenido */
width: 980px; /* Ancho de la página */
min-height: 550px; /* Altura mínima de la página */
}
#banner{
background: #B97A57;
height: 100px;
}
#menu{
background: #3F48CC;
height: 50px;
}
#noticias{
min-height:200px;
background: #FFAEC9;
}
#noticias h1{
text-align:center;
font-size:20px;
margin-bottom: 10px;
}
#noticias ul{
border-top: #000 solid 1px;
list-style-type: none;
margin-left:10px;
padding-left:0px;
margin-right:10px;
}
#noticias li{
margin-bottom:10px;
padding-bottom:10px;
line-height:30px;
border-bottom: #000 dashed 1px;
}
#donde{
background: red;
min-height:200px;
}
#donde h1{
text-decoration: underline;
font-size: 18px;
text-align:center;
padding-top: 10px;
margin-bottom:3px;
}
#donde iframe{
text-align: center;
margin-right:0px;
margin-left:10px;
}
#usabilidad{
background: black;
color: white;
}
#contenido{
background: #7092BE;
min-height: 360px
}
#pie{
position:absolute;
top: 550px;
width:980px;
float:none;
background: green;
}
#derecha{
float:right;
width:200px;
}
Y obtenemos la siguiente página:
Imágenes para Menú:
Construimos un menú:
HTML: <body> <div id="todo"> <div id="banner"><h1>BANNER</h1></div> <div id="menu"> <ul id="menuh"> <li id="casa"><a href="sitio1.html"> </a></li> <li><a href="arquitectura.html">Arquitectura</a></li> <li><a href="metodologia.html">Metodología</a></li> <li><a href="lenguajes.html">Lenguajes</a></li> <li><a href="redes.html">Redes y Multimedia</a></li> </ul> </div> <div id="derecha"> <div id="noticias"> <h1>NOTICIAS</h1> <ul> <li>Sube la prima de riesgo</li> <li>Baja la prima de riesgo</li> <li>Prohibida la prima de riesgo</li> <li>Seguimos sin medallas</li> </ul> </div> <div id="donde"> <h1>Dónde Estamos</h1> </div> </div> <div id="usabilidad"> <p><a href="sitio1.html">Inicio</a></p> </div> <div id="contenido"><h1>CONTENIDO</h1></div> <div id="pie"><h1>PIE</h1></div> </div> </body> </html>
CSS:
*{
margin:0px; /*No aparezcan huecos "indeseados" */
}
body {
margin: 0px auto; /* Para centrar el contenido */
text-align: center; /* Para centrar el contenido */
background:#ddd;
}
#todo{
text-align: left;
background: #7092BE;
margin: 0px auto; /* Para centrar el contenido */
width: 980px; /* Ancho de la página */
min-height: 550px; /* Altura mínima de la página */
}
#banner{
background: #B97A57;
height: 100px;
}
#menu{
background: #3F48CC;
height: 50px;
}
#noticias{
height:200px;
background: #FFAEC9;
overflow: auto;
}
#noticias h1{
text-align:center;
font-size:20px;
margin-bottom: 10px;
}
#noticias ul{
border-top: #000 solid 1px;
list-style-type: none;
margin-left:10px;
padding-left:0px;
margin-right:10px;
}
#noticias li{
margin-bottom:10px;
padding-bottom:10px;
line-height:30px;
border-bottom: #000 dashed 1px;
}
#donde{
background: red;
min-height:200px;
}
#donde h1{
text-decoration: underline;
font-size: 18px;
text-align:center;
padding-top: 10px;
margin-bottom:3px;
}
#donde iframe{
text-align: center;
margin-right:0px;
margin-left:10px;
}
#usabilidad{
background: black;
color: white;
padding-left: 15px;
}
#usabilidad a{
color:white;
text-decoration: none;
}
#usabilidad a:hover{
text-decoration: underline;
}
#contenido{
background: #7092BE;
min-height: 360px
}
#pie{
position:absolute;
top: 550px;
width:980px;
float:none;
background: green;
}
#derecha{
float:right;
width:200px;
}
#menuh{
list-style-type: none;
}
#menuh li{
float: left;
}
#menuh li a{
display: block;
background: white;
padding: 13px 20px;
border: solid 1px blue;
text-decoration: none;
font-family: Arial;
font-size: 17px;
}
#menuh li a:hover{
background:blue;
color:white;
border:solid 1px white;
}
#menuh #casa a{
background: url("casitaa.png") no-repeat white;
}
#menuh #casa a:hover{
background: url("casitab.png") no-repeat blue;
}
Modificamos el pie y añadimos una imagen de fondo al Banner:
HTML:
<body> <div id="todo"> <div id="banner"><h1>BANNER</h1></div> <div id="menu"> <ul id="menuh"> <li id="casa"><a href="sitio1.html"> </a></li> <li><a href="arquitectura.html">Arquitectura</a></li> <li><a href="metodologia.html">Metodología</a></li> <li><a href="lenguajes.html">Lenguajes</a></li> <li><a href="redes.html">Redes y Multimedia</a></li> </ul> </div> <div id="derecha"> <div id="noticias"> <h1>NOTICIAS</h1> <ul> <li>Sube la prima de riesgo</li> <li>Baja la prima de riesgo</li> <li>Prohibida la prima de riesgo</li> <li>Seguimos sin medallas</li> </ul> </div> <div id="donde"> <h1>Dónde Estamos</h1> </div> </div> <div id="usabilidad"> <p><a href="sitio1.html">Inicio</a></p> </div> <div id="contenido"><h1>CONTENIDO</h1></div> <div id="pie"> <ul> <li>Curso Programador <br/>2012 </li> <li id="centro"><a href="mailto:pepito@hotmail.com">Contacto</a></li> <li id="wai"><a href="http://www.w3.org/WAI/WCAG1AA-Conformance" title="Explicación del Nivel Doble-A de Conformidad"> <img height="32" width="88" src="http://www.w3.org/WAI/wcag1AA" alt="Icono de conformidad con el Nivel Doble-A, de las Directrices de Accesibilidad para el Contenido Web 1.0 del W3C-WAI"></a> </li> </ul> </div> </div> </body> </html>
CSS:
*{
margin:0px; /*No aparezcan huecos "indeseados" */
}
body {
margin: 0px auto; /* Para centrar el contenido */
text-align: center; /* Para centrar el contenido */
background:#ddd;
}
#todo{
text-align: left;
background: #7092BE;
margin: 0px auto; /* Para centrar el contenido */
width: 980px; /* Ancho de la página */
min-height: 550px; /* Altura mínima de la página */
}
#banner{
background: url("banner.jpg") #B97A57;
height: 100px;
}
#menu{
background: #3F48CC;
height: 50px;
}
#noticias{
height:200px;
background: #FFAEC9;
overflow: auto;
}
#noticias h1{
text-align:center;
font-size:20px;
margin-bottom: 10px;
}
#noticias ul{
border-top: #000 solid 1px;
list-style-type: none;
margin-left:10px;
padding-left:0px;
margin-right:10px;
}
#noticias li{
margin-bottom:10px;
padding-bottom:10px;
line-height:30px;
border-bottom: #000 dashed 1px;
}
#donde{
background: red;
min-height:200px;
}
#donde h1{
text-decoration: underline;
font-size: 18px;
text-align:center;
padding-top: 10px;
margin-bottom:3px;
}
#donde iframe{
text-align: center;
margin-right:0px;
margin-left:10px;
}
#usabilidad{
background: black;
color: white;
padding-left: 15px;
}
#usabilidad a{
color:white;
text-decoration: none;
}
#usabilidad a:hover{
text-decoration: underline;
}
#contenido{
background: #7092BE;
min-height: 360px
}
#pie{
position:absolute;
top: 550px;
width:980px;
float:none;
background: green;
}
#pie ul{
list-style-type: none;
padding-left: 10px;
}
#pie ul li{
float:left;
width: 33%;
}
#pie ul li#centro{
text-align:center;
padding-top: 9px;
}
#pie ul li#centro a{
text-decoration:none;
background: white;
font-style: italic;
font-weight: bold;
border-radius: 5px;
}
#pie ul li#centro a:hover{
background:black;
color:white;
}
#pie ul li#wai{
padding-top: 3px;
text-align:right;
}
#derecha{
float:right;
width:200px;
}
#menuh{
list-style-type: none;
}
#menuh li{
float: left;
}
#menuh li a{
display: block;
background: white;
padding: 13px 20px;
border: solid 1px blue;
text-decoration: none;
font-family: Arial;
font-size: 17px;
}
#menuh li a:hover{
background:blue;
color:white;
border:solid 1px white;
}
#menuh #casa a{
background: url("casitaa.png") no-repeat white;
}
#menuh #casa a:hover{
background: url("casitab.png") no-repeat blue;
}
Ya está construida la plantilla. Ahora duplicamos el fichero para generar:
- arquitectura.html
- lenguajes.html
- redes.html
- metodologia.html
Modificamos el código HTML de cada uno de ellos, pero sólo las capas USABILIDAD y CONTENIDO.
—-
Leitmotiv
Dalek-free
Camisetas cargadas de adrenalina. Llénalas de aventura
CursoProgramador 