Libro de Zen Garden

[rodri]

Hola a todos,

estoy planeando adquirir del libro del sitio Zen garden:

Código:

The Zen of CSS Design: Visual Enlightenment for the Web

alguien ya lo ha usado?, algún comentario al respecto? me gustaría conocer algunas opiniones con respecto a este libro y si es que existen otras alternativas de diseño css.

gracias a todos.

[fearlex]

Hasta donde tengo entendido, es un libro que se basa mas en la creatividad y el diseño que en conceptos o aprendizaje de css, puedes ir a amazon.com y chekear los reviews de personas que lo han comprado. YO queria comprarlo pero desisti, esperare mas comentarios a ver si me animo :D

[opeth]

exacto es más sobre conceptos de diseño por ejemplo toman alguna página que puedes encontrar en su sitio (Zen Garden) y comentan sobre esta (estilo, color, tipografia etc.) es bastante bueno el libro para darte una idea de lo que puedes hacer con CSS más no te dicen como hacerlo.

Saludos

[fer10]

eso me da la idea, alguien conoce algun libro que te diga como es la mejor manera de estructurar un documento de forma semanticamente, a lo que me refiero es para que sea modificable, asi como los tiene (Zen Garden)

eso como de poner
<h1><span>css Zen Garden</span></h1>
en vez de
<h1>css Zen Garden</h1>

y asi tener mas control del documento...

[fearlex]

Iniciado por fer10

eso me da la idea, alguien conoce algun libro que te diga como es la mejor manera de estructurar un documento de forma semanticamente, a lo que me refiero es para que sea modificable, asi como los tiene (Zen Garden)

eso como de poner
<h1><span>css Zen Garden</span></h1>
en vez de
<h1>css Zen Garden</h1>

y asi tener mas control del documento...

No entiendo bien a lo que te refieres, lo preguntas o lo dices ??

[fer10]

es pregunta, por si alguien conoce algun libro que hable de eso.


