Nuevo rediseño (que supongo me traeré aquí algo modificado) de la web de La Guardia basado en un theme -con marcado basura pero que me gustaba mucho- de Askgraphics.com (más tarde hablo de ello).

Pues bien, comienzo

el rediseño del sitio:

Quito todas las tablas (son decorativas basicamente) de ese theme empezando por un header (cabecera) a mi gusto y la temática del sitio: La Guardia, puerta de culturas. Un theme plagado de tablas… pero plagado de verdad y acusando “divitis” (como le llama J. Zeldman):

La diferencia entre “marcado basura” y marcado semántico, usable y válido:

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

						</td>
						<td>
							&nbsp;&nbsp;&nbsp;&nbsp;
						</td>
 
						<td valign="top">
 
							<table cellpadding="0" cellspacing="0">
								<tr>
									<td valign="top">
 
										<div class="title">
											<a href="[PHP] the_permalink();[/PHP]">[PHP] the_title();[/PHP]</a>
										</div>
 
										<div class="subtitle">
											Publicado por (<em>[PHP] the_author();[/PHP]</em>) en 
[PHP] the_category(', ');[/PHP] el [PHP] the_time('j/F/Y');[/PHP]
										</div>
 
									</td>
								</tr>
								<tr>
									<td class="item_line">
									</td>
								</tr>
								<tr>
									<td>
 
										<div class="text">
										[PHP] the_content('Read the rest of this entry &raquo;');[/PHP]
										</div>
 
									</td>
								</tr>

Qué le pasa a la gente????, no saben que existen, desde que los documentos web los son, LOS TÍTULOOOS h3,h4.....hasta hn! madre mía…

Mejor así, sin tablas y la mitad -o menos- de marcado, esto! es el poder de CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13

<!--the post-->
					<h3 class="post_title">
					<a href="[PHP] the_permalink();[/PHP]" rel="bookmark">[PHP] the_title();[/PHP]</a> 
					<em class="small">([PHP] edit_post_link(__('e'));[/PHP])</em></h3>
 
 
					<h4 class="post_subtitle">[PHP] _e("Filed under:");[/PHP] [PHP] the_category(',');[/PHP] [PHP] _e('by');[/PHP] 
					[PHP] the_author();[/PHP] @ < =? the_time('d/m/Y'."&#8212;".'h:m');[/PHP]h.</h4>
 
					<!--Esto necesita un DIV porque no tiene porqué ser un párrafo-->
					<div class="post_text">
						[PHP] the_content('Leer el resto de la entrada &raquo;');[/PHP]
					</div>

Pruebas en Navegadores:

Pues eso, comienzo el diseño CSS mirando el resultado en Firefox, Epiphany (Gnome), Konqueror (KDE) y Opera… todo perfecto con un solo diseño pero ya estaba temiendo probarlo en IE.
Aún no tenía IEs4Linux, un paquete para Linux -uso Ubuntu Feisty- que te instala wine (ya lo tenía) junto con Explorer 5.0,5.1,5.5 y 6.0 todos con sus SP correspondientes -si así lo deseas-.

I.E

Así que cruzo los dedos y… ggg :D no, no es una sorpresa porque siempre pasa igual:
La cabecera abajo, una barra lateral a su bola pululando por el footer, un pantallón de 2.000 píxeles de ancho gggg :mrgreen:
bueno no, en serio:
Típico en IE se hace un lío con los anchos y los espaciados así que la barra lateral no cogía con los anchos “estándar” y se había venido abajo, pocos fallos a decir verdad para lo que esperaba… habré mejorado?? gg 8)

Ajustando el Menú para IE:

Bien, ajusto los anchos, márgenes y demás de acuerdo al “modelo de cuadro” personal de IE, caprichoso como siempre, pero aún los flotantes no actúan como deben, la barra lateral se estructura:

• Un div superior de estilo para una cabecera de la barra… :oops: , sí, no todo iba a ser perfecto :(
• Un div contenedor del contenido de la barra y relleno de estilo.
• Un par de listas izquierda y derecha ambas flotadas para llegar hasta la cabecera. NO HACE FALTA DOS DIVS, si son listas pos usamos UL LI , que para eso están, y no pecamos de divitis!
• Un div de pie de estilo :oops: …pos eso.

Sencillo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!--abriendo estilo sidebar-->
	<div id="sidebar_top"></div>
 
	<!--sidebar-->
	<div id="sidebar">
 
		<ul id="sidebar_right"></ul>
		[...]
		<ul id="sidebar_left"></ul>
 
		<!--cerrando estilo sidebar-->
		<div id="sidebar_end"></div>
 
 
	</div>
	<!--end sidebar-->

CSS:

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

#sidebar_top {
	float:right;
	width:372px;
	height:90px;
	margin:-90px 10px 0px 0px;
	background:url(images/sidebar_top.png) no-repeat top;
}
 
#sidebar {
	float:right;
	width:372px;
	margin:0px 10px 0px 0px;
	background:url(images/sidebar_bg.png) repeat-y top;
}
 
[...]
#sidebar_right {
	float:right;
	width:36%;
	margin-top:-80px;
	margin-right:5px;
}
 
#sidebar_left {
	width:50%;
	margin-top:-80px;
	padding-left:30px;
}

Los problemas de I.E. con “float” y el modo “quirks”:

Bien, pasan dos o tres cosas con IE:
Lo primero es que la sidebar de contenido #sidebar es más grande que la cabecera, esto es debido al “modelo de cuadro” no estándar de IE5 e IE6 en modo “quirks” -compatibilidad inversa-:

• El ancho de un cuadro para IE es lo que se especifica con la propiedad width, el margen, el borde y el espaciado entran en ese tamaño.
  Y el estándar del W3C dice que el ancho es:
  El contenido (width) + el espaciado (padding) + el borde (border) + el margen (margin).
  Así, para IE la sidebar tiene 10 píxeles más de los que debería tener que salen del margen derecho.
• La sidebar no consigue solaparse con la sidebar_top pese a que está flotada con sus márgenes y espaciados, que debería ser (y de hecho lo es en el resto de navegadores) lo que coloca el cuadro.
• Por esta regla de 3 las dos listas flotadas tampoco consiguen ascender a la cabecera (sidebar_top) y solapa a su “padre” (elemento padre: sidebar).

Solución:

Especificar, no sé muy bien porqué porque ya lo son por defecto y más aún estando flotadas y sin posiciones absolutas como top: left:, la posición relativa de los flotantes y establecer un nivel de solapamiento entre ellas: z-index.

Código para el niño bonito y mal criado de IE:

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

#sidebar {
	float:right;
	width:362px; /* 10px menos que el sidebar_top por el margen derecho de 10 px */
	margin:0px 10px 0px 0px;
	background:url(images/sidebar_bg.png) repeat-y top;
	/* Superponemos la sidebar al elemento inicial flotado */
	position:relative;
	z-index:2;
}
 
#sidebar_right {
	float:right;
	width:50%;
	margin-right:5px;
	padding-left:30px;
	/* Superponemos las listas a su padre sidebar */
	margin-top:-80px;
	position:relative;
	z-index:3;
}
 
#sidebar_left {
	width:100%;
	padding-left:30px;
	/* Superponemos las listas a su padre sidebar */
	margin-top:-80px;
	position:relative;
	z-index:3;
}

Conclusiones:

Lo que ocurre, imagino, es que I.Exporer va situando en niveles de solapamiento los elementos flotantes en el orden que van generándose y les da prioridad en ese mismo orden, no le importa la posición que se especifica y necesita que le repitamos que tiene posición relativa.

En cierto modo puede ser lógico la forma que tiene IE de ver el “modelo de cuadro” y de los elementos flotantes… aún así, vuelve a ser el único que actúa de esta manera, el resto: Firefox, Mozilla, Netscape, Epiphany (vale, todos son Geckko ^^), Konqueror, Opera… no, porque aceptan los estándares.
Microsoft ha cambiado mucho desde que apareció Firefox, y no niego que hayan intentado adaptarse como han podido pero nunca, me temo, lo han considerado seriamente hasta IE7, o lo que es lo mismo, hasta que lo han necesitado urgentemente.

Ha pasado dos veces hasta la fecha y en ambas ocasiones para dar un golpe a la competencia:

• Con IE4 para luchar contra Netscape en la Guerra de los Navegadores.
• Con IE7 para luchar contra Firefox.

Ya me he relajao :D

Review:

Después de ese diseño, el sitio sufrió varios más aunque usa la versión de lo comentado en esta entrada.

Evidentemente había muchas cosas que no sabía, no recordaba o pasé por alto cosas como la conmutación de DOCTYPE por parte de IE6 en relación a la especificación XML de un documento XHTML… esto es: básicamente, si declaras tu documento como XML IE6 activa automáticamente el modo “quirks” de compatibilidad inversa.
Es decir: su modelo de cuadro será el antiguo por ejemplo y otra serie de comportamientos que intentan mitigar los fallos de navegadores antiguos (ej. IE5), o sea, que es casi una odisea saber como I.E. interpretará el código.

Algunos hacks para los flotantes en IE6, por ejemplo la propiedad display:inline; en flotantes para forzar a I.E. el flotado ^^ …y otras cosillas que ya pondré otro día por ahí.

