Aporte: pequeña guía de migración a XHTML+CSS

kseso? · #61 (**permalink**) 04/12/2008, 17:32

Ya lo suponía, j*f*, que andarías en ello.
¡Que no borren mi comentario para poder decirles a mis nietos: yo fui quien ...!"

Ahora en serio.
Merecería la pena embarcarnos en ello.

Mikmoro · #62 (**permalink**) 04/12/2008, 17:47

Cita:

Iniciado por kseso?

Ya lo suponía, j*f*, que andarías en ello.

Empezaba a pensar en esa forma de hacerlo para ahorrarme curro

Cita:

Iniciado por kseso?

¡Que no borren mi comentario para poder decirles a mis nietos: yo fui quien ...!"

Voy a ver si se me permite borrar comentarios ajenos

(no temas, no puedo hacerlo, que si no...)

Cita:

Iniciado por kseso?

Ahora en serio.
Merecería la pena embarcarnos en ello.

Hay que reunir fuerzas, la verdad. Creo que es algo "tocho"

McPinkY18 · #63 (**permalink**) 05/12/2008, 15:40

excelente guia!

Mikmoro · #64 (**permalink**) 05/12/2008, 16:08

Gracias, me alegro de que te guste.

El otro día en otra parte se suscitó el debate de si diseño líquido o estático, y había gente que decía que le resultaba mucho más cómodo leer en columnas más estrechas (creo que en realidad a casi todo el mundo, de ahí las columnas periodísticas), por lo que he incorporado una utilidad a la guía para poder leerla en una columna con un ancho menor.

A ver si os gusta.

El enlace es el mismo del principio.

Aresillo · #65 (**permalink**) 05/12/2008, 18:15

Yo prefiero estrecha!
Más que nada porque la pantalla es de 22" y me mareo de mirar a un lado y al otro...
Por otro lado, el inconveniente que veo es que se salen los gráficos del principio y algunas palabras del final de la línea...
He estado probando y si el ancho lo pones a 51em ya entra todo y queda bien...

Por otro lado, he tenido que mirar dos veces para darme cuenta donde estaba el enlace de estrecho... igual puedes ponerlo en otro lugar...

Un saludo!

Ares.

Mikmoro · #66 (**permalink**) 05/12/2008, 18:42

Creo que debes refrescar a caché de tu navegador: nada se debe salir, pero esas imagenes ya las tienes en la caché. Pruébalo.

AlZuwaga · #67 (**permalink**) 05/12/2008, 19:57

Como te comenté "en la otra parte" (o "en el otro lado"), donde se suscitó el debate de si diseño líquido o estático: practicomodísimo!

DoPeY-BBS · #68 (**permalink**) 05/12/2008, 21:11

Excelente, aun así debo decir que en dos puntos se sale el texto, no se si esto sea un error o no.
Conceptos Generales

Cita:

<a href="http://www.google.es">Enlace</a>, <div class="miclase">...</div>

Etiquetas Meta

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>Cajas con sombra una sola imagen - Recursos CSS - araudi.net</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Keywords" content="recursos, css, diseño, web, xhtml, software
libre" />
<meta name="Description" content="Pagina dedicada a recursos de diseño Web
con CSS, en castellano" />
<meta name="Author" content="Mikel Morote Donazar" />
<meta name="Subject" content="Recursos CSS" />
<meta name="Language" content="es" />
<meta name="Robots" content="index, follow" />
<link rel="alternate" href="http://www.araudi.net/indice.html" title="Indice
de contenidos" media="all" lang="es" />
<link rel="stylesheet" href="css/indice.css" type="text/css" />

AlZuwaga · #69 (**permalink**) 05/12/2008, 21:48

Cita:

Excelente, aun así debo decir que en dos puntos se sale el texto, no se si esto sea un error o no.

Es cierto, aunque debo decir que sólo lo noté con IE7.
Y, aparentemente, sólo ocurre con los <pre> cuyo contenido sea muy largo, como por ejemplo:

Cita:

<pre><a href="http://www.google.es">Enlace</a>, <div class="miclase">...</div></pre>

U saludo

Mikmoro · #70 (**permalink**) 06/12/2008, 03:51

Ah, sí, lo siento. Estaba entre las tareas y lo olvidé.

El asunto es que la etiqueta "pre" tiene definido por defecto un tipo de letra monoespaciado como "Courier" y un tamaño de 12px, pero explorer no lo entiendo así, no asignando tamaño.
Por eso en FF se ve correctamente, sin que nada se salga, y en IE7 se ve la letra de lo que es código mucho más grande. Lo había corregido para IE6 con un important pero olvidé que tenía que mirar de corrregirlo en IE7.

Ya está arreglado, asignando a "pre" el tipo de letra "Courier" el el tamaño de 1em (como si no los tuviera ya por defecto), para que IE lo entienda. Si refrescáis la caché veréis que ya está arreglado.

Aun se sale un poquillo el Opera y Safari pero me da más bien igual.

Aresillo · #71 (**permalink**) 06/12/2008, 04:23

He refrescado la caché y las imágenes del principio se salen, y parte del texto también...

Probaré más adelante por si acaso...

Aresillo!!

Mikmoro · #72 (**permalink**) 06/12/2008, 12:08

