Thor 29 de abril de 2008 a las 14.36
   Imprimir artículo
elWebmaster.com

Taller de Adobe Dreamweaver: Caracteres especiales


Taller de Adobe Dreamweaver: Caracteres especiales ¬°Hola queridos lectores! ¬ŅC√≥mo les va? ¬ŅMe extra√Īaban? Jeje. Bueno, hoy vamos a dedicar la clase a los caracteres especiales en las p√°ginas web. Esto es de suma importancia por dos cosas: el c√≥digo HTML v√°lido y (la m√°s importante) la visualizaci√≥n correcta de nuestra p√°gina por parte de los usuarios.

Se les llama “caracteres especiales” a un conjunto de caracteres (valga la redundancia) que no pertenecen a un com√ļn de codificaciones de alfabetizaci√≥n. Por ejemplo, en Estados Unidos no existe la letra “√Ď”, en algunos pa√≠ses el acento (tilde) es para un lado y en otros para el otro, etc.

El conjunto de caracteres abarca, adem√°s de letras como la √Ī y letras con acento, s√≠mbolos de diferentes tipos como la apertura de s√≠mbolo de exclamaci√≥n y de pregunta; s√≠mbolos no frecuentes como el de marca registrada (la “R” chiquita dentro de un c√≠rculo) y hasta los mismos signos “<” y “>”, que al ser caracteres HTML no pueden ser escritos dentro de una p√°gina tal cual se ven, porque si no el navegador interpretar√≠a lo que le sigue al signo como el nombre de un tag (etiqueta).

Los caracteres especiales tienen un reemplazo para escribirlos en el HTML que empieza con el s√≠mbolo “&” y termina con un “;”.

A modo de ejemplo, una “√Ī” se escribe en HTML como “√Ī” (sin las comillas), una vocal con acento se escribe &(vocal)acute;.

Ac√° les dejo una lista de los principales caracteres:

Letras:

Taller de Adobe Dreamweaver: Caracteres especiales

Otros caracteres:

Taller de Adobe Dreamweaver: Caracteres especiales

¬°Y el supercaracter del dia! (un espacio en blanco):

Taller de Adobe Dreamweaver: Caracteres especiales

Por supuesto que hay muchos caracteres especiales m√°s, estos son s√≥lo una peque√Īa lista de los m√°s usados.

Si en alg√ļn momento necesitan alguno m√°s raro, que no este ac√°, a googlear se ha dicho.

…y aportando info de Dreamweaver…

Como ver√°n puede resultar bastante molesto el tener que escribir un p√°rrafo o el texto que sea, cambiando todos los caracteres por los escritos arriba.

Dreamweaver, nos ayuda con esto de 2 maneras:

Una es que en modo c√≥digo, cuando empezamos a escribir el car√°cter (cuando escribimos el “&”), ya nos muestra una lista de los posibles caracteres a escribir.

Pero la mejor de todas, es que escribiendo en modo visual, podemos poner acentos, √Ī o lo que queramos, que Dw nos convierte todos los caracteres autom√°ticamente.

Pueden probar esto, escribiendo cosas en modo visual y pasando a modo código, verán que en realidad esta todo como debe estar.

Conclusión

Esta clase no fue la gran cosa jeje, pero el tema de los caracteres especiales es muy importante.

Cuantas veces habremos visto p√°ginas en las que aparecen signos raros (¬ŅNo eran de Jap√≥n, eh?) y la verdad que este tipo de descuidos estropea mucho el dise√Īo y hace que nuestra p√°gina se vea poco profesional.

Es importante tener en cuenta que, por m√°s que en algunos navegadores se vean bien los caracteres especiales escritos tal cual son, se deben usar sus correspondientes reemplazos.

Bueno, nos vemos la próxima.

Cualquier cosa, ya saben ¬°Comentario!

¬°Hasta luego!

<< CLASE ANTERIOR  

CLASE SIGUIENTE >>

 


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (10)

  1. Carmelo dice:

    pu√©s a mi, escribo en dise√Īo y pongo acentos. cuando voy a c√≥digo los & no aparcen por ning√ļn lado y me toca ponerlos uno a uno en modo c√≥digo. ¬ŅPorqu√©? Salu2.

  2. Thor dice:

    Mmm debe ser la codificación estándar que agrega el Dw.

    Dw por defecto cuando creamos una página, entre los tags <head></head> nos pone un <meta> con la codificación del documento.

    Esta codificaci√≥n se puede setear para que la agregue autom√°ticamente desde “edit->preferences->new document->default encoding” (de la barra de ventana)

    La codificación correcta para que convierta los caracteres automáticamente es:

    <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">

    Espero que te sirva.
    Tanto si te funciona o no, avísame así me quedo tranquilo.

    ¬°Saludos!

  3. javier dice:

    Hola. estoy poni√©ndome al d√≠a con este curso y quer√≠a preguntarte justamente por la consulta que dej√≥ Carmelo. ¬Ņque diferencia hay entre la codificaci√≥n ISO 8859-1 y cualquiera de las UTF? por una cuesti√≥n de compatibilidad suelo usar y prefijar las UTF. Saludos

  4. adriana dice:

    Hoola, hace rato me paso esto mismo con lo de los acentos, q los tuve que cambiar manualmente, y busque en google una pagina en donde me vinieran los codigos para asi solo darle copy-paste. Les dejo la pagina y espero que les sirva a mas de uno:

    http://www.ascii.cl/es/codigos-html.htm

    los que hay que poner son los de la columna que dice HTML Nombre.

    Saluudos.

  5. julio orellana dice:

    Amigo no puedo separar los vinculos en dream weaver (osea.. hacer el palito recto que los separa) con un windows viejo sale, pero con el 7?? desde ya gracias.

  6. alberto caro dice:

    muchas gracias esta muy bueno el curso….estoy aprendiendo mucho de el..

  7. Gerard Garcia dice:

    Buenas,
    tengo una duda mas sobre caracteres especiales, los acentos abiertos como los que se usan en frances o en catalan, como se ponen bien para que se visualicen como usuario?

  8. Cecilia dice:

    Hola antes que nada muy buen el curso!!! tengo una duda..
    Intente escribir en el modo dise√Īo la √Ī, y cuando miro el c√≥digo en vez de decir ñ me aparece   ES LO MISMO?? o en alg√ļn ordenador se puede llegar a ver mal ese car√°cter?

    Muchas gracias..

  9. Cecilia dice:

    Veo que no me sali√≥ el c√≥digo que escrib√≠…
    En vez de figurar el c√≥d. que figura ac√° para que aparezca la √Ī con el ntilde me aparece nbsp.

  10. Isa dice:

    Que tal!!!!
    Gracias me sirvió mucho lo de los acentos y pude terminar mi trabajo.
    Buen curso!

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder