Foros del Web - Aporte: Guía de Migración a XHTML+CSS

Página 1 de 3

Mostrar 50 mensajes desde este tema en una página

Foros del Web (http://www.forosdelweb.com/)

- CSS (http://www.forosdelweb.com/f53/)

- - Aporte: Guía de Migración a XHTML+CSS - Parte II (http://www.forosdelweb.com/f53/aporte-guia-migracion-xhtml-css-parte-ii-657814/)

Mikmoro

29/12/2008 18:12

Aporte: Guía de Migración a XHTML+CSS - Parte II

Hola a todos.

He hecho la segunda parte de la pequeña guía de migración, esta vez como un ejemplo práctico de transformación del código con un caso concreto.

A ver qué os parece y si tiene gazapos, cosas que no se entiendan, mal esctructuradas o lo que os parezca. Espero vuestros comentarios y sugerencias.

http://www.araudi.net/migracion/migr..._parte_II.html

pao01

29/12/2008 18:22

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Gracias mik!!!!!

Triby

29/12/2008 18:37

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Muy bueno, si señor!

DoPeY-BBS

29/12/2008 18:39

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

En hora buena Mikmoro ahora le doy un vistazo y luego te digo que tal pero desde ahora se que es excelente. :si:

Esto cae perfecto para la competencia de css :aplauso:

Aresillo

30/12/2008 08:48

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Mi enhorabuena!!
Esperando la parte III!!! que ganas!

Aresillo!!
Cuando quieras nos ponemos con lo otro...

jomaruro

30/12/2008 17:39

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Hola Mikmoro:

Esto es una obra de arte (no lo pongo en mayúsculas para no parecer descortés) pero las mereces.

Una guía breve, concisa y clara, pero que muy clara.

¡¡¡Muchas gracias!!!

:aplauso::aplauso::aplauso::aplauso::aplauso:

Un saludo!!

kseso?

30/12/2008 17:52

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Ya sólo te queda empaquetar toda "Araudi" en un .rar y hacer spam con él.

Gracias

Mikmoro

30/12/2008 18:22

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Cita:

Iniciado por jomaruro (Mensaje 2724736)

Una guía breve, concisa y clara, pero que muy clara.

:-) Gracias, me alegro de que te guste. Espero que sirva para algo ;-)

Cita:

Iniciado por kseso? (Mensaje 2724739)

Ya sólo te queda empaquetar toda "Araudi" en un .rar y hacer spam con él.

¿No te ha llegado el correo ya? :risa:

DoPeY-BBS

31/12/2008 11:59

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

El manual es muy bueno la verdad es que no hay de que quejarse.

Una observación en cuanto a los atributos de la imágenes

title Esto hace que al pasar el mouse (raton) por una imagen se vea un texto ya que, Alt muestra el texto cuando una imagen esta desactivada.

Hay otra cosa que la tengo dudosa. yo uso firefox y entre la imagen de la cabecera hay un pequeño margen y me vi obligado a quitarle el borde al menu para que no se vea esa linea.. no se ¿que me puedes decir de eso?

Tengo entendido tambien que los objetos inline no admiten anchura (display block)

Mikmoro

31/12/2008 12:10

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Ya sabes que agradezco todas las observaciones, pero no sé si has sido muy explícito:

Cita:

Iniciado por DoPeY-BBS (Mensaje 2725535)

Una observación en cuanto a los atributos de la imágenes

title Esto hace que al pasar el mouse (raton) por una imagen se vea un texto ya que, Alt muestra el texto cuando una imagen esta desactivada.

No sé qué quieres decir: todas las imágenes que he insertado llevan tanto la propiedad title como alt:
"<img class="captura" src="imagenes/captura6.jpg" alt="Imagen final de la web" title="Imagen final de la web" longdesc="descripciones.html#final" />"

Cita:

Iniciado por DoPeY-BBS (Mensaje 2725535)

Hay otra cosa que la tengo dudosa. yo uso firefox y entre la imagen de la cabecera hay un pequeño margen y me vi obligado a quitarle el borde al menu para que no se vea esa linea.. no se ¿que me puedes decir de eso?

Tampoco sé a qué te refieres: en el diseño con tablas, que nombre como "original", existe un espacio, que fue justo lo que motivó la consulta del usuario (tal y como relato); en la final hecha sin tablas, no. No sé a qué te refieres. Además en mi código final el menú no tiene ningún borde.

Cita:

Iniciado por DoPeY-BBS (Mensaje 2725535)

Tengo entendido tambien que los objetos inline no admiten anchura (display block)

Y con esto menos sé qué quieres decir. Así lo afirmo yo mismo en la primera parte de la guía, pero, en este caso, ¿a qué te refieres? ¿hay algún gazapo, o es que hay algo que crees que falta, o algo así?

De verdad, no he entendido en absoluto ninguno de los 3 comentarios :borracho:

jafp_pe

31/12/2008 13:44

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Gracias Mikmoro te pasaste !!!! te regalo a mi hermana!1 XD!

DoPeY-BBS

31/12/2008 14:39

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Cita:

La verdad yo tengo que tener mas cuidado para que mis mensaje no se presten a confusión, cuando me refiero a la observación, lo hago con la intención para cuando una persona (lector) sin conocimiento a css sepa el porque de las cosas.

Cita:

exacto, a mi me aparece con el borde no se porque si lo que hago es un copy/paste, adamas en el dreamwaver no me aparece el espacio que te digo ¿que puede ser?

Cita:

Edito:

Entiendo mas o menos lo del display block lo que no logro entender es porque les da un with de 99% si eso no afecta en nada o no se si me estoy equivocando

Mikmoro

01/01/2009 17:45

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Ahhhh, pues nada, es que creía que te estabas refiriendo a errores o cosas dudosas del texto publicado, no a otras cosas.

Cita:

Iniciado por DoPeY-BBS (Mensaje 2725693)

Entiendo mas o menos lo del display block lo que no logro entender es porque les da un with de 99% si eso no afecta en nada o no se si me estoy equivocando

Sí, sí afecta y mucho. Si lo miras en IE6, verás que en caso de no decirle lo que debe medir de ancho (99% porque si pusiera 100% al pasar el ratón todo se descuadraría debido al borde que aparece al hacerlo), el enlace sólo se resaltará al pasar por encima de la palabra, pero no al pasar por cualquier parte del área que debería ocupar el enlace, como ocurre en FF por ejemplo. Al decirle que ocupe todo el ancho del enlace, en IE6 se comporta igual que en el resto y al pasar el ratón por cualquier parte el enlace reacciona :hover.

Mikmoro

01/01/2009 17:47

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Cita:

Iniciado por jafp_pe (Mensaje 2725624)

Gracias Mikmoro te pasaste !!!! te regalo a mi hermana!1 XD!

:risa: :risa: :risa: ¿Cóme mucho?

DoPeY-BBS

01/01/2009 18:16

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Cita:

Iniciado por Mikmoro (Mensaje 2726271)

Ahhhh, pues nada, es que creía que te estabas refiriendo a errores o cosas dudosas del texto publicado, no a otras cosas.

Sí, sí afecta y mucho. Si lo miras en IE6, verás que en caso de no decirle lo que debe medir de ancho (99% porque si pusiera 100% al pasar el ratón todo se descuadraría debido al borde que aparece al hacerlo), el enlace sólo se resaltará al pasar por encima de la palabra, pero no al pasar por cualquier parte del área que debería ocupar el enlace, como ocurre en FF por ejemplo. Al decirle que ocupe todo el ancho del enlace, en IE6 se comporta igual que en el resto y al pasar el ratón por cualquier parte el enlace reacciona :hover.

Pues que raro, ya que, al pasar el hover en i6 y quitandole la propiedad me funciona perfectamente, lo que yo pienso es lo siguiente

La propiedad display block esta heredando la altura 34px de la capa menu y la anchura del 25% pero yo no se mucho de esto.

A lo mejor es magia que me pasa :pirata:

Cita:

#menu {background-color: #333;
height: 34px;
}
#menu ul {text-align: center;
}
#menu ul li {float: left;
width: 25%;
}
#menu ul li a {color: #FFF;
line-height: 34px;
font-family: "Century Gothic";
font-weight: bold;
text-decoration: none;
display: block;
}

