Archivo
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>
…
Aspectos generales de capas
Las capas son objetos que se muestran sobre el mapa, que constan de uno o más elementos independientes, que sin embargo se manipulan como una sola unidad. Las capas representan normalmente conjuntos de objetos que se añaden sobre el mapa para designar una asociación común. El API de Google Maps administra la presentación de objetos dentro de las capas mediante la presentación de los elementos que las constituyen en un único objeto (normalmente una superposición de mosaico) y la visualización de los mismos a medida que cambia la ventana gráfica del mapa. Las capas también pueden modificar la capa de presentación del propio mapa, alterando ligeramente los mosaicos base en consonancia con la capa. Ten en cuenta que, por diseño, no se puede acceder a la mayoría de las capas a través de sus objetos individuales y que solo se pueden manipular como una unidad.
Para añadir una capa a un mapa, solo es necesario ejecutar setMap(), transmitiéndole el objeto del mapa en el que se mostrará la capa. De forma similar, para ocultar una capa, ejecuta setMap(), transmitiendo null.
Google Maps API incorpora varios tipos de capas:
- Los objetos
KmlLayerrepresentan elementos KML y GeoRSS en una superposición de mosaico de la versión 3 del API de Google Maps. - Los objetos
FusionTablesLayerrepresentan datos incluidos en GoogleFusion Tables. - El objeto
TrafficLayerrepresenta una capa que muestra las condiciones de tráfico y superposiciones que representan el tráfico. - El objeto
BicyclingLayerrepresenta una capa de rutas para bicicletas o superposiciones específicas de bicicletas en una capa común. Esta capa se devuelve de forma predeterminada enDirectionsRendereral solicitar indicaciones en el modo de viajeBICYCLING.
Los Recortes de Capa
Otra de las opciones que nos permite Photoshop son los recortes de capa.
El objetivo de esta función es crear una intersección entre dos capas para mostrar la resta resultante. Así, por ejemplo, a partir de estas dos capas
Conseguir esta como resultado:
El procedimiento es muy sencillo. Sólo basta con mantener la tecla Alt 
pulsada mientras colocamos el puntero del ratón entre dos capas en la ventana de Capas hasta que tome la forma 
. Entonces haz clic y se creará la máscara de recorte.
Otra forma de hacerlo sería a través del menú Capa → Crear máscara de recorte o pulsando la combinación de teclas Ctrl + G.
Ten siempre en cuenta que lo que estas haciendo es una sustracción, a la capa superior le restaremos la inferior, y esa será la capa resultante.
Ejercicio 13. Crear máscaras de capas
- Crea un nuevo documento en blanco desde Archivo → Nuevo.
- Copia las imágenes mascara1.jpg y mascara2.jpg (en la carpeta de ejercicios) y pégalas en dos capas diferentes en el nuevo documento.
- Colócalas en la posición que quieras que adopten en la composición final.
- Ordena las capas de modo que en la capa superior se encuentre la imagen sobre la que crearemos la transparencia.
- Selecciona la capa superior.
- Pulsa el botón Añadir máscara vectorial
. - Selecciona la herramienta Degradado
y crea un degradado teniendo en cuenta que la zona negra que dibujes con la herramienta Degradado será la transparente.
- Repite el paso anterior hasta estar satisfecho con la transparencia.
- Es aconsejable que mantengas las capas tal y como están en este momento por si más tarde quisieras realizar modificaciones.
Pero si lo que deseas es crear una imagen plana en una sola capa sigue los siguientes pasos:
- Haz clic derecho sobre la miniatura de la máscara y selecciona Aplicar máscara de capa. Ambas, la capa y su máscara se fusionarán.
- Selecciona las dos capas utilizando la tecla
.
- Haz clic en Capas → Combinar capas.
Las Máscaras de Capa
Las máscaras son una solución muy buena a muchos de los retoques que querremos realizar.
Una máscara, en principio, no es más que un delimitador que colocaremos sobre una capa. Este delimitador determinará el nivel de opacidad de la capa sobre la que actúa.
Las máscaras sólo permiten colores pertenecientes a la gama de escala de grises. El color negro en una máscara indica que la capa sobre la que actúa en esa zona será totalmente transparente. Al contrario, una zona blanca en una máscara indicará que la capa afectada mantendrá su opacidad al 100% en esa zona.
De ahí que los diferentes niveles de grises equivalgan a diferentes niveles de opacidad.
Veamos un ejemplo:
Partiendo de dos capas diferentes (Fig. 1) las solapamos (Fig. 2). Aplicamos la máscara con la herramienta Degradado (Fig. 3) para obtener el resultado de la Fig. 4.
Crear Máscaras de Capa
Ya sabemos para qué sirven y cómo actúan las máscaras. Aprendamos, ahora, a crear nuestras máscaras personalizadas.
Crear una máscara es muy sencillo, sólo hay que seguir unos pocos pasos:
| 1. Selecciona en la ventana Capas la capa sobre la que quieres que actúe la máscara. 2. Pulsa el botón Añadir máscaravectorial en la misma ventana. |
 |
