Votación - Free For All

[Calizman]

Saludos!

En este tema se crearon inició una competencia CSS que inicialmente fué muy bien vista por estos lugares.

Una vez mas, he de expresar mi agradecimiento a los usuarios que presentaron sus trabajos y que cumplieron su responsabilidad. Al resto...

Sin más que decir, les dejo los enlaces para que vean los trabajos que se han hecho:

Markmb - http://markmb.pruebasweb.com.es


Danico90 - http://lineaad.com/fdw/

Al parecer, ambos tuvieron problemas con el TAW por lo que será una regla que obviaremos. Muchas gracias por participar y sin nada mas que agregar... ¡A votar!

-- Edito

Hubieron algunos participantes que, luego de iniciada la votación, presentaron sus trabajos y, aunque ya no están dentro de las votaciones, es bueno que vean sus sitios. Acá dejo sus enlaces:

- Joseomaker: Plantilla Espacial

- Carlangueitor: www.charlyroman.com/estacion-espacial/

Aclaro: los parcipantes que presentaron tarde sus trabajos, aunque estan siendo publicados, no tendrán derecho a participar en la encuesta ya creada. Por lo demás, si quieren hacerles comentarios acerca de sus trabajos, sientanse en la libertad de hacerlo.

[bkolores]

ninguno de los dos diseños es muy agradable pero hay un css mejor

[joseomaker]

yo hubiera ganado,aca les muestro lo que llevaba:

http://plantillasjoseph.webcindario....0espacial.html

entre los 2 que presentaron,me quedo con el de danico,lo siento darkmb,pero,eso no parece muy pro... osea,no se ve nada bien.

[Rafael]

¡Que bueno que participaron ambos!

Creo que el diseño de Daniko explora un poco más estructurar con Css. Pero bien ambos trabajos.

[danico90]

Gracias por votar.

Es una lástima que solo dos participaramos entre tanta gente que se inscribió y se comprometió. Parecía que iba a ser una buena competencia.

[Triby]

Vote por el diseño de danico90, si se me permite, explico las razones:

Aclaracion: Espero no tomen a mal mis comentarios, son de buena fe y con la unica intencion de ayudar.

Markmb diseño: Si bien, los colores elegidos son muy agradables, resulta monotono y con muchos espacios vacios. No es malo el diseño, insisto, me gusta, pero faltaron algunos elementos, tal vez algo que haga resaltar el menu, el encabezado o el pie de pagina.

