Foros del Web

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:

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" />"
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:

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.
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:

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í?
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:

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?
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)
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?

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.

arthpix 25/06/2009 12:34

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II
 
Excelente Mik, muchísimas gracias por tu labor para quienes aun no realizan la migración ;-)

Un pequeño añadido a tu gran trabajo: No todos los equipos tienen disponibles las mismas fuentes. Si utlizamos tipos de letras específicos en vez de familias tipográficas "básicas" el diseño se puede arruinar en otros equipos.

como ejemplo, yo utilizo Linux y no dispongo de las fuentes "Palatino Linotype" y "Century Gothic" lo que ocasiona que el diseño se descuadre completamente en mi navegador (Firefox 3.0):
http://img329.imageshack.us/img329/4...allazou.th.png

En este ejemplo, cambié el estilo css para que los links utilizarán "Times" y solucionó el problema:
http://img524.imageshack.us/img524/5...llazo1q.th.png

En este otro, eliminé la fuente de los mismos, permitiendo que heredaran el tipo:
http://img170.imageshack.us/img170/6...allazo2.th.png

Compatibilidad de fuentes, un punto tal vez pequeño pero importante a recordar.


Saludos

Mikmoro 25/06/2009 15:34

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II
 
Hola arthpix. Me alegro de que te guste.
Por supuesto que estoy de acuerdo, pero como ya comentaba en el propio texto, por un lado intentaba imitar la fuente original creada por quien hizo la página inicialmente, y por otro, como también decía, al no ser un "manual de buenas prácticas" del diseño web, hay montones de cosas que he obviado como las fuentes, compatibilidades, resoluciones, medidas relativas, accesibilidad, etcétera.

En ningún caso es la fuente que yo elegiría (creo), o en su caso, como suelo hacer (yo también soy usuario de linux aunque debo trabajar con Windows), usaría como sustitución alguna parecida para otros sistemas.

Como digo, hay muchas cosas no tratadas en estas guías que algún día me animaré a introducir en la parte III: el citado manual de buenas prácticas ;-)

Se agradece que te hayas tomado la molestia de mirarlo como para hacer esa observación. Espero contar contigo si me animo con esa difícil tercera parte.

arthpix 25/06/2009 21:55

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II
 
Tienes mucha razón. Y celebro que planees extender tu manual que con tus conocimientos seguro que se podría convertir en un excelente libro muy completo y útil.

Por supuesto que puedes contar conmigo para lo que planeas, será un placer enorme contribuir aun que sea un poquito con un master como tu, siempre dispuesto a compartir su experiencia. :-)

Saludos

Caminantejm 16/07/2009 04:33

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II
 
Mikmoro. ¡Gracias! por tu segunda parte de la guía.

- No sólo con dolor estoy haciendo la migración sino con rabia al haber participado en un curso en el que el hombre que lo impartía estaba al margen de esta situación y nos recomendaba encarecidamente las tablas. No sólo libertad sino sugerencia hacia las tablas. A él le daba igual que un elemento fuera inline o block, ¡qué más da!.

- En fin, me voy a centrar en las gracias que te debo y ya está, Mikmoro.

- Y desde ahora intentaré migrar todas mis webs. Cuesta un poco como cuesta cuando te has habituado a algo, aunque sea malo.

- De todos modos, me pongo en el lugar en donde siempre he estado yo. Cogerte un FP o un Dreamweaver es relativamente más cómodo que pensar. Esto es así.

Gracias y hasta luego.
Caminantejm. :aplauso:

kike2lucas 22/07/2009 19:07

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II
 