#menu a:hover {background-color: #e9eada;
color: #333;
line-height: 32px;
}

Mikmoro

01/01/2009 18:34

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Si pones ese código (sin width), la opción del menú por ejemplo "Inicio" no cambia el fondo hasta que te acercas a la palabra en sí, pero si dejas el width, cambia en el momento que entras el el recuadro por cualquier parte, por ejemplo la esquina izquierda.

Hablo en IE6. Si no te ocurre eso puede que estés usando el Múltiple IE, que tienes errores de dibujado como ese en IE6.

Otra cosa:

Cita:

#menu a:hover {background-color: #e9eada;
color: #333;
line-height: 32px;
}

Has quitado el borde del original. La reducción del line-height a 32px es debido al borde.

DoPeY-BBS

01/01/2009 18:49

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Ahora entiendo a lo que te refieres...La duda queda resuelta. :-)

La verdad es que eres un guru en esto de css y estoy siguiendo tu camino :aplauso:

No sabia que el Múltiple IE tuviese errores aunque yo lo pruebo directamente del navegador también..

Gracias

Mikmoro

01/01/2009 18:53

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Cita:

Iniciado por DoPeY-BBS (Mensaje 2726339)

No sabia que el Múltiple IE tuviese errores aunque yo lo pruebo directamente del navegador también.

