Autor Tema: Reto #3 - Validar HTML  (Leído 4150 veces)

Desconectado CarlosRdrz

  • Moderador Global
  • PHPero Master
  • *****
  • Mensajes: 2.505
  • Karma: 131
  • Sexo: Masculino
  • A.k.a. TLX
    • Ver Perfil
Reto #3 - Validar HTML
« en: 16 de Noviembre de 2009, 16:03:51 pm »
Hola a todos,

Vamos con el tercer reto de la comunidad, un poco mas sencillo y que solo requiere algunos conocimientos básicos de HTML.
¿Conocías la validación de la W3C de HTML y CSS?
Puedes encontrar la herramienta de validación en: http://validator.w3.org/

La W3C es un consorcio internacional que produce recomendaciones para la WWW (Según wikipedia).
Esta dirigido por el creador de HTML, URL y HTTP entre otras.

En esa dirección puedes encontrar una aplicación que te comunicará errores en códigos HTML y CSS y así podrás corregirlos para adaptar tus sitios a los estándares web.

¿Podrías decir por qué este fragmento de código no valida y cual sería el código equivalente ya corregido?
Citar
<html>
<head>
<title>kNews :: Login</title>
</head>

<body>
<table width="485" height="217" border="0" align="center" class="Tabla">
  <tr valign="top">
    <td width="149" height="212" class="td"><div align="center">
      <img src="images/admin.gif" width="140" height="50" border="1" /><br />
        <p class="Texto">kNews esta protegido por un sistema de usuarios.<br />
        <a href="http://www.web.com"><br />
          Si no perteneces a<br />
          este grupo de usuarios<br />
        pulsa aqui</a></p>
      </div></td>
    <td width="325" class="td"><div align="center"><img src="images/login.gif" width="315" height="50" border="1" /><br />
      <br />
      <form action="login.php" method="POST">
      <table width="315" height="56" border="0" align="center">
        <tr>
          <td width="157" height="52" align="center" valign="top"  class="Texto">Usuario<br />
              <label>
                <input type="text" name="user" id="user" />
              </label>
              <br /></td>
          <td width="159" align="center" valign="top" class="Texto">Contrase&ntilde;a<br />
            <label>
            <input name="pass" type="password" id="pass" value="" />
            </label></td>
        </tr>
      </table>
      <br />
      <label>
      <input type="submit" name="login" id="login" value="Login" />
      </label>
      </form>
    </div></td>
  </tr>
</table>
</body>
</html>

Está permitido separar los estilos en una hoja CSS aparte.
Por si a alguien le interesa, este código forma parte del antiguo sistema kNews, y por supuesto ya esta corregido.

Además,
¿Sabias que la w3c no valida correctamente la página principal de google.es?

Si te da por entrar aquí: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.google.es%2F&charset=%28detect+automatically%29&doctype=Inline&group=0 podrás ver que la página principal de google.es contiene 53 errores de HTML y 2 advertencias.

Todos sabemos que Google no se chupa el dedo, ¿Por qué piensas que hacen esto así?

Ganador: westwest


Un saludo, y suerte.
« Última modificación: 16 de Noviembre de 2009, 21:30:45 pm por TLX »
La dedicación de mi respuesta sera directamente proporcional a la dedicación de tu pregunta.
Hacer códigos que entiendan las máquinas es fácil, lo difícil y realmente útil es hacer códigos que entiendan las personas.
http://twitter.com/CarlosRdrz
http://www.carlosrdrz.es

Comunidad PHPeros

Reto #3 - Validar HTML
« en: 16 de Noviembre de 2009, 16:03:51 pm »

Desconectado westwest

  • PHPero Master
  • ******
  • Mensajes: 2.837
  • Karma: 104
  • Sexo: Masculino
    • Ver Perfil
Re:Reto #3 - Validar HTML
« Respuesta #1 en: 16 de Noviembre de 2009, 16:48:59 pm »
Imagino que no valida porque google no ha pasado a HTML5, ademas de que tiene elementos obsoletos para ser compatible con el mayor numero de navegadores.


