----------------------------------------------------------
Cuarto trabajo:
jomaruro Código XHTML:
<offtopic type="hablando un poco del diseño">Algunas imágenes no cargan (no existen), por lo cual se usa el texto alternativo, en el logo y en la validación al pie.</offtopic>
También me gustó el indentado de los códigos.
Uso correcto de encabezados y párrafos. Interesante ese efecto de esquinas redondeadas usando sólo XHTML/CSS en los títulos de las secciones (span y div no tienen sentido semántico en ese contexto, igual, el efecto es interesante).
En el logo el div que contiene al h1 está sobrando, podrías haber asignado el logo como imagen de fondo del h1 directamente. Esos span que están en el portafolio (para la imagen decorativa parecida a una cinta) sería mejor que fueran imágenes (<img>).
El código de la sección de contacto tiene errores de validación debido a que incluíste los label/input directamente en el formulario sin ningún contenedor (frameset, div, etc.). También, no especificaste el atributo for para algunos de los label. Esos <br /> probablemente sobran en favor de CSS para controlar la ubicación de los elementos.
El validador te da una advertencia en todas las páginas debido a que tienen un BOM (UTF-8) al inicio del archivo; es bien sabido que esos tres caracteres puedan dar varios problemas, entre ellos, hacer que mágicamente el diseño se descuadre en algunos navegadores. Guarda tus archivos con codificación UTF-8 sin el BOM.
Las imágenes de "Código Válido" no tienen un enlace al validador.
Código CSS:
No comentaste ninguna sección del código. Tal vez podría servir algunos comentarios para que al leer se entienda la agrupación de los selectores que aplican a ciertos elementos.
Hay algunos selectores que podrían simplificarse, por ejemplo, en lugar de:
.raised .b1, .raised .b2, .raised .b3, .raised .b4, .raised .b1b, .raised .b2b, .raised .b3b, .raised .b4b
Obtendrías el mismo efecto usando:
.raised span
Podrías así también incluir en ese mismo selector el background-color para que aplique a todos los elementos, en lugar de repetirlo en todos los selectores independientes.
Así también. Esto:
#enlace a, #enlace a:link, #enlace a:visited, #enlace a:hover
Podría ser solamente:
#enlace a
Así ya se aplicaría el color al enlace independiente del estado (definido por los pseudo-elementos).
En el selector #titulo repites dos veces la propiedad vertical-align.
En algunos casos (por ejemplo, en el selector h1) podrías haber usado la forma abreviada para la propiedad font en lugar de una declaración para cada propiedad:
font: style variant weight size family;
Quinto trabajo:
Dalvenjha
<offtopic type="hablando un poco del diseño">Interesante el diseño, salirse un poco de la rutina
. En algunas resoluciones, al ir a un apartado, se ve el "copete" del apartado siguiente, lo cual genera un efecto algo desagradable al querer leerlo pero no poder hacer scroll (necesariamente hay que volver al menú y hacer click al enlace a esa sección)</offtopic>
Código XHTML:
Uso correcto de los encabezados, párrafos e imágenes.
Falta indentar el código (eso causa dificultad al leerlo). El código no valida, y, si revisas, la mayoría de los errores están relacionados con el código Javascript. Recomendación: en lo posible, siempre coloca tu código Javascript en un archivo separado (.js) y sólo enlaza al archivo desde el XHTML.
En el formulario (de hecho, no existe formulario, cuando debería haber) veo que usaste una lista desordenada para los campos, yo no lo interpreto como tal (como una lista desordenada). No usaste etiquetas (label) para los campos, es importante que las uses por cuestiones de accesibilidad y semántica. El botón de envío es un type="button", es mejor que sea un type="submit".
También, ese span de "Volver al inicio" sería más correcto que fuera un enlace (<a>) apuntando al inicio (href="#").
No especificas un texto alternativo a las imágenes, el texto alternativo debe tener la misma función descriptiva que la imagen. El atributo alt lo dejas vacío, el robot de validación no se va a quejar, pero te aseguro que un usuario que no pueda ver las imágenes por X razón sí lo va a hacer.
Esas anclas (<a name="...">) sobran. Ya que los enlaces pueden apuntar directamente al id del div que contiene la sección, por ejemplo #manifiestar (para la sección "Manifiesto").
Código CSS:
Tampoco hay comentarios en el código, y en este caso siendo un archivo ya algo extenso a primera vista uno se pierde.
Hay algunas repeticiones innecesarias de propiedades. Por ejemplo, fíjate que html y body tienen igual valor para width, height, margin y padding, entonces, lo mejor sería que los unificaras en un selector (html, body) para esas propiedades. Lo mismo sucede con las cajas que tienes en la sección principal, todas tienen mismo valor para min-height, overflow, padding, font-size, y padding-*. Podrías usar un único selector (#content #menu div, por ejemplo) para asignar esos valores.
En el selector #container #header h1 podrías haber usado la forma abreviada de margin. También, se nota un uso incorrecto de la forma abreviada. Por ejemplo, hay selectores que tienen:
margin:0 auto;
margin-top:1.5em;
margin-bottom:0.5em;
Lo cual es innecesario (usar la forma abreviada y luego asignar dos de los márgenes por separado), podría ser solamente:
margin: 1.5em auto 0.5em;
Lo mismo para el padding en algunos selectores.
----------------------------------------------------------
El orden en que presenté los trabajos no tiene que ver con la votación/críticas sobre el código, más que nada, fue solo el orden en que los fui revisando.
Mi voto es para:
jeybi (en cuestión de Código)
Felicitaciones nuevamente a todos los participantes.
Que pase el siguiente a presentar su análisis
.