Hola, Mik. Quizás me recuerdes. El 13 de mayo pasado hice una consulta sobre problemas que tenía con CSS e Internet Explorer. Apliqué los cambios que me sugeriste (aquellos más sencillos) y pude solucionarlo. Sigo trabajando en el sitio (lo tenía aparcado) y me encontré con nuevos inconvenientes, de nuevo con Internet Explorer (Firefox y Chrome me van de coña)
El problema es que me desplaza el texto, y no tengo la menor idea de como solucionarlo.
El link sería mandrin.es/mandrinman.html y el CSS es el siguiente (ara hacerte más fácil la búsqueda, el div involucrado es #Mainbodyret):

Cita:

/* CSS Document */

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

a:link {
color:#666666;
text-decoration: none;
}
a:visited {
color:#666666;
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%;
/* border: 1px dotted #f00; */
}

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

}
#Text{
font-size: 13px;
margin: 20px 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; */
}
#Textret{
font-size: 13px;
margin: 20px 0px 0px 45px;
width: 236px;
line-height: 1.2em;
padding: 0px 0px 0px 0px;
/* border: 1px dotted #00f; */
text-align: justify;
}
#Mainbodyret {
position:absolute;
float: right;
line-height: 1.6em;
margin: 20px 10px 0px 300px;
/* border: 1px dotted #00f; */
text-align: right;
}
#Mainbodyret img {
float: left;
}
/* Objetos de menu */
.menu {
margin-left: 45px;
}
.menueng {
margin-left: 52px;
}
.iniciomenu {
margin-left: 340px;
color: #F7941E;
}
.destacadoeng {
margin-left: 52px;
color: #F7941E;
}
.margen {
margin-left: 340px;
}
/* Cambio de idioma */
.idioma {
margin-left: 680px;
font-size: 12px;
text-align: rigth;
}
.idioma a {
color:#666666;
text-decoration: none;
}
/* Submenu Retail */
.iniciosubmenu {
font-size: 11px;
margin-left: 340px;
}
.iniciosubcolor {
font-size: 11px;
margin-left: 340px;
color: #F7941E;
} /*este es para el mandrinman en color */
.submenu {
font-size: 11px;
margin-left: 35px;
}
.destacado {
font-size: 11px;
margin-left: 35px;
color: #F7941E;
}
.destmenu {
margin-left: 45px;
color: #F7941E;
}

.textpicbike {
font-size: 12px;
font-style: italic;
}

.propiedades {
font-size: 12px;
text-align: left;
line-height: 1.1em;
}
Te agradecería que me puedas echar una mano

En cuanto a lo de migración sin dolor... cómo dueeele!!!
Saludos

kseso? 23/07/2009 03:14

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II
 
Hola Kike
Tu enlace no funciona (errror 404) y si el html no se puede ni ver ni reproducir el error.
¿Qué tipo de desplazamiento es el que tienes con el texto?.
De momento, y hasta que matices ese detalle, te comento sobre el div involucrado:
Cita:

#Mainbodyret {
position:absolute;
float: right;
}
una de las dos está de más.

Un saludo.

P.D.: me he atrevido a comentarte, pese a que la consulta es a Mikmoro, porque debe de estar de descanso :-D

kike2lucas 24/07/2009 08:30

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II
 
Que tal, kseso?
Probaré hacer los cambios que me dices.
En cuanto al desplazamiento del texto sólo podrás verlo claro como dices, viendo el link.
Que raro, yo lo probé y funciona (el link). probablemente sea algo temporal.
Si entras en madrin.es y haces click en venta podrás verlo. Con todas las páginas de venta tengo el mismo problema. No puedo poner el link completo ya que no tengo posts suficientes.
Como te comenté, funciona en Chrome y Mozilla, pero no en explorer.
AH! y una duda... dónde queda Ramajero Argonauta?
Saludos y Gracias

kseso? 24/07/2009 11:38

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II
 
Realiza estos cambios/añadidos a tu css
Código css:
Ver original
  1. #Wrapper {
  2. margin:0 auto;
  3. position:relative;
  4. width:800px;
  5. }
  6. #Textret {
  7. float:left;
  8. font-size:13px;
  9. line-height:1.2em;
  10. margin:20px 0 0 45px;
  11. padding:0;
  12. text-align:justify;
  13. width:236px;
  14. }
  15. .textpicbike {
  16. font-size: 12px;
  17. font-style: italic;
  18. margin-left:290px;
  19. padding-top:25px;
  20. }
  21. .textpicbike img {
  22. float: left;
  23. }    
  24. .propiedades {
  25. clear:both;
  26. font-size:12px;
  27. text-align:left;
  28. float: left;
  29. }

