El Comercio Digital

Webmaster Libre

Desarrollo Web con Software Libre

Estás navegando por el archivo de la categoría (x)HTML

No más tablas: Videotutoriales

Me encuentro en Windows Skills (que título más poco atractivo) con un par de videotutoriales sobre maquetación sin tablas creados por Douglas Bowman y me ha parecido interesante dejaroslos por aquí por si os apetece echarles un vistazo.
Eso si, están en perfecto inglés:

(x)HTML, CSS

Comenta

Listas seguras junto a elementos flotados a la izquierda

Este artículo es la traducción de Safe List Next With Left-Floated Elements escrito por Grand Schtroumpf:

Indice

  1. Introducción
  2. Hagámoslo tan sólido como sea posible
  3. Primeras impresiones
  4. Marcador fuera
  5. Probando un truco para crear la indentación
  6. Imagen de fondo como marcador
  7. Conclusión

(más…)

(x)HTML, CSS

1 Comentario

Elementos en línea y elementos en bloque

El otro día le prometía a NeKronos hablar de los elementos en línea y en bloque en HTML. Empecé a escribir y, al buscar en Google alguna referencia, me encontre con la traducción de tres artículos de Tommy Olson sobre el tema, así que, ya que tanto los artículos como las traducciones son excelentes, prefiero dejaros aquí los enlaces para que lo leáis:

  1. Block frente a inline, parte 1
  2. Block frente a inline, parte 2
  3. Block frente a inline, parte 3

(x)HTML, CSS, Enlaces

1 Comentario

5 antiguas y molestas prácticas con XHTML

Seguro que más de una vez te ha recorrido un escalofrío la espalda al escuchar: “Simplemente tienes que hacerle unos retoques a mi sitio” o algo similar. En resumen, quieren que trabajemos con código de otra persona y eso, salvo honrosas excepciones, significa pelearse con algo que para quien lo escribió era tan obvio que no merecía la pena introducir comentarios y que se escribió hace siglos y se dejó ahí sin revisar.

En Modern Life is Rubbish han hecho una lista de las 5 prácticas más molestas al escribir XHTML:

  1. La etiqueta <font>: Protagonista de los primeros diseños, nos recuerda cuanto ha hecho el CSS por nosotros.
  2. Marcado escrito enteramente en MAYÚSCULAS….
  3. Utilización inconsistente o ausencia total de las comillas
  4. Elementos bastardos de HTML transicional: Pasar de la etiqueta font y sus atributos de color a la etiqueta span para hacer exactamente lo mismo <span color=” “> Por suerte cada vez se ve menos.
  5. Usar un martillo para apretar una tuerca: Tablas para dar estilo, <br> en lugar de elementos en bloque…

5 incredibly outdated and annoying techniques in (X)HTML

Las cosas han cambiado mucho en los últimos años ¿has sabido adaptarte a los nuevos tiempos o sigues escribiendo código prehistorico?

(x)HTML

5 Comentarios

Creando páginas con buenos títulos

La etiqueta <title>, bien utilizada, es una excelente herramienta que nos ayudará a dar a conocer nuestro sitio web a los demás y nos permitirá facilitar las cosas a nuestros usuarios.
El W3C nos recomienda que estos títulos no tengan más de 64 caracteres y que sean descriptivos del contenido del sitio.

En principio, como su propio nombre indica, la etiqueta <title>, nos permite definir un título para nuestras páginas.
Para generar documentos válidos deberás incluir siempre una etiqueta title en la cabecera de tus páginas





Este título será el encargado de dar nombre a tu sitio web en numerosas situaciones, en la ventana del navegador, en los listados de favoritos, en el historial de navegación, en los resultados de los buscadores…

Errores comunes al crear titulos

Todos cometemos errores alguna vez y estos son algunos de los más comunes a la hora de crear un título:

  • Dejar el título en blanco.
  • Introducir texto por defecto en el título (Sin titulo, Pagina Nueva…)
  • Utilizar títulos que no se ajusten al contenido del sitio
  • No transmitir contenido relevante

Consejos para titulos

  • Incluye el nombre de tu sitio web en el título. De esta forma podrás crear una marca consistente con todos tus artículos, ayudarás a tus visitantes a identificar tu sitio en sus marcadores y facilitarás la tarea de los (muchos) usuarios que navegan usando los botones adelante y atrás de su navegador.
    Sobre la colocación, delante o detrás de la descripción, yo soy partidaria de colocarlo primero a pesar de que cara a los buscadores puede ser más eficaz colocar primero las palabras clave. Tu decides.
  • Crea títulos agradables a la vista y legibles por humanos.
    Utiliza los separadores y las mayúsculas y minúsculas correctamente
  • Mantente lo más breve y conciso que puedas.
  • Mantén una estructura consistente en todos los títulos de tu sitio web.

Titulos bonitos para CMS:

En las páginas estáticas es muy sencillo editar los títulos pero, todos los que usamos algún CMS tendremos que apoyarnos en plugins y «hacks».

  • Fancy Titles – Gracias a Héctor Delcourt, titulos bonitos y optimizados para WordPress (en uso en este blog)
  • Page Title: Con este plugin para Drupal podrás definir una estructura para los titulos de tus páginas y cambiar el título por defecto de los nodos.
  • How to use title-alias as title tag – Una solución para los títulos en Joomla

Seguro que hay muchos más para otros CMS, si conocéis alguno interesante dejadlo en los comentarios.

(x)HTML, SEO y SEM, Trucos y Consejos

1 Comentario

Y si no tienes más remedio que usar frames…

Como me señalaba Rodolfo Pilas en los comentarios de 9 razones para no usar frames pueden existir proyectos en los que el uso de frames pueda resultar adecuado. Si no tienes más remedio que usar frames, al menos que sean accesibles y usables.

  • Proporciona contenido alternativo para los usuarios de agentes que no soporten los frames.
    Proporciona contenido de valor dentro de las etiquetas <noframes>.
    En lugar del típico Esta página utiliza frames pero tu navegador no los soporta utilízala para colocar una descripción y enlaces que faciliten la navegación por las páginas de tu sitio.

    Por ejemplo:



    </p> <p> Bienvenido a Nombredelsitio. Tu navegador no soporta frames y por ello tendrás que navegar por las diversas páginas de este sitio mediante los enlaces siguientes: </p> <p><a href="contenido.html">Página Principal</a><br /> <a href="contenido2.html">Seccion &#8230; </a><br /> &#8230;<br />

    En el caso de los iframes deberás encerrar el contenido adicional entre las etiquetas <iframe> y éste sólo se mostrará a los usuarios cuyos navegadores no soporten frames.
    Por ejemplo:


  • Identifica correctamente los marcos, utiliza nombres descriptivos en el atributo name y da información sobre su contenido o función con el atributo title









    Además, en caso de que la relación entre los marcos sea demasiado compleja, debes facilitar una descripción de los mismos en una nueva página a la que se pueda acceder mediante el atributo longdesc de, al menos, uno de los marcos del frameset
  • Controla siempre el marco de destino de tus enlaces. Tus usuarios se sentirán desconcertados si, al pulsar sobre un enlace, se abre en el frame equivocado o queda encerrada una página ajena a tí entre tus marcos

    Este enlace se abrirá en el marco cuyo nombre (name) es contenido
    Este enlace se abrirá en el mismo marco
    Este enlace mostrará una página que eliminará la estructura de marcos
    Este enlace abrirá la página en el marco que contiene al marco actual, de no existir hará el mismo efecto que top
    Este enlace se abrirá en una nueva ventana del navegador

Además, como recompensa adicional, los buscadores podrán indexar tu sitio correctamente y mejorará tu posicionamiento.

(x)HTML, Trucos y Consejos, Usabilidad y Accesibilidad

1 Comentario

9 Razones para no utilizar frames (marcos)

Puede que al leer el título muchos de vosotros (espero que la mayoría) hayáis tenido el reflejo de mirar al calendario para comprobar que no estamos en 1999 (o alrededores). Para la mayoría de desarrolladores web es algo más que obvio: No debes usar frames.
No obstante, cada día hay muchas personas introduciéndose en el mundo del desarrollo web y, por desgracia, muchos de ellos acuden a los tan manidos tutoriales y manuales que llevan siglos rodando por la red, cayendo en esos errores que tantos años nos costó a los demás evitar. Sin ir más lejos, ayer mismo, en un foro (siento no recordar cual) vi una pregunta del tipo ¿Cómo creo una web con frames? y yo pensé ¿por qué iba nadie a querer crear una web con frames? ¿Quizá porque desconoce todos los inconvenientes que conllevan?