La imagen arriba muestra el resultado de seguir estos pasos en la ventana Capas.
Expliquemos el significado de todos los nuevos símbolos:
- Aparece una nueva miniatura a la derecha de la miniatura de la capa. Ésta es la miniatura de la nueva máscara
. En principio la máscara se muestra en blanco, por lo que la capa sobre la que actúa no se ve afectada en su opacidad por ningún cambio. - El recuadro que rodea a la miniatura de la máscara indica sobre dónde estamos aplicando la pintura. Observa que haciendo clic en una de las miniaturas cambiamos su estado, activándolas y permitiendo el uso de pintura sobre ella.
- Podemos alternar entre verter pintura o realizar cambios sobre la capa o la máscara haciendo activa cada vez la que nos interese haciendo clic en su miniatura.
- Por último, el icono de enlazado
bloquea la capa y la máscara uniéndolas. Si movemos una, la otra se moverá con ella. Si las desenlazamos haciendo clic sobre el icono , podremos moverlas independientemente.
A veces es aconsejable el uso de pinceles por su suavizado, esto nos permite crear transiciones de opacidad más fácilmente en los bordes.
Para ayudarnos a crear la capa podemos activa su visibilidad desde la pestaña de Canales, al lado de la pestaña Capas, o desde el menú Ventana → Canales.
Aquí, además de los tres canales de color, encontraremos los canales Alfa y las máscaras de selección y de capa.
Activando el icono de visibilidad 
podemos ver nuestra máscara de capa sobre el lienzo.
Está predefinido que las máscaras se muestren de color rojo y con una opacidad del 50%, pero podríamos cambiar estas propiedades haciendo doble clic sobre su miniatura.
También podemos hacer clic derecho en su miniatura para ver sus opciones:
Las últimas sirven para crear diversas selecciones a partir de la forma de la máscara. Nosotros haremos hincapié sobre las 3 primeras:
- Eliminar máscara de capa elimina la máscara de capa restaurando la capa a su estado original.
- Aplicar máscara de capa fusiona la capa y la máscara dando como resultado una sola capa con los efectos obtenidos.
- También es posible Deshabilitar la máscara de capa para no eliminarla, pero manteniendo sus efectos inactivos.
Diferencias entre Fondo y Capa
En la ventana de capas podemos encontrar dos tipo de elementos, las Capas y el Fondo.
El fondo únicamente aparece si escogiste un color de fondo al crear el nuevo documento de trabajo (.PSD) en vez de dejarlo transparente.
El elemento fondo permanece siempre en último nivel y no puede ser transparente.
Puedes editarlo a nivel de pintura tanto como quieras, pero no podrás aprovechar las características que te ofrecen las capas.
También ocurre que al cargar un archivo de imagen (del tipo .JPG, .GIF, etc.) la imagen se muestra como fondo. Esto es debido a que al no tratarse de un archivo de trabajo de Photoshop, el sistema lo reconoce como una imagen plana y lo define a un solo nivel como fondo.
Para transformar el fondo en una capa y poder trabajar con él en consecuencia, haz doble clic sobre su nombre o escoge Propiedades de Capa en el menú contextual:
Una vez aceptes las opciones, el fondo se habilitará como capa y podrás trabajar con ella como si de una más se tratase.
Bloquear capas
Cuando tengas capas en estados finales, es decir, no vayas a moverlas o modificarlas más, puedes bloquearlas para evitar hacer cambios sobre ellas por error.
Existen diferentes tipos de bloqueos y todos se encuentran en la ventana de Capas.
- El bloqueo de píxeles transparentes
bloquea la edición de estas zonas, no permitiendo añadir pintura en las zonas transparentes. - El bloqueo de píxeles de imagen
deshabilita el uso de cualquier herramienta que pudiese afectar a la pintura de la capa. - El bloqueo de posición
bloquea la capa en el sitio en el que se encuentra. Puedes seguir trabajando con ella, pero no puedes desplazarla mientras siga bloqueada.
Si se pulsa el botón Bloquear todas 
, la capa se bloquea completamente y no es posible realizar ningún cambio sobre ella.
En todos los casos anteriores aparece el símbolo de bloqueo junto al nombre de la capa.
El candado blanco 
indica un bloqueo parcial, mientras que el candado negro indica bloqueo total.
Las Capas Enlazadas
Enlazar es una función que te permite mantener la posición relativa entre 2 o más capas.
Para enlazar dos capas sólo tienes que seleccionar ambas manteniendo la tecla pulsada (para crear selecciones múltiples) y pulsar el botón de Enlazar capas.
Así, si desplazamos alguna de las capas, el resto de capas enlazadas a ella se moverán al unísono.
Puedes enlazar cuantas capas quieras, sólo tendras que crear la selección múltiple y pulsar el botón.
Este icono 
indica que la capa está enlazada a la capa activa del momento.
La selección múltiple de capas nos permite, además, una opción muy útil: el alineamiento.
Observa la barra de opciones de la herramienta Mover 
:
Estos botones permiten alinear o distribuir igualmente las capas en el lienzo.
Además, Photoshop, añade en esta versión unas guías inteligentes que te permiten arrastrar y alienar los objetos utilizando la herramienta Mover.
Para ello, arrastra cualquier capa hacia la que quieras alinear y verás que, cuando pases por uno de sus bordes, la capa que estás moviendo intentará acloplarse para alinearse a ella.
Grupos de Capas
Otra posibilidad de hacer que las capas se desplacen conjuntamente es crear un Grupo de Capas.
Para ello tienes que hacer clic en el botón Crear un grupo nuevo 
en la ventana de Capas.
Esto creará un nuevo conjunto que se representará con el icono de una carpeta.
Ahora, para añadir nuevas capas al grupo, sólo tienes que hacer clic en el botón de Nueva capa 
o arrastrar alguna de las existentes al interior del conjunto.
Es posible crear un conjunto a partir de un conjunto de capas ya existentes. Para ello, enlázalas y luego haz clic en el icono de Crear un grupo nuevo.
La Herramienta Mover
Las capas también pueden desplazarse y moverse para ajustar su posición en el lienzo. Para ello, selecciona la herramienta Mover del panel de herramientas.
Haciendo clic en el lienzo y arrastrando el ratón, verás que la capa activa se desplaza:
Para desplazar otra capa, haz clic sobre ella en la ventana de Capas para activarla.
De todos modos, esta herramienta tiene una opción en la barra de Opciones de herramientas que activa la selección automática 
.
Si esta opción se halla activada, podemos seleccionar una capa con sólo hacer clic encima de un área de pintura de ésta.
En los ejemplos anteriores, si hiciésemos clic sobre la manzana resaltada con la opción activada, la capa activa pasaría a ser la capa Manzana. Si por el contrario, hacemos clic sobre el árbol, la capa Árbol se activará.
La opción Mostrar controles transformación 
habilita la posibilidad de transformar la capa activa. Pero este tema será tratado más adelante.
Las combinaciones de teclado de esta herramienta son sencillas:
1. La tecla Shift 
limita, como hasta ahora, al desplazamiento único horizontal, vertical o en 45 grados.
2. La tecla Alt te permite hacer una copia de la capa a la que haces clic y desplazarla a la vez.
3. La tecla Ctrl actúa como si la Selección automática estuviese activada.
La Visibilidad de las Capas
A veces, para trabajar mejor nos gustaría no ver el resto de las capas y trabajar únicamente con la activa, sin imágenes alrededor o superpuestas que nos molesten.
El icono a la izquierda de la capa nos indica si esta está visible o no.
Ocultar la capa es tan sencillo como hacer clic en el icono de visibilidad y la capa, automáticamente, se hará invisible.
Observa el siguiente ejemplo:
Ten en cuenta que una capa sin visibilidad no puede ser editada, por lo tanto no podrás utilizar ninguna de las herramientas de edición sobre una capa que no se encuentre visible.
Leitmotiv
Dalek-free
Camisetas cargadas de adrenalina. Llénalas de aventura
CursoProgramador 