Y en el html remodela para que quede así:
Código html:
Ver original
  1. <div id="Wrapper">
  2. <div id="Navbar"><!-- su contenido no varía, aunque estarían mejor los enlaces en una lista, no en span
  3. </div>
  4. <div id="Textret">
  5.      <p>Tenemos sorprendentes ofertas si quieres comprar una bici. Si después de un tiempo estás aburrido de ella, te la volvemos a comprar!<br />
  6.      Si has decidido comprar una de nuestras bicicletas, has tomado una buena decisión. Disfrútala durante un año y luego tráela; te daremos 100? si está en un estado decente. Esto significa que la estás pagando a mitad de precio.<br />
  7.      También puedes salir por la puerta con una nueva MANDRIN si lo deseas.</p>
  8.  </div>
  9.    <div class="textpicbike">
  10. <img src="mandrinman_files/mandrinman.jpg" alt="MANDRINLADY" />
  11.    <p>Para aquellos hombres que prefieran la sobriedad a lo chafardero tenemos la bici perfecta. Esta bicicleta es fuerte, sólida y duradera.
  12.        Con su caja de 3 velocidades podrás ir de un lado al otro de la ciudad, y por qué no, también llevar a la parienta. </p>
  13.    <ul class="propiedades">
  14.        <li>Armazón de acero</li>
  15.        <li>Luz de dínamo frontal</li>
  16.        <li>Sillín grande y cómodo</li>
  17.        <li>Cubrecadena de acero pintado</li>
  18.        <li>Guardabarro trasero. Aleación de llantas tradicional</li>
  19.        <li>Rear one piece carrier with full stand</li>
  20.        <li>Freno trasero contrapedal con 3 velocidades internas</li>
  21.        </ul>
  22.  </div>
  23. </div> <!-- cierre de wrapper -->
Por cierto, la imagen de la bici la tenías sin cerrar.
Ahora al menos yo lo veo correcto y razonablemente parecido en FF 3.5, ie7, safari, opera.

Un saludo

kike2lucas 26/07/2009 17:12

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II
 
Genial! Funcionó. Ahora cambiaré el resto. No te contesté antes porque había reventado el sistema intentando limpiar el registro con el reg Seeker. Como verás, me encanta meter la mano donde no tengo idea. Menos mal que existen ustedes!
En fin, trataré de comprender los cambios que me haz hecho hacerle al CSS. Cualquier cosita vuelvo al consultorio, je. Saludos

Mikmoro 27/07/2009 10:55

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II
 
Hola, kike2lucas.
No he podido responder antes. Me alegro de que esté solucionado, no obstante, no sé qué me da que este no era el mejor sitio para hacer esta consulta, ¿no?. Creo que es mejor abrir otro hilo para eso, si no la gente que esté leyendo este hilo por su temática y asuntos sobre la guía se aburrirá viendo que se cambia de tema sin mucho fundamento.

En fin, lo dicho, que me alegro de que el amigo kseso? te haya ayudado a solucionarlo en mi ausencia

Saludos.

kike2lucas 28/07/2009 16:00

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II
 
Es cierto. Me equivoqué porque había posteado una duda en la parte II de la guía y quería retomar el tema. Ahora tengo dudas con el CSS en las tablas (qué doloroso que es esto) y posteé en un lugar más propicio.
Volviendo al hilo, excelente guía; no se pierdan la II parte. Y ya espero una tercera acerca de CSS y tablas, je.
Saludos

cristian_cena 19/08/2009 18:45

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II
 
Gracias milkmoro, su generosidad nos educa. Los foreros valoramos su trabajo y esperamos ansioso su tercera publicación.

Mikmoro 20/08/2009 01:09

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II
 
Hola, Cristian. No es para tanto :borracho: pero me alegro de que te guste. Lo hago encantado. A ver si me meto con la tercera parte alguna vez.

Saludos.

jomaruro 22/08/2009 04:08

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

Cita:

Iniciado por Mikmoro (Mensaje 3051548)
A ver si me meto con la tercera parte alguna vez.

Y ¿Sobre que va a tratar la tercera parte?

Saludos.

:adios:

Mikmoro 22/08/2009 04:25

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

Iniciado por jomaruro (Mensaje 3054431)
Y ¿Sobre que va a tratar la tercera parte?

Buenas prácticas para comenzar una web.

Tema extenso y complicado, la verdad.

jomaruro 22/08/2009 07:48

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

Interesante.

Saludos.

:adios:

Caminantejm 19/12/2009 04:46

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II
 
Gracias Mikmoro por tu ayuda y dedicación. Soy un "migrador" y verdaderamente he de ser sincero y reconocer que es un esfuerzo grande. No es tan fácil como parece. Es un esfuerzo grande el que hay que hacer. No obstante, más grande que el esfuerzo es la gratitud a que hayas dedicado tanto tiempo a ayudarnos.

