Desen Web

Videos – Tutoriales – Animación – Cine / TV – CS4

Cada vez dedico mas tiempo a aprender sobre realidad aumentada, after effect o vídeo en general, así que he decidido inaugurar un apartado del blog exclusivo para vídeos.

En este apartado se podrán encontrar videotutoriales, ejemplos en after effects, realidad aumentada, cortometrajes, diversas animaciones… y en breve pretendo empezar a poner contenido propio.

Si queremos imprimir solo una parte de nuestra web, debemos crear un archivo .css distinto al habitual. Que lo lincaremos así:

<link rel=”stylesheet” type=”text/css” media=”print” href=”css/print.css”>

De esta forma el navegador interpreta este css en el caso que se tenga que imprimir la web.

En este css tenemos que ocultar el body, y después mostrar todo aquello que queramos modificando los estilos como mas nos convenga en una impresión. De esta forma podemos obtener un aspecto mas optimo para papel de la web.

Ejemplo print.css:

body { visibility: hidden; }
#nuestro_div{visibility: visible; position:absolute; top:0; left:0;}

Según los estandartes web, no se recomienda utilizar px para poner el tamaño a la letra. Si bien acepta cualquiera de las 4 medidas utilizadas para CSS se recomienda utilizar % o em.

Si te es difícil utilizar estas unidades hay un truco que te solucionara el problema. En el principio de tu CSS:

body {
font-size: 62.5%;
}

De esta forma tendras una escala decimal de em. Puesto que el tamaño definido por la mayoria de navegadores es de 16px y si calculas 16 x 62.5% obtienes los 10px. Con lo que puedes obtener, por ejemplo:

font-size:1em; /* 1em = 1 x 10px = 10px */
o decimales
font-size: 1.2em; /* 1.2em x 10px = 12px */

Alguna vez has querido evitar que se puedan guardar la imagen de tu site? (evidentemente es inevitable foto a la pantalla, impr + scan… ). Una forma, que es fácil conseguir información por internet, es llamándola con un fichero php, deshabilitando el botón secundario del ratón… pero el script que he encontrado hoy me sorprende gratamente.

La explicación es “fácil” solo se tiene que leer la imagen, almacenar cada píxel, y ofrecer un método para transformar esa información en una versión HTML de la imagen.

Mas claro: ver script / ver demo

Cuanto utilizamos nuestros diseños en distintos navegadores, a menudo, nos encontramos con problemas de compatiblidad (Gracias Internet Explorer por hacernos perder el tiempo) pero la solucion puede ser senzilla.

Una manera seria eliminar los margin y padding del navegador con:

* {
margin: 0;
padding: 0;
}

Pero lo que normalmente se utiliza es una hoja de “reset”, de esta forma todas las propiedades quedan con los mismos valores por defecto para todos los navegadores:

A continuación se muestra la hoja de estilos reset.css propuesta por el diseñador Eric Meyer:

/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}
:focus {
outline: 0;
}
/* En HTML añadir cellspacing=”0″ */
table {
border-collapse: collapse;
border-spacing: 0;
}

Aun y así esta hoja de estilos no se adapta a todos los diseños, pero nos ahorrara muchos esfuerzos en la mayoría de casos.