Archivo
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>
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>
…
Ejercicio 16 CSS. Menú de dos niveles.
Hay que hacer una página como la siguiente:
Cada uno de los menús tiene un submenú que es una lista de dos elementos: «Nested Item».
El texto es:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis eu leo. Pellentesque massa. Phasellus ut sem luctus arcu ullamcorper aliquet. Mauris turpis turpis, posuere non, cursus a, blandit vel, massa. Nunc nisl urna, sodales quis, consectetuer nec, rutrum quis, orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Vivamus malesuada. Vestibulum ornare erat nec orci. Ut in ipsum. Praesent mi. Donec commodo nisl vel lectus. Proin volutpat, lectus eu elementum porta, libero metus feugiat ante, in pretium augue velit id tortor. Ut dictum, nulla ut hendrerit posuere, dui dolor consectetuer ipsum, non molestie mauris ante id purus.
Las imágenes PNG (flechas):
Menú de dos niveles con CSS
Vamos a crear un menú como el siguiente:
Ver funcionando el menú.
Código HTML:
<ul id="nav"> <li><span>Menu 1</span> <ul> <li><a href="#">Menu item 1</a></li> <li><a href="#">Menu item 2</a></li> <li><a href="#">Menu item 3</a></li> </ul> </li> <li><span>Menu 2</span> <ul> <li><a href="#">Menu item 1</a></li> <li><a href="#">Menu item 2</a></li> <li><a href="#">Menu item 3</a></li> </ul> </li> <li><span>Menu 3</span> <ul> <li><a href="#">Menu item 1</a></li> <li><a href="#">Menu item 2</a></li> <li><a href="#">Menu item 3</a></li> </ul> </li> </ul>
Código CSS:
#nav {
margin:0px;
padding:0px;
position:absolute;
top: 30px;
display:block;
}
#nav > li {
list-style-type:none;
float:left;
display:block;
margin:0px 10px;
position:relative;
padding:10px;
width:150px;
}
#nav > li:hover ul {
display:block;
}
#nav > li:hover {
background-color:#808080;
}
#nav li ul {
margin:0px;
padding:0px;
display:none;
}
#nav li ul li {
list-style-type:none;
margin:10px 0 0 0;
}
#nav li ul li a {
display:block;
padding:5px 10px;
color:#A2E200;
text-decoration:none;
}
#nav li ul li:hover a {
background-color:#606060;
}
#nav li span { cursor:pointer;
margin:0px 10px;
font-weight:bold;
}
…
Truco 4 CSS. Navegación rotada
Construye el siguiente menú:
Utiliza las siguientes CSS:
#list8 { }
#list8 ul { list-style:none; }
#list8 ul li { font-family:Georgia,serif,Times; font-size:18px; }
#list8 ul li a { display:block; width:300px; height:28px;
background-color:#333; border-left:5px solid #222;
border-right:5px solid #222; padding-left:10px;
text-decoration:none; color:#bfe1f1; }
#list8 ul li a:hover { -moz-transform:rotate(-5deg);
-moz-box-shadow:10px 10px 20px #000000;
-webkit-transform:rotate(-5deg); -webkit-box-shadow:10px 10px 20px #000000;
transform:rotate(-5deg); box-shadow:10px 10px 20px #000000; }
..ENLACE:
Ejercicio 10. CSS. Menú
Modificar el menú vertical sencillo para que muestre el siguiente comportamiento:
- Los elementos deben mostrar una imagen de fondo (
flecha_inactiva.png):
Figura. Menú vertical con imagen de fondo - Cuando se pasa el ratón por encima de un elemento, se debe mostrar una imagen alternativa (
flecha_activa.png):
Figura. Menú vertical con imagen de fondo alternativa - El color de fondo del elemento también debe variar ligeramente y mostrar un color gris más oscuro (
#E4E4E4) cuando se pasa el ratón por encima:
Figura. Menú vertical con imagen de fondo y color alternativos - El comportamiento anterior se debe producir cuando el usuario pasa el ratón por encima de cualquier zona del elemento del menú, no solo cuando se pasa el ratón por encima del texto del elemento:
Figura. Aspecto final del menú vertical avanzado creado con CSS
Imágenes:
Menu Horizontal Sencillo con CSS
<div id="menuh"> <ul> <li><a href="#menuh" id="primero">Inicio</a></li> <li><a href="#menuh">Comentarios</a></li> <li><a href="#menuh">Noticias</a></li> <li><a href="#menuh">Contacto</a></li> <li><a href="#menuh">Acerca de nosotros</a></li> </ul> </div>
CSS:
#menuh {
font: 80% "Trebuchet MS", Arial, Helvetica, sans-serif;
margin-top: 20px;
}
#menuh ul, li {
list-style-type: none;
}
#menuh ul {
margin: 0;
padding: 0;
}
#menuh li {
float: left;
}
#menuh a {
text-decoration: none;
color: #3366CC;
background: #F0F7FC;
display: block;
padding: 3px 10px;
text-align: center;
border: 1px solid #ACCFE8;
border-width: 1px 1px 1px 0;
}
#menuh a#primero {
border-left: 1px solid #ACCFE8;
}
#menuh a:hover {
background: #DBEBF6;
}
Ventajas
- Poco peso: al ser código simple, ocupa poco espacio, y esto también ayuda a la carga rápida de la página.
- Manejable: se puede cambiar fácilmente los colores y efectos gracias a CSS.
- Simple: el código es sencillo de entender, no se complica tanto como los menús a base de tablas y JavaScript.
- Accesible: el usuario puede usar el menú aunque tenga discapacidad o esté navegando en cualquier dispositivo o navegador.
Menú vertical sencillo
HTML:
<div id="menuv"> <ul> <li><a href="#menuv">Inicio</a></li> <li><a href="#menuv">Comentarios</a></li> <li><a href="#menuv">Noticias</a></li> <li><a href="#menuv">Contacto</a></li> <li><a href="#menuv">Acerca de nosotros</a></li> </ul> </div>
CSS:
#menuv {
border: 1px solid #ACCFE8;
border-width: 1px 1px 0 1px;
width: 150px;
font: 80% "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#menuv ul, li {
list-style-type: none;
}
#menuv ul {
margin: 0;
padding: 0;
}
#menuv li {
border-bottom: 1px solid #ACCFE8;
}
#menuv a {
text-decoration: none;
color: #3366CC;
background: #F0F7FC;
display: block;
padding: 3px 6px;
width: 138px;
}
#menuv a:hover {
background: #DBEBF6;
}
El área de trabajo de Photoshop
Una vez abierto el programa observaremos diferentes barras y paneles distribuidos en el entorno de trabajo. Abramos una imagen de prueba para que todas las opciones se encuentren disponibles. Recuerda que podemos abrir nuestros archivos a través del menú Archivo → Abrir.
Una vez abierta la imagen, todas las barras y paneles se encuentran activos y el área de trabajo toma esta forma:
Puedes hacer que la disposición de los paneles y barras vuelvan al estado predeterminado haciendo clic en la opción Ventana → Espacio de trabajo → Espacio de trabajo por defecto:
Otra de las opciones que se te presentan es seleccionar un espacio de trabajo predefinido, podrás seleccionar entre Análisis de imagen, Automatización, Básico, Corrección tonal y de color, Diseño Web, etc…
Todos estos tipos de espacio mostrarán unas paletas u otras (normalmento todas tienen las mismas), y destacarán las opciones de menú más utilizadas para las diferentes tareas. Estos modos son muy útiles para trabajar con más comodidad pues visualmente te será más rápido acceder a una opción de esta forma.
La barra de menú
La barra en el extremo superior es la Barra de Menú, esta barra aparece en la mayoría de programas por lo que ya debes estar acostumbrado a ella. Desde aquí podrás acceder a diferentes opciones de menú, como por ejemplo abrir un archivo, guardarlo y luego cerrarlo. También podrás acceder a opciones mucho más complejas que iremos viendo a lo largo del curso.
Leitmotiv
Dalek-free
Camisetas cargadas de adrenalina. Llénalas de aventura
CursoProgramador 