> Lo último que digo porque no vale la pena...

Si argumentamos nuestros puntos de vista, el debate es constructivo y
todos podemos sacar algo en claro. No pasa nada si ni tú ni yo
variamos nuestras posiciones porque los argumentos quedan reflejados.




> Los entities son caracteres especiales.
> Un bullet de una lista no es un entity.
> Es parte de como se ve una lista 'gráficamente',
>  no es parte del contenido.

Estoy de acuerdo. Rompe la separación estructura-estilo. Pero no por
ello deja de ser una solución posible con sus pros y sus contras.

A propósito, una entidad de carácter es una codificación ascii de un
carácter no incluido en la tabla ascii original (como ejemplo, una
vocal acentuada o la eñe). Realmente no hacen falta si se tiene
cuidado con la codificación de las páginas y yo no suelo usarlos.
Perdóname si, como ahora, explico conceptos que ya sabes; cuando
escribo pienso también en otras personas que nos pueden estar leyendo
(uf... a lo mejor peco de pedante).




> No semántico realmente sería un span vacío.
> Obviamente que agregarlo adentro del LI para
> crear que se vea algo diferente no es lo mejor,
>  pero no es realmente tan grave como un tag vacío.

Un span vacío es obvio que carece de significado. Un span (u otra
etiqueta) con contenido puede aportar algo a la estructura o no. Una
etiqueta que no aporte significado, tenga contenido o no, es código
extra que no debería de existir. Pero la separación estructura-estilo
no siempre es posible o bien conlleva algunas complicaciones. Desde
este punto de vista, no puedo decir que una sea más grave que la otra.
De hecho, ninguna me parece grave si está justificado su uso.




> La gente de ovillo busca aprender CSS.
>  Y la verdad que si las personas recomiendan
>  usar entities como bullets convencidisimos
>  y nadie les dice nada
> la verdad que me preocupa...

Ya dije, cuando mostré el código, que esta solución no respeta una de
las normas elementales del buen diseño web y que consiste en separar
el diseño de la estructura. Por eso seguidamente presenté la solución
basada en el pseudoelemento :before. Pero no dramaticemos,
sinceramente creo que todas las soluciones planteadas tienen sus
ventajas e inconvenientes (por supuesto la tuya también). En
versatilidad, coincido contigo que gana el método de usar una imagen
de fondo.




Cambiando de asunto, tu blog http://thecssblog.com/ tiene buena pinta.
Es paradójico (teniendo en cuenta el tema de este hilo) que los únicos
fallos de validación estén en una lista no ordenada (en div.pageList,
sobre todo en la segunda página). He agregado la página principal a
mis marcadores (en serio). Además, me servirá para aprender inglés ;).


Saludos.