De ahí estas 9 razones por las que no debes utilizar frames:

  1. Están desaconsejados por el W3C.
  2. El usuario debe entrar siempre por la página principal, donde se encuentra la declaración de marcos. Si accediese por otra página diferente se perdería elementos tales como la navegación (el uso más frecuente de los frames)
  3. Al no cambiar la URL en las diversas páginas, el usuario no podrá añadir a sus favoritos secciones de la página
  4. Los botones «anterior» y «siguiente» de los navegadores pueden no funcionar adecuadamente. Así mismo podemos dificultar el uso del Historial del Navegador
  5. Si el usuario desea imprimir la página podemos obtener resultados no deseados.
  6. Se reduce el espacio en pantalla, comprimiendo en ocasiones el contenido entre los frames. Situación que empeora si se accede al sitio mediante dispositivos con poca resolución de pantalla (por ejemplo pda o móviles)
  7. Las páginas con Marcos pueden dar problemas al visualizarse con navegadores antiguos, navegadores solo texto y agentes de usuario no visuales.
  8. No podemos promocionar páginas interiores ya que necesitamos que los visitantes accedan por la página principal. Perderemos por tanto enlaces profundos y demás
  9. La página principal no tiene contenido, sólo contiene la declaración de Frames. Los buscadores sólo indexarán el contenido de la declaración NOFRAMES, que no suele ser muy útil (¿os suena el típico «Esta página utiliza frames pero su navegador no lo soporta»?)

Y, en caso de necesitarlos, crea frames más accesibles y usables

(x)HTML, SEO y SEM, Trucos y Consejos, Usabilidad y Accesibilidad

13 Comentarios

Tingelets: Bookmarlets para desarrolladores web

Tingelets Logo

Si alguna vez has necesitado (o crees que te puede venir bien) una ayuda visual para identificar algunos elementos de una página web quizá deberías probar Tingelets.

Los Tingelets son pequeños bookmarlets que irán dándote pistas visuales sobre las etiquetas de un sitio.

A List Apart tingled

Simplemente tienes que arrastrarlos a tu barra de vínculos, muy simple y siempre a mano.

Tingelets: http://www.tingelets.com/

(x)HTML, Miscelaneos, Navegadores, Recursos

2 Comentarios

“HTML in email” nueva lista de correo del W3C

Via Glazblog me entero de que el W3C ha creado una lista de correo para tratar el tema del HTML en los correos electrónicos.
Más allá de la discusión entre si deben o no enviarse correos en HTML (que no tiene lugar en esta lista) se busca crear una lista donde se representen las necesidades y el posible futuro del HTML en los mails, incluso se plantea hacer un taller a este respecto.

El tagline de esta lista es:
Discussion of HTML and email – authoring, security, and rendering.

Se trata de una lista abierta así que todos los interesados en participar y aportar su experiencia serán bien recibidos.

public-html-mail@w3.org

(x)HTML

Comenta

El WaSP anuncia el «International Liaison Group»

El WaSP ha anunciado hoy la creación del International Liaison Group, un grupo que surgió de una iniciativa de Molly y que ha crecido hasta convertirse en un grupo independiente capitaneado por dos mujeres Glenda Sims y Steph Troeth.

La misión del ILG es convertirse en un grupo de trabajo mediante el que compartir progresos y recursos entre desarrolladores, de una forma inclusiva e internacional o como se presenta en la página web del grupo:

El Grupo de Enlace Internacional (ILG en inglés) del WaSP (Web Standards Project) es un colectivo internacional de profesionales de internet que promueven el uso global de los estándares para asegurarnos una Internet igualitaria.

Via Juicy Studio.

Anuncio oficial (traducción al castellano): http://www.webstandards.org/2007/02/01/20070201-es/
International Liaison Group: http://www.webstandards.org/action/ilg/

(x)HTML, CSS

Comenta

Información:

Webmaster Libre es un blog de Alma Fernández Página alojada en Redcoruna