Separa el contenido de la presentación, segunda parte y con ejemplos reales
El otro día conversábamos sobre la metodología de la separación del contenido de la presentación. Es una metodología ideal para cualquier proyecto de Internet. No digo que sea obligatoria, sino más bien: recomendable. Entre la charla, salieron comentarios que invitaban a mostrar una aplicación real de esta metodología. Según algunos, era imposible tocar algo sin tocar XHTML. Volviendo al tema, quería mostrarles una aplicación de esta metodología, en donde no se toca ni un bit de XHTML y en pocos minutos tenemos, prácticamente otro sitio. No estoy hablando de un blog, sino, en este caso, de Mercadelia, un sitio que es real, con tablas, imágenes, texto, listas, etc.
Lo que a continuación van a ver es, en primicia, un adelantillo del nuevo Mercadelia que tiene unos ajustes necesarios para ir más suave de lo que va ahora. Esta nueva versión no estrena diseño nuevo o distinto, más que ajustes del código XHTML y una hoja de estilos renovada, esto le da al sitio una flexibilidad increíble. Prueba de ello es el nuevo soporte multidiomas, que permite mezclar varias lenguas en un mismo documento. Más adelante les contaré como, sólo quiero mostrarles cómo queda el sitio supuestamente traducido al árabe:


¿En árabe? Quizás se imaginan que tuve que hacer todo esto de nuevo o modificar cientos de líneas de código XHTML y CSS, pero no. Esto fue posible gracias a la estricta separación del contenido de la presentación. No se molesten en traducir el árabe, porque fue cortado y pegado de la Wikipedia, de esta manera he podido probar el comportamiento tanto del UTF-8 como del CSS. No hay imágenes más que el logotipo y las esquineras, el resto es pura magia del CSS.
Pueden ver los ejemplos a tamaño real en Flickr de la página de inicio en árabe y la página de publicar un anuncio.
Esto, aunque parezca un trabajo de chinos, me ha tomado sólo 15 minutos. Simplemente leí unas instrucciones disponibles del atributo direction: en la especificación de CSS y todo ha ido de maravillas. Un par de ajustes al CSS y sólo quedó referenciar esta plantilla con la base de datos y las cadenas de traducción. Al ver el resultado tenía la mandíbula por los suelos, que ahorro de curro, de retoques que te puedes ahorrar pensando un poquitín el asunto. La magia de todo esto lo hizo un comando:
* {
direction: rtl;
}
Luego, quedaron ajustes tontos. Lo que antes estaba con float: right; ahora es left y así con todos márgenes y divs flotantes. En 10 minutos ya podía ver los resultados. No me hubiera imaginado hacer esto con tablas a piñón. Por eso, cada vez que me sale una cosa así cada vez me convence más de que hay que ponerse tozudo con este tema hasta que le hayamos sacado toda la savia al sitio y sea 100% contenido por un lado y presentación por el otro.
No hay más ciencia. No hay miles de hacks raros o teorías que las expuestas. Sólo cabe: un código limpio, bien organizado, un CSS bien programado y tendrás asegurado el tema.
Cualquier pregunta, ya saben, usen los comentarios.
42 Respuestas a la entrada “Separa el contenido de la presentación, segunda parte y con ejemplos reales”
Escrito por Moisès
Agosto 6th, 2005 at 9:23 am
Felicidades Diego, un trabajo execelente, tiene un aspecto fantástico, estoy impaciente por ver la respuesta de Mercadelia en árabe.
¿Como vas a moderar los anuncios? ¿Buscaràs a algún colaborador que hable árabe?
Saludos
Escrito por mini-d
Agosto 6th, 2005 at 10:20 am
Llegado el día que tenga que ponerlo al aire, sí. Habrá un moderador como también un traductor especializado para estos casos.
Escrito por balta
Agosto 6th, 2005 at 10:53 am
hola diego, soy nuevo en comentarios, pero vengo leyendo desde hace un tiempito.
me podes tirar la data de alguna pagina de donde pueda aprender CSS? bueno,, nos leemos.
Escrito por Yon
Agosto 6th, 2005 at 10:56 am
Buenas, quisiera saber como va el tema de “Lo que antes estaba con float: right; ahora es left”. ¿Usas un css para el árabe y otro para idiomas occidentales? ¿Un css que se modifica dinámicamente? ¿O usas un css base y luego uno para el idioma?
Muchas gracias y que cunda el ejemplo.
Escrito por jordi
Agosto 6th, 2005 at 11:02 am
AAAhhhh !!
Necessito més informació sobre el tema… alguna suggerència?
Bona feina.
Escrito por Victor Bracco
Agosto 6th, 2005 at 11:42 am
Diego a escrito mucho sobre este tema.
Con Google podes dar en blanco:
site:www.minid.net Xhtml
Escrito por Jaime
Agosto 6th, 2005 at 11:51 am
Me gusta mucho el enfoque técnico que tiene Mercadelia. En concreto el hecho de prescindir de textos gif/jpeg me parece un avance muy importante, sobre todo pensando en la internacionalización. También el diseño del interfaz me parece perfecto, ¡lo sencillo es bello! Supongo que es herencia de Google.
Me gustaría saber cómo estáis implementando las traducciones, puesto que yo suelo utilizar gettext (es casi un estándar dentro del mundillo del sw libre), pero lo veo muy limitado cuando las traducciones son español->otra_lengua, por el tema de acentos (codificación de caracteres)
Pienso que gettext fue pensado sólo para traducciones inglés->otra_lengua.
Desconozco si hay una alternativa mejor.
Escrito por Garmonbozia
Agosto 6th, 2005 at 12:47 pm
Gracias Diego seguí tu consejo de y estoy separando el contenido de la presentación de un sitio que estoy haciendo, sólo por el hecho de usar class se ha optimizado una enormidad, eso y con la ayuda del DreamWeaver, ni te cuento las barras de navegación….
Escrito por mini-d
Agosto 6th, 2005 at 1:01 pm
balta, hay una web que recomiendo siempre que se llama tierra de nómadas.
Escrito por mini-d
Agosto 6th, 2005 at 1:30 pm
En la versión actual no usamos gettext. Usamos una propia que va perfecto, pero en esta segunda estamos implementando gettext ya.
Escrito por Eneko
Agosto 6th, 2005 at 4:59 pm
Mola ver que hay alguien que sabe algo de diseño. Y no me refiero a diseño visual, sino a diseño de arquitectura software.
Yo llevo 8 meses trabajando con Unicode, haciendo que todo el sofdtware de mi empresa sea multilenguaje (cualquier idioma del mundo funcionara), asi como multidivisa y algunas que otras internacionalizaciones más.
Es un tema aque cada vez me gusta más, tanto en software (donde yo trabajo) como en web.
Y desde luego CSS es lo mejor para esto :).
No sé como lo habrá implementado Diego, pero para responder a los de ahí arriba, bien se pueden usar dos archivos CSS diferentes, uno para idiomas ltr (left to right) como ingles o español y otro para idiomas rtl (right to left) como árabe o hebreo.
Quiza la mejor solucion sea usar un solo archivo CSS y lanzar desde el php las 4 lineas CSS que se necesiten cambiar.
Enhorabuena por el éxito de Mercadelia, Diego.
Escrito por mario
Agosto 6th, 2005 at 5:16 pm
Crítica constructiva probablemente equivocada
minid:
¿y esto qué es? ¿para redondear unas esquina tienes que poner la palabra????
¿Si te apetece cambiar la tipografía cómo lo haces con CSS? ¿Porqué no te has molestado en poner al menos un texto sustitutivo para los navegadores de texto o para las personas con discapacidad visual?
¿Porqué desaparece la opción de “preguntas frecuentes” en el menú principal si cambiamos el estilo en firefox 1.0.6 y en Opera? ¿es fallo de los navegades?
Saludos
Escrito por mario
Agosto 6th, 2005 at 5:25 pm
cuando hablo del cambio de tipografía y del texto alternativo me estoy refiriendo a las palabras de las imagenen como “directorio” de la imagen a la que hago referencia en el comentario anterior.
Escrito por ^_^
Agosto 6th, 2005 at 5:50 pm
Ufff que complicado es hablar de separación de contenido y presentación mezclándolo con el soporte multiidioma. Encima el ejemplo del árabe no parece muy afortunado porque aparte de cambiar el contenido (pues este se presenta en otro idioma) también hay que modificar la presentación. Espectacular ver la página con caracteres árabes pero absolutamente inútil fuera del efecto visual. Podrías haber sido más clásico usando el “Lorem …” o mejor aún símbolos kanji.
Tengo una curiosidad a que se debe que cambien a usar gettext en la segunda versión cuando la forma que usan ahora se supone que va perfecta.
Bueno centrémonos en el post para comentar alguna cosa. “No estoy hablando de un blog, sino, en este caso, de Mercadelia, un sitio que es real, con tablas, imágenes, texto, listas, etc.!” Creo recordar que cuando te referías a la facilidad con que podías cambiar el look de tu bitácora te decía que esa facilidad la da el CMS que usas para gestionarla. En el caso de Mercadelia tanto de lo mismo la facilidad con que se pueden cambiar cosas depende del CMS diseñado para tal efecto (supongo que es una aplicación creada entre tú y Ernex por lo que he podido entender de cuando has hablado de Mercadelia).
Hay alguna incongruencia en el texto pues dices: “Según algunos, era imposible tocar algo sin tocar XHTML.” Pero luego, tan solo un párrafo más abajo ” Esta nueva versión no estrena diseño nuevo o distinto, más que ajustes del código XHTML y una hoja de estilos renovada, esto le da al sitio una flexibilidad increíble.” Desde luego desconozco los cambios que han hecho en la programación de Mercadelia pero como mínimo resulta curioso que un cambio de versión haga retocar tanto el html como el CSS, y encima sea un ejemplo de independencia de contenido y presentación.
Un simple cambio en el contenido poniéndolo en árabe te ha obligado a retocar más de lo normal las hojas de estilo. Incluso seguro que más de una cosa la has sacado de la hoja de estilo base para dejarla en la hoja de estilo específica del idioma. No me refiero al “direction”, sino, a esos ajustes “tontos” de los float los márgenes y los divs flotantes.
En cuanto al rediseño sin rediseño este, opinó que cae más en lo que la gente de java llama sobre-ingeniería.
Por otro lado ya que hablas de estar en medio de la creación de una nueva versión de de Mercadelia deberíais plantearos una política más estricta con las ofertas, pues algunas rozan lo incomprensible por no usar el termino ilegal.
En cuanto el tema de soporte multiidioma si que necesita un gran repaso el sitio, pues te puedes llevar alguna sorpresa cuando navegas por él al estar ligado el idioma de presentación a la url.
Y por último y para no ser tan negativo felicitarte por el diseño de Mercadelia.
Escrito por mini-d
Agosto 6th, 2005 at 7:34 pm
Respondo.
La incongruencia no existe. La nueva versión, trae un código de XHTML apenas modificado de la versión que ahora utilizas. Sólo hemos quitado ciertas partes y agregado nuevas.
Partiendo de ese fork. Se practica lo que es la verdadera metodología. De eso se trata el post. No sobre lo viejo. El ejemplo árabe es perfecto, ya que, si observas hay más que cambiar datos. Toda la información que ves en Mercadelia viene limpia de presentación. Las cadenas de idiomas vienen por separado y se editan aparte, no se abre nada de XHTML ni se edita nada. Los CSS por otro lado. Si quiero agregar un idioma más, basta crearlo en la base y listo, otro idioma, otro posicionamiento de cajas, otro tamaño e incluso colores si me diera la gana. Estamos hablando del nuevo fork, no del viejo… lee de nuevo el post.
Hombre, puf… cuando hablo de este tema, hablo de la comodidad de cambiar estructuras visuales, ya te tome dos semanas o 10 minutos, sin tener que tocar o modificar el sitio en otras cosas. De eso trata la metodología. Esta claro que, siempre tendrás que currar, si eres lento, harás los cambios en meses, si eres listillo te tomará minutos. Si tienes que modificar el XHTML para que reaccionen las cosas de forma diferente, te tomará segundos ya que tienes esa capa separada de la presentación, de eso va el tema.
No existen incrogruencias desde ya. Ayer hice el ejemplo y no toqué XHTML. Estuve trabajando sobre la versión nueva que trae otra estructura muy simil a la actual, nada más. Estuve probando otras cosas, como por ejemplo, con la misma versión pasarla a la PDA o a un formato de impresión. Lo mismo, no he tocado nada de XHTML sólo me he limitado a tocar la hoja de estilos y todo va de maravillas.
La versión actual, si bien respeta bastante la metodología tiene una pega, hay ciertas cosas que no se tuvieron en cuenta a la hora de visualizar grandes cantidades de datos. Si bien, el 98% de los retoques fueron con CSS, cuando agregamos cosas no tuvimos que rearmar todo el sitio. Para demostrarte una vez más que la metodología y el nivel de prevención que tuvimos fue bastante alto, pasar de esta versión a la nueva será un juego de niñoos. Tendremos que modificar apenas las 3 plantillas y agregar las nuevas de otras cosas que saldrán, junto con las nuevas plantillas de CSS, reescritas para ahorrar más código y dar más funcionalidad dependiendo el idioma.
Si tuviéramos que hacerlo con XHTML dependeríamos tanto de la programación que sería todo un cacao gigante.
Estamos en ello. De hecho, hay un documento en la versión actual que indica que no se pueden cargar contenidos de cierto tipo. Puedes denunciarlos en la página de contacto para su inspección y eliminación. Dado el caso, el anunciante es el que está comentiendo un acto ilegal (dependiendo las legislaciones del país) y que puede ser fácilmente denunciable. Tienes su correo electrónico y todo. Puedes escribirle y denunciarle.
Sos curioso, te cuento. Utilizaremos gettext porque a futuro es mejor. Además hay muchos programas que aceptan este formato que se está estandarizando. Entonces, independientemente de lo que hagamos, podemos darle a un traductor en hungría un programa que acepte archivos .po y lo modifique para llevar la internacionalización sin tener que aprender a como tocar strings en un archivo. Queremos un orden más fluido del tema y dar flexibilidad a los que traducen de realizar correcciones o traducciones de las nuevas cadenas que van apareciendo.
Si encuentras un error de traducción (yo no los he encontrado) tienes un formulario en la zona de contactos que puedes enviar cuanto error encuentres.
Saludos y gracias por comentar.
Escrito por mini-d
Agosto 6th, 2005 at 7:42 pm
Respondo a Yon del comentario #4.
Yon, actualmente mercadelia tiene un CSS para cada idioma. En la nueva versión, hemos cambiado de arquitectura, es una hoja de estilos más genérica y otra que modifica parámetros dependiendo el idioma…
Entonces los países que utilice por defecto idiomas como el árabe, cargarán una CSS con instrucciones precisas para ese idioma (direccion, tamaño de tipografías, márgenes) el resto irá normal como indica el resto de las cosas.
Todo esto por supuesto trabajando en el nuevo fork.
Escrito por mini-d
Agosto 6th, 2005 at 7:58 pm
Respondo a Mario. Mario, tienes razón en ello. Lo que ves en las imágenes ES LA VERSION NUEVA no la actual. La versión nueva no usa imágenes para los títulos como la actual.
La actual aún con imágenes es semántica, blah blah, y también me permite hacerla en el idioma que quiera. Está también pensada para separar el contenido de la presentación pero me toma más tiempo y no es tan práctica como la nueva, que sólo depende de un archivo de localización.
La idea de dejar de usar imágenes (aún si las genero por PHP o perl) es para optimizar lo máximo posible el sitio y la experiencia de usuario. Queríamos tener 5 idiomas pero extenderemos esto a la cantidad necesaria de idiomas, para ello, para futuro, para que no me pase 1 semana editando muchas imágenes lo hacemos todo texto.
La versión actual sí tiene (creo que en todas sino avísame cual no tiene) textos de sustitución de imágenes, prueba de ello es la imágen que tomas del título de directorio, si miras el código dice esto:
src=”/languages/es/images/title_directorio_anuncios.gif” alt=”Directorio”
Una de las tantas cosas por las cuales quiero dejar de usar imágenes es para no tener este tipo de incidencias.
El resto de las cosas sobre la desaparición de algo del menú ni idea, lo he mirado tanto en Firefox como en Opera y ningún problema. ¿me puedes enviar una captura de pantalla de lo que ocurra?
Escrito por mini-d
Agosto 6th, 2005 at 8:02 pm
Eneko, sin dudas, utilizar Unicode te da un márgen de respiro por si sube el nivel de agua. Me encanta unicode y es una de las cosas por las cuales he cambiado en minid.net hace tiempo a UTF-8, no quiero quedarme nunca más el iso-8859-1.
Los proyectos de software sí deben hacerse en Unicode para ofrecer soporte de internacionalización. No es un tema que se aprende en una hora, pero con dedicación lo terminas entendiendo todo.
Luego, con la metodología de separación del contenido de la presentación puedes hacer gozadas de este estilo…
Mañana pongo la versión en hebreo a ver que tal queda, esta vez tengo que tocar nada más un archivo de localización
Escrito por max
Agosto 6th, 2005 at 8:10 pm
Genial Diego el artículo. Cada día sé algo más de CSS, realmente funciona.
Una curiosidad, ¿cómo has tomado esa captura tan grande de la web, asi entera? Recuerdo que no hace mucho se comentó, pero no doy con el sitio justo. Gracias y saludos desde Cádiz!
Escrito por Anónimo
Agosto 6th, 2005 at 8:12 pm
A mi me encantaría poder usar gettext, pero no es posible (o yo no he sabido) parsear con msgfmt strings del tipo _(“Hola ñu ñandú”)
Cosas como “xgettext test.php—from-code=utf-8” dan error.
Escrito por mini-d
Agosto 6th, 2005 at 8:38 pm
La captura la hice a mano, capturé varias veces el largo y lo he unido todo en Photoshop. Hay un programa que lo hace todo se llama Paparatzzi creo. No funcionaba bien cuando lo utilicé pero bueno… peor es nada.
Escrito por pmarin
Agosto 7th, 2005 at 4:52 am
minid:”La versión actual sí tiene (creo que en todas sino avísame cual no tiene) textos de sustitución de imágenes, prueba de ello es la imágen que tomas del título de directorio, si miras el código dice esto:
src=”/languages/es/images/title_directorio_anuncios.gif” alt=”Directorio””
No se donde busqué yo, a lo mejor me equivoqué.
@img src=”/languages/es/images/title_ultimos_30.gif” alt=”” (te falta en todos los idiomas)
img src=”/languages/es/images/paso_1_title.gif” alt=”Paso 1” (aquí pones que es el paso x pero no dices lo que tienen que hacer)
Te he enviado las capturas indicandote la opción que te falta en el menú, espero que te sirva para algo.
Saludos
Escrito por mini-d
Agosto 7th, 2005 at 7:31 am
Entiendo de lo que me hablas ahora. He visto el código y he corregido un caracter demás que había en la instrucción. Ahora la cadena baja como debe, si lo miras sin CSS debería mostrarte todas las opciones, en todos los países.
Por el tema de los últimos anuncios no pude solucionarlo, me lo miraré con calma en la semana…
El tema del paso, ahora entiendo lo que me dices. Deberíamos agregar una cadena nueva al sistema, para indicar el paso.
Escrito por Bravito
Agosto 7th, 2005 at 7:37 am
Hei,
He visto que por aquí se pasan unos cuantos mac-geeks. Estoy pensando en pasarme a Mac… por ello me gustaría preguntaros alguna duda que tengo sobre este mundo:
-Algunos teneis el ibook ó powerbook de 12”. ¿Como es posible sobrevivir con una pantalla de semejantes dimensiones?
-Los ratones y accesorios como teclados, webcam, impresoras… tienes que comprarlos mac ó valen los que se venden con windows?
-Que tal funciona un ibook para juegos, por ejemplo UT2004.
-Hay posibilidad de conseguir programas via Torrent ó Emule con facilidad?
-Como es la conectividad de PC a Mac? Es posible hacer una partida de juegos en LAN con ambos si se dispone del mismo juego?
-La transmisión de archivos es independiente del sistema? es decir, si grabo un cd en mac con unos archivos en word los puedo leer con un Pc y viceversa?
Un saludo y gracias de antemano,
Escrito por mini-d
Agosto 7th, 2005 at 2:31 pm
Bravito, este no es el post correspondiente para hablar del tema. Pero igual te lo respondo de forma resumida: si a todo lo que has preguntado.
Escrito por ^_^
Agosto 7th, 2005 at 4:29 pm
La incongruencia existe desde el momento en que admites haber modificado ambas cosas tanto el html como el css. Apenas modificado es modificado. Si hubiera separación entre presentación y contenido eso no sería necesario. Pero sencillamente con html y css, no es posible.
_“Partiendo de ese fork…”_ Hombre en el post no hablas del frok en si. No dispongo de ningún documento que trate tecnicamente sobre el frok. Así que cuando me dices _“Se practica lo que es la verdadera metodología”_ debería aceptarlo como dogma de fé. Perdóname, pero no, no tengo fé. Por supuesto que toda la información que se ve esta limpia también veo limpia la primera versión. Pero no hablamos de eso, hablamos de la separación de presentación y contenido. He leido el post, si no fuera así no habría comentado nada y no pensaba que hablaramos de la nueva versión del CMS o nuevo fork como tú lo llamas.
_“Hombre, puf… cuando hablo de este tema…”_ Sí, yo también hablo de lo mismo. a ver simplemente con hojas de estilo puedes presentar el contenido de la página principal ¿como si fuera un calendario? ¿reordenar las ofertas por lugar, categoria? Supongo que la respuesta es no. ¿Dondé está la separación esa de la que hablas entonces?
_“Estuve probando otras cosas, como por ejemplo, con la misma versión pasarla a la PDA o a un formato de impresión”_ ¿Formato de impresión? Podrías aclarar esto. Que yo sepa con hojas de estilo no se genera pdf’s doc’s o lo que sea. ¿De qué formato estamos hablando?
_“Si bien, el 98% de los retoques fueron con CSS,…”_ ¿Y el 2% restante? O es que como no llega al 10% no se consideran cambios. Seguro que sin ese 2% de cambios el 98% de los CSS sería poco mas que inutil.
_“Sos curioso,…”_ Lo siento pero si me hubieras dicho porque es más cool la respuesta sería equivalente a la que has dado. Deberías haber hablado de dificultades tecnicas que se salvan al usar gettext en vez del sistema que se usa ahora.
_“Si encuentras un error de traducción…”_ No es un error de traducción es un error en la arquitectura de la información. En el enlace del donante de riñón puesdes ver que el idioma seleccionado es el español ¿verdad? Prueba a pulsar sobre California y verás a lo que me refiero. En vez de seguir en español de repente se cambia a ingles. Menos mal que aún no hay soporte para chino entonces si que estaría perdido.
Escrito por mini-d
Agosto 7th, 2005 at 5:50 pm
Te iba a responder, con un montón de cosas, pero al cabo de 5 minutos, llegué a la conclusión que no entiendes el tema.
Confundes permanentemente estructura con presentación.
Lee de nuevo el post y ponte a pensar que, si quieres poner mercadelia como un calendario con CSS, no lo vas a poder hacer.
Escrito por ErneX
Agosto 7th, 2005 at 6:34 pm
No vale la pena responder a Trolls y mucho menos a aquellos que ni se atreven a usar un e-mail real o al menos un nickname.
Escrito por ErneX
Agosto 7th, 2005 at 6:41 pm
El link de “California” no está pasando el idioma actual, podriamos decir que es un bug de la pagina del anuncio, que se arregla con agregar una variable al url. No es una falla de arquitectura de informacion como dices.
Si tuvieses los huevos de usar una direccion real y un nombre al menos daria algo de gusto responderte, pero parece que tienes una obsesion con Diego y te mantienes en el anonimato.
Y que pena me da despediciar mi tiempo respondiendo a trolls como tu…pero tuve que morder.
Escrito por ^_^
Agosto 7th, 2005 at 8:27 pm
ErneX lamento que pienses que estoy troleando. Simplemente, por hablar de como veo yo las cosas y tratar, en la medida de mis posibilidades, de argumentarlo. Ante un comentario así pues no tengo palabras.
En lo que se refiere al link por supuesto que es un bug. Además, ya en un comentario anterior había llegado a la misma conclusión que tú, que es por ligar el idioma a la url. Cosas que se pasan por alto con el mod_rewrite del apache. Aunque, sí, yo lo entiendo como un error en la arquitectura de la información. Por el simple hecho de que es un punto que debía estar contemplado, y así lo creo, en el diseño de dicha arquitectura. Pero nunca se llego a verificar, pues aún sigue ahí.
Fallos en dicha arquitectura hay alguno más, pero cuando minid habla de soporte a varios idiomas en la misma página supongo que es porque se han dado cuenta. Y es en ello en lo que están trabajando.
mini-d sí muy probablemente sea que no entiendo lo que quieres decir. El caso es que no ves que la estructura (html) está intimamente ligado a la presentación (digamos css). Si realmente buscas sepearación entre contenido y presentación ese par (html css) no sirven, por eso mismo por estar intimamente ligados. Para encontrar una separación natural entre contenido y presentación esta en el par xml, xslt. Con ese par sí que puedes dejar Mercadelia como su fuera un calendario. Incluso ordenar por categorias el contenido, o crear un pdf con dicho contenido. Estas cosas no son posibles con el par (html, css), es a ese punto al que voy. Estoy seguro de que conoces tanto xml como xslt, por favor tan solo piensa sobre ello 2 minutos y medio. Y te darás cuenta de que los terminos en los que has escrito el post estan equivocados, pues el html y el css están intimamente ligado de cara a la presentación.
Escrito por cromo
Agosto 8th, 2005 at 7:19 am
Me gustaria profundizar un poco más en el Gettext, pero buscando por google solo encuentro referencias a uar esta aplicación con Mono, y en ingles.
¿Alguien conoce el link de algún tutorial para usar Get Text con php? Algo que no sea el simple manual de php donde hablan de GetText, sino de un tutorial o algo así que venga con ejemplos
Un cliente me ha pedido que traduzca su página web en español a ruso, y la verdad es que no tengo ni idea de como empezar… Había pensado en una base de datos y variables según idioma, pero creo que podría estandarizar el asunto con el gettext
Escrito por mini-d
Agosto 8th, 2005 at 8:59 am
_, definitivamente no entiendes. Lee más sobre separación del contenido de la presentación y verás que la metodología sólo dice: separa en capas las cosas, usa CSS para posicionar y dar forma y colores a las cosas, usa HTML para crear estructuras con valor semántico. Usa DOM para agregar interección cliente, usa PHP para dar funcionalidad servidor-cliente.
De esto va. Si utilizas HTML como medio de presentación tendrás problemas como los que tenemos en mercadelia.com cuando queremos hacer algo con la flexibilidad del nuevo fork.
Tu utilizas XML + XSLT yo me como el XML y utilizo MySQL + PHP + XHTML. No me interesa de momento aplicar XSLT aunque llevo 5 años aplicándolo a muchos proyectos. La separación de capas sigue en pie y como tengo una buena base de separación del contenido, cuando quiero mejorar la estructura como lo hice en el nuevo fork sólo me tocó modificar unas pequeñas lineas de XHTML que impactó en todo el sitio. Luego en CSS hago los cambios pertinentes y no lleva más tiempo del necesario ya que tengo todo en capas separadas.
De eso va la metodología. De que se pueden realizar cambios en las 3 capas sin tener que rediseñar todo el sitio.
Cromo, si quieres tutoriales para utilizar gettext con PHP debes buscar en Google: “gettext tutorial + php” y salen toneladas de artículos.
http://zez.org/article/articleview/42
http://www.onlamp.com/pub/a/php/2002/06/13/php.html
Escrito por AndrobTech
Agosto 8th, 2005 at 12:59 pm
Si yo tuviera una pagina como mercadelia, en tablas y me pasaria al idioma arabe. Yo solamente tendria que cambiar el “align” atributo y listo.
“Pero Andres, tienes que modificar cientos de lineas”
Pues eso es tontera para solucionar, como tu mismo dices, PHP.
$ali = ( $lang == “arabe” ) ? “right” : “left”;
y el script que ponga los $ali dentro de align.
Por lo tanto, no veo la “ventaja” (ventajas) perdon, para tener todo en CSS.
Tambien, me parece millon veces mejor usar XML + XSLT a que PHP + MySQL + XHTML. Por que estar usando un web server, probando, bajando, probando, etc etc.. se te va el tiempo.
si ya tienes un documento XML generado, no tienes que hacer nada!
( este comentario seria un comentario de cientos de lineas tambien, pero no quiero perder el tiempo sinceramente.
juzguen ustedes
Por que no comentare de nuevo sobre esta polemica!
)
Escrito por AndrobTech
Agosto 8th, 2005 at 1:03 pm
Me olvide.
Aquellos desarrolladores/diseniadores les recomiendo estudiar ASP.NET (si, de Microsoft) que fue diseniado especificamente para separar CONTENIDO de PRESENTACION.
Por favor mirenlo,eso los mantendra ocupados y con nuevas dudas
Si tienes problemas con Microsoft, pues ya es hora que madures ( esto va para todos )
No.. yo uso todos los sistemas operativos (los mas populares), y no tengo preferencia en alguno. Todos me gustan.
Escrito por cromo
Agosto 8th, 2005 at 2:44 pm
Androbtech, ¿qué le ocurre a tu teclado, no le funciona la Ñ?
Prueba con apt-get y el paquete de tu idioma y podrás solucionarlo
Engaaaaaaa, buen rollo chicos
PD: Diego, llevo años buscando en Google y esta mañana no encontraba lo del GetText. Ahora si, he encontrado varios tutoriales en español, sería la torrija de por la mañana. Si tengo tiempo me curraré un tutorial en mi blog cuando trastée un poco.
Escrito por ErneX
Agosto 8th, 2005 at 3:26 pm
ASP.NET? te lo regalo, no lo quiero.
Escrito por Demian
Agosto 8th, 2005 at 3:50 pm
Me gusto mucho este articulo, yo suelo inclinarme a utilizar MVC en .NET o en Java (en este ultimo con struts y jsf que basicamente son copias del modelo ASP.NET) pero para cada caso es bueno mirar lo que es mas conveniente, no se cuan grande sea Mercadelia y si encontraron un buena forma de mantenerlo/mejorarlo en la arquitectura que eligieron…entonces eligieron bien! y no veo razon alguna para cuestionarlos.
Armar todo un sistema completo basado en presentacion por transformacion xml-xslt me parece una mala idea, yo uso mucho las transformaciones para cosas puntuales pero no me gustaria hacer un mantenimiento de los xslt por cambios de presentacion en un sitio grande.
Por ultimo:
$ali = ( $lang == “arabe” ) ? “right” : “left”;
no podia dejar pasar esto: php al fin soporta objetos, tratemos de no hacer estas cosas!!!!
Escrito por AndrobTech
Agosto 8th, 2005 at 10:11 pm
Te acepto que me lo digas si fuera en JSP
Escrito por mentenblanco
Agosto 10th, 2005 at 1:29 pm
Lo más importante a la hora de traducir una web no es la tecnología utilizada, sino el resultado final. ¿Que más da utilizar XHTML o XML (en este caso)? Lo importante es que la “web resultante” sea agradable al navegante no-nativo.
El ejemplo de adaptación de Mercadelia al árabe me parece espectacular. Tengo entendido que con CSS3 se podrá escribir texto vertical, no? Corregidme si me equivoco.
Un saludo a todos
Escrito por mini-d
Agosto 10th, 2005 at 1:44 pm
Sí con CSS3 hay un módulo mucho más extenso de escritura. Soportará métodos de escritura verticales tanto de izquierda a derecha como de derecha a izquierda y otros.
Escrito por kapikua
Noviembre 18th, 2005 at 12:49 am
Yo pasa el tema de seleccion de idioma suelo usar condicionales con el PaTtemplate. Mediante una variable de sesion siempre se que idioma quiero y cargo las plantillas o CSS que necesito. Aveces no solo necesito cambiar los CSS, tambien la estructura en algunos casos.
Creo que llego un poco tarde pero es que me parecio interesantisimo esta discursion.
Escrito por padrinojose
Mayo 21st, 2006 at 1:16 am
no se si me he perdido de algo, una noticia o un aviso, pero veo que el sitio de mercadelia tiene un mensaje de mantenimiento hace algun tiempo…
diego cerraste mercadelia?
saludos