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 |
|---|---|---|---|
| < | < | € | € |
| > | > | ç | ç |
| á | á | Ç | Ç |
| Á | Á | ü | ü |
| é | é | Ü | Ü |
| É | É | & | & |
| í | í | ¿ | ¿ |
| Í | Í | ¡ | ¡ |
| ó | ó | « | " |
| Ó | Ó | · | · |
| ú | ú | º | º |
| Ú | Ú | ª | ª |
| Ú | ñ | ¬ | ¬ |
| Ñ | Ñ | © | © |
| ™ | ™ | ® | ® |
CDN de Bootstrap
Si no queremos instalar Bootstrap en nuestro servidor podemos utilizar el siguiente CDN:
<!– CSS –>
<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css» integrity=»sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7″ crossorigin=»anonymous»>
<!– jQuery –>
http://code.jquery.com/jquery-2.2.1.min.js
<!– JavaScript –>
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js
Plantilla para inicio con jQuery
A continuación tenemos una plantilla que nos servirá como esqueleto básico de nuestro fichero HTML5 con jQuery:
<!doctype html> < head>
< script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous">< /script>
// Puedo definir funciones en esta parte.
// La función Ready a continuación
$(function() {
//..código..
// Ejemplo:
// var img = $(#id1); // Asigno a una variable img el elemento del DOM
identificado por id1
// Utilizo on para asociar un manejador a un evento sobre un elemento del DOM
// $("#id2").on("click", function(){ //... más código ... });
});
Recuerda que se utiliza on y off para asociar o desvincular un manejador o handler a un evento de un elemento del DOM.
En el siguiente enlace están los métodos para manipular los elementos del DOM: attr, html y val son los métodos que obtendrán información del DOM, y luego tendremos métodos para modificarlo, como append, por ejemplo
Picture, Video y Audio en HTML5
Picture
La etiqueta picture la solución para imágenes responsive.
Permite usar varias imágenes según las condiciones media.
<picture> <source media="(min-width: 1100px)" srcset="shaum6.jpg"> <source media="(min-width: 1000px)" srcset="shaum5.jpg"> <source media="(min-width: 800px)" srcset="shaum4.jpg"> <source media="(min-width: 600px) " srcset="shaum3.jpg"> <source media="(min-width: 400px)" srcset="shaum2.jpg"> <source media="(min-width: 300px)“srcset="shaum1.jpg"> <img src="shaum1.jpg" alt="shaum"> </picture>
No está soportado por IE, Safari 9 y Opera Mini .
http://caniuse.com/#search=picture
Video
HTML5 permite insertar contenido multimedia, audio y vídeo.
<video src=»video.mp4″> Tu navegador no soporta el elemento vídeo </video>
Atributos:
- poster: permite insertar una imagen de sustitución cuando el vídeo no está disponible.
- controls: se incluyen controles de play, pause…
- width y height: ancho y alto, se ajusta al valor y el otro se calcula automáticamente manteniendo la proporción.
- loop: reproduce el vídeo continuamente .
- autoplay: reproduce el vídeo automáticamente.
- preload: carga el vídeo
<video src=»video.mp4″ poster=»videojpg» autoplay loop controls></video>
Además, tenemos el problema del formato del vídeo:
Contenedor MP4 (Microsoft y Apple)
n Video: H264, Audio: ACC
w Existen Patentes
Contenedor WebM (Google y Firefox)
Video: VP8, Audio: Vorbis
Para resolverlo, utilizaremos <source> dentro de <video> para cada uno de los dos formatos.
Si el video es de Youtube, utilizaremos <iframe>.
Audio
El audio EN html4 se inserta de manera similar:
<audio src=»audio.mp3″ controls autoplay loop >
</audio>
El formato mp3, no es un formato abierto, para maximizar la
compatibilidad usaremos varios formatos con <source>
<audio controls>
<source src=»audio.ogg» type=»audio/ogg»>
<source src=»audio.mp3″ type=»audio/mpeg»>
<source src=»audio.wav» type=»audio/wav»>
</audio>
Poner el Datepicker de jQueryUI en castellano
Desde el enlace https://github.com/jquery/jquery-ui/blob/master/ui/i18n/datepicker-es.js podemos descargarnos el fichero configurado en castellano (si queremos modificarle algo, como poner la primera letra del mes en castellano…)
Básicamente seguiremos estos pasos:
En el body insertamos el control:
<p>Fecha: <input type="text" id="datepicker" value="19/8/2015"></p>
Y en el head de nuestro fichero:
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
//code.jquery.com/jquery-1.10.2.js
//code.jquery.com/ui/1.11.4/jquery-ui.js
http://./js/controles.js
<link rel="stylesheet" href="/resources/demos/style.css">
$(function () {
$.datepicker.setDefaults($.datepicker.regional["es"]);
$("#datepicker").datepicker();
Para obtener la fecha del Datepicker:
var currentDate = $( "#datepicker" ).datepicker( "getDate" );Programaremos el evento onSelect para hacer «algo» cuando el usuario cambia la fecha seleccionada:
$("#datepicker").datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function (date) {
alert(date)
},
});
La línea dateFormat: ‘yy-mm-dd’, la he puesto para que el datepicker me devuelva la fecha (date) con ese formato, que es el que acepta MySQL en las conexiones.
Able2Extract, software para extraer información de PDF
Esta semana me han enviado una sugerencia para que pruebe Able2Extract, un producto de Investintech.com.
Es un conversor de PDF a otros formatos, aunque, como he podido comprobar, son muchas más cosas.
Para descargar una versión de prueba:
http://www.investintech.com/es/descargas/a2e/
Lo encontramos para Windows, Mac y Ubuntu, yo he descargado la versión para Windows.
Me he descargado la versión 9 (Able2Extract PDF converter 9).
Impresora PDF
Pensaba que sólo tendría el software para extraer información de los PDF, pero también podemos Crear PDF, ya sea a través de la impresora que instala o mediante la opción File -> Create PDF que encontramos en el propio software.
Cuando imprimimos algo a PDF vamos a tener muchísimas opciones que podemos modificar, tanto el título o autor del documento, como opciones de seguridad, compresión, qué hacer tras la conversión, etc. Estas opciones pueden modificarse por defecto para no tener que estar escribiendo cada vez. Parece una tontería, pero cuando tienes que estar continuamente generando PDFs con contraseña, al final te cansas.
Es el primer software que encuentro que me permite poner todas estas opciones por defecto. MUY BIEN!
Able2Extract – Crear un PDF
Dentro del propio software tienes la opción de generar un PDF. Lo harás a partir de un documento que tienes en el disco ya creado, ya sea un PDF, un PPT o cualquier otro formato.
Justo al seleccionar Create PDF nos aparece una ventana para abrir ese fichero. A continuación, se genera automáticamente el PDF (con las opciones que nosotros queramos de seguridad, compresión, etc.)
Able2Extract – Extraer info de un PDF
Para esto es para lo que me he instalado este software.
Este es el aspecto inicial de nuestro software. Lógicamente, lo primero que vamos a hacer es abrir un PDF a ver qué sucede.
Tenemos en la parte de la izquierda un navegador de las distintas páginas del PDF y en la derecha nuestro documento. Podemos tener muchos documentos abiertos para trabajar con ellos.
La primera vez nos irá haciendo indicaciones de qué podemos hacer, está en inglés, pero es fácil de comprender todo para los que tengan poco nivel del idioma.
Básicamente hay que seleccionar qué queremos del documento que tenemos abierto y luego seleccionar a qué formato convertirlo.
Podemos convertir a
- Excel,
- Word,
- Powerpoint,
- Publisher,
- Openoffice (Calc, Writer, Impress),
- HTML,
- Formato imagen,
- y hasta Autocad.
Yo he probado Excel, Word, Writer y HTML y todo ha sido MUY SATISFACTORIO.
He probado con ficheros PROTEGIDOS, que no se podían editar y copiar, y ha funcionado perfectamente. No era necesario conocer la clave para extraer información.
En formato Word y Writer ha sido genial, puesto que me ha cogido todos los formatos, no solo la fuente y el tamaño, sino que ha generado las tabulaciones, sangrías, etc.
Las «cosas raras», como los gráficos, los importa como imágenes, imagino que esto ya sería demasiada extracción.
Puedes seleccionar todo del fichero PDF o seleccionar distintas partes del mismo. Se puede utilizar CTRL para ir seleccionando distintas partes del documento.
.
En resumen: Able2Extract es muy recomendable. De hecho, lo voy a utilizar mucho, sobre todo para poder generar ficheros Excel de esos PDF que venden como «Transparencia» muchas páginas de organismos públicos.
Encontré un bug
He encontrado un bug. Ha sido porque he generado un HTML a partir de un fichero PDF y luego he intentado generar otra vez el HTML desde el mismo fichero PDF, pero seleccionando otras partes del documento. Entonces encuentra que en disco hay un fichero que se repite y falla la conversión. Seguro que pronto lo arreglarán.
Incrustar un PDF en una página web
El tema era conseguir incrustar un PDF dentro de una página web, a modo de IFRAME, que permitiera visualizar un PDF.
Empiezas a buscar información y unos te dicen que lo conviertas a Flash (SWF) y cosas más complicadas. Otros te dicen que pongas un enlace en tu página al PDF y que hagas un target=_blank para que se abra en otra ventana.
No, no es eso, la cuestión es esta:
Gracias a una página de Microsoft Office encontré la solución más fácil: utilizar OBJECT
También podemos modificar la visión del PDF.
- Viendo la página 2: data=»fichero.pdf#page=2″
- Haciendo un zoom de 150%: data=»fichero.pdf#zoom=150″
- Ajustando la página a la ventana: data=»fichero.pdf#view=FitH»
Estos parámetros se pueden unir mediante &
- Ver la página 5 con un zoom de 50%: data=»fichero.pdf#zoom=50&page=5″
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í:
Flecha arriba que aparece y desaparece cuando hacemos scroll
En primer lugar añadimos JQuery a nuestra página:
<script src='http://code.jquery.com/jquery-1.10.2.min.js' type='text/javascript'></script>
Después nos creamos las CSS adecuadas para el botón:
/******** FLECHA DE DESPLAZAMIENTO ********/
#subir{
position: fixed;
left: 50%;
margin-left: 430px;
top:80px;
width:25px;
height:25px;
background: url(subir.png) rgb(245, 245, 245) no-repeat;
border: 2px solid #646464;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
/*Sombreados*/
box-shadow: 4px 0px 10px rgba(0,0,0,0.7);
-moz-box-shadow: 4px 0px 10px rgba(0,0,0,0.7);
-webkit-box-shadow: 4px 0px 10px rgba(0,0,0,0.7);
color:black;
padding-top: 9px;
line-height: 9px;
}
#subir a{
text-decoration: none;
}
#subir:hover{
box-shadow: 4px 0px 10px rgba(0,150,0,0.9);
-moz-box-shadow: 4px 0px 10px rgba(0,150,0,0.9);
-webkit-box-shadow: 4px 0px 10px rgba(0,150,0,0.9);
cursor: pointer;
}
Y por último añadimos un DIV con id «subir» al final de la página, con el siguiente código:
<div id='subir'>
<a href='#Arriba'>^<br/>^<span/></a>
</div>
<script type='text/javascript'>
//<![CDATA[
// Botón para Ir Arriba
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery("#subir").hide();
jQuery(function () {
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 600) {
jQuery('#subir').fadeIn();
} else {
jQuery('#subir').fadeOut();
}
});
jQuery('#subir a').click(function () {
jQuery('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
//]]>
</script>
Yo he puesto un par de ^, pero vamos, que puedes no poner nada y en el CSS ponerle en el background a subir una flechita.
Leitmotiv
Dalek-free
Camisetas cargadas de adrenalina. Llénalas de aventura
CursoProgramador 