Esferas

Ya las publiqué en su momento, tanto en la web como en deviantArt, pero las rescato para que sigan estando entre nosotros :

24 esferas de servicios y aplicaciones web (entre otros) en formato PNG de 512 x 512. La sombra de cada una de ellas tiene algo de transparencia y es del mismo color que la parte de la esfera que tiene por encima.

Si quieres comentar algo o tienes alguna sugerencia para alguna esfera más no te cortes en decirlo.

Publicado para usar libremente bajo licencia:
Creative Commons (Reconocimiento – No comercial – Compartir igual).

En cuanto al reconocimento de la licencia, no hace falta que pongas un enlace en cada página donde aparezcan, aunque no estaría nada mal , con uno me basta y si las usas mándame un enlace con el resultado a ver que tal quedan por ahí .

Min-width, max-width, min-height y max-height también en IE

Estoy maquetando una web, una de las columnas tiene una imagen de fondo que siempre debe verse entera (aunque no tenga suficiente contenido), ¿como lo hago…?. Facil si la imagen mide 600px de alto agrego la propiedad min-height: 600px al elemento en cuestión y ya esta. ¿O no?

Pues si y no, ya que Internet Explorer 6 no reconoce ninguna de las propiedades que definen tanto la altura y anchura máxima y mínima, y por desgracia este navegador aun lo usa demasiada gente (e incluso algún cliente que puedas tener).

Hay 2 posibles soluciones, o bien hacemos uso de !important (solo para min-width/min-height) o de expresiones. A continuación las posibles soluciones para cada propiedad:

Min-width:

1
2
3
4
5
6

div {
     min-width: 600px;
     /* min-width para IE6 */
     width: auto !important;
     width: 600px;
     }

1
2
3
4
5

div {
     min-width: 600px;
     /* min-width para IE6 */
     width: expresion(document.body.clientWidth < 601? "600px": "auto");
     }

Max-width:

1
2
3
4
5

div {
     max-width: 600px;
     /* max-width para IE6 */
     width: expresion(document.body.clientWidth > 601? "600px": "auto");
     }

Min-height:

1
2
3
4
5
6

div {
     min-height: 600px;
     /* min-height para IE6 */
     height: auto !important;
     height: 600px;
     }

1
2
3
4
5

div {
     min-height: 600px;
     /* min-height para IE6 */
     height: expresion(this.scrollHeight < 601? "600px": "auto");
     }

Max-height:

1
2
3
4
5

div {
     max-height: 600px;
     /* max-height para IE6 */
     height: expresion(this.scrollHeight > 601? "600px": "auto");
     }

Para la altura y anchura mínima lo más cómodo es hacer uso de !important y ahorrarnos los posible problemas del uso de expresiones, en cambio para la altura y anchura máxima tendremos que tener en cuenta los inconvenientes de este método (Seguir enlace de la fuente).

Otra opción si no nos importa usar javascript es incorporar en nuestra página el ie7.js con el cual conseguiremos que IE (5 y 6) se comporten como la versión 7, pudiendo usar estas propiedades sin problemas tan solo añadiendo dentro de la etiqueta head el siguiente código:

1
2
3

<!--[if lt IE 7]>
     <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->

Bueno, ahora solo te queda decidir que se adapta mejor a lo que necesitas .

Fuentes: Reflections on max-width, ie7.js y LibrosWeb.

Reset CSS

Una de las cosas más útiles a la hora de maquetar una web es el uso de un reset css.

Este archivo lo que hace es resetear las propiedades por defecto que los diferentes navegadores suelen darle a cada elemento. Tiene un incoveniente; tendremos que establecer de nuevo nosotros los valores necesarios, y una ventaja mucho mayor; conseguiremos una página cross-browser (multinavegador) de una manera mucho más rápida y sencilla.

Hay muchos reset css, prueba una búsqueda en google. Yo en mi caso siempre uso el reset de Eric Meyer:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

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;
}
 
/* remember to define focus styles! */
:focus {
	outline: 0;
}
 
/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
 
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Lo más recomendable es incluirlo en un archivo css diferente del de los estilos de nuestra web (reset.css por ejemplo) y realizar la llamada primero al reset y luego el resto:

1
2

<link rel="stylesheet" href="reset.css" type="text/css" />
<link rel="stylesheet" href="general.css" type="text/css" />

Ponlo a prueba, una vez te acostumbres a usarlo no podrás maquetar sin él .

¡Hola, mundo! (de nuevo)

Si, ¡hola, mundo!.

He cambiado de servidor y durante el cambio he tenido algunos problemillas con las copias de seguridad, concretamente en el caso de este blog no he podido salvar gran cosa, ya que la copia del blog más reciente y con la que no ha habido problemas de datos corruptos y demás era demasiado antigua

Pero bueno, mirándolo por el lado bueno tengo un montón de entradas que recuperar y ya que empieza el año lectivo, empieza vida nueva

Eso si, lo primero que retomo es la lista de propósitos de este año:

• Terminar y publicar el diseño de esta web Hecho, tan solo tengo que recuperar la plantilla de los comentarios.
• Aprovechar las nuevas características de WP 2.7
• Personalizar el blog de la moto
• Publicar mi primer freebie Publicado: Esferas
• Que el primer freebie no sea el último
• Realizar themes para WordPress
• Ser referenciado en SmashingMagazine, CSS Gallery o similares
• Recuperar los lectores del blog
• Realizar más cursos de diseño y maquetación Pero solo a medias, siempre quedan más cursos por hacer
• Leer muchos más tutoriales Igual que el anterior
• Llevar a cabo algunos proyectos: GuiAcuario, Haz que Curras, …
• Conseguir trabajo en una empresa molona realizando mi pasión

La verdad es que con algunos lo tengo un poco difícil en lo que queda de año, pero por mí que no sea.

Un saludo a todos (si aún queda alguien por ahí) y en breve estaré de nuevo por aquí.