XHTML+CSS: nueva versión

Permalink | Archivado en: CSS, Diseño y Desarrollo Web, Tutoriales, XHTML

Aprovechando este concurso de Maestros del Web, he terminado una nueva versión del manual de XHTML y CSS: revisión de erratas, incorporación de algunos posts de Cafeína y un par de capítulos nuevos.

Podéis descargar el PDF (750KB, aproximadamente). Recordad que está distribuido bajo la licencia Creative Commons Attribution – Non Commercial – Share Alike (como el blog), así que compartidlo, traducidlo, añadidle cosillas, y demás :)

tabla de contenidos

BenKo, 30-11-2006 7:38:46 PM
73 comentarios

73 comentarios »

  1. Muy bien, a ver si ganas el iPod!
    BenKo, te he enviado algo así como 3 e-mails con los archivos de LaTeX en catalán…revisa tu correo.

    Comentario de Javi — 30-11-06 8:17 pm

  2. Manual de Xhtml + Css…

    Segunda version del menjor manual de XHTML + CSS que existe… y punto. enlace directo al PDF (750kb Aporx) cafeina.ladybenko.net/wp-…

    Trackback de meneame.net — 30-11-06 8:40 pm

  3. bieeeeeen!! deseando estaba que sacaras otro post sobre esto y sacas un manual entero de 100 hojas!!!!! graaacias estoy por imprimirlo y todo que siempre viene bien tenerlo a mano.. un saludo y suerte!

    Comentario de darkomen — 30-11-06 10:54 pm

  4. Ah, ahora que habláis de imprimir, se me olvidó comentar de que el PDF está pensado para que lo imprimáis a doble cara, como si fuera un libro.

    Comentario de BenKo — 30-11-06 11:29 pm

  5. Oye, me gusta este manual, joder con frases decentes y todo. :D
    En tu historial del blog, pone que en un inicio usaste blogger, es posible que pronto (cuando tenga eso llamado tiempo) te consulte (si no te importa) sobre los posibles problemas que tuviste para pasar de blogger a wp en caso de que mandaste de un lado a otro los archivos. :)

    Comentario de Zuviëh — 01-12-06 12:42 am

  6. Gracias por la nueva versión y por el aviso en el blo que comparto con mis alumnos. Un trabajo estupendo.

    Comentario de fsalamero — 01-12-06 12:34 pm

  7. Excelente, Lady Benko, tienes un sentido del humor espectacular, y es un magnifico tutorial para los que comienzan en el mundo del xhtml/css. Gracias

    Comentario de fearlex — 01-12-06 2:49 pm

  8. Muy bueno, en verdad gracias.

    Comentario de xhtml — 01-12-06 7:57 pm

  9. Gracias por el aporte.. Y por participar en el concurso. Éxitos.

    Comentario de cvander — 02-12-06 1:56 am

  10. Ostras, pues tu manual me va a ir de perlas. Últimamente estoy intentando que mi blog pase el Validador de Xhtml pero como no tengo mucha idea me cuesta bastante, así que voy a ponerme las pilas :)
    Gracias

    Comentario de kelp — 02-12-06 7:02 pm

  11. Mis felicitaciones, muy buen manual (y blog). Curiosamente, hace pocos días me había descargado la versión anterior y pensé: “A ver cuando lo actualiza” :-)
    Un saludo

    Comentario de Daniel — 02-12-06 9:20 pm

  12. Muy bueno el manual, es lo que estaba buscando desde hace rato. A propósito y a modo de contribución: tienes un pequeño error en el comentario 3 de la página 22, pusiste que la barra invertida es / y no \, es normal, ya yo no se donde es que está \ :-) .

    Comentario de Mauricio — 03-12-06 5:55 am

  13. #12, gracias, ya está arreglado.

    Comentario de BenKo — 03-12-06 4:28 pm

  14. Me encanta :) Y me encantaría que ganases también :D

    Comentario de Calítoe... — 03-12-06 11:55 pm

  15. Lo de las frases mola un montón. Suerte y gracias! ;)

    Comentario de s3rrot — 04-12-06 12:25 am

  16. Fantastico manual!!! De lo mejor que lei. Ahora, poniendonos exigentes, ¿sería posible una version html del mismo? Creo que sería muy util para usar de referencia mientras se diseña.
    Felicitaciones de nuevo…

    Comentario de Guillermo — 04-12-06 8:49 pm

  17. #16: El principal formato del manual es PDF, y hasta que no lo acabe (más capítulos, capturas de pantalla) por completo, no me planteo otras opciones.

    Tengo otros proyectos en los que trabajar, y realmente no puedo abarcar tanto. Esta es una de las razones por las que la licencia CC del manual permite la modificación del mismo: para que si alguien quiere traducirlo, o pasarlo a otro formato, que lo haga él mismo ;)

    He puesto para descargar en la sección de Stuff los fuentes en LaTeX del manual. LaTeX es texto plano, así que no sería muy difícil coger Flex y programar un párser para convertirlo a XML/XHTML… Amén de que ya hay herramientas que permiten pasar de LaTeX a texto plano, RTF y demás.

    Por supuesto, estaría encantada de que me notificarais las modificaciones al manual y, si me gustan, podría colgarlas en este blog incluso ;)

    Comentario de BenKo — 04-12-06 10:20 pm

  18. El manual es excelente. Felicidades Lady! Hace un par de meses que visito regularmente tu blog. Te cuento una curiosidad: soy estudiante de 4ºcurso de Ingeniería Informática en la Universitat Autònoma de Barcelona y en la asignatura de Redes de Computadores la profe nos recomienda tu tutorial como material imprescindible. FELICIDADES! Un abrazo y nos vemos por aquí!

    Comentario de JOANJU — 05-12-06 2:01 pm

  19. Gracias por tu trabajo y dejarlo para el común de los mortales aquí.
    A ver si saco tiempo y migro de una vez.

    Comentario de Joaquín — 07-12-06 12:05 am

  20. ¡Hola Lady! ¡Enhorabuena por retomar el estupendo manual! Yo lo voy a realojar en mi retomado blog si no te importa y recomendarlo, por su puesto.
    En que saque un rato miraré los fuentes.
    Saludicos!

    Comentario de Manuel — 07-12-06 11:17 am

  21. [...] http://cafeina.ladybenko.net/?p=338 [...]

    Pingback de Dizque » Ensaña a realizar páginas web — 13-12-06 9:43 pm

  22. Benko, Benko… el caso es que ese nick me suena mucho… no será de cuando te DIVertías con los juegos y no jugando preecisamente? O me confundo de persona?
    En cualquier caso, me gusta tu blog. Me quedo.

    Comentario de Wardog — 14-12-06 10:34 am

  23. #22: Va a ser que sí :)

    Comentario de BenKo — 14-12-06 5:40 pm

  24. muy bueno

    Comentario de ZaZ — 14-12-06 6:30 pm

  25. Hijoles! Pues de lejos lo mejor que se presento al concurso. Quizas una versión para leerse en web, no hubiese caido nada mal. Pero por lo que recuerdo no era requisito, pero siendo un concurso sobre web, hubiese sido lo más lógico. ;)

    En fin, solo es una sugerencia.

    Comentario de Vuarnet — 15-12-06 2:42 am

  26. Excelente, felicidades, ya vote por ti en el concurso ;)

    Comentario de Juanle — 15-12-06 4:37 am

  27. Joya de manual. Te mando un link de un editor online HTML, para que tus alumnitos puedan ir ejecutando los ejemplos sin tener que guardar y levantar el html. http://htmledit.squarefree.com/
    Otra vez, el manual te quedo demasiado chevere :D

    Comentario de Eliezer — 15-12-06 5:56 pm

  28. [...] Debo decir tambin que estoy alarmado. Entiendo que MDW no ha elegido a 10 finalistas, sino que ha puesto a los nicos 10 que han presentado. Sino no me explico que haya un finalista cuya web est repleta de publicidad. Entiendo, adems, que lo de esperar para saber la decisin del jurado es, debera ser, una mera formalidad, pues el la ganadora es, o debera ser, Benko. La diferencia de nivel con el resto es abismal aunque, para que engaarnos, ya sabemos que ella es muy buena en esto. [...]

    Pingback de StraT Network Blog » Sobre el concurso de maestros del web y los finalistas — 15-12-06 7:02 pm

  29. [...] Ayer dije que deba ganar Benko. Los miembros del jurado de Maestros del Web, no estn de acuerdo. Y no slo eso, sino que no tienen un ganador, sino dos: Moiss Prez (M) de Mxico con su proyecto de Web Fcil por Moy. [...]

    Pingback de StraT Network Blog » Ganadores del concurso de Maestros del Web — 16-12-06 12:21 am

  30. Hola ladybenko!

    Estoy leyendo tu manual y nada simplemente facilitarte por esta obra de arte. jeje

    Lo que me ocurre es que me he encontrado con un problema y es que a la hora de visualizar el trozo que llevo de XHTML:

    Título de la web

    Aquí va el cuerpo de la web

    ¿me sucede que los acentos me losd etecta como carácter extraño. Puede que se trate del sistema de codificación UTF 8?

    ¿Como puedo solventarlo?

    PD: Tambien, sólo comentarte que el último toque que quedaria superbien a tu manual (aparte de posibles actulizaciones i/o extensiones) :P estaria bien que en el índice estuviese “linkeado” a cada parte del manual.

    Nada más! Y felicidades! :D

    Comentario de Gerard — 18-12-06 10:58 pm

  31. @Gerard: si no se guarda el archivo como codificación UTF-8, por mucho que en el META se indique que se está usando codificación, no funcionará.

    Comentario de BenKo — 18-12-06 11:06 pm

  32. Hola ladybenko!
    Gracias por contestar. De echo, sí que lo guardé como UTF 8. Al final lo solucioné guardandolo como UNICODE (en el bloc de notas) y UTF 8 en el head del documento.

    Queria escribirte por correo, para que tuvieras tu blog más ordenado, pero me dijo que no aceptaba email de desconocidos. jeje.

    Saludos y gracias!

    Comentario de Gerard — 20-12-06 4:23 pm

  33. Hola! Ya, en tu capítulo sobre CSS, cuando especifico la hoja de estilos en la cabecera:

    Aquí veo que hay algo mal, ya que en un mismo elemento no pueden haber dos atributos rel. ¿Será que el segundo se trate de: type= “stylesheet” ?

    Saludos!

    Comentario de Gerard — 21-12-06 3:40 pm

  34. [...] No he mencionado los trabajos presentados no inéditos; sin embargo quiero hacer mención a uno de ellos que francamente, me encantó. http://cafeina.ladybenko.net/?p=338 [...]

    Pingback de Bitácora de una leporcia » Blog Archive » ¿Cómo le enseñarías a alguien a realizar una página web? — 29-12-06 2:44 pm

  35. [...] Demasiada Cafeína: Nos proporciona un excelente manual explicativo del XHTML + CSS [...]

    Pingback de ..: CRISTIAN ESLAVA | Diseño Gráfico / Web | Maquetación | Flash | Multimedia | 3D | Fotografía :.. » Consejos y manuales diseño web | CSS vs. tablas | Colección enlaces — 15-01-07 9:22 pm

  36. muy bueno, habra que darle un vistazo a este blog mas amenudo.

    Comentario de anibal_k — 20-01-07 12:09 am

  37. De los dos ganadores uno de ellos requiere que para seguir su tutorial adquiramos la gama completa de los programas de Adobe, y el otro recomienda usar el DreamWeaver… eso demuestra que o bien hay mucho rico suelto por ahí o que se da por sentado que vamos a usar software pirata…

    Te doy un 11 sobre 10, por un tutorial/manual bien estructurado, que fomenta el uso de tecnologías 100% standard, que fomenta el uso de tecnologías libres y GRATUITAS.

    Ahora te falta hacer unos tutoriales de creación de imágenes para terminar de hacer un página bonita, bonita… (por supuesto con Gimp y/o inkscape)

    De hacer las páginas dinámicas mejor no hablar, porque el dinámico de Flash es propietario y el dinámico de AJAX y/o dinamismo en el sentido de procesar datos y demás requieren de algo mas que un tutorial.

    Por cierto, si le haces una portada bonita, y amplías un poquito el contenido podría superar a muchos libros comerciales sobre el tema.

    Comentario de Rarok — 24-01-07 12:48 am

  38. [...] Desde que perdí toda la lista de mis feeds (jugando con las configuraciones de linux sin respaldos, o dicho de otra forma, tontamente), me he perdido de muchas cosillas interesantes de algunos blogs que seguía… Por ejemplo, y por esos azares del destino, ayer supe que Benko actualizó su excelente manual de XHTML + CSS… Lectura imprescindible para todo aquel que quiera aprender sobre el tema. [...]

    Pingback de Manual de XHTML + CSS en ::aguayoki:: — 31-01-07 10:09 pm

  39. jeje, al final he dado con la web, buen tutorial!

    Comentario de kokecola2k2 — 06-02-07 12:56 pm

  40. MUY BUENO, pero…

    1-Parece un contrasentido hacer un manual de XTHML en PDF.

    2-Hay problemas de ‘viudas y huérfanos’ como pej. el comienzo de la página 45, donde existe un infeliz

    3-Existen cantidad de anglicismos inútiles: tableless…

    4-Te animo a que completes el wikilibro sobre XTHML.

    Comentario de hoblap — 07-02-07 10:27 am

  41. #40: ¿Por qué es un contrasentido hacer un manual de XHTML en PDF? ¿Es que no tienen sentido los manuales en papel?

    Comentario de BenKo — 07-02-07 10:47 am

  42. El formato XHTML también se puede poner en papel. Además, se trata de un formato no-propietario, al contrario del PDF.

    Comentario de hoblap — 07-02-07 5:38 pm

  43. El PDF es un formato abierto y pronto será estándar ISO (si es que no lo es ya).

    Comentario de BenKo — 08-02-07 1:13 am

  44. muy bueno el manual me ha servido bastante, te pasaste!!!! un beso

    Comentario de Auster — 09-02-07 6:19 pm

  45. Al principio de tu manual leo algo que me deja un tanto perplejo: Un editor de texto plano. Si eres un desafortunado usuario de Windows, te sirve el Bloc de Notas. Ten cuidado si usas un procesador de textos, como el Word, ya que da formato y no queremos eso. Si usas GNU/Linux, tienes un montón para elegir: vim, emacs, Joe, Kate, etc.

    En Windows también hay un montón para elegir! Emacs, vim, microEmacs y tantos otros editores corren perfectamente bajo Windows desde hace años, y son totalmente gratuitos, basta bajárselos e instalarlos. Sólo la idea de usar el block de notas me provoca estremecimientos de pavor, sobre todo considerando que el emacs es excelente para todas las variedades del SGML.

    Comentario de koloide — 09-02-07 6:49 pm

  46. Gracias por tu manual, es muy completo y cuando lo vi por primera vez aun no estaba hecha la parte de CSS. A ver si ahora aprendo diseño web en serio :-p

    Por cierto, os recomiendo un editor de textos muy bueno para Windows, libre y GPL; Notepad++:

    http://notepad-plus.sourceforge.net/es/site.htm

    Comentario de Venker — 19-02-07 6:44 pm

  47. Manual completísimo, me encanta, de hecho lo estoy utilizando para enseñar a mis pupilos. Gracias por introducirme en este mundo nena!! :) nos vemos ;)

    Pd.- Deberías haber ganado xD

    Comentario de Stormpic — 12-03-07 11:07 am

  48. Es de los mejores manuales que he visto en Internet para empezar en este mundo de la creación de paginas web

    Comentario de Jesús Moreno — 12-03-07 4:05 pm

  49. Muy buen tutorial, felicidades, siguele hechando ganas, me gusta leer tu blog!

    have funnnnnn!

    Comentario de crysfel — 14-03-07 11:16 pm

  50. Hola LadyBenko, muy bueno el manual, pero creo que hay que corregir algo en el capitulo 9 “Introducción al CSS”, donde explicas como enlazar a una hoja de estilo externa, en la pagina 50 pones:

    – >
    y debería ser:
    – >

    Saludos y felicitaciones por el manual.

    Comentario de Sebastian — 20-03-07 4:19 pm

  51. Bueno, parece que esto no es lo mío, ahí donde ya dos veces intente decirte dice: “rel=”hoja_estilo.css”" en ves de “href=”hoja_estilo.css”".
    Bueno, ahora si. Disculpa los dos comentarios extra.

    Comentario de Sebastian — 20-03-07 4:23 pm

  52. Gracias y felicidades por el manual, aparte de aprender “te partes” el culo con las “frikadas” que contiene ;D Y gracias también a chavalina, otra super “friki” (aunque no tanto como tu, BenKo), que ha hecho que descubra este sitio y este manual…

    Besicos!

    Comentario de jazzteliano — 26-03-07 4:10 pm

  53. La verdad es que este tutorial lo bajo cada vez que necesito recordar algo en especifico, se los recomiendo a todos aquellos que comienzan e inclusive a aquellos que tienen un poco de experiencia.

    Comentario de crysfel — 27-03-07 6:03 pm

  54. Los enlaces tienen tres estados: sin visitar (“normales”), hover
    (cuando pasamos el cursor del ratón por encima), activos (cuando
    hacemos clic) y visitados (cuando ya hemos ido a esa dirección).

    suponiendo que sin visitar es un estado tal como explicas, yo cuento 4 no 3 XD

    Comentario de felixjet — 16-04-07 5:03 pm

  55. Felicitaciones!!! Muy bueno el manual, me sirvió de mucho. Está muy bien escrito escrito y con sentido del humor (fundamental). Gracias.

    Comentario de Bato — 18-04-07 11:38 am

  56. No se si fer-ho per aquí o per correu-e. A la plana 50 (fulla 52) escrius :

    i em sembla que el primer rel hauria de ser href. :)

    Tot lo altre m’ha encantat. :)

    Comentario de Potti — 05-05-07 8:29 am

  57. epa, el que escrius és :

    Comentario de Potti — 05-05-07 8:30 am

  58. …. ni cas ^^!

    Bé, és quan expliques com fer referència al arxiu css des de l’Html. escrius rel=arxiu.css quan hauria de ser href. :

    Comentario de Potti — 05-05-07 8:31 am

  59. Potti: Sí, és una errata que he de corregir. Gràcies :)

    Comentario de BenKo — 05-05-07 3:40 pm

  60. De res dona. Hem comformo amb un % petit del que treguis de benefici amb aquest tutorial… :)

    Comentario de Potti — 06-05-07 2:12 pm

  61. Que bruto ehh…La verdad un muy buen tutorial para los que andamos empezando apenassssSS en esto, anod checando y tienes muchisima informacion muy util, en especial este manual me ha refrescado la memoria, seguire checando para ver que mas informacion tengas, espero encontrar algo de cakePhp, que es en lo que ando metido..bueno pues de nuevo…excelente pagina… Saludos desde Mexico

    Comentario de Juanillo — 14-06-07 3:22 am

  62. Hola BenKo, solamente para darte las gracias por tu excelente manual sobre XHTML y CSS, soy un novato diseñando webs y me sirve muchísimo. ¿Puedo colocar un enlace en mis futuras webs a esta página u otra que me indiques?
    El saludo de un peruano desde Barna para la “waiki” Belen, (waiki= herman@ en la senda del espíritu).

    Comentario de wilmer dominguez — 02-08-07 4:42 pm

  63. Claro que puedes enlazar a esta página, no hacía falta ni preguntar ;)

    Comentario de BenKo — 02-08-07 8:21 pm

  64. Muy buen aporte.. mis felicitaciones por adelantado.. (aun no he podido leerlo) pero muchas gracias…
    saludos

    Comentario de axion — 08-01-08 4:39 pm

  65. Hola.

    Muchas gracias por tu tuorial, ideal para los que no tenemos ni idea de esto.

    ¡ Voy a meterle mano al blog !

    Saludos ilicitanos.

    Comentario de David I — 12-02-08 12:42 pm

  66. gracias benko! amanduki me ha obligado ha agradecerte esta guia que me va a servir para mucho :P !

    pd: friki!

    pd2: yo tambien D:

    Comentario de garioncete — 02-10-08 8:54 am

  67. [...] El otro día estuve la mayor parte del tiempo en el trabajo luchando contra la soberbia y prácticas monopolísticas de Microsoft, que sumadas a la ignorancia de la mayor parte de los usuarios de Internet sobre cómo funcionan los navegadores hace que siga siendo necesario programar un página Web para que se vea en el maldito Internet Explorer 6. Tal es la malignidad el IE6 que melonian me lo presentó una vez como IE 666, y en un manual estupendo aparece como “Quién-tu-sabes” y sobrenombres por el estilo. Por cierto, a melonian lo he recomendado muchas veces, pero este manual me lo encontré de chiripa y es una delicia. Incluso si te importa un carajo cómo pasar de HTML a XHTML, a poco friki que seas te va a encantar por cómo está escrito, las citas y los ejemplos que usa. Yo me reí un montón, y además me fue útil. Así que apoyemos a la gente chachi y dejemos el enlace a este manual escrito por BenKo y que podéis descargar aquí. [...]

    Pingback de ¿En qué piensa un calcetín? — 21-02-09 12:33 am

  68. Ja es la tercer cop que m’el llegeixo. El primer fa uns 2 anys. Es adictiu. Tens un sentit del humor genial. Arrivaràs lluny.

    Merçi, Ton

    Comentario de Ton — 27-02-09 12:40 pm

  69. Me gusta mucho tu tutorial, y sobre todo, lo personalmente que esta escrito. Como comentario, que abras el abanico de ejemplos (no solo StarWars) pues ganaras audiencia, y en cuanto al contenido, que puedes hacer una version superior, es un paso+ y otro publico.
    Tienes gancho escribiendo, desde luego. No lo dejes. Y una sugerencia a tu helado perfecto:
    -el chocolate que sea negro con pepitas de pimienta, y el limon espolvoreado con canela.
    Salu2, Eugenio.

    Comentario de Eugenio del Rey M. — 17-05-09 10:36 am

  70. Gracias por tu manual, te has concentrado en lo importante y es muy divertido de leer. Me recuerda el libro con el que aprendi C hace mucho, mucho tiempo…….5 años despues de que los rebeldes fueran ayudados por unos repelentes ositos de peluche (El retorno del Jedi).
    Es verdad es mucho mejor que el tostón infame que encontre en el w3c hace unos años.
    ¡Salud!

    Comentario de Pascal — 19-08-09 11:17 am

  71. Un pequeño bug, en la pagina 50 “” no seria rel sino href

    Comentario de Ellyster — 27-08-09 12:55 pm

  72. He estado revisando el tutorial,muy bien. Sólo un detalle. En la página 11, la plantilla que pones es distinta de la que aparecía en la versión de sacaste en 2004, no hay problema si el DOCTYPE va primero que la declaración de XML?
    En la versión de 2004 estaba así:

    y ahora aparece cambiada:

    Además de que se dobletea “lang”

    Saludos.

    Comentario de Beetho — 11-09-09 11:07 pm

  73. [...] El otro día estuve la mayor parte del tiempo en el trabajo luchando contra la soberbia y prácticas monopolísticas de Microsoft, que sumadas a la ignorancia de la mayor parte de los usuarios de Internet sobre cómo funcionan los navegadores hace que siga siendo necesario programar un página Web para que se vea en el maldito Internet Explorer 6. Tal es la malignidad el IE6 que melonian me lo presentó una vez como IE 666, y en un manual estupendo aparece como Quién-tu-sabes y sobrenombres por el estilo. Por cierto, a melonian lo he recomendado muchas veces, pero este manual me lo encontré de chiripa y es una delicia. Incluso si te importa un carajo cómo pasar de HTML a XHTML, a poco friki que seas te va a encantar por cómo está escrito, las citas y los ejemplos que usa. Yo me reí un montón, y además me fue útil. Así que apoyemos a la gente chachi y dejemos el enlace a este manual escrito por BenKo y que podéis descargar aquí. [...]

    Pingback de Cómo editar en CSS para Firefox e IE | ¿En qué piensa un calcetín? — 07-10-09 9:03 am

Si quieres hacer un trackback, usa esta TrackBack URI

Escribe un comentario

Los párrafos y saltos de línea se ponen de forma automática. La dirección de e-mail no se mostrará nunca. Se permiten las siguientes etiquetas XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

(requerido)

(requerido)