Lo primero, una aclaración importante: No me hago responsable de las consecuencias si seguís el enlace propuesto.

http://www.ebrainte.com.ar/bug/

Al menos, guardad los cambios en vuestros trabajos abiertos jiji 8)

Si accedeis a esta web desde cualquier distribución Linux, Mac o cualquier otro S.O. distinto de Windows: no habrá problema.
Si usais Windows y cualquier Navegador Web que no sea Internet Explorer: tampoco habrá problema.
Acabando: Si usais Windows e Internet Explorer comprobareis vosotros mismos la putadilla :mrgreen:
Nota: Me temo que se refiere a Windows XP y Explorer 6, imagino que en Vista e IE7 estará solucionado… sino ya apaga y vamonos :D

http://www.ebrainte.com.ar/bug/

Un bonito y ya típico pantallazo de Windows junto a su también clásico reinicio juas juas :twisted:

PD OffTopic: Y esto es la pera, coño con el Buenafuente, pos no le acaba de pedir Marta Torné, (voz de Boris Izaquirre) no uno, sino dos picos!!!, será… algo pilla en cada programa el muy c…%jf&g#!
:D

www.ie7.com

PD: No creo que necesite explicación, no?… que hay de todo en la viña del señor ^^ (nada más apropiado en estas fechas jiji).
Vía tufuncion.com

Además…, mola teniendo en cuenta cosas como:
los señores de Microsoft… como en su más primitivos orígenes, siguen con su filosofía de “copiar, maquillar y vender como propio“.
En este blog no demonizamos a Microsoft… pero es que toca bastante la moral, ahora Ubuntu… serán!…

Desde mi humilde conocimiento y calidad de aprendiz sé que todos deseamos que llegue ese día… en que solo nos basemos en los Estándares para diseñar páginas y no tengamos que inventar, hacer hacks y peripecias increibles para que nuestros diseños se vean por igual en todos los exploradores… sinceramente creo que estamos muy cerca de verlo, lo creo en serio.

—

Pero dejémonos un poco de introducciones y vayamos al grano:
Como decía, existen inumerables campañas anti IE , una de las más conocidas en estos días es “Too Cool for IE” la cual ha cerrado por la cantidad de mensajes que recibía tanto con felicitaciones como ataques por defensores IE… y de la cual podeis observar alguna de sus imágenes promocionales en la esquina inferior de este sitio.

Otra es “Explorer Destroyer” desde la que se anima a “bloquear” en varios grados, 3 para ser más exacto, y dependiendo del porcentaje de visitas que recibas desde IE, el uso de este explorador en nuestros sitios.
El método se basa en JavaScript… contra el que no tengo nada y que uso últimamente casi abusivamente en mis diseños… esta campaña también ha florecido por la blogosfera pero digo yo…

Porqué usar JavaScript (aunque no sea tan fácil desactivarlo en IE que es donde actuará) puediendo usar PHP y bastantes menos líneas de código?… sobretodo teniendo en cuenta que nuestros sistemas de publicación, la gran mayoría están basados en PHP.

Pues bueno, aún sin analizar demasiado porqué eligieron JS (supongo que habrá alguna buena razón que yo no adivino del todo) he decido no saturar más la cabecera del sitio con cargas en el body scripts y capas con estilo CSS embebido y hacerlo con una simple sentencia PHP, HTML puro y CSS.

Por ejemplo, no basta con:


Es evidente que la sentencia se puede (y debe) mejorar para otras versiones IE, etc… pero por ahora basta, al menos para mí.

Mi Explorer Destroyer:

Así ahí queda mientras averiguo algunas cosillas ;)

PD: Por cierto, con un 75% de visitas con Internet Explorer he decido tomar la medida más drástica, bloquear completamente el sitio para IE… y eso que no se veía demasiado mal pero es que paso… paso completamente de calentarme más la olla para el caprichoso explorador.
Como ya dije antes, yo me baso en los Estándares del W3C le pese a quién le pese… eso, es lo que debe hacer IE y arreglar su patatero soporte CSS donde, por ejemplo, llevan interpretando el Modelo de Caja a su aire hasta su v6.0 pfffff kwennn :(

Por otra parte, supondré que su comportamiento CSS seguirá siendo bastante pésimo… de hecho… hasta hace poco nisiquiera me he preocupado por diseñar la web para Explorer y lo siento por ese 70% de visitantes que lo hacen con Explorer… sorry pero, no seais brutos juer:
USAD FIREFOX!… y si luego nos os gusta más me lo contais please :)




…veamos

PD: Ya comentaré que tal… ummm, por cierto, hace falta SN de los güenos gg 8)