Comunidad PHPeros
Otros => Los Retos PHPeros => Mensaje iniciado por: CarlosRdrz 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?
<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ñ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.
-
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:
<!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ñ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>
-
Perdonen , pero no entiendo la finalidad de este reto :S ¿Que se supone que hay que hacer?
-
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
-
Entendido , voi a ponerme a ello :)
-
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
-
^^ 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
-
Yo tengo entendido otra cosa, pero me voy a guardar mi respuesta por si mas gente se anima a realizar el reto :)
Saludos
-
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
-
Como no indicó como habia que validarlo, cogí el que "mejor conozco" y el que CREO que mas se usa... Pero validado esta, no?
-
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
-
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.
-
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.
-
Perfecto, eso es lo que tenia entendido yo, muy bien :)
Saludos
-
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...
-
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...
No consiste en que tarde menos en cargar (que también) sino en ahorrar unos pocos KB de ancho de banda.
Piensa que la página principal de Google es una página que recibe muchas visitas diarias y si sumas esos pocos KBs entre todas las visitas ahorran una cantidad importante de ancho de banda.
Saludos!