danico90 diseño: Aunque no me satisfacen algunos colores usados (como el #B05526 en los enlaces del h2 y fondo en el hover de la lista de la derecha) tiene muy buen contraste, es agradable a la vista, no es cansado para leer y me gusta mucho la distribucion general.

Markmb codigo HTML: Es un codigo valido, sin embargo, no hay una estructura identificable mediante etiquetas HTML, es decir, no hay uso de h1 - h6, el menu habria quedado bien con lista no ordenada (ul) y los botones de validacion del pie de pagina horizontales. Tienes declarado un charset UTF-8 y aun asi hay caracteres codificados con entidades HTML como á, precisamente los juegos de caracteres ayudan a eliminar esa necesidad.

danico90 codigo HTML: Buen uso de h1 - h3, el menu creado con listas, buena indentacion del codigo, excepto en los parrafos del contenido, solo gran detalle: Codificaste HTML 4.01 Transitional y el reto requeria XHTML 1.0 Strict (No lo habia notado hasta que comence a escribir esto... despues de votar).

Las cuestiones de CSS las dejamos para quienes tienen mas experiencia y conocimiento.

P.D.: Master Calizman, es posible eliminar mi voto para darselo a markmb? Solo por la codificacion.

P.D.2: joseomaker, Creeme, no puedes menospreciar el trabajo de tus compañeros y mucho menos jactarte de ser mejor cuando lo tuyo ni siquiera entro a votacion, aparte de usar imagenes directamente con <img /> para la estructura del sitio:

<div class="header" id="header1"><img src="img/iss_izquierda.png" alt="bienvenido a la web" /></div>
<div class="header" id="header2">
<img src="img/iss_escudo.png" alt="del projecto" />
</div>
<div class="header" id="header3"><img src="img/iss_derecha.png" alt="ISS" /></div>

[abimaelrc]

Bueno ya di mi votación, hace un rato. Estaba verificando el código de ambos y lo que puedo decir es
markmb
Es bueno usar "reset" para que no tengas tantas complicaciones a la hora de mostrar la información. Algunos navegadores por defecto tienen una forma de mostrar información que otros. Por eso se hace un "reset" para que en todos (o la mayoría) se vean iguales. Para más detalle te recomiendo que hagas lectura de este artículo http://www.anieto2k.com/2007/08/07/r...o-estilos-css/, también te recomiendo que leas los comentarios, ya que el que brindó esa información contesta preguntas muy interesantes que te ayudarán a comprender mejor sobre el tema.

Lo otro, es que para títulos se usa las etiquetas H1 y/o H2, etc. (Nota: También evitar el usar H2 si anteriormente no haz indicado un H1). Eso se le conoce como HTML semántico. Te recomiendo en gran manera que leas sobre ese tema, ya que para futuras ocasiones te ayudará en tus proyectos.

Evita la "divitis". Hay muchas etiquetas que te pueden ayudar a crear una página web y con menos esfuerzo.

Danico90
Te indico lo mismo de evitar la "divitis". Existen las etiquetas <p></p>, <br />, etc. En esta página encontrarás un buen listado de las etiquetas de HTML http://www.w3schools.com/tags/default.asp y como usarlas. Te recomiendo que bajes varias plantillas famosas y que mires como ellos hicieron la estructura de HTML y el uso de CSS.

Bueno otros dirán más comentarios.

[danico90]

Iniciado por Triby

danico90 codigo HTML: Buen uso de h1 - h3, el menu creado con listas, buena indentacion del codigo, excepto en los parrafos del contenido, solo gran detalle: Codificaste HTML 4.01 Transitional y el reto requeria XHTML 1.0 Strict (No lo habia notado hasta que comence a escribir esto... despues de votar).

http://validator.w3.org/check?uri=http%3A%2F%2Flineaad.com%2Ffdw%2F&charse t=%28detect+automatically%29&doctype=Inline&group= 0&user-agent=W3C_Validator%2F1.1

Me equivoqué, jeje, no me fije en eso, busque en google el header de strict pero no me fijé que era HTML y no XHTML...
Ya me parecía raro que no me pidiera cerrar las imágenes, los metas y link...
Bueno, un error bastante estúpido...

Te indico lo mismo de evitar la "divitis".

jeje, nunca me había percatado de eso... Aunque he visto muchas páginas que en su mayoría utilizan divs, investigaré acerca de eso. Aunque me parece bien reducir el uso de divs.

Si alguien puede comentar acerca del CSS estaría genial.

Gracias por los comentarios.

[markmb]

Primero, gracias a danico90 por enseñarme que el tema de las votaciones ya estaba creado :D... Fallo mío por pensar que se pondría a continuación del otro tema.

Sin mirar el código de danico90, he de decir que es más bonito su trabajo.

Después de eso, voy a explicarme un poco: a mi me gustan las cosas sin demasiados adornos, por eso hice un trabajo 90% texto, y se que me pasé un poco, pero también me dormí en los laureles y se me hizo un poco tarde.

Me encanta todo esto de las webs, pero mi especialidad es más el PHP que no el CSS, pero pese a ello, estoy dispuesto a aceptar todos los comentarios y a aprender de mis errores.

Vamos por partes:

Calizman: es la primera vez que valido con TAW, y me costó mucho arreglar diversas cosas, y necesité mucho a don Google.

Triby: lo que encuentro que le falta son imágenes, pero no sabía que poner, todo lo que se me ocurría me parecía que resultaría en un diseño demasiado cargado.

Abimaelrc: no sabía que se eso tuviese un nombre específico lo de cambiar las propiedades a h1, h2, etc. Lo demás, me lo miraré e investigaré para futuras ocasiones.

EDITO: iba a votar, pero mejor no lo hago, no se a quien votar

[Dalvenjha]

Presento mis disculpas, estuve de viaje las dos primeras semanas de la competencia, y ahora me han cogido con un proyecto del trabajo que me consume todo el tiempo que tengo y que no tengo. Igual, para no quedarme con la espina apenas tenga tiempo libre cumpliré con el reto.

Saludos y disculpas Calizman.

[Calizman]

Markmb: La idea era aprender no? Que bien que ahora ya conoces la validación TAW y espero que en el futuro, puedas usarlo para tu beneficio.

Dalvenjha: Que mal que no pudiste participar man! Creo que todos esperabamos más de los competidores... En fin, cuando termines el sitio lo mandas y lo publicamos acá!

Hasta Luego!

[abimaelrc]

Iniciado por markmb

Abimaelrc: no sabía que se eso tuviese un nombre específico lo de cambiar las propiedades a h1, h2, etc. Lo demás, me lo miraré e investigaré para futuras ocasiones.

Lo que significa es más bien asignar la etiqueta que corresponde a lo que quieres mostrar en una forma en específica. Si quieres mostrar títulos para eso se creo H#. Si quieres mostrar por párrafos para eso se creo <p></p>. Si deseas dividir se usa <div></div> etc. Dependiendo de lo que quieras hacer debes usar aquello que se creo para ese propósito. A eso es lo que se le conoce como HTML semántico.

[Calizman]

He editado el primer mensaje, agregando dos enlaces más de participantes que ya no llegaron a la encuesta, pero de igual manera presentaron tarde su trabajo.

[caesar.l]

Opino como usuario por que de CSS no se nada

El proyecto de Markmb, como se ha comentado tiene su potencial en la sencillez. Algunas imagenes no le cairian mal

El proyecto de danico90 es mas agradabe a la vista por los elementos que usa

El proyecto de Joseomaker me recuerda a las paginas de los 90's

El proyecto de Carlangueitor tambien tiene un buen aspecto visual, nada mas veo que el recuadro blanco donde viene la información es ligeramente mas ancho que el encabezado

Saludos

[OmarV]

Muy buenos los 4, lastima por los que no entregaron a tiempo...

[daPhyre]

Bueno, ya que nadie más ha valorado las hojas de estilos, supongo que me encargaré yo de ello

Markmb
Para empezar, el título principal debió ser un h1, tardé en identificarlo.
Los font-size los pusiste en pixeles, cuando el estandar de accesabilidad indica que lo ideal es ponerlo en em.
En cuanto a la página, es cierto, un diseño sencillo puede ser bueno, pero el que sea demasiado simple le hace poco atractivo. Por experiencia, un buen diseño sencillo separa por lo menos en dos fondos (Cabezera/Cuerpo, Página/artículo, etc...). Además, lo mejor para leer un texto largo, es un fondo claro con letra oscura, de lo contrario, se lastima la visión...
No está mal, pero algunos detalles le pudieron dar mucha mejor vista

Danico90
Al igual que Markmb, los font-size los pusiste en pixeles...
Por lo demás, el CSS está muy bien estructurado. Me gusta como pusiste hasta esos detalles para que se viera bien la página.
La parte visual de la página, es bastante buena

Joseomaker
El CSS es sencillo, pero cumple su propósito.
El diseño está muy simple, sería mejor si se hubieran puesto ejemplos, un LoremImpsum en el área del contenido con su título en h2, un menú o noticia en la barra lateral, y texto en los botones superiores.
Sería bueno un pequeño padding en el área de contenido, y quizá también en la barra lateral.
En ambos, el color de letra se pierde con el fondo, sería mejor si el fondo tuviera un efecto de marca de agua o similar.
Por lo visto, me supongo que el diseño está incompleto. Fuera de los detalles, el tema y el fondo espacial se ven muy bien

Carlangueitor
Primero debo decir que el Head me ocupa media pantalla, si entro en mi notebook, seguro no veo el texto al comienzo, aunque debo admitir que con esa imagen se ve bien.
Me gusta como se ve la galería, como se ordenó los enlaces de interés, y que todo está disponible siempre aunque con mayor detalle en sus respectivas secciones.
El texto en la introducción se ve amontonado. Quizá una imagen con float:left le hubiera dado una vista distinta.
Me gustan los validadores de abajo, discretos pero bastante visibles. El diseño es bueno

Conclusión
Los diseños son buenos, me han gustado en especial el de Carlangueitor y el de Danico90. A pesar del error que este último fue hecho en HTML y no XHTML, he hecho la revalidación como XHTML, y solo cambian los omitags y el xmlns en la etiqueta html, por lo que consideraré dicho código como valido por esta ocasión.

Definitivamente, Danico90 ha hecho un muy buen trabajo, combinó muy bien la parte visual con la estructura correcta del HTML+CSS (Excepto quizá el detalle de las fuentes, pero por eso aquí están todos para aprender). Mi voto va para él.

[jomaruro]

Hola:

Es triste pero lo primero que tengo que criticar es esto:

Iniciado por joseomaker

yo hubiera ganado,aca les muestro lo que llevaba:

http://plantillasjoseph.webcindario....0espacial.html

entre los 2 que presentaron,me quedo con el de danico,lo siento darkmb,pero,eso no parece muy pro... osea,no se ve nada bien.

Sobra chulería y prepotencia. Sobretodo viendo un diseño que más bien recuerda a las primeras películas de Star Wars o a los primeros juegos de "marcianitos" de los años 80 y no habiendo cumplido con el plazo comprometido.

Lo segundo los que se comprometieron a hacer un trabajo y no lo han hecho (ni siquiera tarde).

El mejor diseño me ha parecido el de danico90 aunque me parece que le vendría bien alguna imagen en la cabecera.

El diseño de markmb parece inacabado quiza falto de algún fondo menos monótono.

De los dos diseños fuera de concurso me falta comentar algo del de Carlangueitor, iba por muy buen camino aunque creo que la cabecera es excesivamente grande.

Saludos.

[zerokilled]

saludos y felicitaciones a los participantes!

diseño:


markmb,
debo admitir que me agrada mucho los diseños minimalistas. parece que ese fue intento pero no lo parece mucho. de todos modos es agradable a la lectura. lo que no me convence es el sidebar. hubiera hecho algo parecido a la estructura del sidebar de wikipedia. tambien le faltaria agregar algun otro elemento visual para no hacer el diseño muy monotono.

danico90,
de tu diseño hay tres cosas que no me agradan. la separacion de las secciones el cual parece tener un borde negro debido al color de fondo, la falta de espacio entre contenido, y la dimensiones de las imagenes le dan un cierto desquilibrio, especificamente las imagenes del contenido izquierdo.

joseomaker,
el diseño no lo puedo evaluar mucho porque tu trabajo claramente esta incompleto. el encabezado confunde, los espacios de fondo blanco son enlaces pero no lo parecen. no veo un encabezado como titulo del sitio el cual ayude a identificarse, solo tienes una imagen que poco se puede entender el texto. la imagen de fondo del contenido no es agradable para lectura ya que la dificulta al igual que la tipografia. por lo general las fuentes monospace se utilizan cuando se requiere visualizar claramente cada caracter para no comenter algun error como es el caso de los codigos fuentes.

carlangueitor,
tu diseño es bien agradable especialmente el encabezado y la barra de enlaces. lo unico que cambiaria son dos cosas. la seccion que sirve como identificacion del documento, en tu caso el elemento H2, le quitaria el borde y los margenes de modo que queden unidos tanto la barra de enlaces y la seccion de contenido. y segundo la altura de linea de texto darle mas espacio.

html:


los demas compañeros ya han ido mencionando los detalles. en especial la divitis y agregaria la spanitis aunque este ultimo no es tan severo como el primero. por lo demas, al menos todos trabajos validan en XHTML.

css:


en todos los trabajos las hojas de estilos validan correctamente, pero no por ello significa que se ha aplicado correctamente. por ejemplo, en algunos trabajos veo la aplicacion de un elemento especificamente para controlar los elementos flotados cuando se pudo haber empleado el elemento siguiente para este proposito. en otros casos se pudo haber empleado overflow:hidden; en el elemento padre para que su contenedor se pueda mostrar. no es que este definitivamente mal pero se pudo haber evitado. a lo que me refiero es a codigo como el siguente.

Código:

div {clear:both;}

markmb,
en el css veo algunas cosas que no se para que estan presentes. por ejemplo, un ancho de 100% en un elemento tipo block que es directamente hijo de <body>. no hace falta definirlo porque automaticamente los elementos tipo block toman todo el ancho disponible del elemento padre. otro ejemplo es la altura de los elementos #head y #sidebar el cual en tu caso particular no tiene ningun efecto. por otro lado, la clase .separador lo veo innecesario. pudistes usar los elementos <h3> para darle espacios con margin-top o bottom.

danico90,
opino que tu css esta muy bien salvo los detalles que los demas compañeros han mencionado y lo señalado al inicio de esta seccion.

joseomaker,
tu css es bastante sencillo, muy bien por ello. solo un detalle, entre el menu y el contenido tienes un elemento <p> el cual no se si su proposito es para separar las secciones o si ahi tenias intencion de ubicar texto. si es el primer caso, esa separacion se la pudistes aplicar con margin-bottom del elemento #menu.

carlangueitor,
no solo es agradable tu diseño, sino tambien la forma que has usado los elementos para aplicarle estilos. solo unos detalles. el principal, no se cual es la mejor tecnica para aplicar bordes redondos con imagenes, pero a la vez que las dimensiones del navegador se reducen el diseño se corrompe. el otro detalle que ya he venido mencionando, el elemento #clr para controlar los floats lo pudistes haber aplicado en el elemento #mlft. de tu css aprendi algo que en primera instancia pense que estaba mal, el valor de la propiedad line-height. cuando carece de unidad el valor se utiliza como multiplicador del tamaño de fuente.

conclusiones y votos:


de las presentaciones hubiera votado por el trabajo de carlangueitor pero estamos limitado a la presentacion de markmb y danico90. no se por cual escoger pero me inclino mas por el trabajo de markmb.

como recomendacion, quizas a algunos les interese leer acerca de maquetacion (page layout) en diseño grafico. en particular, lo que es la cuadricula (grid) y como se utiliza. en diseño web se puede aplicar igual que en diseño grafico, pero no creo que siempre sea el caso porque los navegadores son de renderizado dinamico. o sea, diferentes dimensiones producen diferentes aspectos. no obstante no esta mal tener una base o idea el cual ayude a crear un diseño mas estructurado.

[logotype]

Lo siento compañeros, no puedo dejar voto, ámbas propuestas en competencia carecen de diseño.
Las 2 propuestas a destiempo en la misma situasion.

[Calizman]

Gracias a todos por sus votos y comentarios! A los participantes que cumplieron por su responsabilidad y confianza y a todos los demás por visitar este hilo.

para todos!