Login Barrapunto
Cómo hacer buenas páginas web
clemente nos cuenta: «HTML correcto: cómo hacer buenas páginas web. Continuamente veo páginas mal diseñadas (ni siquiera las empresas gordas se salvan, y tampoco Barrapunto). Los culpables son webmasters que dicen saber HTML, pero que lo estudiaron hace años, cuando aún no existía CSS. Esto intenta ser un "manual de buen comportamiento" para los que colaboran con Internet escribiendo páginas web. Explicaré cómo hacer que una página se vea bien en todos los navegadores, usando HTML 4.01 Strict, que luego te permitirá pasar a lenguajes mejores, como XHTML, sin esfuerzo. Cuando la página de una empresa esté tan mal hecha que no se pueda ni usar, mandadles aquí. Espero que esto ayude a mejorar el estado actual de Internet.»
Este hilo ha sido archivado.
No pueden publicarse nuevos comentarios.
Y recuerda: Los comentarios que siguen pertenecen a las personas que los han enviado. No somos responsables de los mismos.
No hay tiempo para hacer las cosas bien
(Puntos:1, Inspirado)No todo es HTML
(Puntos:5, Informativo)Sin embargo, no todo es saber formar HTML y CSS correctamente para que una web sea usable. De hecho, esto es simplemente un punto previo a la accesibilidad de un sitio, que debería ser el verdadero objetivo.
En tu web (http://www.danielclemente.com/), he podido observar algunas cosillas (maquetar con tablas, uso se alt="", etiqueta font, etc). No te lo tomes a mal, pero lo he visto y no he podido reprimirme.
El objetivo sería alcanzar, al menos, un nivel de accesibilidad A, aunque un AA sería deseable (Un AAA es una utopía). Todo esto sin renunciar a un atractivo diseño.
A modo de completar el post, incluyo algunos links de interes.
http://www.w3c.org (La madre del cordero)
http://www.tawdis.net/ (Test TAW del Ministerio de Trabajo)
http://www.csszengarden.com/ (Se puede hacer accesible y bonito)
http://www.sidar.org/recur/desdi/mcss/index.php (Más CSS)
Bueno, así de cabeza no recuerdo nada más.
¿Y qué hay de la «usabilidad»?
(Puntos:2, Interesante)( http://www.codexion.com/ | Última bitácora: Martes, 02 Septiembre de 2003, 17:34h )
También quería decir que estoy de acuerdo con el comentario anterior y añadir que muchos de los llamados «diseñadores web» lo son porque han hecho un cursillo de Dreamwaver, Flash o Frontpage y similares. Estas herramientas han evolucionado mucho en los últimos años, pero si uno no conoce lo que hay debajo, es decir html, estos programas meten mucha basura. Como anécdota comentar que cuando yo empecé en esto de las webs me contrataron para limpiar los archivos generados por el departamento de diseño que trabajaba con los programas anteriormente mencionados. En ocasiones un archivo de 200 kb (sí, 200 kilobytes en texto plano) lo dejaba en 15 ó 20 kb.
Siga leyendo, aquí no hay nada que ver...
Nada, nada, para hacer SEGURO buenas páginas web..
(Puntos:1, Informativo)Yo acabé hasta los cojones de catear exámenes (que aunque no validasen, estaban hechos de puta madre y en el navegador se veían bien) por culpa de eso. El profe no se da cuenta de que en una empresa no vamos a poder estar 4 horas mirando que todas las etiquetas validen bien, y todo eso.
Muchas gracias, querido profe Daniel Molla (y no, paso de hacer el chiste fácil con su apellido)...
El problema no es ese.
(Puntos:4, Interesante)( http://barrapunto.com/ )
En resumen, que el problema no es tanto de "forma" sino de "fondo". El qué debe de ir y en dónde debe de primar sobre cómo debe de ir y de qué forma. Bueno, esa es mi opinión. Saludos.
Dios es el Papá Noel de los adultos.
Empresas malas
(Puntos:4, Interesante)Cuando un estándar especifica una tecnología que es nueva, normalmente es rígido. Es perfectamente legítimo que una empresa innovadora introduzca mejoras para dar satisfacción a sus clientes.
De hecho, si hemos llegado a donde hemos llegado en la estandarización de páginas web que permite hacer auténticas obras de arte es porque empresas innovadoras incluyeron efectos no inventados en sus páginas web. Y cuando ya están inventados y se utilizan porque hay demanda (la empresa asume el riesgo de introducir elementos nuevos), se pueden estandarizar para que todos sigan el mismo patrón, incluyendo en el estándar todas las mejoras.
Aunque haya gente que piense lo contrario, la competencia también en este punto es positiva, sobre todo al principio. Si todos siguieran el estándar de CD-ROM ISO-9660, no se podrían grabar CD's con nombres largos. Pero hay empresas que se han saltado el estándar. No veo ningún problema siempre que la nueva manera de hacer las cosas sea pública (permitiéndole a la competencia implementar lo mismo aunque sea de diferente manera, o incluso mejorarlo).
<!-- Comentarion 2.0
(Puntos:2, Informativo)( http://barrapunto.com/ | Última bitácora: Martes, 05 Agosto de 2008, 14:28h )
XHTML + CSS + FLASH [disenorama.com] es el futuro, ¿quien lo duda?. El unico problema es Internet Explorer que tiene bugs que parecen echos a proposito para que el CSS no sea ni medio normal sino que haya que hacer unos hacks del copon para que las cosas medio funcionen. Y yo tengo algo contra las cosas que medio funcionan, supongo que estamos hablando de algo comercial ¿no?.
HMTL con TABLAS y FONT y CENTER + GIF + JPG no es una tecnologia que de pronto sea ...el veneno puro, y que no sirva para nada. Para empezar es muy facilito enseñar html con esto. Y es asi como empezo la red, y como creo que empezaron los webmasters actuales. El problema es que esto no escala bien, el problema 2.0 es que la composicion con tablas es un hack, el problema 3.0 es que mezclar formato y composicion hace que sea mucho trabajo cambiar la negrita de todos los titulos de una pagina de mil titulos (incosistentemente aplicados). El CSS es mejor programaticamente, y creo que para los diseñadores tambien.
-->
]]]]><![CDATA[> fear teh dopefish!!
Tutorial de XHTML
(Puntos:2, Interesante)( http://cafeina.ladybenko.net/ )
La parte de XHTML está prácticamente acabada y me gustaría recibir feedback para mejorarla antes de meterme con el tema del CSS.
Gracias!
~demasiada Cafeína [ladybenko.net] corriendo por mis venas~
Hombre hay de todo.
(Puntos:4, Interesante)( http://www.cientifico.net/ | Última bitácora: Martes, 22 Junio de 2004, 13:46h )
Estos son apartados que un informe medianamente serio sobre una web debe tener, y todos los que se me han ocurrido en 5 minutos.
Como veras, es trabajo más que suficiente, para que se necesite más de una persona. Raro es el diseñador que domina todos estos campos, y el que lo es, mete unas agujeros de seguridad al programar en php más grande que... no se me ocurre nada más grande.
Con esto te quiero decir, que por lo menos yo, fan número uno de xthml 1.1/strict, y css2.0, me salto los estandares. Lo admito, fui yo. Y mientras los navegadores comerciales hagan cosas diferentes (fijate lo que tienen que hacer algunos diseñadores en el csszengarden, para que se pueda ver en el ie, cuando se ve). Una empresa no puede permitirse el lujo de decir: Si mi págia está correctamente programada, valida, y sintácticamente tiene sentido, pero en el ie no se ve.
Como usuario final, que me importa a mí, que tu curso valide perfectamente. Yo a simple vista hecho de menos un menú de navegación claro, ohmipresente, que me permita acceder a cuantas más cosas mejor.
Sin más animo que hacer una crítica constructiva, considero muy practico tu documento, no se por que los parrafos estan en cajas de texto (tan poco tienen que ver unos con otros como para separarlos). Vaya, perdón por mi ironía, te juro que es puñetera constumbre, no quiero ofender.
Bueno, saludos, y en serio, me parece bueno el documento, y me encataría que todo lo que comentas se comentase en una realidad.
Saludos
bah!!!
(Puntos:1)( http://phrodo00.openfrogs.com/ )
My live with ...
(Puntos:1)( http://barrapunto.com/ )
Dado que se algo sobre estos temas y soy un cazurro que se quedo en las tablas y no he llegado al virtuosismo de los CSS he revisado la Web http://www.danielclemente.com/, que si no me equivoco (y si me equivoco pido disculpas) es lo máximo en cuanto a estos temas ya que da clases sobre ello teórico prácticas.
Por desgracia si cogemos el diseño y su presentación (no el contenido, que sin duda tiene otro valor que no quiero evaluar) y se lo presento a un cliente, lo primero que me hace es mandarme a la ... página de este virtuoso para que aprenda a programar con estilo y mucha clase.
Por favor no prediquemos con un ejemplo de Pepito Grillo. Si queremos predicar con el ejemplo mostremos algo que realmente sea espectacular y no el típico ejemplo "foo" o "Hello World".
Los puristas y catedráticos del ejemplo se quedan en las clases y no en el día a día. Como comentan varios compañeros muchas veces no se trata de la pureza sino de otros factores que sin duda intervienen en el desarrollo global de cualquier aplicación.
Comento algunos para que los sepamos:
1.- El coste del desarrollo es ridículo.
2.- El nivel de complejidad del diseño a desarrollar es elevado.
3.- En mi equipo de desarrolladores, cada uno tiene un nivel técnico diferente y no todos han estudiado en una escuela de genios (ni yo tampoco).
4.- Los tiempos de entrega son mínimos (para ayer como siempre).
5.- ...
Podemos seguir pero es absurdo.
Como persona que lleva más de la mitad de su vida programando, tengo 33 años y comencé con un MSX a los 11 años, me he encontrado con todo tipo de código y considero que mientras haga lo que tiene que hacer de manera correcta y el resultado satisfaga al cliente, el interior del programa te lo meriendas tú. Si esta bien hecho estarás satisfecho por que mantenerlo y mejorarlo será fácil, rápido y ganaras, pero si esta mal (con tablas de la época de los dinosaurios y no con CSS que es lo que se lleva ahora) te merendarás tu los costes de reprogramación, mejoras y ampliaciones por que tardarás mucho más en finalizar.
Con todo esto no digo que se deba programar de cualquier manera sino que los purismos, teorías y estándares están muy bien para leerlos pero el día a día es práctico y no siempre es fácil aplicar esos maravillosos conceptos.
Perdonadme si he sido ofensivo pues no quería serlo.
drJoju
Que tiene de malo HTML 1.0
(Puntos:1)Y es su sencillez la que ha provocado su éxito. Siempre he creido que una página con html no estricto, no es que no sea correcta, es que el lenguaje está pensado para permitir esas libertades.
Excelente trabajo
(Puntos:2, Informativo)( Última bitácora: Sábado, 22 Septiembre de 2007, 17:01h )
Buenos días:
Precisamente me encuentro en este momento diseñando parte de un proyecto web en PHP. Ya terminé el código y empiezo con la parte de presentación y este tipo de lecturas me vienen de **** madre.
Yo lo completaría indicando que para mí fué todo un descubrimiento en su momento el motor de plantillas Smarty [php.net] (permite separar el HTML totalmente del código PHP, además de facilitar muchas otras cosas con etiquetas extra) y las extensiones Pear [php.net], en partícular Pear::DB [php.net] que permite acceder a bases de datos de una manera bastante más elegante.
Por cierto, el enlace con ejemplos sobre listas, imágenes y selectores [maxdesign.com.au] indicado en tu documento se sale.
Insisto, excelente trabajo. Ahora mismo lo tengo impreso encima de mi mesa ;-).
Aburiño:
Ciges
Be Free! Be Wild! Be Linux!
No estoy totalmente de acuerdo
(Puntos:1)( http://conclavedigital.host.sk/ )
¿Cual es el HTML correcto? el 4.01? seguro? pq recuerdo que el explorer tiene cosas propias al igualo que netscape y muchos otros navegadores. Si, totalmente de acuerdo con que ese es el standart, pero si el cliente pide algo concreto (e incluso que la pagina solo pueda verse en explorer (desgraciadamente esto pasa con mas frecuencia de la que se cree)) pues.. tienes que usar el html orientado a iexplorer. ¿esta mal usarlo? bueno.. yo si veo que la pagina se ve en el navegador y no da errores de carga ni de nada, para mi esa pagina esta bien. Si, de acuerdo, no cumple totalmente al 100% el standar 4.01 bien... pero se ve o no se ve? ¿acaso he inventado algo nuevo (un nuevo lenguaje web) o he usado los recursos existentes para crear una pagina?
De acuerdo con que si todos usamos la misma version con las mismas funciones y demas, seria todo mas facil, pero esq eso no depende de nosotros sino de los creadores de los navegadores y sus funciones propias, no de saber programar en HTML o no.
Re:Consejos que hay que tomar con cautela
(Puntos:2, Interesante)( http://carlos.garciaargos.com/ | Última bitácora: Jueves, 17 Mayo de 2007, 12:36h )
La verdad, depender de Javascript para validar campos de formularios me parece la idea más torpe del mundo, con todo el respeto a la gente que lo hace. Elimina la posibilidad de que navegadores con soporte de formularios pero sin soporte de Javascript puedan usar esos formularios. Esto es, quita usabilidad.
El trabajo de un servidor para validar X campos de un formulario no es tan grande, créeme.
En cuanto a los marcos, personalmente los veo tan malos de cara a la indexación en buscadores como la página de presentación, porque la página inicial (el index.XXXX) que se indexa no es la que contiene el meollo de la cuestión (de la web). En lo de la impresión no me meto, pero creo recordar que la mayoría de navegadores ponen "Imprimir" y debajo "Imprimir marco", y supongo que muchas veces los usuarios no sabrán a qué atenerse (estamos hablando de usuarios no avanzados en esto).
Carlos García [garciaargos.com]
Re:Consejos que hay que tomar con cautela
(Puntos:1)( http://www.lugopolis.net//blog/ | Última bitácora: Miércoles, 02 Junio de 2004, 21:46h )
oooooops problemas de seguidad al canto ...
Re:Consejos que hay que tomar con cautela
(Puntos:1)( http://barrapunto.com/~bac/bitacora | Última bitácora: Domingo, 09 Enero de 2005, 18:54h )
Los marcos tienen un problema importante y es que no puedes hacer un link a una configuracion de paginas concreta. O enlazas a una de las paginas o enlazas a la raiz del conjunto de frames, nunca a una determinada configuracion.
Existen trucos en JS para que cuando cargues una determinada pagina que se deberia mostrar dentro de un frame se te redirija a esa configuracion, pero son eso: trucos, no dejan de ser "apaños" para conseguir cosas...
__________________
bac to the future!
Re:Consejos que hay que tomar con cautela
(Puntos:1)( http://www.2maniacos.com/ | Última bitácora: Sábado, 25 Febrero de 2006, 19:03h )
Así, si el usuario navega profundamente por un sitio que tiene marcos y él no lo sabe, al guardar/anotar el enlace de la página, no guardará realmente donde él se encuentra, sino la página principal.
Es un poco jodido de entender, pero resumiendo:
Yo prefiero: http://pagina.web/peliculas/matrix.html que http://pagina.web a secas
--
Cine [tepasmas.com] - Más cine [2maniacos.com]
Re:Ahí va un ejemplo de página dudosa
(Puntos:1)( http://barrapunto.com/ )
NabLa
No te dije que sería fácil. Te dije que sería la verdad.EXACTO!!!
(Puntos:2, Divertido)Creo que les pone más una tía con una delantera que ni la del Murcia, que una etiqueta mal validada x DDDDDDDD
Re:Consejos que hay que tomar con cautela
(Puntos:2)( http://helvete.escomposlinux.org/ )
No validar la entrada de cualquier dato enviado por el cliente es un agujero de seguridad. Si te fias de los datos del cliente estás muerto. Te pueden hacer desde una simple falsificación de los datos enviados a una inyección de SQL en la base de datos pasando por un enlace no legítimo a otra página (Cross Site Scripting)
También recordar que los datos de cualquier formulario web van en claro y con cualquier navegador potente o un sniffer/proxy (privoxy por ejemplo) se pueden ver y cambiar. Igual con las cookies. Nunca te fies de que las cookies tengan los valores que pusiste en un principio ya que se almacenan en el cliente y las puede cambiar cuando quiera.
Otro fallo increiblemente usado es fiarse del referer para validar la entrada de usuarios a sitios supuestamente privados o para impedir que se bajen ficheros.
Re:¿Más links?
(Puntos:2)( http://barrapunto.com/ )
Por poner algunos:
Re:En mi opinión
(Puntos:2)( http://helvete.escomposlinux.org/ )
Podías haber argumentado que la extensión .htm viene de los tiempos de DOS en los que sólo se podía poner 8.3 letras a un nombre de fichero.
Windows aunque no tiene tal restricción sigue con esa costumbre de sólo usar 3 digitos para la extensión, supongo que por compatibilidad hacia atrás para cuando tienes que ver los nombres cortos.
En sistemas operativos de verdad de los que no tienen restricciones exageradas en los nombres de ficheros y se puede poner cualquier extensión no hay ningún problema en poner extensiones de 4 letras o dobles extensiones (tar.gz), por lo que lo natural es llamar a las cosas por su nombre e intentar dar la mayor información posible con el nombre del fichero.
El tono es pedante e hiriente y me siento ofendido tanto por la forma como por el contenido. La persona que lo ha escrito tiene unos conocimientos muy pobres acerca de lo que es trabajar en este mundillo y aún menos conocimientos técnicos. No me explico cómo esto ha podido llegar a la portada.
En vez de sentirte herido y clamar al cielo por sus bajos conocimientos podrías ayudarle a mejorar el texto y a hacer un tutorial que se ajuste más a los que según tú es este mundillo de la web. Igual puedes enseñarle algo al autor y que todos salgamos beneficiados.
Re:.
(Puntos:3, Inspirado)( http://helvete.escomposlinux.org/ )
El PNG es mejor que el GIF. Es un hecho técnico. Con PNG se puede hacer exactamente lo mismo que con el GIF y en cualquier resolución de color.
El GIF es un formato estático, no se puede ampliar. PNG es un lenguaje en el que los datos se almacenan en "chunks" que permiten ampliar el formato y hacer extensiones que los programas que no las entiendan pueden obviar y los que las entiendan pueden utilizar.
PNG permite transparencia por pixel mientras que GIF sólo permite especificar un color que será transparente.
El subformato MNG permite hacer animaciones como con los GIF animados.
Incluso creo que hay extensiones a PNG para almacenar formatos de compresión con pérdida.
Lo único que se me ocurre con referencia al formato puede ser que el formato de compresión de PNG puede ser más pesado en ordenadores con muy poca potencia que el del GIF, pero no creo que sea demasiado significativo.
Desde el lado de compatibilidad con navegadores, que yo sepa el único que no lee bien los PNG es el Internet Explorer lo cual está lastrando mucho el uso de PNG por parte de los diseñadores.
Re:y el link?
(Puntos:1)( http://www.danielclemente.com/ | Última bitácora: Sábado, 08 Octubre de 2005, 18:08h )
Re:Pues habla con Google (¿o con KDE?)
(Puntos:1)( http://www.danielclemente.com/ | Última bitácora: Sábado, 08 Octubre de 2005, 18:08h )
Antes de quejarme tenía que escribir el artículo. Ahora ya podré protestar con mejores resultados, porque no sólo me quejaré sino que les daré las alternativas y las soluciones a los problemas.
Re:a ver si nos enteramos...
(Puntos:1)( http://www.danielclemente.com/ | Última bitácora: Sábado, 08 Octubre de 2005, 18:08h )
Lo malo es que no siempre pasa. Los webmasters son los que tienen que encargarse de evitar este problema.
Re:En mi opinión
(Puntos:1)( http://www.danielclemente.com/ | Última bitácora: Sábado, 08 Octubre de 2005, 18:08h )
Uso .html porque me gusta. No digo que sea la mejor opción; de hecho .htm también va.
Y a mí me gusta que un artículo así llegue a la portada. Yo creo que esto ayuda a la "informática" en general; no como tú dices. ¿Qué fama deberían tener los informáticos? ¿Debo comportarme como un pringao [escomposlinux.org]?
Re:Analisis
(Puntos:1)( http://www.danielclemente.com/ | Última bitácora: Sábado, 08 Octubre de 2005, 18:08h )
Algunos les explican al cliente cómo lo pueden hacer de la mejor forma posible (la más favorable para la empresa).
Oye, y para hacer una web no hay que pasarse tiempo "depurando y mejorando": la haces bien, funciona, y funcionará siempre.
Re:Tu página no funciona con Internet Explorer
(Puntos:1)( http://www.danielclemente.com/ | Última bitácora: Sábado, 08 Octubre de 2005, 18:08h )
Bueno, será que desprecio las páginas web mal hechas. Realmente me molesta mucho ver mensajes de esos de "Lo siento, debe actualizar su navegador para entrar en este sitio".
Pero yo lo he escrito con ganas de enseñar.
Ah, y a mi web se puede entrar también con el Internet Explorer (el HTML es correcto y hay enlaces normales a cada sección). Quizás el CSS y otras adornos no los muestre igual, pero no te voy a impedir llegar al contenido.
En concreto, el menú está hecho con CSS y usa un JavaScript muy sencillo para incluirlo en la página.
Re:.
(Puntos:1)( http://www.danielclemente.com/ | Última bitácora: Sábado, 08 Octubre de 2005, 18:08h )
Pero bueno, yo no digo nunca que el diseño de mi web sea el mejor. Y tampoco hablo de tipografías porque no entiendo, y porque nunca me han dado problemas gordos de accesibilidad.
Sobre la estructuración de la web... eso me preocupa más: me gusta ordenar y clasificar bien las cosas. ¿Qué puedo mejorar?
Por cierto, acepto "donaciones" en forma de diseño (en .css). Yo no sé combinar bien los colores.
(¿Por cierto sabias que no es bueno usar pop-ups?)
Tampoco es bueno usar Internet Explorer... :-)
Re:No veo na...
(Puntos:1)( http://www.danielclemente.com/ | Última bitácora: Sábado, 08 Octubre de 2005, 18:08h )
Si te permite conmutar entre varias hojas de estilo, dile que no use hoja de estilo. Así podrás ver sólo el contenido, sin el diseño.
Con Opera 7 funcionaba bien del todo (incluso soportaba muchas cosas que no tienen los demás navegadores).
Re:¿Tú aconsejas?
(Puntos:1)( http://www.danielclemente.com/ | Última bitácora: Sábado, 08 Octubre de 2005, 18:08h )
¿Conoces el efecto Barrapunto [danielclemente.com]?
Sí, acabo de poner otro enlace a mi web, quiero visitas, ¡¡¡VISITAS!!! Soy un egoísta...
Ahora en serio: yo quiero ayudar a los que buscan cosas (con Google, por ejemplo). No tengo banners ni gano dinero por esto; los beneficios son para todos (espero que también para mí).
Imágenes demasiado grandes: sí, quiero poner una versión grande para el que la quiera con detalles. Si no la quieres en grande, no la abras.
Por cierto, el documento no tiene imágenes.
Texto demasiado grande: sí, es verdad. A mí me gusta así. Es mi web personal... Quizás lo reduzca; tranquilo.
El menú no se ve: pero es opcional. Ignóralo, y usa los enlaces normales para navegar. Desde la página principal hay un enlace a cada sección.
Espacio despilfarrado: eso será en tu resolución de pantalla... :-)
Se ve mi nombre en grande. Pues no me había fijado en si molestaba o no, ya lo miraré.
No hablo de mí: bueno, ya pondré algo cuando me atreva a escribirlo...
-Al pasar el ratón por encima de un enlace éste cambia de tamaño: lo quitaré.
Meta-tags: ¿es que son útiles? ¿Los usan los buscadores?
Los colores: pues a mí me parecen asquerosos... :-)
Bueno, gracias por tu opinión. Ya modificaré algo.