pd: lamento no expresarme correctamente =(

[fearlex]

Iniciado por fer10

es pregunta, por si alguien conoce algun libro que hable de eso.


pd: lamento no expresarme correctamente =(

No pero me interesaria saber

A ver quien se anima y hace uno , yo conozco el perfecto candidato : "Webosiris". :D

[MaXaC]

Iniciado por fer10

eso como de poner
<h1><span>css Zen Garden</span></h1>
en vez de
<h1>css Zen Garden</h1>

Cual es la diferencia entre esas 2 formas de maquetacion


.

[fearlex]

Iniciado por MaXaC

Cual es la diferencia entre esas 2 formas de maquetacion


.

Normalmente <h1>css Zen Garden</h1> puede contener el texto, por que <h1><span>css Zen Garden</span></h1> usarias un span que no estaria cumpliendo ninguna funcion, y que si lo borras no afecta en nada, pero lo que entiendo de lo que fer quiere decir, es si existe algun libro que deje saber si es mejor, usar <h1>css Zen Garden</h1> , lo considero semanticamente correcto o <h1><span>css Zen Garden</span></h1>, lo cual considero semanticamente incorrecto, pero a la vez nos ahorra codigo, ya que si a todos los tags que lo soporten le ponemos un span dentro, entonces, solo habria que utilizar un selector con sus respectivas, propiedas, ejemplo:

<style type="text/css"
span {
color: #963;
font: Arial, "Times New Roman", serif 100;
}

</style>

<h1><span>css Zen Garden</span></h1>

<p><span>css Zen Garden</span></p>

Es solo una idea :D

[rodri]

mmm interesante, aunque siempre es bueno tener la noción de cómo plantear el aspecto de la página. En realidad de ahí nace la necesidad de realizar una buena maquetización.

Bueno, logré conseguirlo en formato digital y recién lo estoy viendo, tal vez sea bueno también buscar un libro en el que , como todos dicen, de los conceptos de cómo construir un css

saludos

[fearlex]

Iniciado por rodri

los conceptos de cómo construir un css

Y HTML/XHTML tambien

[rodri]

si tienes razón, las dos van de la mano,

ahhhh, hablando de eso, salió el nuevo paquete de microsoft para el diseño, Microsoft Expression para el desarrollo de sitios basados en estándares XHTML y CSS, pero creo que merece otro hilo.

saludos.

[fearlex]

Iniciado por rodri

salió el nuevo paquete de microsoft para el diseño, Microsoft Expression para el desarrollo de sitios basados en estándares XHTML y CSS

Jjajajaja no crei nunca lee/escuchar a Microsoft hablando de estandares

[rodri]

si yo digo lo mismo, corrigiendo, expression tiene tres componentes:
* Graphic Designer
* Interactive Designer
* Expression Designer

pero este sitio vale la pena verlo,
http://www.microsoft.com/products/ex...ression_vision

[opeth]

Web Accessibility: Web Standards and Regulatory Compliance. Ese es un libro que quiero leer digo no habla propiamente de la semántica pero la accesibilidad simpre va acompañada de esta. Pero es un poco complicado conseguirlo en México.

Por cierto no se me hace tan incorrectoc usar

<h1>
<span>Zen Garden</span>
</h1>

Porque pienso que no le resta significado con el uso de tag <span> pero bueno talvez me equivoque.

Saludos

[fearlex]

Iniciado por opeth

Porque pienso que no le resta significado con el uso de tag <span> pero bueno talvez me equivoque.

Saludos

<h1>
<span>Zen Garden</span>
</h1>

Si pones un heading h1 es por que lo necesitas, ademas si le aplicas el estilo al h1, el span esta de mas. Si necesitas un texto, por que se te ocurrio usar un span y meterlo dentro de un <h1>. Digo no tiene logica, pienso yo, mucho menos esto:

<h1>
<span> Heading 1 </span>
<span> Heading 2 </span>
<span> Heading 3 </span>
</h1>

Vaya no me luce semanticamente correcto

[opeth]

si pero talvez necesitas que dentro del h1 alguna palabra o parte del texto dentro de este sea diferente y usando <span> sigues manteniendo el significado e importancia de h1.

Saludos

[fearlex]

Iniciado por opeth

si pero talvez necesitas que dentro del h1 alguna palabra o parte del texto dentro de este sea diferente y usando <span> sigues manteniendo el significado e importancia de h1.

Saludos

No lo creo, para ello puedes usar <em> o <strong>, o me equivoco ??

[metacortex]

Hace tiempo estuve husmeando en unas páginas con ese atributo. Eso pasa cuando al h1 le tienen asignada una imagen de fondo, pero al mismo tiempo no se desea perder la ventaja de colocar texto en esa etiqueta y hacer la web accesible:

h1 {
background: url("titulo.png");
overflow: hidden;
width: 200px;
height: 50px;
margin: 0;
}

h1 span {
display: none;
}

[fearlex]

Iniciado por metacortex

Hace tiempo estuve husmeando en unas páginas con ese atributo. Eso pasa cuando al h1 le tienen asignada una imagen de fondo, pero al mismo tiempo no se desea perder la ventaja de colocar texto en esa etiqueta y hacer la web accesible:

h1 {
background: url("titulo.png");
overflow: hidden;
width: 200px;
height: 50px;
margin: 0;
}

h1 span {
display: none;
}

Hola Metacortex, bueno si me parece mas semantico que usar:

h1 {
background: url("titulo.png");
overflow: hidden;
width: 200px;
height: 50px;
margin: 0;
}

h1 em {
display: none;
}

[opeth]

Iniciado por fearlex

No lo creo, para ello puedes usar <em> o <strong>, o me equivoco ??

si podría ser pero con <em> o <strong> implica dar cierto grado de importancia o significado el cual no pretende dar <span>.

La técnica que dice Metacortex el único problema que tiene es en los dispositivos moviles si no me eqiivoco.

Saludos

[fer10]

yo creo que en cuestion de marquetacion "flexible" si le prodiramos llamar asi.

tienes mas control de lo que se peude hacer, por ejemplo agregar 2 backgrounds para es esta el h1 y el span a nivel bloque.

obteniendo 2 posibles posibilidades para logar y si deseas una nomas, ignoras span.

es a lo que quiero llegar, no se si sea correcto usarlo o como es la manera correcta para marquetar (uso de etiquetas) y asi tener diseños mas felexibles.

pero veo que en css Zen Garden lo usan y mira los diseños tan diferentes que hacen..

[AlZuwaga]

pero veo que en css Zen Garden lo usan y mira los diseños tan diferentes que hacen..

Bueno, pero CSSZenGarden tiene cosas no muy correctas como esta parte (reconocidas por ellos en su FAQ):

Código:

		<div id="footer">
			<a href="http://validator.w3.org/check/referer" title="Check the validity of this site’s XHTML">xhtml</a> &nbsp; 
			<a href="http://jigsaw.w3.org/css-validator/check/referer" title="Check the validity of this site’s CSS">css</a> &nbsp; 
			<a href="http://creativecommons.org/licenses/by-nc-sa/1.0/" title="View details of the license of this site, courtesy of Creative Commons.">cc</a> &nbsp;

			<a href="http://www.contentquality.com/mynewtester/cynthia.exe?Url1=http:%2F%2Fcsszengarden.com%2F" title="Check the accessibility of this site according to U.S. Section 508">508</a> &nbsp;
			<a href="http://mezzoblue.com/zengarden/faq/#aaa" title="Check the accessibility of this site according to Web Content Accessibility Guidelines 1.0">aaa</a>
		</div>

... separa los enlaces con un $nbsp; en vez de haberlos colocado en una lista.

También tiene "cosas" como esta:

Código:

<!-- These extra divs/spans may be used as catch-alls to add extra imagery. -->
<div id="extraDiv1"><span></span></div><div id="extraDiv2"><span></span></div><div id="extraDiv3"><span></span></div>
<div id="extraDiv4"><span></span></div><div id="extraDiv5"><span></span></div><div id="extraDiv6"><span></span></div>

... para dar mayor flexibilidad a los diseñadores al momento de crear un nuevo layout.


Yo creo (y también recuerdo haberlo leído -pero no en donde-) que usan tanto marcado innecesario por ser un sitio para demostrar las posibilidades que CSS ofrece. No me puse a revisar ningún diseño (me refiero al código CSS), pero estoy casi convencido que muchos de ellos no aplican estilos sobre la totalidad de los spam que hay por allí.

Con respecto a la técnica FIR (¿así se llamaba?) a la que metacortex hace referencia, creo que tiene problemas con lectores de pantallas ya que al estar en display:none estos no pueden leer su contenido.
Si se va a usar para colocar una imagen de fondo a un h1 y ocultar su texto, como dije en otro mensaje, creo que lo más conveniente es hacerle al h1 un text-indent: -######px

[buzu]

como digeron ya, pones un span devido a que deceas reemplasar el texto por una imagen, pero al mismo tiempo seguir dejando el texto accesible para quien no use un navegador vidual, ahora por que no usar <em> eso si que seri ilogico, mas que usar span, <em> dara un sentido de emphasis a el h1 el cual no pretendemos que se de, si lo vemos de ese lado resulta aun mas incorrecto semanticamente usar <em> que usar span

por otro lado aveces necesitas dar mas estilo a una parte del texto por lo que no es suficiente con usar <em> entonces usas <span> es mejor dar estilos a <span> que a <em> ya que <em> en si es para dar un estilo predefinido y <span> no.

[fer10]

segun W3C:

http://html.conclase.net/w3c/html401...html#edef-SPAN

Los elementos DIV y SPAN, junto con los atributos id y class, ofrecen un mecanismo genérico para añadir estructura a los documentos. Estos elementos especifican si su contenido es en línea (SPAN) o en bloque (DIV) pero no imponen ningún otro estilo de presentación al contenido. Así, los autores pueden usar estos elementos junto con hojas de estilo, el atributo lang, etc., para adaptar el HTML a sus propios gustos y necesidades.



el ejemplo que dan se me hace interesante:

<DIV id="cliente-boyera" class="cliente">
<P><SPAN class="cliente-titulo">Información sobre el cliente:</SPAN>
<TABLE class="cliente-datos">

asi tienes acceso al texto "Información sobre el cliente:"
y si fuera asi

<DIV id="cliente-boyera" class="cliente">
<P>Información sobre el cliente
<TABLE class="cliente-datos">

y exitiera mas texto abajo de.. seria mas dificil llegar al el

ustedes que opinan ?

[AlZuwaga]

Y qué tal hacer lo del ejemplo de esta manera?

<table id="cliente-boyera" class="cliente">
<caption class="cliente-titulo">Información sobre el cliente:</caption>
<tr>
<th>Apellido:</th>
<td>Boyera</td>
</tr>
<tr>
<th>Nombre:</th>
<td>Stephane</td>
</tr>
<tr>
<th>Tel:</th>
<td>[phone]</td>
</tr>
<tr>
<th>Email:</th>
<td>[email protected]</td>
</tr>
</table>

(es más, el class que marco en bold me parece innecesario porque tenés acceso a el mediante .cliente caption)

[fer10]

cuando te refieres a la tabla es cierto, se usa mejor caption.

solo que la duda me queda la forma de utlizar el <span> o la forma correcta de hacer una marquetacion.

[metacortex]

Iniciado por Al Zuwaga

Con respecto a la técnica FIR (¿así se llamaba?) a la que metacortex hace referencia, creo que tiene problemas con lectores de pantallas ya que al estar en display:none estos no pueden leer su contenido.
Si se va a usar para colocar una imagen de fondo a un h1 y ocultar su texto, como dije en otro mensaje, creo que lo más conveniente es hacerle al h1 un text-indent: -######px

Según esto también podría ser algo así:

.h1 span {
position: absolute;
left: -1000em;
width: 1px;
height: 1px;
overflow: hidden;
}

[AlZuwaga]

Si meta, hay varias formas de lograrlo. Pero permitime citarme con una pequeña modificación:

Si sólo se va a usar para colocar una imagen de fondo a un h1 y ocultar su texto,...

Ahora si. Si el <spam> lo incluimos solamente para lograr ese efecto, estamos usando, por un lado, un elemento de marcado extra (el spam) y, por otro, un CSS también extra (.h1 span{...})

No es que esté en contra (o a favor) de incluir un spam dentro de un h1 (o de donde sea). Es sólo que me parece que hay que evaluar cuçando es necesario y cuándo no.

Saludos

[metacortex]

Iniciado por Al Zuwaga

Ahora si. Si el <spam> lo incluimos solamente para lograr ese efecto, estamos usando, por un lado, un elemento de marcado extra (el spam)

No Daz, el Spam no es bueno colocarlo en ningún lado