Es curioso cómo escribiendo una cosa de estas te centras en el contenido y a veces descuidas el formato. He cambiado las etiquetas "pre" por "code", que por otra parte era mucho más lógico, y el texto de código ya no se puede salir en el formato estrecho en ningún navegador.

Ya imagino lo que ocurre, Aresillo, y es que tú usas un tamaño predefinido más pequeño que 16px, que es el que uso yo. Ya lo he corregido, pero desgraciadamente la imagen de la tabla vacía se estropea un poco.

Aresillo · #73 (**permalink**) 06/12/2008, 12:44

La tabla la veo bien, no se sale nada a excepción de esta imagen:

Y una pregunta, se podría justificar el texto, yo al menos lo prefiero...

Aresillo!!
PS: Buen trabajo Mik, gracias por preocuparte tanto por la accesibilidad

Mikmoro · #74 (**permalink**) 06/12/2008, 12:49

Esa imagen del demonio...

Es que si la adapto se deja de entender el texto. En la primera versión estaba hecho simplemente en código y no había ningún problema (todas las imágenes, en realidad), pero en ese caso sin CSS todo desaparece y no hay texto de reemplazo, así que convertí todos los ejemplos en imágenes.

Si puedo hacer algo lo haré, pero si no, a los que usáis pantallas de 22" y tamaños de letra de 12px os darán morcilla

Mikmoro · #75 (**permalink**) 06/12/2008, 13:13

Arreglado. También se salía la imagen de la posición absoluta y está corregido.

Mira a ver.

Aresillo · #76 (**permalink**) 06/12/2008, 15:37

Everything right!

Gracias por preocuparte por los de pantalla de 22"

Aresillo!!

AlZuwaga · #77 (**permalink**) 07/12/2008, 20:12

Hola, sólo comentar a esto:

Cita:

Y una pregunta, se podría justificar el texto, yo al menos lo prefiero...

Sólo lo he leído, pero me parece totalmente lógico, y es que el "justificado" en el texto empeora la lectura.

DoPeY-BBS · #78 (**permalink**) 09/12/2008, 17:35

A mi no me funcionan los acceskey? en ningunos de los dos navegadores que tengo firefox 3.0 ni ie 6.0

EDITO

Problema Resuelto

Por lo menos con el teclado numérico no funciona conmigo

Mikmoro · #79 (**permalink**) 09/12/2008, 18:28

Pues no sé que te ocurrirá, pero:

IE6: alt + tecla de acceso + enter - va bien
FF2 y 3: alt+mayus+tecla - va bien

Al menos a mi me van bien.

STK_Pablo · #80 (**permalink**) 16/12/2008, 04:41

Justo lo que estaba buscando, ya que deseaba pasar mi sitio de tablas a divs, gracias....

alapaco · #81 (**permalink**) 19/12/2008, 09:22

Excelente guía, me sirvió mucho lo del atributo position.

ensamble · #82 (**permalink**) 18/01/2009, 05:35

Muy buenoOoooooooooooo!
básico y fácil de entender, comparto completamente que es cambiar la forma de "pensar" se hace difícil, pero despues se mirá para atrás..y se ve, cuanto se perdía..!
Las tablas siguen siendo útiles para algunas cosas, personalmente para paginación de elementos en aplicaciones, las sigo usando.

felicitaciones!

bishop365 · #83 (**permalink**) 03/03/2009, 11:45

Hola, estoy 'tratando de cambiar' pero no lo logro del todo. Quisiera quitar un iframe donde muestro distintos archivos (siempre sobre index.php), pero no lo logro con css/divs. Necesito que me den una idea como para 'arrancar' y ver si logro resolverlo.Gracias.

David · #84 (**permalink**) 03/03/2009, 11:46

Algo así, no podrás hacer con CSS. Deberías hacerlo con AJAX.

bishop365 · #85 (**permalink**) 03/03/2009, 11:56

mmm, creo que entonces dejare todo igual ya que funciona perfecto, solo era un cambio visual.Gracias David.

#86 (**permalink**) 03/03/2009, 12:03

La etiqueta iframe puede sustituirse en algunos casos por <object>, pero no es una cuestión de CSS, ya que CSS se limita a la presentación, no a la funcionalidad.
A menos que quieras cambiar la estructura de tu sistema, deberías seguir con <iframe>

Saludos.

bishop365 · #87 (**permalink**) 03/03/2009, 12:11

Sí, seguire con iframe por ahora.Gracias.

Anya82 · #88 (**permalink**) 04/03/2009, 23:49

Hey! Mik!
Gracias por tu ayuda! me uno al gremio de seguidores de tu guia! jeje
quiero aprender CSS y me servira muchisimo tu guia, gracias por el tiempo invertido!

Mikmoro · #89 (**permalink**) 05/03/2009, 01:17

Hola, Anya. Ya ves que es muy específica para la migración (no muy orientada a aprender CSS en sí), pero bueno, algo puede orientar.

Me alegro de que te guste. La segunda parte es más práctica

Te veremos pues por aquí buscando cosillas y aclarando dudas en breve, ¿no?

Celiborcae · #90 (**permalink**) 06/03/2009, 12:38

Gracias señor por la guia.
Es muy buena para tener las cosas mas claras.
Que santa Lucia le conserve la claridad de ideas.