Yo no lo he usado nunca, pero en alguna consulta hemos detectado que el IE6 del Múltiple IE no se comporta exactamente igual que el IE6 por separado.

Me alegro de que haya quedado resuelto. :-)

DoPeY-BBS

01/01/2009 19:14

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Cita:

Sabes yo no me habia fijado en el css completo (al pie de la pagina) y pude ver el margin de la imagen, aun asi resuelto el caso veo que el borde es se sale un poco en "inicio" tanto en FF como IE6 (el browser).

CircuitoX

04/01/2009 11:25

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Mikmoro gracias por compartir estas experiencias
se agradece de todo carazon..
salu2

Pd: Muy interesante la migración

Mikmoro

05/01/2009 00:16

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Gracias, me alegro de que te guste.

Saludos.

McPinkY18

16/01/2009 19:01

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Cita:

Iniciado por Mikmoro (Mensaje 2729520)

Gracias, me alegro de que te guste.

Saludos.

Tremenda Guia.. Mas wenaa!!

mikmoro gracias nuevamente no olvides que si en algo te puedo ayudar no dudes en enviarme un mensaje privado :aplauso:
:-)

Jamati

16/01/2009 22:09

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Muy bien explicado, como siempre: felicitaciones Mikmoro !!

MBurton

13/04/2009 13:49

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Muchas gracias por "perder el tiempo" y ayudarnos a entender el maravilloso mundo de los divs, etc...

Yo soy como muchos de los que agradecen estos tutoriales, un HTML/tablero que lleva toda la vida luchando con las tablas, etc... Desde hace tiempo quería dar el paso y comenzar a diseñar las páginas como se lleva haciendo desde hace un tiempo, pero como siempre ocurre, no se saca el tiempo suficiente para hacerlo.

Espero que esta "migración" no sea muy dura. Ánimos a todos y suerte que la vida esta muy dura en estos tiempos. Y como decía alguno: reciclarse o morir.

Saludos desde BCN!

kike2lucas

12/05/2009 03:39

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Hola, Mik.
Soy uno de los tantos que está tratando de hacer esa "Migración sin dolor" a CSS, aunque por el momento viene siendo bastante dolorosa (!). Leí ambas partes de la Guía (Felicitaciones y Muchas Gracias!), y anteriormente había consultado bibliografía; aunque sigo teniendo unas cuantas dudas.
Pensé en poner mis conocimientos en práctica en un nuevo sitio que en teoría es bastante sencillo, solo cabecera y un cuerpo. Abajo iría cerrado solo con una línea de copyright. Es una web de venta y alquiler de bicicletas.
El link a la página es mandrin.es/object/index.html
Y éste el CSS:

Cita:

/* CSS Document */

body {
margin: 0;
font-family: "Century Gothic","Trebuchet MS", Arial, Verdana, sans-serif;
font-size: 14px;
color:#666666;
}

a:link {
color:#666666;
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
color: #F7941E;
text-decoration: none;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}

