Foros del Web » Creando para Internet » CSS »

Libro de Zen Garden

Estas en el tema de Libro de Zen Garden en el foro de CSS en Foros del Web. 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 ...

  #1 (permalink)  
Antiguo 23/10/2006, 15:39
Avatar de rodri  
Fecha de Ingreso: febrero-2005
Mensajes: 406
Antigüedad: 12 años, 9 meses
Puntos: 2
Libro de Zen Garden

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.
__________________
0.o Rodri
  #2 (permalink)  
Antiguo 23/10/2006, 16:35
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
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
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #3 (permalink)  
Antiguo 23/10/2006, 18:48
Avatar de opeth  
Fecha de Ingreso: junio-2004
Ubicación: Distrito Federal, México
Mensajes: 338
Antigüedad: 13 años, 5 meses
Puntos: 0
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
__________________
Mi blog
  #4 (permalink)  
Antiguo 23/10/2006, 22:14
Avatar de fer10  
Fecha de Ingreso: octubre-2005
Ubicación: Guadalajara - Mexico
Mensajes: 905
Antigüedad: 12 años, 1 mes
Puntos: 3
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...
__________________
Saludos
FT.
www.fernando.com.mx
  #5 (permalink)  
Antiguo 24/10/2006, 07:45
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
Cita:
Iniciado por fer10 Ver Mensaje
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 ??
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #6 (permalink)  
Antiguo 24/10/2006, 09:54
Avatar de fer10  
Fecha de Ingreso: octubre-2005
Ubicación: Guadalajara - Mexico
Mensajes: 905
Antigüedad: 12 años, 1 mes
Puntos: 3
es pregunta, por si alguien conoce algun libro que hable de eso.


pd: lamento no expresarme correctamente =(
__________________
Saludos
FT.
www.fernando.com.mx
  #7 (permalink)  
Antiguo 24/10/2006, 09:56
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
Cita:
Iniciado por fer10 Ver Mensaje
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
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #8 (permalink)  
Antiguo 24/10/2006, 10:14
 
Fecha de Ingreso: abril-2005
Ubicación: Lima-Peru
Mensajes: 313
Antigüedad: 12 años, 7 meses
Puntos: 1
Cita:
Iniciado por fer10 Ver Mensaje
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


.
  #9 (permalink)  
Antiguo 24/10/2006, 10:23
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
Cita:
Iniciado por MaXaC Ver Mensaje
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:
Cita:
<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
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #10 (permalink)  
Antiguo 24/10/2006, 10:48
Avatar de rodri  
Fecha de Ingreso: febrero-2005
Mensajes: 406
Antigüedad: 12 años, 9 meses
Puntos: 2
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
__________________
0.o Rodri
  #11 (permalink)  
Antiguo 24/10/2006, 10:50
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
Cita:
Iniciado por rodri Ver Mensaje
los conceptos de cómo construir un css
Y HTML/XHTML tambien
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #12 (permalink)  
Antiguo 24/10/2006, 11:02
Avatar de rodri  
Fecha de Ingreso: febrero-2005
Mensajes: 406
Antigüedad: 12 años, 9 meses
Puntos: 2
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.
__________________
0.o Rodri
  #13 (permalink)  
Antiguo 24/10/2006, 11:22
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
Cita:
Iniciado por rodri Ver Mensaje
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
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #14 (permalink)  
Antiguo 24/10/2006, 11:59
Avatar de rodri  
Fecha de Ingreso: febrero-2005
Mensajes: 406
Antigüedad: 12 años, 9 meses
Puntos: 2
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
__________________
0.o Rodri
  #15 (permalink)  
Antiguo 24/10/2006, 12:01
Avatar de opeth  
Fecha de Ingreso: junio-2004
Ubicación: Distrito Federal, México
Mensajes: 338
Antigüedad: 13 años, 5 meses
Puntos: 0
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

Cita:
<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
__________________
Mi blog
  #16 (permalink)  
Antiguo 24/10/2006, 12:06
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
Cita:
Iniciado por opeth Ver Mensaje

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

Saludos
Cita:
<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:
Cita:
<h1>
<span> Heading 1 </span>
<span> Heading 2 </span>
<span> Heading 3 </span>
</h1>
Vaya no me luce semanticamente correcto
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #17 (permalink)  
Antiguo 24/10/2006, 12:13
Avatar de opeth  
Fecha de Ingreso: junio-2004
Ubicación: Distrito Federal, México
Mensajes: 338
Antigüedad: 13 años, 5 meses
Puntos: 0
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
__________________
Mi blog
  #18 (permalink)  
Antiguo 24/10/2006, 13:28
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
Cita:
Iniciado por opeth Ver Mensaje
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 ??
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #19 (permalink)  
Antiguo 24/10/2006, 13:47
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.020
Antigüedad: 13 años, 6 meses
Puntos: 832
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;
}
  #20 (permalink)  
Antiguo 24/10/2006, 13:53
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
Cita:
Iniciado por metacortex Ver Mensaje
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;
}
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #21 (permalink)  
Antiguo 24/10/2006, 13:57
Avatar de opeth  
Fecha de Ingreso: junio-2004
Ubicación: Distrito Federal, México
Mensajes: 338
Antigüedad: 13 años, 5 meses
Puntos: 0
Cita:
Iniciado por fearlex Ver Mensaje
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
__________________
Mi blog
  #22 (permalink)  
Antiguo 24/10/2006, 14:11
Avatar de fer10  
Fecha de Ingreso: octubre-2005
Ubicación: Guadalajara - Mexico
Mensajes: 905
Antigüedad: 12 años, 1 mes
Puntos: 3
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..
__________________
Saludos
FT.
www.fernando.com.mx
  #23 (permalink)  
Antiguo 24/10/2006, 15:15
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
Cita:
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
__________________
...___...
  #24 (permalink)  
Antiguo 24/10/2006, 16:02
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 11 años, 1 mes
Puntos: 122
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.
  #25 (permalink)  
Antiguo 24/10/2006, 16:11
Avatar de fer10  
Fecha de Ingreso: octubre-2005
Ubicación: Guadalajara - Mexico
Mensajes: 905
Antigüedad: 12 años, 1 mes
Puntos: 3
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:
Cita:
<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
Cita:
<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 ?
__________________
Saludos
FT.
www.fernando.com.mx
  #26 (permalink)  
Antiguo 24/10/2006, 17:09
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
Y qué tal hacer lo del ejemplo de esta manera?

Cita:
<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>(212) 555-1212</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)
__________________
...___...
  #27 (permalink)  
Antiguo 24/10/2006, 17:11
Avatar de fer10  
Fecha de Ingreso: octubre-2005
Ubicación: Guadalajara - Mexico
Mensajes: 905
Antigüedad: 12 años, 1 mes
Puntos: 3
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.
__________________
Saludos
FT.
www.fernando.com.mx
  #28 (permalink)  
Antiguo 25/10/2006, 05:39
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.020
Antigüedad: 13 años, 6 meses
Puntos: 832
Cita:
Iniciado por Al Zuwaga Ver Mensaje
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;
}
  #29 (permalink)  
Antiguo 25/10/2006, 12:28
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
Si meta, hay varias formas de lograrlo. Pero permitime citarme con una pequeña modificación:

Cita:
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
__________________
...___...
  #30 (permalink)  
Antiguo 25/10/2006, 14:53
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.020
Antigüedad: 13 años, 6 meses
Puntos: 832
Cita:
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
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:41.