Archivo
Recopilación de tips y enlaces del curso de Diseño web de 2018
Al inicio de 2018 he hecho un curso de Diseño web. Estaba un poco desactualizado. Aquí iré poniendo algunos enlaces «interesantes» que he encontrado en este curso.
Colores
- El uso de los colores en la web. http://www.webusable.com/coloursMix.htm
- Que existen herramientas online para capturar los colores que vemos en pantalla, como por ejemplo ColorZilla de Filezilla. http://www.colorzilla.com/
- Extensiones Chrome para el diseño web. https://www.artimedia.es/css/extensiones-google-chrome-para-disenadores-web/
Tipografías
- Tipografías gratuitas. http://flippingtypical.com/
- Tipografías gratuitas serif. https://www.1001freefonts.com/
- Tipografías gratuitas sans serif. https://www.fontsquirrel.com/
- Tipografías gratuitas manuscritas. https://www.urbanfonts.com/free-fonts.htm
- 5 errores tipográficos comunes en el diseño web. http://www.maestrosdelweb.com/5-errores-tipograficos-comunes-en-la-web-y-como-solucionarlos-cromos-vs-t-magazine/
Navegación
- Barras de navegación. http://librosweb.es/libro/bootstrap_3/capitulo_6/barras_de_navegacion.html
- Buscador de servidores FTP públicos. http://www.searchftps.net/
Imágenes
Editor de imágenes. https://pixlr.com/
A continuación se representa una relación de estos caracteres especiales y su representación:
| Carácter | Representación | Carácter | Representación |
|---|---|---|---|
| < | < | € | € |
| > | > | ç | ç |
| á | á | Ç | Ç |
| Á | Á | ü | ü |
| é | é | Ü | Ü |
| É | É | & | & |
| í | í | ¿ | ¿ |
| Í | Í | ¡ | ¡ |
| ó | ó | « | " |
| Ó | Ó | · | · |
| ú | ú | º | º |
| Ú | Ú | ª | ª |
| Ú | ñ | ¬ | ¬ |
| Ñ | Ñ | © | © |
| ™ | ™ | ® | ® |
Algunos recursos CSS3
- css3generator.com
- Permite generar código CSS3 y visualizar su aspecto para luego copiar y pegarlo en la web.
- gradients.glrzad.com
- Información sobre esquinas redondeadas y gradientes
- www.cssportal.com
- Recursos, generadores CSS, validadores CSS, herramientas…
- www.css3maker.com
- Generador visual de CSS3. Bordes, Flexbox, Gradientes, Transformaciones CSS…
- www.css3.com
- Propiedades CSS
- Usar CSS dependiendo de la pantalla: www.w3.org/TR/css3-mediaqueries Media
Impress.js una librería Javascript para hacer presentaciones a lo prezi.com
Siempre me gustaron las presentaciones de prezi.com, mucho mejores que esas cosas hechas en powerpoint y que siempre te parecen feísimas. El problema es que había que pagar.
Ahora, con los potentes navegadores web, puedes usar Impress.js que te sirve para lo mismo. Sólo necesitas un navegador medio actualizado y que soporte CSS3. En mi PC con Firefox va de escándalo (agosto-2014).
El creador es @bartaz. Es la primera persona a la que le hago un watch en github.
Para ver una demo y que veas que es como prezi.com (bueno, mejor, porque utiliza el 3D):
Puedes moverte utilizando la barra espaciadora o las flechas derecha/izquierda.
En el Github encontrarás tutoriales y más ejemplos.
Comprobar igualdad en campos de contraseña de un formulario utilizando Javascript
Nos imaginamos que tenemos un formulario con varios campos para un usuario, por ejemplo.
Además del nombre y demás datos, tenemos un par de campos para que introduzca la contraseña. Lo tenemos dos veces para obligarle a que repita la contraseña para que no haya errores al teclear.
Queremos que cuando se hayan introducido correctamente las contraseñas, nos habilite el botón para guardar, así como que desaparezca un mensaje que nos dice que nuestras contraseñas no coinciden.
Deberíamos crear una función para comprobar la clave parecida a la siguiente:
function comprobarClave(){
var clave1 ="";
var clave2 ="";
clave1 = document.getElementById("contra1").value;
clave2 = document.getElementById("contra2").value;
if ((clave1.length>=6) && (clave2.length>=6)){
if (clave1 == clave2){
document.getElementById("guardar").disabled=false;
document.getElementById("mensajeaviso").hidden=true;
}
else{
document.getElementById("mensajeaviso").hidden=false;
document.getElementById("guardar").disabled=true;
}
}
else{
document.getElementById("guardar").disabled=true;
document.getElementById("mensajeaviso").hidden=false;
}
}
.
El anterior planteamiento nos obliga a tener un botón con ID=»guardar» que será el que se habilite o no. Recuerda utilizar las CSS correctamente para mostrarlo:
#formulario input:disabled{
color: #999;
}
#formulario input:enabled{
color: black;
}
También he puesto un texto, identificado con «mensajeaviso» que aparecerá y desaparecerá.
Cuándo se llama a esta función?
Para llamarla, utilizaremos el evento onkeyup de cada uno de los dos input con id contra1 y contra2.
Se utiliza onkeyup porque este evento surge cuando el usuario deja de pulsar una tecla. Así, de esta manera conseguimos que la última tecla pulsada esté en el value del input.
Quedaría así:
<input type=»password» name=»contra1″ id=»contra1″ onkeyup=»comprobarClave();»>
Por cierto, de esta manera conseguimos en el lado del cliente que sólo se pueda pulsar si los requisitos de las contraseñas son los correctos. En el lado servidor también deberías hacer esta misma comprobación. Pronto subo el capítulo 2 de este tema, haciendo la comprobación con PHP.
Bootstrap
En esta página se encuentra un framework que permite hacer aplicaciones web rápidamente. Sobre todo destacan sus botones y menús, así como los grids.
Tiene algunos ejemplos. Como el siguiente, con su barra de navegación y sus columnas con contenido.
La página online de Red Eléctrica Española lo utiliza. http://www.ree.es
<link href="css/bootstrap.min.css" rel="stylesheet"><!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://code.jquery.com/jquery.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script>
Maquetando de forma no rectangular
En el siguiente enlace he encontrado cómo montar Layouts no rectangulares con CSS Shapes.
http://sarasoueidan.com/blog/css-shapes/index.html
…
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>
…
Leitmotiv
Dalek-free
Camisetas cargadas de adrenalina. Llénalas de aventura
CursoProgramador 