#Wrapper {
margin-left: auto;
margin-right: auto;
position: relative;
width: 800px;
height: 100%;
text-align: center;
border: 1px dotted #f00;
}

#Navbar {
margin: 10px 0px 0px 0px;
padding-top:0px;
padding-left:100px;
top: 0px;
width:100%;
height:122px;
border: 1px dotted #000;
background-image:url(../img/logo.gif);
background-repeat: no-repeat;
background-position: top left;

}
#Text{
font-size: 13px;
margin: 10px 0px 0px 45px;
width: 236px;
line-height: 1.2em;
padding: 0px 0px 0px 0px;
border: 1px dotted #00f;
text-align: justify;
}
#Mainbody {
position:relative;
float: right;
margin: 0;
border: 1px dotted #00f;
}
.menu {
margin-top: 50px;
margin-left: 45px;
}
.activa {
margin-left: 100px;
color: #F7941E;
}
.idioma {
margin-left: 440px;
font-size: 12px;
text-align: rigth;
}

Bueno; empiezo a largarte mis dudas:
1) Para tener una referencia tablera del diseño le puse un borde punteado a los bloques, que después tengo pensado quitar. A la cabecera, que incluye la barra de navegación, le puse un width: 100%; sin embargo veo que el bloque se extiende fuera de los límites del bloque contenedor. Por qué ocurre eso?
2) Había empezado a diseñar habiendo leído sólo la guía 1. Al leer la segunda parte intenté cambiar los elementos del menú a lista, tal cual recomienda, pero me encuentro que me antepone un circulito a cada elemento. Cómo puedo evitarlo?
3) Tampoco me funciona el margin-top que le asigno a la clase "menu", lo cual en principio pensé que podía ser la ausencia de un display:block; Estoy en lo cierto? De estarlo, por qué sí me acepta el margin-left que le asigno? Para poder marginarlo hacia abajo tuve que decidirme por poner etiquetas <br>. Espero vuestros comentarios
4) Mi querido Internet Explorer me ha desplazado el texto principal a la derecha. El mismo está pensado para ocupar el ancho de las letras del logo. En MozFF y el resto se visualiza correctamente. Tiene solución esto?
5) Tuve muchos problemas para poner un div junto a otro flotado. Finalmente lo conseguí, empezando en el HTML con el elemento posicionado a la derecha. Esto siempre funciona así? De derecha a izquierda? O primero el elemento `flotado´ y después el `flotante´? Un comentario; también, para conseguirlo debí resignar el padding cosa que no hubiese podido hacer si el fondo del bloque hubiese sido de un color diferente al fondo de la página.
6) Una última duda. En la guía (parte 2), en la cabecera le dan "un poco de margin superior y padding inferior". Podrías explicar que hay que tener en cuenta para decidirse por el selector correcto?
En fin, unas cuántas dudas. Tengo decidida hacer la migración, y sin la guía ni siquiera podría haberlo intentado. Pero que eso de sin dolor... está por verse ;)
Gracias

Mikmoro

12/05/2009 16:04

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Buf, vaya consultita, kike2lucas. Una cosa es hacer una guía y otra abrir un consultorio particular :borracho:

Veré qué puedo responderte:

Cita:

Iniciado por kike2lucas (Mensaje 2908417)

Porque ese contenedor (#Navbar) también tiene un padding-left de 100px. Quítalo y verás.

Cita:

Iniciado por kike2lucas (Mensaje 2908417)

2) Había empezado a diseñar habiendo leído sólo la guía 1. Al leer la segunda parte intenté cambiar los elementos del menú a lista, tal cual recomienda, pero me encuentro que me antepone un circulito a cada elemento. Cómo puedo evitarlo?

Con list-style-type: none; donde declares el elemento UL en la CSS. Esto es bastante básico, así que te recomiendo que aparte de las guías empieces a estudiar CSS desde el principio.

Cita:

Iniciado por kike2lucas (Mensaje 2908417)

3) Tampoco me funciona el margin-top que le asigno a la clase "menu", lo cual en principio pensé que podía ser la ausencia de un display:block; Estoy en lo cierto? De estarlo, por qué sí me acepta el margin-left que le asigno? Para poder marginarlo hacia abajo tuve que decidirme por poner etiquetas <br>. Espero vuestros comentarios

