que - title html definicion

¿Cuál es la mejor manera de representar un guión de etapa en HTML?

Question

Tengo un boceto que quiero poner en mi sitio web, y también tengo la intención de escribir una obra corta en algún momento que también quisiera poner a disposición de todos.

Estoy tratando de encontrar la mejor manera de representar esto en HTML. Básicamente necesito dos columnas: una para el personaje que habla y otra para el texto. Sin embargo, cada discurso necesita alinearse con el hablante. En otras palabras, algo como esto:

Jeff This sure is a nice website we''ve got now. Joel It certainly is. By the way, working at FogCreek rocks. Jeff Of course it does. Have you played Rock Band yet? It''s a lot of fun.

(Bueno, es mejor que lorem ipsum ...)

Sé cómo podría hacerlo con tablas HTML (con una fila de tabla por discurso) pero parece bastante feo, y todos parecen estar interesados ​​en usar CSS para representar datos no tabulares. No puedo ver cómo esto realmente cuenta los datos tabulares: mi uso de "fila" y "columna" antes tenía que ver con el diseño en lugar de con los datos fundamentales.

Entonces, ¿alguna idea? Creo que la mayoría de los sitios web de guiones que he visto (no muchos, ciertamente) usan <pre> como mi ejemplo anterior, o no se molestan en tratar de mantener el formato de guión normal, en lugar de solo ponerle un prefijo a cada párrafo. (Consulte la wiki de podcast para ver un ejemplo de este estilo.) Tengo problemas para calcular incluso qué elementos HTML debo usar para representar esto, francamente, una lista de definición de diccionario con el hablante como el término y el discurso como la definición es probablemente lo más cercano que he pensado, pero eso se siente como abuso.

Answer 1

IMO que en realidad son datos tabulares. La primera columna es orador, la segunda columna es texto.

Si quieres estar a la moda y evitar las tablas agresivamente, creo que lo que creo que es compatible con lo que los expertos en la web dictan esta temporada es una estructura como:

<div class="play">
  <div class="line">
    <div class="speaker">Jeff</div>
    <div class="text">This sure is a nice website we''ve got now. </div>
  </div>
  <div class="line">
    <div class="speaker">Joel</div>
    <div class="text">It certainly is. By the way, working at FogCreek rocks.</div>
  </div>
</div>

Entonces usted controla cómo se establece con CSS apropiado.

Si parece que básicamente escribes XML y usas CSS para especificar cómo se presenta, bueno, eso es porque eso es lo que los expertos en la Web creen que deberías estar haciendo, AFAICT.

Answer 2

Más apropiado (semánticamente) y más corto sería usar listas de definiciones:

<dl>
   <dt>Jeff</dt>
   <dd>This sure is a nice website we''ve got now.</dd>
</dl>


dl {
  overflow:hidden;
}

dl dt {
  float:left;
  width:30%;
}

dl dd {
  float:left;
  width:70%;
}

Answer 3

Mi ejemplo favorito de marcar algo así es uno de los compuestos XHTML de Tantek http://tantek.com/presentations/2005/03/elementsofxhtml/ (echa un vistazo al bit de conversación)

En resumen, dice así:

<ol>
  <li><cite>Jeff</cite>
    <blockquote><p>This sure is a nice website we''ve got now.</p><blockquote>
  </li>
  <li><cite>Joel</cite>
    <blockquote><p>It certainly is. By the way, working at FogCreek rocks.</p></blockquote>
  </li>
  ...etc...
</ol>

No estoy seguro de cómo marcaría las instrucciones de la etapa, etc. ... Tal vez terminará creando un nuevo microformato :)

Además, ese marcado tiene algunos ganchos CSS ideales, con líneas discretas a diferencia de una lista de definiciones.

Answer 4

No va a obtener una respuesta definitiva a esta pregunta, ya que HTML tiene muchos vacíos, uno de los cuales es este: hay algunos artículos muy sólidos diseminados por la web sobre su tema y un buen lugar para comenzar sería el artículo de Bruce Lawson de 2006 .

Teniendo en cuenta que no hay respuesta a la pregunta, lo mejor que podemos hacer es ver qué elementos están disponibles para nosotros y hacer nuestros propios compromisos en función de nuestra interpretación (y de las comunidades) de las directrices.

Personalmente me gusta la ruta cite / blockquote y la lista de datos. Sé que las listas de datos no tienen marcas semánticas, pero realmente creo que la intención de las listas de datos no es hacer una lista de las definiciones de datos puramente a la manera de un diccionario, sino emparejar datos donde los ul y los ol s no pueden.