- Mis mayores problemas están en el problema del flujo de contenidos. Llega a veces a ser enloquecedor porque no sabes por dónde va cada cosa. La teoría me la sé muy bien porque la he leído y releído muchas veces pero luego viene la práctica.

- Mi sugerencia, por tanto, es si nos puedes ayudar por aquí.

+++ ¿Cuáles son las cuatro cosas que tú llevas en la cabeza cuando comienzas? Me explico:
1.- Por ejemplo: ¿Unidades en píxeles para width y height o en porcentaje? Si uso porcentaje, ¿qué precauciones debo llevar siempre? Si uso px o em, ¿cuáles?. LO digo porque he editado con porcentaje y se me destartala mucho todo. ¿Es tan util trabajar las dimensiones de las cajas con porcentaje?

2.- ¿Siempre indicar la position de las cajas o sólo cuando sea necesario? El problema es que, cuando queremos posicionar podemos traer cajas sin posicionar.

3.- ¿Qué elementos importantes se nos salen del flujo y nos deorientan más?

4.- A la hora de meter contenido, ¿mejor div's o span's aunque sean de varias líneas?

5.- ¿Qué pistas llevas tú en la cabeza para que no se te salga del flujo el contenido?

6.- A veces, marco un border para saber cuál es el contenedor principal y veo que tengo más de la mitad de contenidos fuera del contenedor principal. Esto me desanima y me hace tirar por tierra todo el trabajo.

Bueno, estos son los aspectos que más me están problematizando el trabajo y que te aporto por si te ayudan a concretar tu ayuda.

Un saludo Mikmoro. Gracias de nuevo.
Caminantejm.

Carlangueitor 19/12/2009 17:55

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II
 
Bueno yo no soy Mikmorro ni tampoco soy un Master del CSS pero te contesto algunas cosas (si te interesa claro):
Cita:

Iniciado por Caminantejm (Mensaje 3211197)
1.- Por ejemplo: ¿Unidades en píxeles para width y height o en porcentaje? Si uso porcentaje, ¿qué precauciones debo llevar siempre? Si uso px o em, ¿cuáles?. LO digo porque he editado con porcentaje y se me destartala mucho todo. ¿Es tan util trabajar las dimensiones de las cajas con porcentaje?

Depende, quieres un layout liquido o estático?? Por lo general manejar un layout estático es la forma más fácil (en especial si apenas estás comenzando con esto) Sobre los em están mas orientados a los textos, ya que mejoran la accesibilidad de un sitio.


Cita:

Iniciado por Caminantejm (Mensaje 3211197)
4.- A la hora de meter contenido, ¿mejor div's o span's aunque sean de varias líneas?

los DIV´s son para elementos de bloque y los span para los elementos en linea, siempre deberás seguir esas reglas. Tampoco puede meter elementos de bloque dentro de elementos en linea (por ejemplo un <div> dentro de un <a>).

Cita:

Iniciado por Caminantejm (Mensaje 3211197)
6.- A veces, marco un border para saber cuál es el contenedor principal y veo que tengo más de la mitad de contenidos fuera del contenedor principal. Esto me desanima y me hace tirar por tierra todo el trabajo.

Mira sobre las propiedades overflow, esta propiedad es la responsable de que el bloque crezca conforme el contenido.

Saludos:adios:

Caminantejm 19/12/2009 19:37

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II
 
De acuerdo, gracias Carlangueitor. Toda ayuda es buena.
En el punto 6 quizás me refería al terrible asunto de las position absolute y relative. Ahora estoy con ello.
Gracias y saludos.
Caminantejm.

Caminantejm 23/02/2010 13:57

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II
 
Buenas.
Estoy en esta tarea de la Migración y ciertamente sigue siendo dura a veces. Pero gracias de nuevo a la gente que estáis ayudando.
+ ¿Contradicciones en el funcionamiento de los float?
Esta cuestión parece fácil a simple vista.
1.- Expongo este estilo:
Código CSS:
Ver original
  1. div#pagina {
  2.   border: 1px solid #CCC;
  3.   background-color: salmon;
  4.   padding: 10px;
  5. }
  6.  
  7. .derecha {border: 1px solid crimson;
  8. width: 100px;
  9. height: 140px;
  10.   float: right;
  11. }
  12.  
  13. .izquierda {border: 1px solid saddlebrown;
  14. width: 100px;
  15. height: 140px;
  16.   float: left;
  17. }
  18.  
  19. div.clear {
  20.   clear: both;
  21. }