Así es. Span es un elemento de línea y se ubica en su lugar correspondiente del flujo del documento, mientas que sí acepta márgenes laterales..

Cita:

Iniciado por kike2lucas (Mensaje 2908417)

4) Mi querido Internet Explorer me ha desplazado el texto principal a la derecha. El mismo está pensado para ocupar el ancho de las letras del logo. En MozFF y el resto se visualiza correctamente. Tiene solución esto?

Sí: elimina el text-align: center de #Wrapper

Cita:

#Wrapper {
margin-left: auto;
margin-right: auto;
position: relative;
width: 800px;
height: 100%;
text-align: center;
border: 1px dotted #f00;
}

Cita:

Iniciado por kike2lucas (Mensaje 2908417)

5) Tuve muchos problemas para poner un div junto a otro flotado. Finalmente lo conseguí, empezando en el HTML con el elemento posicionado a la derecha. Esto siempre funciona así? De derecha a izquierda? O primero el elemento `flotado´ y después el `flotante´? Un comentario; también, para conseguirlo debí resignar el padding cosa que no hubiese podido hacer si el fondo del bloque hubiese sido de un color diferente al fondo de la página.

No funciona siempre así pero muchas veces es conveniente. Si ambas columnas tienen ancho fijo no es necesario en absoluto.

Cita:

Iniciado por kike2lucas (Mensaje 2908417)

6) Una última duda. En la guía (parte 2), en la cabecera le dan "un poco de margin superior y padding inferior". Podrías explicar que hay que tener en cuenta para decidirse por el selector correcto?

Pues no recuerdo a qué te refieres, pero margen es distancia de la caja hasta su adyacente, y padding es relleno dentro de la caja.

Cita:

Iniciado por kike2lucas (Mensaje 2908417)

En fin, unas cuántas dudas. Tengo decidida hacer la migración, y sin la guía ni siquiera podría haberlo intentado. Pero que eso de sin dolor... está por verse ;)
Gracias

Al final era mentira, pero de no haberlo puesto así ni siquiera te hubieras animado a leerlo :risa:

Lo dicho: si ya te has pinchado el veneno, empieza a estudiar CSS que te va a encantar.

kike2lucas

18/05/2009 08:58

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Muchas gracias por responder. Voy a hacer los cambios que me sugeriste. La idea es migrar, aunque duela un poquito. Me parece que vas a tener que abrir la consultoría, je.
Saludos

CopperDavid

20/05/2009 03:39

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Muy buen manual y sobretodo bien estructurado, al menos servirá de mucho a gente que crea sus páginas web con Dreamweaver. Es lo que tiene trabajar con una herramienta automatica.

Y por favor, como recomendación, quien utilice el Dreamweaver para crear sus páginas web, que no deje los estilos con los nombres automaticos. La verdad es que duelen los ojos cuando ves codigo (class="estilo18"), no queda nada profesional.

Animo a la gente a trabajar con css porque la maquetación es perfecta y configurable para todos los navegadores.

FELICIDADES POR TU 2ª Parte del manual, lo explicas fenomenal.

SALU2

CopperDavid

20/05/2009 03:45

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Así da gusto, con gente que se explica de maravilla y ayuda a los compis mas necesitados.

Muchas gracias.

SALU2

Mikmoro

20/05/2009 04:32

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Cita:

Iniciado por CopperDavid (Mensaje 2921184)

Y por favor, como recomendación, quien utilice el Dreamweaver para crear sus páginas web, que no deje los estilos con los nombres automaticos. La verdad es que duelen los ojos cuando ves codigo (class="estilo18"), no queda nada profesional.

No, la verdad: muy descriptiva no es la clase "estilo18" :borracho: Quedan horribles.

Cita:

Iniciado por CopperDavid (Mensaje 2921184)

FELICIDADES POR TU 2ª Parte del manual, lo explicas fenomenal.

Gracias, es un bonito piropo. Me alegro de que haya gustado y/o servido. ;-)

Saludos.

La zona horaria es GMT -6. Ahora son las 02:03.

Página 1 de 3

Mostrar 50 mensajes desde este tema en una página