He pasado mucho tiempo pensando sobre semántica, y una cosa que estoy seguro (al igual que la mayoría de los demás en el campo) de todas las preguntas sobre el marcado es que las tablas no son la respuesta al 99.9% de las preguntas de marcado ( si no se trata de datos tabulares donde puede usar th , caption , las tablas realmente deberían ser eliminadas de su inventario). Dicho esto, también diría que el uso exclusivo de div s también probablemente no sea la respuesta correcta.

Dudo mucho que las votaciones en esta pregunta reflejen el mejor enfoque, pero probablemente reflejarán un acuerdo con la base de enfoque sobre el conocimiento actual y el uso del HTML por parte de los votantes.

Answer 5

Por favor, evite el "síndrome del martilleo" (si su única herramienta es un martillo, trate de tratar cada problema como un clavo). HTML es un lenguaje de representación , no un idioma de origen .

Entonces mi sugerencia es escribir la obra en algo que pueda representar mejor tus pensamientos (no necesariamente XML) y luego convertir eso a HTML. Para mis propios trabajos, estoy usando un analizador XML recursivo que puede caer fuera del análisis XML para ciertos elementos:

<content><<Hello,>> Forne smiled and thought: <<T Idiot.>></content>

Mi analizador invoca un analizador personalizado para analizar el contenido de <content> . En mi caso, creará un árbol XML intermedio:

<content><say>Hello,</say> <char>Forne</char> smiled and thought: <think>Idiot.</think></content>

Este árbol se convierte a HTML, TeX, PDF, lo que sea.

[EDITAR] Mi estrategia para crear un lenguaje compacto funciona así: comienzo con XML. Después de un rato, miro el XML y trato de ver patrones. Entonces pienso cómo podría expresar estos patrones de una manera más compacta 1.) como XML, 2.) como texto XML (con marcado personalizado) y 3.) como algo totalmente diferente. Cuando una idea me golpea, escribo un analizador para el nuevo formato.

Francamente, escribir analizadores que pueden convertir algo en XML para el procesamiento de fondo automático es una tarea menor hoy en día.

Answer 6

Si quieres hacerlo semánticamente, usaría etiquetas, algo así como:

<div class="script">
<label for="Jeff1">Jeff<label>
<div id="Jeff1">
  <p>This sure is a nice website we''ve got now.</p>
</div>

<label for="Joel1">Joel</label>
<div id="Joel1">
  <p>It certainly is.</p>
  <p>By the way, working at FogCreek rocks.</p>
</div>

<label for="Jeff2">Jeff</label>
<div id="Jeff2">
  <p>Of course it does.</p>
  <p>Have you played Rock Band yet? It''s a lot of fun.</p>
</div>

</div>

Eso se degrada bastante bien y creo que la etiqueta es un poco más apropiada para lo que estás tratando de hacer. Y luego, en su hoja de estilos, lo estilo algo así como el ejemplo CSS de Eran Galperin.

La otra sugerencia que me gustaría, si es en serio sobre esto, sería profundizar en cómo se escriben los guiones de árboles muertos y hacer todo lo posible para preservar su estilo. Esto ayudará a garantizar que se vea familiar (lea profesional) a su audiencia.

Answer 7

Solo usaría elementos div en este caso, con clases agradables que describen el dominio. Podría argumentar a favor y en contra sobre el uso de todo tipo de elementos HTML que den un mejor significado semántico de intención, pero, por ejemplo, en el caso del elemento de diálogo , que no está destinado a escribir diálogos entre personajes en una obra, sin embargo presentar un cuadro de diálogo al usuario para interactuar. Pero el hecho de que pueda cambiar y darle un estilo al elemento que desee en CSS es ingenioso, pero no recomendaría hacerlo.

La razón de esto es simplemente que, a menos que tenga cuidado, anula ese comportamiento y apariencia para cada elemento. Digamos que esta es una aplicación interactiva para dramaturgos, es posible que desee incluir cuadros de diálogo además del "diálogo" en la obra.

Propongo esta solución:

.character{
  display: block;
  float: left;
}

.line{
  margin-bottom: 20pt;
  width: 400px;
  margin-left: 50pt;
}

Con el siguiente HTML:

<div class="character">Jeff</div>
<div class="line">This sure is a nice website we''ve got now.</div>
<div class="character">Joel</div>
<div class="line"> It certainly is. By the way, working at FogCreek rocks.</div>
<div class="character">Jeff</div>
<div class="line">Of course it does. Have you played Rock Band yet? 
  <br/>It''s a lot of fun.</div>

Ejecutando JSFiddle: https://jsfiddle.net/quz9cj2f/6/