Respecto al código, debe tener una "cabecera" que indique el tipo de documento
Hay que indicar el contenido, usando META
2 errores dicen que las imagenes necesitan un atributo ALT
Otro indica que method="POST" no existe, XHTML es LOWER-CASE, es decir, todo en minusculas
El último, dice que height existe, pero no para una tabla, hay que usar CSS

Mi código es este:

Citar

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html;charset=utf-8" />
<title>kNews :: Login</title>
<style type="text/css">
.Tabla {
width: 485;
height: 217;
}
</style>
</head>

<body>
<table border="0" align="center" class="Tabla">
  <tr valign="top">
    <td width="149" height="212" class="td"><div align="center">
      <img src="images/admin.gif" width="140" height="50" border="1" alt="admin" /><br />
        <p class="Texto">kNews esta protegido por un sistema de usuarios.<br />
        <a href="http://www.web.com"><br />
          Si no perteneces a<br />
          este grupo de usuarios<br />
        pulsa aqui</a></p>
      </div></td>
    <td width="325" class="td"><div align="center"><img src="images/login.gif" width="315" height="50" border="1" alt="login" /><br />
      <br />
      <form action="login.php" method="post">
      <table style="width:315;height:56;" border="0" align="center">
        <tr>
          <td width="157" height="52" align="center" valign="top"  class="Texto">Usuario<br />
              <label>
                <input type="text" name="user" id="user" />
              </label>
              <br /></td>
          <td width="159" align="center" valign="top" class="Texto">Contrase&ntilde;a<br />
            <label>
            <input name="pass" type="password" id="pass" value="" />
            </label></td>
        </tr>
      </table>
      <br />
      <label>
      <input type="submit" name="login" id="login" value="Login" />
      </label>
      </form>
    </div></td>
  </tr>
</table>
</body>
</html>


« Última modificación: 16 de Noviembre de 2009, 16:50:45 pm por westwest »

Desconectado Siquillote

  • PHPero Master
  • ******
  • Mensajes: 4.229
  • Karma: 179
  • Sexo: Masculino
    • Ver Perfil
Re:Reto #3 - Validar HTML
« Respuesta #2 en: 16 de Noviembre de 2009, 19:55:33 pm »
Perdonen , pero no entiendo la finalidad de este reto :S ¿Que se supone que hay que hacer?

#Fdo. Physlet

Desconectado westwest

  • PHPero Master
  • ******
  • Mensajes: 2.837
  • Karma: 104
  • Sexo: Masculino
    • Ver Perfil
Re:Reto #3 - Validar HTML
« Respuesta #3 en: 16 de Noviembre de 2009, 20:02:28 pm »
Perdonen , pero no entiendo la finalidad de este reto :S ¿Que se supone que hay que hacer?

Explicar por qué ese código no es valido, y dar uno válido

Desconectado Siquillote

  • PHPero Master
  • ******
  • Mensajes: 4.229
  • Karma: 179
  • Sexo: Masculino
    • Ver Perfil
Re:Reto #3 - Validar HTML
« Respuesta #4 en: 16 de Noviembre de 2009, 20:25:18 pm »
Entendido , voi a ponerme a ello :)

#Fdo. Physlet

Desconectado CarlosRdrz

  • Moderador Global
  • PHPero Master
  • *****
  • Mensajes: 2.505
  • Karma: 131
  • Sexo: Masculino
  • A.k.a. TLX
    • Ver Perfil
Re:Reto #3 - Validar HTML
« Respuesta #5 en: 16 de Noviembre de 2009, 21:30:18 pm »
Imagino que no valida porque google no ha pasado a HTML5, ademas de que tiene elementos obsoletos para ser compatible con el mayor numero de navegadores.

Tu código esta bien, aunque esa no es la respuesta a la pregunta.
El tema de validar o no no tiene nada que ver con HTML5, de hecho, google sabe muy bien que su página no valida, pero la pregunta es: Si lo saben, ¿Por qué no lo solucionan?

De todas formas puedes considerarte ganador del reto número 3 :)

Saludos
La dedicación de mi respuesta sera directamente proporcional a la dedicación de tu pregunta.
Hacer códigos que entiendan las máquinas es fácil, lo difícil y realmente útil es hacer códigos que entiendan las personas.
http://twitter.com/CarlosRdrz
http://www.carlosrdrz.es