En este código.
Código HTML:
Ver original
  1. <div id="pagina">
  2.    
  3.     <div class="izquierda">Izquierda</div>
  4.    
  5.   <span style="background:aqua;">
  6.   Y si yo escribo algo, ¿dónde se guardaría esto? Veámoslo. Lo que no se es si continuaría hasta el final o no. Para comprobarlo intentaré
  7.   generar una línea gigante que tenga que sobrepasar el ancho razonable. Y si yo escribo algo, ¿dónde se guardaría esto? Veámoslo. Lo que no se es si continuaría hasta el final o no. Para comprobarlo intentaré
  8.   generar una línea gigante que tenga que sobrepasar el ancho razonable. Y si yo escribo algo, ¿dónde se guardaría esto? Veámoslo. Lo que no se es si continuaría hasta el final o no. Para comprobarlo intentaré
  9.   generar una línea gigante que tenga que sobrepasar el ancho razonable. Y si yo escribo algo, ¿dónde se guardaría esto? Veámoslo. Lo que no se es si continuaría hasta el final o no. Para comprobarlo intentaré
  10.   generar una línea gigante que tenga que sobrepasar el ancho razonable.</span>
  11.  
  12.     <div class="derecha">Derecha</div>
  13.  
  14.   Texto anterior al clear.
  15.   <div class="clear"></div>Texto posterior al clear.
  16. </div>


Resultado (Opera, Mozilla e IE):

http://www.clientesred.com/~esparte/1.jpg

---> En teoría, he leído en las recomendaciones de W3C "Un elemento flotante a la izquierda debe ser colocado lo más a la izquierda posible, y un elemento flotante a la derecha lo más a la derecha posible. Tiene preferencia una posición más alta que una que esté más a la izquierda/derecha".
Pues bien, aquí no se cumple.
---> Luego no parece tan estricto que se salgan del flujo los float. Se salen parcialmente y se van a la parte que encuentran más alta. Si hay un "p" que les impide o un "span" como en este caso no salen totalmente del flujo.


---> Sin embargo, si coloco en el HTML la izquierda y derecha juntas sí se cumple. Yo siempre he entendido que los float se salen del flujo y se van a la parte más alta. Pero aquí veo claramente que no. ¿Me falta algún detalle?

Código HTML:
Ver original
  1. <div id="pagina">
  2.     <div class="derecha">Derecha</div>
  3.     <div class="izquierda">Izquierda</div>
  4.    
  5.   <span style="background:aqua;">
  6.   Y si yo escribo algo, ¿dónde se guardaría esto? Veámoslo. Lo que no se es si continuaría hasta el final o no. Para comprobarlo intentaré
  7.   generar una línea gigante que tenga que sobrepasar el ancho razonable. Y si yo escribo algo, ¿dónde se guardaría esto? Veámoslo. Lo que no se es si continuaría hasta el final o no. Para comprobarlo intentaré
  8.   generar una línea gigante que tenga que sobrepasar el ancho razonable. Y si yo escribo algo, ¿dónde se guardaría esto? Veámoslo. Lo que no se es si continuaría hasta el final o no. Para comprobarlo intentaré
  9.   generar una línea gigante que tenga que sobrepasar el ancho razonable. Y si yo escribo algo, ¿dónde se guardaría esto? Veámoslo. Lo que no se es si continuaría hasta el final o no. Para comprobarlo intentaré
  10.   generar una línea gigante que tenga que sobrepasar el ancho razonable.</span>
  11.  
  12.   Texto anterior al clear.
  13.   <div class="clear"></div>Texto posterior al clear.
  14. </div>
Resultado ahora.
http://www.clientesred.com/~esparte/2.jpg

-------> 2.- Y una pregunta para Mikmoro si puede contestar. Le estaría muy agradecido. En la primera de la guía (Migración...) parte presentas un ejemplo de layout en dos columnas laterales (derecha e izquierda). El centro es líquido. ¿Por qué colocar primero en el HTML primero la derecha, luego la izquierda y posteriormente la central? ¿Hay algún motivo especial? Parece que la lógica dice primero va en el código la que te encuentras antes -izquierda-, después la central y al final la derecha.

Espero alguien me confirme esto.
Gracias de antemano.
Caminantejm.


La zona horaria es GMT -6. Ahora son las 04:25.

Desarrollado por vBulletin® Versión 3.8.7
Derechos de Autor ©2000 - 2026, Jelsoft Enterprises Ltd.