Maquetación de contenidos
HTML
Filtered HTML:
Las direcciones de las páginas web y las de correo se convierten en enlaces automáticamente.
Etiquetas HTML permitidas: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <img> <b> <i> <table> <tr> <td> <tbody> <theader> <tfooter>
Este sitio admite contenido HTML. Aprender todo el HTML es una tarea ardua e intimidante, pero aprender unas cuantas «etiquetas» HTML básicas es muy sencillo. Esta tabla proporciona ejemplos para cada etiqueta que está activa en el sitio.
Para más información, puede ver las especificaciones HTML de W3C o usar su motor de búsqueda favorito para buscar otros sitios que traten sobre HTML.
| Descripción de la etiqueta | Teclea | Obtiene | ||
|---|---|---|---|---|
| Las anclas se usan para hacer enlaces a otras páginas. | <a href="http://www.sedice.com/">Sedice.com</a> |
Sedice.com | ||
| Enfatizado | <em>Enfatizado</em> |
Enfatizado | ||
| Fuerte | <strong>Fuerte</strong> |
Fuerte | ||
| Citado | <cite>Citado</cite> |
Citado | ||
| Texto codificado que se usa para mostrar código fuente de programación | <code>Codificado</code> |
Codificado |
||
| Lista desordenada: use <li> para comenzar cada elemento de la lista | <ul> <li>Primer elemento</li> <li>Segundo elemento</li> </ul> |
|
||
| Lista ordenada: utilice <li> para comenzar cada elemento de la lista | <ol> <li>Primer elemento</li> <li>Segundo elemento</li> </ol> |
|
||
| Las listas de definiciones son similares a otras listas HTML. <dl> da comienzo a la lista de definiciones, <dt> da comienzo a cada término definido y <dd> da comienzo a la descripción de la definición. | <dl> <dt>Primer término</dt> <dd>Primera definición</dd> <dt>Segundo término</dt> <dd>Segunda definición</dd> </dl> |
|
||
| No hay ayuda disponible para la etiqueta img. | ||||
| Negrita | <b>Negrita</b> |
Negrita | ||
| Cursiva | <i>Cursiva</i> |
Cursiva | ||
| Tabla | <table> <tr><th>Encabezado de tabla</th></tr> <tr><td>Celda de tabla</td></tr> </table> |
|
||
| No hay ayuda disponible para la etiqueta tbody. | ||||
| No hay ayuda disponible para la etiqueta theader. | ||||
| No hay ayuda disponible para la etiqueta tfooter. | ||||
Los caracteres menos habituales se pueden introducir directamente sin mayor complicación.
Si tiene problemas, intente usar entidades de caracteres HTML. Un ejemplo de esto es &, que se usa para conseguir el carácter &. Tiene una lista completa de las entidades HTML en la página de entidades. Entre los caracteres disponibles están:
| Descripción del carácter | Teclea | Obtiene |
|---|---|---|
| Ampersand | & |
& |
| Mayor que | > |
> |
| Menor que | < |
< |
| Comillas | " |
" |
Las líneas y los párrafos se reconocen automáticamente. Las etiquetas <br /> para el salto de línea y <p> y </p> para abrir y cerrar el párrafo se insertan automáticamente. Si los párrafos no se reconocen, simplemente añada unas cuantas líneas vacías.
Full HTML:
Las direcciones de las páginas web y las de correo se convierten en enlaces automáticamente.
Las líneas y los párrafos se reconocen automáticamente. Las etiquetas <br /> para el salto de línea y <p> y </p> para abrir y cerrar el párrafo se insertan automáticamente. Si los párrafos no se reconocen, simplemente añada unas cuantas líneas vacías.
Consejos para la maquetación de contenidos
El artículo debe ir encabezado por un resumen breve y una imagen de 75 píxeles de ancho con el atributo class="iportada" y nada más. En casos excepcionales se pueden usar imágenes un poco más anchas, con el atributo class="bportada" y con poco o ningún texto.
Para separar el texto del resumen del texto del contenido completo escribe:
<!--break-->
entre uno y otro. El resumen no se mostrará en la página de contenido.
El texto resumen para la portada debe estar escrito de forma muy concisa y evitando las palabras largas que estropean la maquetación. En el caso de entrevistas, reseñas, etc. se pueden citar entrecomilladas un par de frases clave del texto. Escribe las citas para la portada dentro de un tag <cite>.
Las imágenes dentro del artículo que necesites flotar a la izquierda ponlas con atributo class="ileft" y a la derecha con class="iright". No hace falta que uses "align" o "hspace".
Las imágenes que vayan a flotar a los lados deben tener una anchura de unos 200px a lo sumo, para dejar que el texto fluya bien por el lado. Hay que usar un software adecuado para reducirlas de tamaño sin perder calidad y, si es necesario, usar un filtro de enfoque suave.
El texto de los enlaces en los que se muestre la dirección explícita tiene que ir limpio, por ejemplo:
en vez de:
Los enlaces largos o complejos nunca se deben poner de forma explícita. En vez de eso, se pueden poner en el texto:
...para ver el resto del artículo, haz clic aquí.
Se deben evitar las marcas de formato que afecten a grandes partes del contenido en la medida de lo posible. Si necesitas aplicar una clase de estilo en varios contenidos consulta a uno de los webmasters.
Para Maquetadores: no se debe enviar un artículo a portada sin comprobar luego que el resumen aparece correctamente, tanto en Internet Explorer como en Firefox.
Adjuntar y maquetar imágenes
(nota de Endegal provisional, mandadme un privado a Sedice foros si tenéis dudas)
Las imágenes van con el consabido código de etiqueta IMG:
<img src="http://dominio.com/rutadelaimagen/imagen.jpg" class="ileft o iright">
Ese código debe ir siempre justo antes del párrafo que vaya a acompañar. Al darle "ileft" o "iright" es lo que hará que se vea a izquierdas o a derechas del texto.
Ahora bien, queda la segunda parte del problema de las imágenes: tienen que estar alojadas en alguna parte, es decir, tenemos que subirlas al servidor y saber su ruta (dónde se ha guardado).
El primer paso sería pues subir las imágenes al servidor. Para subirlas, tienes que editar el artículo que has hecho (Primero le das a "leer más" o pinchas sobre el título para ver el artículo completo, y luego verás dos pestañas "Ver" y "Editar". Con "Editar" puedes rectificar el artículo cuantas veces quieras.
Una vez estés editando, abajo, casi al final, aparecen unas líneas de texto en rojo:
> Archivos adjuntos
> Opciones de comentarios
> Opciones del menú
> etc
En realidad son opciones desplegables. Si pinchas en "Archivos adjuntos" se desplegarán las opciones de adjuntar archivos.
Pincha en el botón elegir. Se abrirá un diálogo para que busques la imagen en tu disco duro. Cuando la tengas, le das a aceptar (o abrir, según se esté en Opera, Firefox o Explorer). Luego le das a Adjuntar y listo. Eso te sube la imagen al servidor. Verás que te aparece listada.
Si luego le das a "Enviar", actualizas el artículo. Fíjate que cuando se lea ahora el artículo, abajo aparecerá la imagen como "archivo adjunto".
Ahora nos queda saber la ruta donde se subió la imagen para poder colocarla en la instrucción <img ...
Vuelve a editar el artículo. En la sección "Archivos adjuntos" te aparece el listado de archivos e imágenes añadidos. Debajo de la imagen subida, aparece en letra pequeña la dirección donde está subida. Por ejemplo, si he subido la imagen "bermudez2.jpg", abajo aparece "www.sedice.com/portada/files/bermudez2.jpg"
Por lo tanto, en el cuerpo (body) del artículo, al principio del párrafo al que quiero añadir la imagen, pondré:
<img src="www.sedice.com/portada/files/bermudez2.jpg" align="right">
Y me pondrá a derechas la imagen adjuntada. Si la quiero a izquierdas, sólo tengo que cambiar el align="left"
Para que el texto no se quede pegado a la imagen, se puede distanciar con hspace y vspace. Creo que se están separando actualmente en otros artículos unos 15 pixels, con lo que quedaría así:
<img src="www.sedice.com/portada/files/bermudez2.jpg" class="iright">
Lo importante es subir el texto y las imágenes con "adjuntar". Una vez llegados ahí, para alguien acostumbrado a maquetar es muy rápido poner las imágenes en su sitio, por lo que el objetivo es que todos los que alimenteis de artículos y noticias, podais llegar a ese primer paso.
Del segundo paso, ya se encargarían los maquetadores si el que sube el artículo lo ve muy complicado.