El 4 de julio de 2009 21:02, Delirium
Design<deliriumindes...@gmail.com> escribió:
> Utilice list-style-image, en lugar de span.
> Creo que hay algunas diferencias entre como ordenamos, y cuales son las
> opciones que elegimos cada uno de nosotros a la hora de usar estilos.
> Yo personalmente utilice list-style-image porque siento que ese debe ser su
> uso (imagen de estilo de lista) como la palabra lo dice.
> Podria haber usado <span>, es simplemente la desicion de cada uno a la hora
> de maquetar.
> Muchas gracias por la ayuda y buen fin de semana!
>
> El 4 de julio de 2009 13:09, Ignacio Ricci <ignacio.ri...@gmail.com>escribió:
>
>> Lo último que digo porque no vale la pena...
>> Los entities son caracteres especiales. Un bullet de una lista no es un
>> entity.
>> Es parte de como se ve una lista 'gráficamente', no es parte del contenido.
>>
>> No semántico realmente sería un span vacío.
>> Obviamente que agregarlo adentro del LI para crear que se vea algo
>> diferente
>> no es lo mejor, pero no es realmente tan grave como un tag vacío.
>>
>> La gente de ovillo busca aprender CSS. Y la verdad que si las personas
>> recomiendan usar entities como bullets convencidisimos y nadie les dice
>> nada
>> la verdad que me preocupa...
>>
>> 2009/7/4 Daniel Navarro <webpe...@gmail.com>
>>
>> > [Tú escribiste]
>> > > Primero que usar un entity para crear un bullet es ridículo.
>> >
>> > ¿Ridículo?¿por qué?. Supongo que lo dices porque ya existe un boliche
>> > predeterminado para las listas no ordenadas y, por lo tanto, no parece
>> > tener sentido el anularlo para incluir este carácter en el html. Sin
>> > embargo, el boliche predeterminado en las listas no ordenadas no se
>> > visualiza de forma coherente en diferentes navegadores. Si lo anulas y
>> > lo incluyes manualmente en el código consigues que se represente
>> > siempre igual, independientemente del navegador (aunque depende del
>> > tipo fuente elegida). Además, puedes usar otros caracteres, como el
>> > representado por la entidad &raquo; (comillas anguladas de cierre), y
>> > que no se encuentran entre los list-style-type. Aún así sigue siendo
>> > una mala opción de diseño debido a que rompe la separación
>> > estructura-estilo, pero no considero que sea ridículo.
>> >
>> > En http://webpelon.es/ovillo/2009-mes07-04-bullet_en_listas/ tienes un
>> > ejemplo. Prueba a visualizarlo en diferentes navegadores.
>> >
>> >
>> >
>> >
>> > [Tú escribiste]
>> > > Segundo. El span no es una etiqueta no semántica porque tiene
>> contenido.
>> >
>> > Que contenga contenido no significa que la etiqueta sea semántica.
>> > Depende del uso que se haga de la etiqueta. En este caso, se utiliza
>> > como artificio para que el color (estilo) de los elementos de lista
>> > sea distinto del de los boliches.
>> >
>> > Una buena forma de entenderlo es intentar describir el significado de
>> > la etiqueta mediante palabras y sin incluir referencias a estilos. Por
>> > ejemplo, en:
>> >  <li><span>Ignacio</span> Ricci</li>
>> >  <li><span>Daniel</span> Navarro</li>
>> > se puede describir el significado del span como "nombre de pila",
>> > pero en
>> >  <li><span>Elemento primero</span></li>
>> > no vale decir que es "elemento de lista sin boliche" porque incluye
>> > una referencia a estilos, en este caso, al boliche. Y si lo definimos
>> > como "elemento de lista", entonces tiene el mismo significado que el
>> > <li> y no aporta nada a la estructura.
>> >
>> >
>> >
>> >
>> > [Tú escribiste]
>> > >Tercero. La técnica del span u otro tag lo usan muchos sitios.
>> >
>> >   Sí, es cierto. Pero si existe otro método igual de sencillo y que
>> > evite el uso de esta etiqueta cuando no añade significado al código,
>> > entonces es preferible usarlo.
>> >
>> >
>> >
>> >
>> > [Tú escribiste]
>> > > Cuarto. De ultima utilizaría un list-style-image o un fondo para el li
>> > > en caso de necesitar más versatilidad.
>> >
>> > Delirium Design pedía alguna forma de colorear el boliche sin usar
>> > imágenes y yo he planteado dos formas.
>> >
>> >
>> >
>> > Saludos.
>> >
>> >
>> >
>> >
>> >
>> >
>> >
>> > El 4 de julio de 2009 00:55, Ignacio Ricci<ignacio.ri...@gmail.com>
>> > escribió:
>> > > Primero que usar un entity para crear un bullet es ridículo
>> > >
>> > > Segundo. El span no es una etiqueta no semántica porque tiene
>> > > contenido.
>> > >
>> > > Tercero. La técnica del span u otro tag lo usan muchos sitios.
>> > >
>> > > Cuarto. De ultima utilizaría un list-style-image o un fondo para el li
>> > > en caso de necesitar más versatilidad.
>> > >
>> > > Ignacio Ricci.
>> > > www.ignacioricci.com
>> > >
>> > > On Jul 3, 2009, at 19:27, Daniel Navarro <webpe...@gmail.com> wrote:
>> > >
>> > >> Tienes razón. Tú metes el texto entero en un span y le aplicas un
>> > >> formato que lo diferencia del boliche. Éste está incluido en el li
>> > >> pero no en el span. Aún así adolece de una etiqueta no semántica (
>> > >> el
>> > >> span). Es otra forma diferente de hacerlo que no tiene nada que ver
>> > >> con la que yo he puesto (disculpas).
>> > >>
>> > >> El indicar el carácter de boliche en el html tiene el defecto de
>> > >> incluir más contenido no semántico, pero la ventaja de una
>> > >> presentación más coherente entre navegadores, además de poder usar
>> > >> más
>> > >> tipos de boliches que los predefinidos para las listas no ordenadas.
>> > >>
>> > >> Saludos.
>> > >>
>> > >> El 3 de julio de 2009 13:55, Ignacio Ricci<ignacio.ri...@gmail.com>
>> > >> escribió:
>> > >>> No tiene sentido agregar el entity del bullet... Es contenido
>> > >>> innecesario.
>> > >>> Con anidar un span en el Li ya está...
>> > >>>
>> > >>> 2009/7/3 Daniel Navarro <webpe...@gmail.com>
>> > >>>
>> > >>>> Hola,
>> > >>>>
>> > >>>> El 2 de julio de 2009 20:18, Delirium
>> > >>>> Design<deliriumindes...@gmail.com> escribió:
>> > >>>>> habria alguna forma de ponerlo color solo al boliche , asi no uso
>> > >>>>> una
>> > >>>> imagen
>> > >>>>> , si no que le pongo el color que quiero al redondel.
>> > >>>>> Hasta ahora me cambia el redondel junto con el texto.
>> > >>>>
>> > >>>>
>> > >>>> Si existe un carácter que te sirva como boliche, entonces puedes
>> > >>>> aplicar estilo a éste sin tener que usar una imagen de fondo.
>> > >>>>
>> > >>>> Una solución  consiste en establecer el boliche directamente en el
>> > >>>> archivo html y englobarlo en algún elemento (ej. span) para poder
>> > >>>> aplicarle estilo (esto ya te lo ha indicado Ignacio Ricci):
>> > >>>>
>> > >>>> [html]
>> > >>>>        <ul>
>> > >>>>          <li><span>&bull;</span>Uno</li>
>> > >>>>          <li><span>&bull;</span>Dos</li>
>> > >>>>        </ul>
>> > >>>>
>> > >>>> [css]
>> > >>>>        li {
>> > >>>>          list-style-type: none;  /* elimina boliches */
>> > >>>>        }
>> > >>>>
>> > >>>>        li span {
>> > >>>>          color: green;
>> > >>>>          margin-right: 0.3em;  /* separa el boliche del texto */
>> > >>>>        }
>> > >>>>
>> > >>>> El inconveniente de esta solución es que no respeta una de las n
>> > >>>> ormas
>> > >>>> elementales del buen diseño web y que consiste en separar el dis
>> > >>>> eño de
>> > >>>> la estructura. Los boliches son diseño y deberían de especificar
>> > >>>> se en
>> > >>>> el css.
>> > >>>>
>> > >>>>
>> > >>>>
>> > >>>> En navegadores compatibles con el pseudoelemento :before se puede
>> > >>>> hacer lo siguiente:
>> > >>>> [css]
>> > >>>>        li {
>> > >>>>          list-style-type: none;  /* elimina boliches */
>> > >>>>        }
>> > >>>>
>> > >>>>        li:before {
>> > >>>>          content: "\2022"; /* codificación en hexadecimal del ca
>> > >>>> rácter
>> > >>>> &bull;  */
>> > >>>>          color: blue;
>> > >>>>          margin-right: 0.3em;
>> > >>>>        }
>> > >>>>
>> > >>>> En la propiedad content se puede indicar directamente el carácte
>> > >>>> r que
>> > >>>> se quiera usar como boliche, pero si usas uno que no sea ASCII b
>> > >>>> ásico
>> > >>>> tendrás que tener cuidado en guardar el archivo css con la
>> > >>>> codificación apropiada (yo uso utf-8 sin BOM en mis archivos). Para
>> > >>>> evitar los problemas de codificación al guardar, es mejor indica
>> > >>>> r el
>> > >>>> equivalente hexadecimal, en este caso \2022. Tienes una tabla de
>> > >>>> referencia en http://ascii.cl/es/codigos-html.htm
>> > >>>>
>> > >>>> Lamentablemente hay  navegadores como IE6 que no aceptan la anterior
>> > >>>> regla, aunque puedes indicarle algún list-style sólo a este nave
>> > >>>> gador
>> > >>>> mediante el uso de los comentarios condicionales.
>> > >>>> [html]
>> > >>>>        <!--[if lte IE 6]>
>> > >>>>                <link rel="stylesheet" type="text/css"
>> > >>>> href="ie6.css" />
>> > >>>>        <![endif]-->
>> > >>>>
>> > >>>>
>> > >>>> [ie6.css]
>> > >>>>         li {
>> > >>>>          list-style: disc inside;
>> > >>>>         }
>> > >>>>
>> > >>>>
>> > >>>> Saludos
>> > >>>> _______________________________________________
>> > >>>> Lista de distribución Ovillo
>> > >>>> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
>> > >>>> Puedes modificar tus datos o desuscribirte en la siguiente direc
>> > >>>> ción:
>> > >>>> http://lists.ovillo.org/mailman/listinfo/ovillo
>> > >>>>
>> > >>>
>> > >>>
>> > >>>
>> > >>> --
>> > >>> ↓۝ Ignacio Ricci
>> > >>> www.ignacioricci.com
>> > >>> _______________________________________________
>> > >>> Lista de distribución Ovillo
>> > >>> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
>> > >>> Puedes modificar tus datos o desuscribirte en la siguiente direcci
>> > >>> ón: http://lists.ovillo.org/mailman/listinfo/ovillo
>> > >> _______________________________________________
>> > >> Lista de distribución Ovillo
>> > >> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
>> > >> Puedes modificar tus datos o desuscribirte en la siguiente dirección
>> > >> : http://lists.ovillo.org/mailman/listinfo/ovillo
>> > > _______________________________________________
>> > > Lista de distribución Ovillo
>> > > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
>> > > Puedes modificar tus datos o desuscribirte en la siguiente dirección:
>> > http://lists.ovillo.org/mailman/listinfo/ovillo
>> > _______________________________________________
>> > Lista de distribución Ovillo
>> > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
>> > Puedes modificar tus datos o desuscribirte en la siguiente dirección:
>> > http://lists.ovillo.org/mailman/listinfo/ovillo
>> >
>>
>>
>>
>> --
>> ↓۝ Ignacio Ricci
>> www.ignacioricci.com
>> _______________________________________________
>> Lista de distribución Ovillo
>> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
>> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
>> http://lists.ovillo.org/mailman/listinfo/ovillo
>>
> _______________________________________________
> Lista de distribución Ovillo
> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
> http://lists.ovillo.org/mailman/listinfo/ovillo
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo

Responder a