![]() |
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 |
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II Gracias mik!!!!! |
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II Muy bueno, si señor! |
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: |
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... |
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!! |
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 |
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II Cita:
Cita:
|
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) |
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:
"<img class="captura" src="imagenes/captura6.jpg" alt="Imagen final de la web" title="Imagen final de la web" longdesc="descripciones.html#final" />" Cita:
Cita:
De verdad, no he entendido en absoluto ninguno de los 3 comentarios :borracho: |
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II Gracias Mikmoro te pasaste !!!! te regalo a mi hermana!1 XD! |
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II Cita:
Cita:
Cita:
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 |
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:
|
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II Cita:
|
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II Cita:
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:
|
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:
|
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 |
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II Cita:
Me alegro de que haya quedado resuelto. :-) |
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II Cita:
|
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 |
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II Gracias, me alegro de que te guste. Saludos. |
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II Cita:
mikmoro gracias nuevamente no olvides que si en algo te puedo ayudar no dudes en enviarme un mensaje privado :aplauso: :-) |
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II Muy bien explicado, como siempre: felicitaciones Mikmoro !! |
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! |
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:
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 |
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:
Cita:
Cita:
Cita:
Cita:
Cita:
Cita:
Cita:
Lo dicho: si ya te has pinchado el veneno, empieza a estudiar CSS que te va a encantar. |
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 |
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 |
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 |
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II Cita:
Cita:
Saludos. |
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 |
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. |
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 |
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: |
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:
En cuanto a lo de migración sin dolor... cómo dueeele!!! Saludos |
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:
Un saludo. P.D.: me he atrevido a comentarte, pese a que la consulta es a Mikmoro, porque debe de estar de descanso :-D |
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 |
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 Y en el html remodela para que quede así:
Código html:
Por cierto, la imagen de la bici la tenías sin cerrar.Ver original Ahora al menos yo lo veo correcto y razonablemente parecido en FF 3.5, ie7, safari, opera. Un saludo |
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 |
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. |
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 |
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. |
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. |
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II Hola: Cita:
Saludos. :adios: |
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II Cita:
Tema extenso y complicado, la verdad. |
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II Hola: Interesante. Saludos. :adios: |
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. |
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:
Cita:
Cita:
Saludos:adios: |
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. |
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 En este código.
Código HTML:
Ver original 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:
Resultado ahora. Ver original 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.