Desconectado westwest

  • PHPero Master
  • ******
  • Mensajes: 2.837
  • Karma: 104
  • Sexo: Masculino
    • Ver Perfil
Re:Reto #3 - Validar HTML
« Respuesta #6 en: 16 de Noviembre de 2009, 21:33:24 pm »
^^ Gané! jeje

Según google, no validan porque la validacion no influye en el posicionamiento, asi que les da igual y prefieren una página mas simple, algo asi :P

Desconectado CarlosRdrz

  • Moderador Global
  • PHPero Master
  • *****
  • Mensajes: 2.505
  • Karma: 131
  • Sexo: Masculino
  • A.k.a. TLX
    • Ver Perfil
Re:Reto #3 - Validar HTML
« Respuesta #7 en: 16 de Noviembre de 2009, 21:40:30 pm »
Yo tengo entendido otra cosa, pero me voy a guardar mi respuesta por si mas gente se anima a realizar el reto :)

Saludos
La dedicación de mi respuesta sera directamente proporcional a la dedicación de tu pregunta.
Hacer códigos que entiendan las máquinas es fácil, lo difícil y realmente útil es hacer códigos que entiendan las personas.
http://twitter.com/CarlosRdrz
http://www.carlosrdrz.es

Desconectado Tope

  • PHPero Experto
  • *****
  • Mensajes: 540
  • Karma: 23
  • Sexo: Masculino
  • Programador PHP
    • Ver Perfil
    • www.Info-Keko.Es
Re:Reto #3 - Validar HTML
« Respuesta #8 en: 17 de Noviembre de 2009, 20:02:41 pm »
Faltaría indicar cómo lo tenemos que validar.
Por lo que veo es XHTML (que no se dice nada) y además falta la versión, y si es Strict o Transitional. XD
Edito: El codigo de westwest es XHTML 1.0 Transitional, pero no lo valida como Strict
« Última modificación: 17 de Noviembre de 2009, 20:04:34 pm por Tope »
Un Saludo, Tope >> Programador FIJO en PHPeros

Desconectado westwest

  • PHPero Master
  • ******
  • Mensajes: 2.837
  • Karma: 104
  • Sexo: Masculino
    • Ver Perfil
Re:Reto #3 - Validar HTML
« Respuesta #9 en: 17 de Noviembre de 2009, 20:08:21 pm »
Como no indicó como habia que validarlo, cogí el que "mejor conozco" y el que CREO que mas se usa... Pero validado esta, no?

Desconectado CarlosRdrz

  • Moderador Global
  • PHPero Master
  • *****
  • Mensajes: 2.505
  • Karma: 131
  • Sexo: Masculino
  • A.k.a. TLX
    • Ver Perfil
Re:Reto #3 - Validar HTML
« Respuesta #10 en: 17 de Noviembre de 2009, 21:58:55 pm »
Faltaría indicar cómo lo tenemos que validar.
Por lo que veo es XHTML (que no se dice nada) y además falta la versión, y si es Strict o Transitional. XD
Edito: El codigo de westwest es XHTML 1.0 Transitional, pero no lo valida como Strict

Bueno, sinceramente no se en qué ves que el código que yo he proporcionado se ajuste al estándar de XHTML , pues es simplemente un código "mal" escrito. En cualquier caso, puede ser lo que tu dices, si nos comentas exactamente en que notas la diferencia no tendré ningún problema en corregirlo en mi post original e indicar que es un código XHTML.

Y la forma en que valides, puesto que no he indicado nada, puede asumirse que es como mas guste :)

Saludos
« Última modificación: 17 de Noviembre de 2009, 22:01:45 pm por TLX »
La dedicación de mi respuesta sera directamente proporcional a la dedicación de tu pregunta.
Hacer códigos que entiendan las máquinas es fácil, lo difícil y realmente útil es hacer códigos que entiendan las personas.
http://twitter.com/CarlosRdrz
http://www.carlosrdrz.es