Ahora puedes implementar un formateo de juego estándar, que he copiado desde este lugar: http://ptfaculty.gordonstate.edu/lking/CPF_play_formatting2.pdf

.play {
  font-family: courier;
}
.play{
  margin-top: 1in;
  margin-left: 1.5in;
  margin-right: 1in;
  margin-bottom: 1in;
}
.character {
  display: block;
  margin-left: 4in;
  text-transform: uppercase;
}
.direction:before{
  margin-left: 2.75in;
  content: "(";
}
.direction:after{
  content: ")";
}
.line {
  margin-bottom: .3in;
}

Con este HTML:

<div class="play">
  <div class="character">Jeff</div>
  <div class="direction">JEFF is enthusiastic!</div>
  <div class="line">This sure is a nice website we''ve got now.</div>
  <div class="character">Joel</div>
  <div class="direction">Jumping continuously</div>
  <div class="line"> It certainly is. By the way, working at FogCreek rocks.</div>
  <div class="character">Jeff</div>
  <div class="line">Of course it does. Have you played Rock Band yet?
    <br/>It''s a lot of fun.</div>
</div>

Trabajo JSFiddle: https://jsfiddle.net/quz9cj2f/9/

O bien, podría incluir todos los elementos y usar los selectores de atributos CSS y crear atributos personalizados para la metainformación:

.play {
  font-family: courier;
}
.play{
  margin-top: 1in;
  margin-left: 1.5in;
  margin-right: 1in;
  margin-bottom: 1in;
}
.character {
  display: block;
  margin-left: 4in;
  text-transform: uppercase;
}
.line[direction]:before{
  margin-left: 2.75in;
  content: "(" attr(direction) ")";
  display: block;
}

.line {
  margin-bottom: .3in;
}

Ahora que ya se ha deshecho de los elementos adicionales y ha agregado la meta información como atributos, ahora puede fácilmente transformar esto de algún tipo de buena estructura de datos de JSON o XML u otros formatos de intercambio en esto:

<div class="play">
  <div class="character">Jeff</div>
  <div direction="Enthusiastic" class="line">This sure is a nice website we''ve got now.</div>
  <div class="character">Joel</div>
  <div direction="Shaking his head" class="line"> It certainly is. By the way, working at FogCreek rocks.</div>
  <div class="character">Jeff</div>
  <div class="line">Of course it does. Have you played Rock Band yet?
    <br/>It''s a lot of fun.</div>
</div>

https://jsfiddle.net/quz9cj2f/11/

Answer 8

Tablas es el camino a seguir.

Cualquier otra cosa como jugar con <div> s y css o XSLT es solo reinventar la <tabla> pero con sintaxis ac ** p.

Iría por tres o cuatro columnas de ancho fijo. (Cualquier juego no trivial va a necesitar indicaciones escénicas, efectos especiales, efectos de sonido, etc.).

Answer 9

Yo diría que

<dialog>
  <dt>Jeff
  <dd>This sure is a nice website we''ve got now.
  <dt>Joel
  <dd>It certainly is. By the way, working at FogCreek rocks.
  <dt>Jeff
  <dd>Of course it does. Have you played Rock Band yet? It''s a lot of fun.
</dialog>

como se define en HTML5 .

Por supuesto, necesitará un <script>document.createElement(''dialog'');</script> para que IE haga algo sensato y un dialog { display:block; } dialog { display:block; } en su CSS para que funcione completamente.

Answer 10

Yo secundo la herejía :-)

Siempre es bueno tener en cuenta CSS antes de recurrir a las tablas, pero a menudo las tablas son las más adecuadas. Parece que en este caso.

La única consideración adicional sería la accesibilidad. He oído que las tablas dificultan que el software de lectura de texto procese las tablas, pero no veo por qué sería este el caso (no dude en comentar aquí si conoce más).

Otra cosa: supongo que mantendría los datos en bruto en algún otro formato primero, tal vez una base de datos o xml u otro texto estructurado.

En cualquier caso, obtenerlo en un formato xml y transformarlo a html con xslt puede ser bastante liberador cuando se trata de jugar con este material.

Answer 11

Yo usaría encabezados y párrafos.

<div class="play">
    <h2>Jeff</h2>        
    <p>This sure is a nice website we''ve got now.</p>

    <h2>Joel</h2>
    <p>It certainly is. By the way, working at FogCreek rocks.</p>

    <h2>Jeff</h2>        
    <p>Of course it does. Have you played Rock Band yet? It''s<br />
    a lot of fun.</p>
</div>

Con los siguientes estilos organizaría como lo presentó:

.play h2 {
    float:left; 
    clear:left;
    width:100px;
    margin:0;
}
.play p {
    margin-left:100px;
}