Desconectado Tope

  • PHPero Experto
  • *****
  • Mensajes: 540
  • Karma: 23
  • Sexo: Masculino
  • Programador PHP
    • Ver Perfil
    • www.Info-Keko.Es
Re:Reto #3 - Validar HTML
« Respuesta #11 en: 17 de Noviembre de 2009, 22:47:58 pm »
El código es más XHTML que HTML

La explicación breve y sencilla.
- En HTML las etiquetas <img />, <input /> serian <img></img> e <input></input> respectivamente.
- Además de que todos los valores están entrecomillados.

No es ni HTML ni XHTML válido, esa es la conclusión jijijiji es una mezcla.
Aunque ya no importa,  si dices que como no has indicado el estándar que deseabas no tiene sentido esto jeje.
Un Saludo, Tope >> Programador FIJO en PHPeros

Desconectado GerardoII

  • PHPerit@
  • *
  • Mensajes: 1
  • Karma: 0
  • Nuev@ PHPer@
    • Ver Perfil
Re:Reto #3 - Validar HTML
« Respuesta #12 en: 08 de Febrero de 2010, 01:52:55 am »
Hola,

Google se salta el estándar para hacer el código más pequeño y ahorrar unas centésimas al cargar.
Este es su DTD: <!doctype html>
Si os fijáis en la función javascript nueva para que se desvanezca la barra superior, las variables y los identificadores de función son de la menor longitud posible.
Además, el HTML no tiene casi intros (creo que tiene unos 10) ni espacios ni tabulaciones.
La página de inicio de Google España se envía comprimida y ocupa 4744 bytes. Fácilmente puede llegar a duplicar el tamaño si utilizamos un HTML válido, tabulamos y ponemos nombres identificativos a las variables, es decir, reducen el tiempo de carga a prácticamente la mitad.
La página inicial de Google tarda 0.3s en cargar y abre a su vez otras 6 urls que en total ocupan 31498 bytes, y se descargan todas en 0.33s, es decir, tenemos el buscador disponible para empezar a trabajar en sólo 0.63 segundos.

Desconectado CarlosRdrz

  • Moderador Global
  • PHPero Master
  • *****
  • Mensajes: 2.505
  • Karma: 131
  • Sexo: Masculino
  • A.k.a. TLX
    • Ver Perfil
Re:Reto #3 - Validar HTML
« Respuesta #13 en: 08 de Febrero de 2010, 16:02:58 pm »
Perfecto, eso es lo que tenia entendido yo, muy bien :)

Saludos
La dedicación de mi respuesta sera directamente proporcional a la dedicación de tu pregunta.
Hacer códigos que entiendan las máquinas es fácil, lo difícil y realmente útil es hacer códigos que entiendan las personas.
http://twitter.com/CarlosRdrz
http://www.carlosrdrz.es

Desconectado westwest

  • PHPero Master
  • ******
  • Mensajes: 2.837
  • Karma: 104
  • Sexo: Masculino
    • Ver Perfil
Re:Reto #3 - Validar HTML
« Respuesta #14 en: 08 de Febrero de 2010, 16:22:13 pm »
Hola,

Google se salta el estándar para hacer el código más pequeño y ahorrar unas centésimas al cargar.
Este es su DTD: <!doctype html>
Si os fijáis en la función javascript nueva para que se desvanezca la barra superior, las variables y los identificadores de función son de la menor longitud posible.
Además, el HTML no tiene casi intros (creo que tiene unos 10) ni espacios ni tabulaciones.
La página de inicio de Google España se envía comprimida y ocupa 4744 bytes. Fácilmente puede llegar a duplicar el tamaño si utilizamos un HTML válido, tabulamos y ponemos nombres identificativos a las variables, es decir, reducen el tiempo de carga a prácticamente la mitad.
La página inicial de Google tarda 0.3s en cargar y abre a su vez otras 6 urls que en total ocupan 31498 bytes, y se descargan todas en 0.33s, es decir, tenemos el buscador disponible para empezar a trabajar en sólo 0.63 segundos.
Pues por medio segundo no se si vale la pena programar con tanto lio...
(Aunque imagino que a la hora de programar, usaran espacios y tal, y luego los quitarán...