tag:blogger.com,1999:blog-156759102024-03-08T01:02:58.444+01:00abc WebRecursos y tutoriales para desarrolladores web. Trucos y comentarios sobre Linux y "otros" sistemas operativos.Unknownnoreply@blogger.comBlogger36125tag:blogger.com,1999:blog-15675910.post-42540699055321036072015-12-23T12:57:00.000+01:002015-12-23T12:59:17.536+01:00¿El despertar de OpenClinic?<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh0kdgUZxJfuEUkEsOsBKD1dD0HPnIg6hHxrjDWNl-bmEH7iqPP5-UzvfaX46eq6D_k1TcfohC1M5-ZX9TQA-MSVOsJIQny9uT7c8Wr0kpFDZ8PKAWVt6iKXxvX8Ml0_I482d7/s1600/openclinic_advanced_search.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh0kdgUZxJfuEUkEsOsBKD1dD0HPnIg6hHxrjDWNl-bmEH7iqPP5-UzvfaX46eq6D_k1TcfohC1M5-ZX9TQA-MSVOsJIQny9uT7c8Wr0kpFDZ8PKAWVt6iKXxvX8Ml0_I482d7/s320/openclinic_advanced_search.png" /></a></div>
<p>Fue a principios del año 2014 cuando la idea de reescribir <a href="http://openclinic.sourceforge.net/">OpenClinic</a> en un framework de programación empezó a retumbar con más fuerza en mi cabeza. Por aquel entonces, estaba dedicando mucho tiempo a aprender Django para el <a href="http://www.migasfree.org/">proyecto migasfree</a> y quería explorar otros aspectos de esta herramienta. Una vez más, eché mano de mi antiguo proyecto para que me sirviera de conejillo de indias en mis experimentos.</p>
<p>Esos experimentos duraron alrededor de un mes, lo necesario para indagar sobre <a href="https://ccbv.co.uk/">las clases de vistas genéricas de Django</a>, y volví a meter el juguete en el cajón de los recuerdos. Sólo llegué a terminar muy por encima el bosquejo del nuevo modelo de datos y las operaciones básicas sobre uno de los modelos. También me entretuve en descubrir componentes de terceros para simplificar algunas de las tareas (como <a href="http://django-el-pagination.readthedocs.org/">paginaciones de elementos</a>, <a href="http://django-crispy-forms.readthedocs.org/">construcción de formularios</a> y un <a href="https://django-grappelli.readthedocs.org/">nuevo interfaz de administración</a>).</p>
<p>El tiempo ha vuelto a pasar, más rápido de lo que a uno le gustaría... y <a href="http://abcweb.blogspot.com.es/2013/02/reflexiones-de-un-desarrollador-web.html">me paré a pensar sobre algo que escribí hace ya un par de años</a>. Sobre la idea de renovar OpenClinic en otro lenguaje, con un <em lang="en-US">framework</em> que ayudara a concentrarse en la lógica de negocio... pero sobre todas las cosas, en publicar en abierto un proyecto desde el inicio. Tengo que reconocer que sigue siendo una de mis asignaturas pendientes y que he vuelto a caer en la falacia de querer que estuviera mínimamente decente antes de subirlo a un <a href="https://github.com/jact/openclinic-in-django">repositorio público</a>. Si sirve alguna excusa, ni siquiera tenía claro el nombre del proyecto, por lo que estas dos últimas semanas, con energías renovadas (y gracias al tiempo libre extra), me he concentrado en construir la funcionalidad básica y dejar la elección del nombre para última hora.</p>
<p>Sí, habéis leído bien el tiempo que me ha costado realizar la tarea: dos semanas. Eso ha sido gracias a dos elementos cruciales:</p>
<ol>
<li>la experiencia acumulada en <a href="https://www.djangoproject.com/">Django</a></li>
<li>la facilidad que otorga este <em lang="en-US">framework</em> para realizar tareas básicas</li>
</ol>
<p>Pero, aunque el resultado final está casi a la altura del proyecto original, esto no significa un nuevo resurgir de la aplicación. Simplemente he sacado de mi cabeza una tarea pendiente, he sentado los mimbres de lo que podría ser la evolución de la idea (si alguien contribuye con código adicional al repositorio, lo revisaré encantado) y he constatado la importancia de integrar nuevo código a partir de librerías y proyectos de terceros. Como dije en su día, al no tener colaboración directa de profesionales de la medicina, no se puede probar la eficacia de la idea, ni ampliarla en la dirección adecuada (pese a las más de 34.500 descargas del original, el <em lang="en-US">feedback</em> obtenido no es significativo).</p>
<p>Quito de mi mente esa idea que resurgía cada poco de reorientar el proyecto, con el objetivo de dejar sitio libre para otros nuevos planes. Y la quito definitivamente, volcando el código en un <a href="https://github.com/jact/openclinic-in-django">repositorio público</a>. Como dijo Linus Torvalds, no hay mejor copia de seguridad que publicar las cosas para todo el mundo.</p>
<p>He cambiado el lenguaje de programación a <a href="https://www.python.org/">Python</a>, el cual me parece mucho más boyante y con <a href="http://eev.ee/blog/2012/04/09/php-a-fractal-of-bad-design/">mejores cimientos que PHP</a>. Y me he decantado por Django por ser un proyecto con mucho recorrido y en el que ya tenía muchas horas de vuelo. Gracias a esta herramienta, se ha eliminado mucho código repetido y no ha hecho falta (casi nunca hace falta si se busca lo suficiente) reinventar el fuego ni la rueda.</p>
<p>Django tiene una comunidad muy activa y esto también se demuestra en la <a href="https://www.djangopackages.com/">cantidad de aplicaciones que existen</a>. Para cada funcionalidad que quería añadir, he buscado una aplicación ya existente que la cubriera. Alguna de ellas es tan reciente que aún tiene errores en el código. Otra, al no estar demasiado actualizada, no me he permitido usar la última versión liberada de Django (la 1.9). Es el precio que se debe pagar por código que en principio no controlas, pero las ventajas, para mí, son más importantes que estos inconvenientes. Decía que en un principio no controlas ese código... pero en realidad no es así. Al apoyarte en otros programas que también son <span lang="en-US">software</span> libre, puedes mandar las mejoras pertinentes para que todos nos beneficiemos. Además, el currículum personal no sólo se alimenta de contribuciones propias sino que también son muy importantes las colaboraciones se que hacen en proyectos de otros. Diría que enriquecen todavía más.</p>
<p>Resumiendo, el <a href="https://github.com/jact/openclinic-in-django">"nuevo" OpenClinic</a> sigue manteniendo la esencia de la simplicidad (incluso se han recortado elementos superfluos respecto al original), pero no está recomendado para su uso en producción. No se ha pensado en cómo facilitar la instalación para el público en general, por ejemplo. Es sólo una pieza de código para que sirva de ejemplo para otros. Y lo mejor es que si lo probáis, sea a través de un <a href="https://virtualenv.readthedocs.org/">entorno virtual</a> para que no cause problemas con otras cosas que tengáis instaladas.</p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2jBuEFef8J16iCammi8iIkX31giwA1uweDNLVYpBThltFCUrgX1Ri0g2K6eRhglJsoZcmipJaVS7_jqYwpVL0HMJrdNXypNFnNm7Q-vouYXDyiyQ75eh-TKi_G5pbtkrYUpkw/s1600/openclinic_medical_problem.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2jBuEFef8J16iCammi8iIkX31giwA1uweDNLVYpBThltFCUrgX1Ri0g2K6eRhglJsoZcmipJaVS7_jqYwpVL0HMJrdNXypNFnNm7Q-vouYXDyiyQ75eh-TKi_G5pbtkrYUpkw/s320/openclinic_medical_problem.png" /></a></div>Unknownnoreply@blogger.com2tag:blogger.com,1999:blog-15675910.post-26051604317540253432014-12-31T12:20:00.003+01:002015-12-23T10:46:27.038+01:00El software libre y yo: dos caras de la misma moneda<p>El presente artículo es el original que, posteriormente, se tradujo y se adaptó en lo que sería <a href="http://opensource.com/life/13/5/migasfree-open-story">Migasfree developer journeys from graduation to open source career</a>, un encargo de <a href="http://about.me/jwike">Jean Wike</a> para la publicación <em lang="en-US">online</em> <strong>opensource.com</strong>. Tan solo he actualizado algún enlace que había quedado desfasado.</p>
<hr />
<p>Desde que era bastante joven, siempre me ha atraído la programación. Y la mejor forma de aprender algo es estudiar cómo lo hacen otros, para luego aplicarlo a lo que uno hace.</p>
<p>En un principio, cuando lo único que interesa es aprender, el tema de las licencias queda bastante alejado de lo que uno quiere saber. En mi pequeño ecosistema de estudiante (en el que todavía no existía Internet), era práctica común compartir el código fuente de los programas que se hacían. Era lo normal, porque entendíamos que así podíamos aprender unos de otros. Pero había algunas personas recelosas (no muchas), que no seguían esas reglas tácitas. Nunca logré comprender porqué si ellas sí se aprovechaban de conocimientos e ideas de otros, no colaboraban con los demás enseñando sus propios programas.</p>
<p>Después, cuando uno se va haciendo más mayor y empieza a descubrir el mundo empresarial, comienza a comprender el intrincado sistema de leyes de patentes, propiedad intelectual y demás trabas que unos a otros se van poniendo en el complicado mundo de los negocios. Muchas veces he pensado que sin tantos obstáculos (todos ellos artificiales a la naturaleza humana), el avance de la tecnología (entre otros muchos campos) podría haber sido mucho más rápido y ético en los resultados obtenidos. Pero la afirmación de que la información es poder, sigue pesando mucho más que los beneficios a largo plazo para todos.</p>
<p>Por suerte, también descubrí que aquellas ideas que había tenido años atrás, eran compartidas por muchas otras personas. Gracias a ellos, hoy puedo estar aquí y escribir sobre mis experiencias. Soy quien soy por la suma de pequeñas partes y hay muchas más que han sido legadas por otros, que mías originales. Y es así para todos, porque así es como hemos ido evolucionando como especie.</p>
<p>Cuando iba a terminar mi carrera universitaria, tenía que realizar un proyecto completo de software para finalizar mis estudios. Me pareció algo completamente natural que dicho proyecto fuera software libre, pero no me imaginé que fuera el primer proyecto de estas características en mi pequeña universidad, ya que no se acomodaba a las normas que se estipulaban en los documentos que tenía que generar. Fue triste descubrir que no se fomentaran proyectos e ideas sobre software libre en mi círculo universitario. Espero que con los años, haya cambiado esta situación.</p>
<p>Afortunadamente, las trabas burocráticas que encontré para realizar mi proyecto, desaparecieron en el terreno técnico. Decidí enfocar la idea de la aplicación a la web, pero no tenía todavía formación adquirida en este área. Gracias al software libre, rápidamente pude aprender de otro proyecto, llamado <a href="http://openbiblio.sourceforge.net/">OpenBiblio</a>, para hacer el mío: <a href="http://openclinic.sourceforge.net/">OpenClinic</a>. Al principio, como se puede apreciar ya del nombre, eran programas con el código muy parecido, aunque sus ámbitos de aplicación eran muy diferentes. Pero conforme pasó el tiempo y puede aprender conceptos de otros proyectos, empezaron a ser más notables las diferencias en la codificación. Sin embargo el valor que tuvo para mí haber aprendido conceptos sobre la programación en web de este proyecto, sigue siendo incalculable. Desde luego, no lo hubiera hecho en tan poco tiempo como lo hice.</p>
<p>Otro de los proyectos que me sirvieron para publicar <strong>OpenClinic</strong>, fue <a href="http://galleryproject.org/">Gallery</a>. De él adapté la forma en que manejaban las traducciones para cargar el idioma adecuado en la aplicación. Colaboré como traductor de la aplicación al español (en la versión 1) durante unos meses y esa experiencia me sirvió para aprender cómo funcionaba un proyecto basado en comunidad.</p>
<p>Una vez acabada mi etapa estudiantil, tocaba empezar la etapa laboral. La comencé haciendo prácticas en un par de empresas que basaban su negocio en hacer software privativo. Y las herramientas que se usaban para crearlo eran también privativas. Hace 10 años, esta era la situación habitual de las empresas de software de mi ciudad. No existían otras opciones. No se habían probado otras opciones...</p>
<p>Sin embargo, en la tercera empresa donde comencé a realizar prácticas laborales, había algo diferente. Parte del modelo de negocio seguía estando basado en software privativo, pero muchas de las herramientas que podía usar para mi trabajo, eran software libre (<a href="http://php.net/">PHP</a>, <a href="https://www.python.org/">Python</a>, <a href="http://es.wikipedia.org/wiki/CVS">CVS</a>, <a href="http://www.bugzilla.org/">Bugzilla</a>, <a href="https://wordpress.org/">Wordpress</a>, <a href="https://www.mediawiki.org/">Mediawiki</a>, <a href="http://getfirefox.com/">Firefox</a>, ...). Ni que decir tiene que para mí era un entorno mucho más atractivo que los anteriores, y estuve allí, ya como empleado, durante los siguientes 5 años. Esta situación es algo cada vez más normal en las empresas (y más ahora, en estos tiempos de crisis): utilizan herramientas libres para sus labores aunque el resultado no sea software libre.</p>
<p>Tras esos años como programador web, cambié de aires y de tareas. Pasé a trabajar en la <a href="http://www.zaragoza.es/">administración pública de mi ciudad</a> en un <a href="http://www.slideshare.net/eduromo/azlinuxwindows2linux-en-redes">proyecto de implantación de software libre en los equipos de trabajo de los empleados municipales</a>. Parte de mi actividad consiste en adaptar Linux a las características de los empleados de la organización. A esta distribución derivada la llamamos <a href="http://zaragozaciudad.net/azlinux/">AZLinux</a>.</p>
<p>Pero este nuevo trabajo, me ha permitido ir un paso más allá en mi relación con el software libre, ya que he podido colaborar en varios eventos de promoción (<a href="https://speakerdeck.com/jact/software-libre-en-el-ayuntamiento-de-zaragoza">Gnome 3.0 Marketing Hackfest</a>, <a href="https://speakerdeck.com/jact/demostracion-de-empaquetado-en-rpm-y-distribucion-de-software-con-migasfree">Libre Software World Conference 2011</a>, <a href="https://speakerdeck.com/jact/opendnie-y-ceres-en-azlinux">OpenDNIe Hackfest</a>, <a href="http://softwareybarralibre.org/?q=blogs/jact">Software & Barra Libre</a>) y me he vuelto a embarcar en otro proyecto de software: <a href="http://www.migasfree.org/">migasfree</a>. Esta aplicación cliente/servidor nace para cubrir una necesidad en nuestro trabajo diario de <a href="https://speakerdeck.com/jact/administrando-tu-parque-de-ordenadores-linux-con-migasfree">administración de los equipos con Linux</a>, pero estamos adaptándola para que también se pueda usar en otros entornos.</p>
<p>Otro aspecto, todavía más importante, es la calidad de las personas que he ido conociendo en este mundillo. La lista sería muy larga, por lo que sólo nombraré a una pequeña, pero selecta parte:</p>
<ul>
<li><a href="http://gsyc.escet.urjc.es/~jgb/">Jesús González Barahona</a>, profesor, estudioso y evangelizador de software libre. Empecé a leer sus artículos cuando era estudiante y luego he podido conocerlo personalmente en diversos eventos. Siempre me ha servido de inspiración.</li>
<li><a href="https://twitter.com/fontanon">José Félix Ontañón</a>, todoterreno donde los haya. Entre otros proyectos importantes, colabora en <a href="http://opendatasevilla.org/">Opendata Sevilla</a>.</li>
<li><a href="https://www.linkedin.com/in/juanje">Juanje Ojeda Croissier</a>, lleva años acercando el software libre a las personas. Ha trabajado en proyectos tan importantes como el desarrollo de <a href="http://www.guadalinex.org/">Guadalinex</a> y <a href="http://www.guadalinfo.es/">Guadalinfo</a>.</li>
<li><a href="http://ramonramon.es">Ramón Ramón Sánchez</a>, fundador de <a href="http://iniciativafocus.org/">Iniciativa Focus</a>, vicepresidente de <a href="http://hispalinux.es/">Hispalinux</a> y consultor internacional TIC en latinoamérica, serían 3 vertientes a destacar en su larga trayectoria.</li>
<li><a href="http://web.dit.upm.es/~jantonio/">Juan Antonio Martínez</a>, profesor de universidad, se ha empeñado en conseguir que nuestro <a href="http://opendnie.cenatic.es/">documento digital de identificación nacional funcione en entornos linux</a>.</li>
<li><a href="https://twitter.com/toscalix">Agustín Benito Bethencourt</a>, miembro de <a href="http://www.kde-espana.org/">KDE España</a>, también ha trabajado en <a href="http://www.opensuse.org/">openSUSE</a>, dinamizando su comunidad.</li>
<li><a href="https://www.linkedin.com/in/icorreas">Ignacio Correas</a>, fundador de <a href="http://www.zentyal.org/">Zentyal</a>, ha sido también presidente de <a href="http://cesla.info/">CESLA</a> y es miembro del consejo asesor de <a href="http://www.cenatic.es/">CENATIC</a>.</li>
<li><a href="https://www.linkedin.com/in/eduromo">Eduardo Romero Moreno</a>. Aunque la pasión por el software libre le ha llegado un poco tarde, ahora es toda una apisonadora en este tema. Es el coordinador del <a href="http://zaragozaciudad.net/azlinux/">proyecto de migración a software libre que estamos llevando a cabo en el Ayuntamiento de Zaragoza</a>.</li>
<li><a href="https://twitter.com/albertogacias">Alberto Gacías Mateo</a>, es mi compañero de fatigas. Él ve la profundidad del bosque mientras yo me peleo con los árboles. Ideólogo y opinólogo del grupo de software libre del Ayuntamiento de Zaragoza, es también el creador de <a href="http://www.migasfree.org/">migasfree</a>.</li>
</ul>
<p>Resumiendo, el software libre me ha ido definiendo como persona tanto en el aspecto profesional como en el personal, y se ha convertido en el mejor de los <em>currículum vítae</em> posibles. Si publicas tu trabajo, cualquiera puede fijarse en él y puede convertirse en tu mejor tarjeta de presentación. En los últimos años, dos grandes empresas (una de ámbito nacional y otra internacional), han contactado conmigo gracias al hecho de tener liberados proyectos de software libre en Internet. Desde luego, esto nunca hubiera sido posible si me hubiera dedicado a realizar sólo software privativo.</p>
<p>Pero lo mejor del software libre y de todo lo que le rodea, no es todo lo que he aprendido, sino todo lo que me queda por aprender.</p>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-15675910.post-81239371514799946742013-02-10T16:17:00.000+01:002013-02-28T17:26:49.501+01:00Reflexiones de un desarrollador web<p>Hay una <a href="http://www.youtube.com/watch?v=QfhEKpFiepM">canción de Jorge Drexler</a> que dice: "Cada uno da lo que recibe y luego recibe lo que da, nada es más simple". Sin embargo, cuando uno está en el mundo del software libre, se suele recibir mucho más de lo que se da.</p>
<p>Eso es lo que me ha pasado con un proyecto que inicié hace ya más de 10 años y con el que he ido adquiriendo algunas deudas pendientes. Una de ellas es el presente artículo.</p>
<p><a href="http://openclinic.sourceforge.net/">OpenClinic</a> es el proyecto con el que desembarqué en el proceloso mundo web y en el cautivador desarrollo de software libre. Me sirvió para acabar mis estudios universitarios como <acronym title="Proyecto Fin de Carrera">PFC</acronym> y me abrió las puertas para conseguir mi primer trabajo a jornada completa.</p>
<h4>Desarrollo web</h4>
<p>OpenClinic fue siempre un campo de juegos (entiéndase juego por aprendizaje) y pruebas para mí. Y por eso equivoqué el propósito de la aplicación. En lugar de atraer o buscar profesionales del espectro médico para evolucionar el proyecto, me concentré en los aspectos técnicos de programación para conseguir una especie de <em lang="en-US">framework</em> propio que me sirviera para hacer otras aplicaciones.</p>
<p>El año 2003, cuando ya tenía una versión bastante estable del programa, era una época ideal para haber explotado la idea. Era su momento, pero no supe ver cómo sacarle partido. Actualmente ya es demasiado tarde. Hay otros proyectos como <a href="http://health.gnu.org/">Gnu Health</a>, <a href="http://www.open-emr.org/">OpenEMR</a> u <a href="http://sourceforge.net/projects/open-clinic/">OpenClinic GA</a> (sí, ¡me han plagiado el nombre ;)!, era inevitable) que ya han cubierto el espectro con buenos productos.</p>
<p>Pero algo que conserva OpenClinic es su sencillez y sus escasas pretensiones. Supongo que por eso, a lo largo de todo este tiempo, la gente lo ha seguido descargando y, de vez en cuando, alguien me escribía acerca del estado del proyecto. Pero últimamente estaba recibiendo demasiadas quejas sobre problemas en la instalación. Esa ha sido la principal razón por la que 8 años después, he liberado una nueva versión.</p>
<p>La historia de OpenClinic ha ido muy de la mano de la historia de PHP. Cuando tuve la idea del proyecto (en la que ayudó mucho a modelarla <a href="http://www.linkedin.com/in/cazcarra">Emilio Cazcarra</a>) y de encaminarlo hacia la web, no tenía ni la menor idea de qué tecnologías usar. Descubrí Perl y empecé a estudiarlo cuando, casi por casualidad, me encontré con PHP. En el año 2002 era uno de los proyectos de moda y me convenció desde el principio como lenguaje para el <em lang="en-US">backend</em>. Aunque la primera versión de PHP4 se publicó en el año 2000, era la versión 3 la que por entonces predominaba tanto en aplicaciones como servidores de hosting.</p>
<p>Cuando tuve que decidirme por una de ellas, opté por la más nueva: PHP4. Ya que tenía que aprender un nuevo lenguaje de programación, lo más sensato era estudiar la última versión. Para cuando estuviera en condiciones de terminar la aplicación, al ritmo que se desarrollaba PHP, habría una versión muy estable del intérprete. Y no me equivoqué.</p>
<p>Pero hacia mediados de 2004, liberé OpenClinic 0.7 (eternamente <a href="http://es.wikipedia.org/wiki/Fases_del_desarrollo_de_software">beta</a>) y ahí terminé su evolución. Como he dicho antes, no supe encaminar la adquisición de nuevas características al programa y por eso me concentré en aspectos más técnicos a partir de entonces. Tal vez por eso, aunque seguía con el desarrollo no veía razones de peso para publicar nuevas versiones (no aportaban nada nuevo en cuanto a funcionalidad para los usuarios).</p>
<p>En aquel mismo año, 2004, nació PHP5. Al contrario que con el cambio de PHP3 a PHP4, que fue rápidamente adoptado por los proyectos más importantes que usaban PHP y por los servidores de hosting, el cambio a PHP5 fue traumático y tortuoso para todos. A nivel personal, no lo empecé a usar hasta que me interesé por <a href="http://framework.zend.com/">Zend Framework</a> <a href="http://abcweb.blogspot.com.es/2007/12/cmo-instalar-wapp-ii.html">hacia el año 2007</a> (¡nada menos que 3 años después de la primera versión de PHP5!).</p>
<p>Pasados los años, OpenClinic adolecía de dos graves problemas:</p>
<ul>
<li>No estar basado en PHP5 (que es la versión actual, desde hace muchos años, del lenguaje).</li>
<li>Y el más grave: no estar programado en un framework de desarrollo.</li>
</ul>
<p>Adaptar el código a PHP5 (en cuanto a sintaxis, no en metodología) no ha sido muy costoso. El problema radicaba en que no era muy sencillo alojar en un mismo sitio web aplicaciones con PHP4 y PHP5.</p>
<p>Este último fue un grave error de concepto. Quería convertir OpenClinic en un <em lang="en-US">framework</em>. En aquella época (la del <em lang="en-US">PHP Far West</em>), cuando el lenguaje recibía constantes críticas por <a href="http://es.wikipedia.org/wiki/C%C3%B3digo_spaghetti">no ser demasiado estricto en sus formas</a>, cada aplicación de cierta envergadura estaba hecha en un <em lang="en-US">framework</em> propio para intentar poner algo de orden en el caos. No es extraño que también cayera en ese error (<a href="http://es.wikipedia.org/wiki/No_te_repitas">intentar reinventar la rueda</a>) pero no me di cuenta a tiempo y es algo que ha perjudicado al proyecto. Tanto que ha firmado su certificado de defunción. Si hubiera estado basado en un <em lang="en-US">framework</em>, entre otros aspectos positivos, habría sido más fácil que otras personas hubieran contribuido añadiendo funcionalidades.</p>
<h4>Software libre</h4>
<p>Pero no todo ha sido tan negativo. De hecho, el proyecto, como he empezado diciendo, me ha dado mucho más de lo que le he dado. Y me lo ha podido dar porque es software libre y porque está basado en tecnologías libres:</p>
<ul>
<li><a href="http://www.php.net/">PHP</a> como lenguaje de <em lang="en-US">backend</em>,</li>
<li><a href="http://www.w3.org/community/webed/wiki/HTML">HTML</a> como lenguaje de marcado,</li>
<li><a href="http://www.w3.org/Style/CSS/">CSS</a> para la capa de diseño,</li>
<li><a href="http://en.wikipedia.org/wiki/JavaScript_syntax">JavaScript</a> para la capa de interacción,</li>
<li><a href="http://www.mysql.com/products/community/">MySQL</a> como servidor de base de datos (aunque ha ido cambiando su <em lang="en-US">status</em> a lo largo del tiempo...),</li>
<li><a href="http://www.gnu.org/software/gettext/">gettext</a> para las traducciones,</li>
<li>y <a href="http://docbook.org/">Docbook</a> para la documentación.</li>
</ul>
<p>Para aprender todas estas tecnologías sólo he tenido que invertir tiempo. Los recursos están disponibles de forma libre (y gratuitos muchos de ellos). Y los <a href="http://abcweb.blogspot.com.es/2011/03/barra-libre-de-software.html">beneficios obtenidos siguen siendo constantes y consistentes</a>. Además, ha habido algunas <a href="http://openclinic.sourceforge.net/about.php">personas que han podido contribuir</a>, generando traducciones y temas CSS para la aplicación.</p>
<p>Y pese a los problemas mencionados, las críticas han sido bastante satisfactorias. La aplicación ha tenido unas 20.000 descargas y de vez en cuando me encontraba algún dominio en Internet con el programa funcionando. También me han escrito personas que lo han estado usando en <acronym title="Organizaciones No Gubernamentales">ONGs</acronym> en países en vías de desarrollo. Todo lo cual contribuye en una recompensa personal inmensa. Al fin y al cabo, uno desarrolla software para que las personas lo usen.</p>
<h4>Conclusiones</h4>
<p>A día de hoy no haría las cosas como las hice, pero eso lo puedo decir ahora porque las he hecho de esta manera. Uno aprende o sucumbe, no hay término medio.</p>
<p>Si algún vez vuelvo a rehacer la aplicación (no sería la primera vez...):</p>
<ul>
<li>lo haría con un <em lang="en-US">framework</em> de desarrollo,</li>
<li>lo haría en un repositorio público de código desde el principio,</li>
<li>independizando totalmente el motor de base de datos del código de la aplicación,</li>
<li>pediría abiertamente ayuda a la gente para que colaborara, incluso dejando la dirección del proyecto a otros que se involucraran más.</li>
</ul>
<p>Mientras tanto, sigo dedicando mis esfuerzos a otros proyectos de software libre. Uno de ellos es <a href="http://migasfree.org/">migasfree</a> y, aunque tiene muchas cosas que mejorar, ya he empezado a poner en práctica mis conclusiones.</p>
<h4>Actualización: 2013-02-23</h4>
<p><a href="http://sourceforge.net/blog/reflections-from-the-openclinic-project/">Traducción del presente artículo al inglés</a>, publicado amablemente por <a href="http://www.linkedin.com/in/rcbowen">Rich Bowen</a>.</p>
Unknownnoreply@blogger.com2tag:blogger.com,1999:blog-15675910.post-35935430080003707312012-06-04T18:32:00.000+02:002012-06-04T18:32:23.401+02:00Cómo cambiar el menú de aplicaciones de Gnome 3<p>Como primera opción, se podría modificar el menú nuestro usuario con la aplicación <a href="http://es.wikipedia.org/wiki/Alacarte">alacarte</a>. Si tenemos más usuarios en la máquina, podemos copiar los ficheros resultantes en el resto de perfiles. Es un método más o menos sencillo y que, si sólo tenemos una máquina que administrar, puede ser suficiente.</p>
<p>Pero si tenemos que administrar varios ordenadores y queremos obtener una solución algo más limpia y fácilmente replicable, tenemos que leer con atención la <a href="http://standards.freedesktop.org/menu-spec/menu-spec-latest.html">especificación de menús de escritorio</a>.</p>
<p>En dicha especificación se advierte que hay un fichero principal, que suele estar en la ruta <code>/etc/xdg/menus/applications.menu</code> y que se puede extender añadiendo más ficheros en <code>/etc/xdg/menus/applications-merged/</code>. Esto conlleva un gran avance respecto a la primera opción, ya que sólo tenemos que preocuparnos de una única ubicación global por máquina y parece que no tenemos que modificar ningún fichero del sistema. Y digo parece, porque si queremos añadir aplicaciones a los menús sí que sirve, pero si lo que queremos es quitar (u ocultar) lanzadores o categorías, puede ser bastante complicado (por no decir, en algunos casos, imposible). La razón es que en el fichero <code>applications.menu</code>, se añaden primero las modificaciones de los archivos que se hayan puesto en <code>applications-merged/</code> y luego se sobrescriben con las reglas del propio <code>applications.menu</code>.</p>
<p>Pero si seguimos leyendo con atención la especificación, veremos que existe la solución perfecta. No hace falta escribir complicadas reglas que no interfieran con las del sistema (<code>applications.menu</code>) ni tener que modificar el fichero de configuración (estas modificaciones podrían incluso perderse si se actualiza el paquete que contiene el archivo: <code>gnome-menus</code>).</p>
<p>Se trata de hacer uso de la variable <code>XDG_MENU_PREFIX</code>. Sólo tenemos que darle un valor (por defecto es vacío para que coincida con la ruta del fichero <code>applications.menu</code>) y crear el fichero con las modificaciones del menú.</p>
<p>Por ejemplo, se podría definir un valor para esta variable de entorno en el fichero <code>/etc/environment</code> de la forma:</p>
<pre><code>
export XDG_MENU_PREFIX="abc_web-"
</code></pre>
<p>Y después crear el fichero <code>/etc/xdg/menus/abc_web-applications.menu</code>. De este modo, ya no se analiza el archivo <code>/etc/xdg/menus/applications.menu</code>, por lo que no será necesario tener en cuenta las reglas de ese fichero, para hacer el nuestro.</p>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-15675910.post-78610708853091985522012-05-26T19:32:00.001+02:002012-05-26T19:32:55.233+02:00Control de volumen simple en Gnome 3<p>En Gnome 3, hay nuevos applets para los paneles del escritorio. También hay <a href="https://extensions.gnome.org">shell extensions</a>, que permiten añadir funcionalidades al escritorio. En uno de estos applets, el que se hace llamar <q><strong>miniaplicación completa de indicadores</strong></q>, aparece el control de volumen. Pero ya no es un simple <a href="http://en.wikipedia.org/wiki/Slider_%28computing%29" lang="en-US">slider</a> para manipular el volumen, sino que integra el control de la aplicación reproductora de audio por defecto del sistema (<a href="http://projects.gnome.org/rhythmbox/">Rhythmbox</a> en Ubuntu 12.04).</p>
<p>¿Dónde se encuentra entonces el <a href="http://en.wikipedia.org/wiki/Applet" lang="en-US">applet</a> que estaba disponible en Gnome 2? ¿Acaso ha desapararecido?</p>
<p>Para los nostálgicos de aquel control, o para los que sólo quieren el control de volumen y no el resto de indicadores del nuevo applet de Gnome 3, voy a desvelaros qué ha pasado.</p>
<p>En realidad no ha desaparecido, sino que se encuentra <q>oculto</q>. Supongo que es para promocionar el uso del nuevo (que realmente tiene una funcionalidad más completa), pero se ha perdido en personalización, ya que no es muy sencillo mostrar sólo los indicadores que nos hacen falta, de entre todos los que muestra la <q><em>miniaplicación completa de indicadores</em></q>.</p>
<p>La solución para que vuelva a mostrarse en el área de notificaciones (este área es un applet más que habrá que añadir en alguno de los paneles del escritorio) es muy sencilla. Tan sólo debemos modificar el atributo <a href="http://standards.freedesktop.org/menu-spec/latest/apb.html">OnlyShowIn</a> del fichero <code>/etc/xdg/autostart/gnome-sound-applet.desktop</code>. Debería quedar así:</p>
<pre><code>
OnlyShowIn=GNOME;
</code></pre>
<p>Si os fijáis en su valor original (<code><strong>OnlyShowIn=;</strong></code>), al estar <q>vacío</q>, no se mostraba en ninguno de los escritorios disponibles, aunque sí está preparado para iniciarse en el comienzo de la sesión gráfica (existe un lanzador en <code><a href="http://standards.freedesktop.org/autostart-spec/autostart-spec-latest.html">/etc/xdg/autostart/</a></code>).</p>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-15675910.post-83261765768475456942012-05-12T13:04:00.000+02:002012-05-12T16:40:04.436+02:00Cómo cambiar la imagen de fondo de LightDM en Ubuntu 12.04<p>Con <a href="http://www.ubuntugeek.com/simple-lightdm-manager.html">Simple LightDM Manager</a>, en Ubuntu Oneiric, podíamos personalizar el logo y la imagen de fondo de <a href="http://www.freedesktop.org/wiki/Software/LightDM">LightDM</a>. Sin embargo, la configuración del gestor de sesiones ha cambiado y ya no se realiza a través de un fichero (el archivo <code>/etc/lightdm/unity-greeter.conf</code> ha desaparecido), sino a través de <a href="http://live.gnome.org/dconf">dconf</a>. De todas formas, en el fichero <code>/etc/lightdm/lightdm.conf</code> se siguen modificando algunos parámetros del programa (como la sesión gráfica por defecto o si se muestra la lista de usuarios, por ejemplo).</p>
<p>Para empezar, vamos a escoger una imagen adecuada a la resolución de nuestro monitor. Un buen sitio para elegir es <a href="http://gnome-look.org">Gnome-Look</a>. En la sección de <em lang="en_US">wallpapers</em> hay una amplia selección donde, en cada imagen, viene documentada la resolución y la licencia de uso. En mi caso, me he decantado por <a href="http://gnome-look.org/content/show.php/Ovalized+Wallpaper?content=90211">Ovalized Wallpaper</a>. Tras descargarla, la he copiado en el directorio <code>/usr/share/backgrounds/</code> con el nombre <code>lightdm-wallpaper.jpg</code> (con el usuario <code>root</code>).</p>
<p>La posición de la caja para la elección de usuario de la máquina no se puede modificar, por lo que es mejor que no haya nada significativo en la imagen que escojamos para el fondo en dicha área. Como tampoco se puede cambiar la posición del logotipo que aparece abajo a la izquierda. Así que, si también queremos modificarlo, será mejor hacer uno de unas dimensiones parecidas al original (<code>/usr/share/unity-greeter/logo.png</code>).</p>
<p>Vamos a cambiar 2 propiedades de la configuración gráfica de LightDM: la imagen de fondo y quitar la malla (<em lang="en_US">grid</em>) que se dibuja por defecto. Estas propiedades se cambian en el esquema <code>com.canonical.unity-greeter</code> de <code>dconf</code>. Se podrían cambiar a través de la utilidad <code>dconf-editor</code> (que habría que instalar porque no viene por defecto), pero teniendo en cuenta que deberíamos hacerlo con el usuario <code>lightdm</code>. No serviría modificarlas con nuestro propio usuario, ya que LightDM se ejecuta con su propio usuario y hace sólo caso a los valores de su configuración.</p>
<p>Voy a explicar entonces un método alternativo y en el que sólo es necesario un intérprete de comandos y un editor de texto. La receta consiste en modificar globalmente las propiedades (a nivel de sistema) para que aplique a todos los usuarios de la máquina. Además, las voy a bloquear para que ningún usuario pueda sobreescribir estos valores. La explicación teórica del proceso se puede encontrar en
la página <a href="http://live.gnome.org/dconf/SystemAdministrators">dconf System Administrator Guide</a>.</p>
<p>Debo decir que el nuevo sistema de configuración de Gnome 3 es bastante más sencillo de modificar para los administradores que el anterior (basado en <a href="http://developer.gnome.org/gconf/">GConf</a> en Gnome 2). La mala noticia es que todavía hay bastantes aplicaciones de Gnome que siguen con <code>GConf</code>, en lugar de utilizar el nuevo sistema.</p>
<p>En primer lugar, vamos a crear la estructura de directorios necesaria. Como vamos a necesitar escribir en <code>/etc</code>, deberemos hacerlo como <code>root</code>:</p>
<pre><code>
$ sudo su
# mkdir -p /etc/dconf/db/local.d /etc/dconf/db/local.d/locks /etc/dconf/profile
</code></pre>
<p>Después, vamos a crear los ficheros de configuración.</p>
<p>En el archivo <code>/etc/dconf/db/local.d/light.conf</code> establecemos los nuevos valores de las propiedades:</p>
<pre><code>
[com/canonical/unity-greeter]
background='/usr/share/backgrounds/lightdm-wallpaper.jpg'
draw-grid=false
</code></pre>
<p>En el fichero <code>/etc/dconf/db/local.d/locks/lightdm</code>, le decimos al sistema <code>dconf</code> qué propiedades están bloqueadas para que no puedan modificarlas los usuarios:</p>
<pre><code>
/com/canonical/unity-greeter/background
/com/canonical/unity-greeter/draw-grid
</code></pre>
<p>Por último, crearemos el fichero <code>/etc/dconf/profile/user</code> para especificar la prioridad de las bases de datos de <code>dconf</code>.</p>
<pre><code>
user-db:user
system-db:local
</code></pre>
<p>Sólo falta ejecutar el comando <strong><code>dconf update</code></strong> (como <code>root</code>) para que el sistema <code>dconf</code> rehaga las bases de datos y se apliquen los cambios.</p>
<p>Y eso es todo. Este mismo método de cambio de propiedades sirve para el resto de esquemas disponibles en <code>dconf</code>.</p>Unknownnoreply@blogger.com2tag:blogger.com,1999:blog-15675910.post-31594597505221192262011-11-05T16:30:00.008+01:002013-12-07T17:54:06.587+01:00Proyectos varios<p>Mis inquietudes y quehaceres van más allá del mundo de la web. Hace ya varios años que cambié de <em>modus vivendi</em> y me introduje en la administración de sistemas. Además, me he ido involucrando en proyectos de programación y sociales. He aquí la lista:</p><h3><a href="http://zaragozaciudad.net/azlinux/">AZLinux</a></h3><p>Formo parte del equipo de desarrollo de la distribución y he escrito algunos de los artículos del blog:</p><ul><br /><li>2011-11-02: <a href="http://zaragozaciudad.net/azlinux/2011/110201-el-nucleo-de-azlinux-3.php">El núcleo de AZLinux 3</a></li><br /><li>2011-10-31: <a href="http://zaragozaciudad.net/azlinux/2011/103101-certificados-digitales-en-azlinux-3.php">Certificados digitales en AZLinux 3</a></li><br /><li>2011-08-25: <a href="http://zaragozaciudad.net/azlinux/2011/082501-razones-para-hacer-una-distribucion-propia.php">Razones para hacer una distribución propia</a></li><br /><li>2011-06-17: <a href="http://zaragozaciudad.net/azlinux/2011/061701-charla-de-migasfree-en-software-y-barra-libre.php">Charla de migasfree en Software y Barra Libre</a></li><br /><li>2011-06-02: <a href="http://zaragozaciudad.net/azlinux/2011/060201-conclusiones-del-opendnie-hackfest.php">Conclusiones del OpenDNIe hackfest</a></li><br /><li>2011-05-16: <a href="http://zaragozaciudad.net/azlinux/2011/051601-hackfest-del-opendnie-en-cadiz.php">Hackfest del OpenDNIe en Cádiz</a></li><br /><li>2011-02-16: <a href="http://zaragozaciudad.net/azlinux/2011/021602-opendnie-en-azlinux.php">OpenDNIe en AZLinux</a></li><br /><li>2010-05-19: <a href="http://zaragozaciudad.net/azlinux/2010/051901-ponencia-en-el-gnome-3.0-marketing-hackfest.php">Ponencia en el Gnome 3.0 Marketing Hackfest</a></li><br /><li>2010-03-23: <a href="http://zaragozaciudad.net/azlinux/2010/032301-como-modificar-un-live-cd-de-opensuse-y-convertirlo-en-un-live-usb.php">Cómo modificar un Live CD de openSUSE y convertirlo en un Live USB</a></li><br /><li>2009-10-29: <a href="http://zaragozaciudad.net/azlinux/2009/102901-como-configurar-el-servicio-networkmanager-en-el-arranque-de-opensuse.php">Cómo configurar el servicio NetworkManager en el arranque de openSUSE</a></li><br /><li>2009-10-26: <a href="http://zaragozaciudad.net/azlinux/2009/102601-como-forzar-un-chequeo-de-disco.php">Cómo forzar un chequeo de disco</a></li><br /></ul><h3><a href="http://softwareybarralibre.org/">Software & Barra Libre</a></h3><p>He colaborado desde el principio con el proyecto y también he escrito algunas entradas en el blog:</p><ul><br /><li>2011-07-22: <a href="http://softwareybarralibre.org/?q=node/65">El Tao de la programación</a></li><br /><li>2011-06-30: <a href="http://softwareybarralibre.org/?q=node/57">Hora de tomar decisiones</a></li><br /><li>2011-06-18: <a href="http://softwareybarralibre.org/?q=content/migas-para-todos-en-el-pabell%C3%B3n-digital-del-agua">Migas para todos en el Pabellón Digital del Agua</a></li><br /><li>2011-06-13: <a href="http://softwareybarralibre.org/?q=node/52">Charla de migasfree en el Digital Water Pavilion</a></li><br /><li>2011-06-03: <a href="http://softwareybarralibre.org/?q=content/otro-mi%C3%A9rcoles-de-pensamiento-libre-0">Otro miércoles de pensamiento libre</a></li><br /></ul><h3><a href="http://www.migasfree.org/">Proyecto migasfree</a></h3><p>En este sitio web todavía no me he estrenado como <em lang="en-US">blogger</em>, pero también he colaborado haciendo el tema para el <em lang="en-US">blog</em>, <a href="http://github.com/jact/migasfree-client">programando en Python la parte cliente de la solución</a> y echando una mano en el instalador del servidor.</p><h3><a href="http://www.libresoftwareworldconference.com">Libre Software World Conference 2011</a></h3><p>Aprovechando la oportunidad que me brinda estar trabajando en el Grupo de Software Libre del Ayuntamiento de Zaragoza, estaré como ponente hablando de <a href="http://www.zaragoza.es/contenidos/azlinux/rpm_migasfree_lswc_public.tar.gz">paquetes RPM y su distribución en una organización con migasfree</a> y de <a href="http://www.zaragoza.es/contenidos/azlinux/azlinux_evolucion_lswc_public.zip">AZLinux: evolución del proyecto</a>.</p>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-15675910.post-12523595071522038362011-06-11T19:18:00.014+02:002011-06-11T21:09:41.134+02:00Sacando el pajarito a pasearCrónica de un experimento <a href="http://es.wikipedia.org/wiki/Medio_social_%28social_media%29" lang="en-US">social media</a>.<br /><br />Aprovechando la celebración del <a href="http://congresoweb.es/">Congreso Web de Zaragoza</a>, he hecho mi incursión en un nuevo medio social: Twitter.<br /><br />Aunque hace años que conozco la herramienta, nunca me había atraido para un uso personal. Siempre he sido muy celoso de mi privacidad y consideraba (y lo sigo considerando) a Twitter un medio <em>muy cotilla</em>. Pero, desde hace un tiempo, <a href="http://twitter.com/azlinuxzgz">en el trabajo compartimos una cuenta</a> para contar nuestro día a día y había empezado a ver el lado más profesional de esta herramienta. Sin ir más lejos, la semana pasada, <a href="http://zaragozaciudad.net/azlinux/2011/060201-conclusiones-del-opendnie-hackfest.php">cuando estuve en Cádiz en el OpenDNIe hackfest</a>, hice un uso bastante exhaustivo de esta cuenta compartida.<br /><br />Esta es la crónica del Congreso Web contada a través de mis experiencias.<br /><br /><h4>Preparativos</h4><br />Creé mi cuenta el día 2 de junio, justo antes de comenzar el congreso. El primer problema lo encontré a la hora de escoger un nombre. Mis alias habituales ya estaban en uso pero tenía que seleccionar alguno relacionado conmigo y que fuera relacionable con alguna de mis facetas en Internet. Al final, la elección fue <a href="http://twitter.com/jact_abcweb">@jact_abcweb</a>, la unión de mi nombre y mi blog.<br /><br />Elegir el logotipo no fue difícil ya que sólo tuve que usar el que utilizo en este blog, pero escribir la biografía tuvo su dificultad. El formato de Twitter (los famosos 140 caracteres), es a la vez lo que lo hace tan atractivo e inmediato y que sea tan complicado en ocasiones condensar algo con el suficiente sentido.<br /><br />La biografía de la cuenta de Twitter es como la tarjeta de visita en el mundo real y conseguir aunar descripción y <em lang="en-US">marketing</em> en 160 caracteres es todo un desafío.<br /><br /><h4>Primer día</h4><br />Me estrené en el congreso con la charla de <a href="http://twitter.com/gmolino">@gmolino</a>. El título de la misma no podía ser más oportuno: <a href="http://www.slideshare.net/gmolino/fundamentos-de-redes-sociales-para-empresas-8222642">Aterrizando en las redes sociales</a>. La herramienta que utilicé para <em lang="en-US">twittear</em> durante el congreso fue <a href="http://gwibber.com/">Gwibber</a> (que viene por defecto en <a href="http://www.ubuntu.com">Ubuntu 11.04</a>).<br /><br />Tenía ganas de estrenarme y en cuanto Gabriel lanzaba un concepto interesante, lo escribía en Twitter tal cual (pero siempre citando la fuente). A la vez, intentaba ver cómo lo hacía el resto de <em>twitteros</em> de la sala, gracias a la monitorización que me permitía Gwibber. Enseguida comprobé que había bastante gente en el congreso que estaba <em>twitteando</em> y que se repetían (cambiadas muy ligeramente) las ideas que iba contando Gabriel. Entre las muchas que nos relató, me gustaría destacar las siguientes:<br /><ul><li>Facebook se ha adaptado a los usuarios, pero Twitter no ha evolucionado en absoluto.</li><li>Dentro de las redes hay negocio. No estar en ellas va a salir caro a las empresas que renuncien a estos medios, y estar cuesta muy poco dinero (pero sí mucha dedicación).</li><li>2/3 de la población mundial usa las redes sociales a diario (no son sólo una moda). Si Facebook fuera un país, sería el tercero más poblado.</li><li>Conversar crea confianza, igual que la gente se relaciona el bar de toda la vida. Hay que hablar de lo que uno sabe porque engañar se paga caro (al final todo se sabe).</li><li>Las redes sociales deben tomarse como algo divertido, no como una obligación. Y uno debe abarcar lo que sea capaz. Es mejor empezar poco a poco. Paciencia, paciencia y más paciencia (a la hora de recoger resultados).</li></ul><br />La siguiente charla prometía bastante por el <a href="http://congresoweb.es/programa-congreso-internet/medicion-web-%C2%BFcomo-saber-si-mi-campana-es-efectiva/">título</a> pero la ejecución de la misma no estuvo a la altura de las expectativas. Twitter echaba humo con críticas negativas. Aunque personalmente también me decepcionó, algunas ideas interesantes fueron:<br /><ul><li>Internet ha crecido mucho en poco tiempo y cambia y evoluciona aún más rápido. Internet es ya el tercer medio por inversión publicitaria en España (el consumo de medios está cambiando).</li><li>El consumo de TV no ha caido, se usan 3 pantallas: TV, PC, móvil (necesidad de analizar los 3 medios).</li></ul><br />Para acabar la primera jornada, estuve en la charla de <a href="http://twitter.com/carmenurbano">@carmenurbano</a>: <a href="http://www.slideshare.net/Carmenurbano/congreso-web-zaragoza-internacionaliza-tu-proyecto-web-carmen-urbano-3-de-junio-2011">Internacionaliza tu proyecto web</a>. Aunque a nivel técnico no me aportó mucho (hubo mención a conceptos de usabilidad y accesibilidad), sí que lo hizo a nivel comercial. Conocía que las referencias culturales eran un aspecto muy importante a tener en cuenta (simbología de los colores, banderas, iconografía), pero fue algo novedoso el hecho de realizar sitios web completamente diferentes para distintos mercados internacionales. Hasta ese punto es necesario impactar para destacar entre la competencia. La charla fue tan amena que ni siquiera dio tiempo de verla al completo. Los ejemplos que propocionó Carmen sobre campañas a nivel internacional (unas acertadas y otras no) fueron de lo más esclarecedores.<br /><br />Al final del día, había hecho 27 <em lang="en-US">tweets</em> y había conseguido 6 menciones y 2 <em lang="en-US">retweets</em>.<br /><br /><h4>Segundo día</h4><br />Después de la experiencia del día anterior, vi claramente que no podía <q>competir</q> con los reyes del teclado y tenía que diferenciarme en la estrategia (buscar el valor añadido). La verdad es que era muy fácil citar a los ponentes para hacer más y más <em>tweets</em>: sólo hacía falta ser más rápido que los demás. También contaba la lista de seguidores de cada uno. En ambos campos no tenía nada que hacer: mi rapidez en la escritura es nula y al ser un recién llegado a Twitter, no tenía apenas seguidores.<br /><br />Así pues, cambié la forma de proceder. Me dediqué a monitorizar los <em lang="en-US">tweets</em> de la sala, a redactar mis resúmenes personales y a incluir hacia el final de las charlas aquellas cosas que no había visto en otros <em lang="en-US">tweets</em> y que consideraba importantes. Como resultado, realicé menos entradas que el día anterior (17), pero conseguí más <em lang="en-US">retweets</em> (7). También influyó en el resultado final la falta de Internet que tuve en algunos momentos del día (que fueron ajenas a la organización). Ya que había tanto tráfico del evento, consideré ridículo comentar sobre charlas ya acabadas hacía unas horas. Twitter es un medio de comunicación <em>enfermizamente inmediato</em> y era necesario adaptarse al medio como parte del experimento.<br /><br />En cuanto a las charlas, si ya fue complicado elegir las del día anterior, el panorama para el sábado empeoraba bastante: 4 ubicaciones simultáneas donde ponentes de renombre iban a impartir sus discursos. Por lo que tuve que escoger (y fue realmente difícil) entre las de <a href="http://es.wikipedia.org/wiki/Comercio_electr%C3%B3nico">comercio electrónico</a> y las relacionadas con los medios sociales.<br /><br />Las que más me impresionaron, por las grandes dotes de comunicación de los ponentes fueron:<br /><ul><li><a href="http://congresoweb.es/programa-congreso-internet/escribir-para-el-seo-y-las-personas/">Escribir para el SEO y las personas</a> (<a href="http://twitter.com/senormunoz">@senormunoz</a>)</li><li><a href="http://congresoweb.es/patrocinadores-congreso-2011/social-media-business/">Social Media Business</a> (<a href="http://juanmerodio.com">@juanmerodio</a>)</li><li><a href="http://congresoweb.es/programa-congreso-internet/gestion-de-la-reputacion-online-en-las-redes-sociales/">Gestión de la reputación online en las redes sociales</a> (<a href="http://victorpuig.es">@victorpuig</a>)</li><li>Mesa redonda: Social Media Marketing (<a href="http://twitter.com/gelito">@gelito</a>, <a href="http://twitter.com/calvoconbarba">@calvoconbarba</a>, <a href="http://twitter.com/victorpuig">@victorpuig</a>, <a href="http://twitter.com/juanmerodio">@juanmerodio</a>)</li></ul><br /><br />Terminé agotado tras más de 12 horas de ponencias, pero la sensación fue la de haber asistido a un curso intensivo con varios de los mejores profesionales nacionales. Un lujo que debo agraceder a los artífices de este evento.<br /><br /><h4>Tercer día</h4><br />Menos mal que no fui a la cena del congreso, porque si no, no hubiera podido asistir a las charlas del último día. Aún así, estaba demasiado cansado y hacia media mañana, no pude seguir con el <em>experimento Twitter</em>.<br /><br />Sin embargo, me dio tiempo de presenciar el <q>robo</q> de mi primer <em lang="en-US">tweet</em> (o al menos el primero del que tenía constancia). Recordé entonces a <a href="http://www.ricardotayar.com/2011/05/10/me-han-copiado-la-web/">@rtayar</a> y me lo tomé por el lado positivo. Justo la semana pasada también había oído comentar que <q><em>if your work has stolen, it has value</em></q>. Por cierto, que la <a href="http://www.ricardotayar.com/2011/06/07/refranes-comercio-electronico-congreso-web-zaragoza/">charla de Ricardo Tayar</a> fue un buen revulsivo para iniciar la mañana.<br /><br />Otras charlas a las que asistí, fueron:<br /><ul><li><a href="http://www.slideshare.net/andreskarp/presentacion-mobile-marketing">Mobile Marketing</a> (<a href="http://twitter.com/andreskarp">@andreskarp</a>)</li><li><a href="http://www.slideshare.net/Sorprendida/embudos-de-conversion">Analítica web en e-Commerce</a> (<a href="http://twitter.com/sorprendida">@sorprendida</a>)</li><li><a href="http://congresoweb.es/programa-congreso-internet/usabilidad-en-el-ecommerce/">Usabilidad en el e-Commerce</a> (<a href="http://twitter.com/torresburriel">@torresburriel</a>)</li><li><a href="http://congresoweb.es/programa-congreso-internet/estrategias-de-marketing-en-facebook/">Estrategias de Marketing en Facebook</a> (<a href="http://twitter.com/elqudsi">@elqudsi</a>)</li><li><a href="http://congresoweb.es/programa-congreso-internet/estrategias-en-twitter/">Estrategias en Twitter</a> (Ana Santos y <a href="http://twitter.com/javig">@javig</a>)</li></ul><br /><br />Los números del último día de congreso: 10 <em lang="en-US">tweets</em>, 3 menciones y 4 <em lang="en-US">retweets</em>.<br /><br /><h4>Conclusiones</h4><br />A lo largo del congreso se fueron repitiendo varios conceptos que me hacen pensar que, <strong>aunque el <em lang="en-US">social media</em> sea un mundo virtual, sólo es un reflejo del mundo real</strong>. Si bien es más vertiginoso y global, sirven las mismas reglas:<br /><ul><li>El sentido común es la mejor estrategia.</li><li>Una estrategia que debe ser coherente indiferentemente del medio usado.</li><li>Nadie da duros a cuatro pesetas: es necesario rodearse de buenos profesionales.</li><li>El factor humano es el recurso esencial en cualquier empresa.</li><li>Trabajar, trabajar, medir, analizar y trabajar aún más. Es necesario hacer muchas pequeñas cosas bien.</li><li>Y sobre todo, tener paciencia para recoger los resultados. La competencia es brutal (y más en Internet).</li></ul><br /><br />Se podría pensar que existiendo un medio tan global como Internet, y siendo gran parte de los asistentes, habitantes de ese mundo, un evento de tanta envergadura como este, cada vez tendría menos sentido. Sin embargo, personalmente ha sido muy gratificante ver como en 3 días, el congreso ha conseguido lo que yo no había conseguido en varios años. Había intentado hacer ver a <em>cierta persona</em> los beneficios profesionales de los medios sociales. Hasta que no la vivido en directo durante el congreso, no se ha convertido en una <em>creyente</em> más. Sólo espero que ahora no pare y le saque todo el partido posible. Por ahora lleva un <a href="http://es.linkedin.com/in/rosanaceron">buen</a> <a href="http://twitter.com/roxice">camino</a>.<br /><br />En cuanto a Twitter, aunque no todos los días voy de conferencias, le he cogido cierto gustillo e intentaré que sea un complemento a <a href="http://zaragozaciudad.net/azlinux/">mis otras</a> <a href="http://softwareybarralibre.org/">presencias</a> en la red. Y digo complemento porque lo que escribes en las redes sociales <q>comerciales</q> (como Facebook o Twitter) es de esas redes, no tuyo. Sólo lo que escribes en tu sitio web, es de tu propiedad.Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-15675910.post-78422079414369159272011-03-12T16:13:00.007+01:002011-03-13T12:09:25.609+01:00Barra libre de software<p>Hola, mi nombre es <a href="http://es.linkedin.com/in/jachavar">Jose Antonio Chavarría</a> y uso software libre. Toda mi vida profesional, y antes la universitaria, ha estado relacionada con el software libre. Como adicto, voy a relatar mi experiencia para compartirla con vosotros, porque, conforme pasa el tiempo, esta adicción va a peor.</p><br /><p>Durante mi etapa universitaria conocí <a href="http://www.youtube.com/watch?v=LHZCZcJeTFE">Linux</a> por primera vez. Recuerdo que se llamaba <a href="http://www.debian.org">Debian</a> y que la instalación era en modo texto, pero la libertad que descubrí, me hizo pensar en un mundo lleno de posibilidades. La gente se suele fijar en <a href="http://www.blogsdna.com/wp-content/uploads/2008/06/windows_7_5.jpg">las curvas y las caras bonitas</a>, ¿pero a quién le importan esas superficilalidades cuando puedes <a href="http://phyx.files.wordpress.com/2008/09/girl7.jpg">configurar todo a tu gusto</a>, cuando <a href="http://apereza.wordpress.com/2007/09/17/las-4-libertades-del-software-libre/">todo se puede conocer y se puede adaptar a tus necesidades</a>?</p><br /><p>Luego, tuve que pensar en hacer mi proyecto fin de carrera. En aquella época, el mundo de la informática médica era totalmente cerrado y propietario. A un <a href="http://www.linkedin.com/in/cazcarra">amigo</a> y a mí se nos ocurrió que era hora de que esta situación cambiara y propusimos un <a href="http://openclinic.sf.net">proyecto de historia clínica digital basado en herramientas totalmente libres y transparentes</a>. Incluso la documentación del proyecto la hicimos en <a href="http://www.docbook.org">formatos abiertos</a>. Por supuesto, la licencia del producto es <a href="http://www.gnu.org/licenses/gpl.html">GPL</a> (creo que fue el primer proyecto que se presentaba bajo esta licencia en <a href="http://www.eupla.es/">nuestra universidad</a>, pero espero que no fuera el último).</p><br /><p>Gracias a los <a href="http://en.wikipedia.org/wiki/LAMP_%28software_bundle%29">conocimientos adquiridos durante la realización de este proyecto</a>, inmediatamente después de acabar mis estudios, empecé a trabajar como desarrollador de aplicaciones web. Mis herramientas diarias de trabajo eran ya en su mayoría libres. El servidor de base de datos era <a href="http://dev.mysql.com">MySQL</a>, el servidor de aplicaciones web <a href="http://httpd.apache.org/">Apache</a> y el <a href="http://php.net/">lenguaje de programación <acronym title="Hypertext Preprocessor">PHP</acronym></a>. El navegador web principal sobre el que desarrollaba era <a href="http://www.firefox.com">Firefox</a> (al principio fue <a href="http://www-archive.mozilla.org/products/mozilla1.x/">Mozilla</a>).</p><br /><p>Pero también en el trabajo, descubrí nuevos programas de software libre. Allí empecé a usar <a href="http://www.mozillamessaging.com">Thunderbird</a> como cliente de correo. Tanto me gustó, que al poco tiempo, logré que todo el mundo en la <a href="http://www.scati.com">empresa</a> lo usara. El sistema de control de versiones era un <a href="http://www.nongnu.org/cvs/"><acronym title="Concurrent Versions System">CVS</acronym></a> en una máquina con Debian que además hacía las funciones de servidor de correo interno. Usábamos <a href="http://www.mediawiki.org/">MediaWiki</a> como herramienta de gestión del conocimiento. Nuestro blog interno estaba hecho con <a href="http://wordpress.org/">WordPress</a>. El virus se extendió aún más cuando cambié el sistema de documentación que se usaba para las aplicaciones que se vendían. Instalé una plataforma de desarrollo de documentación basada en Docbook, <a href="http://www.tug.org/texlive/">TexLive</a> y una serie de scripts en MS-DOS, que luego un <a href="http://es.linkedin.com/pub/jorge-l%C3%B3pez/29/863/2b">compañero (pero también amigo)</a> rehizo en <a href="http://www.python.org/">Python</a>. La plaga se iba extendiendo, pero por entonces, el sistema operativo usado en los ordenadores todavía era Windows.</p><br /><p>Pero hace ya casi 3 años, cambié de empleo. Primero, he de decir que si no hubiera sido por todo el conocimiento que adquirí por usar herramientas libres, no lo hubiera conseguido. El <a href="http://www.zaragoza.es">Ayuntamiento de Zaragoza</a> me contrató para formar parte del <a href="http://zaragozaciudad.net/azlinux/">proyecto de migración del escritorio a software libre</a>. Desde el primer día comencé a usar <a href="http://www.opensuse.org/">SuSE</a> en mi ordenador y desde entonces me dedico a hacer <a href="http://en.wikipedia.org/wiki/RPM_Package_Manager">paquetes RPM</a> y scripts en <a href="http://www.gnu.org/software/bash/">Bash</a> y Python. También me dedico a dar formación los usuarios. Una parte importante de la formación consiste en evangelizar a la gente con las bondades del software libre. Como herramienta de distribución de software usamos <a href="http://migasfree.org/">MigasFree</a>. Este programa es invención de un <a href="http://twitter.com/albertogacias">compañero</a> y es una pieza esencial del proyecto de migración.</p><br /><p>Aparte de mi trayectoria profesional, está mi experiencia personal y cotidiana con el software libre. Cuando me planteé poner Internet en casa, es cuando instalé <a href="http://fedoraproject.org/">linux</a> en mi ordenador. Quería evitar riesgos y sorpresas, y sentirme a la vez seguro. Llevo ya 6 años sin haber tenido ninguna infección. Como <a href="http://www.sromero.org/wiki/linux/sistema/pringao_howto">pringao</a> ahora sólo recomiendo (e instalo) Linux en ordenadores de conocidos y amigos.</p><br /><p>Hace un par de días, un nuevo <a href="http://softwareybarralibre.org/">proyecto ha nacido en Zaragoza</a>. Un <a href="http://pcsofia.blogspot.com/">amigo</a> se ha liado la manta a la cabeza y ha comenzado una nueva locura. Y a mí no se me ha ocurrido otra cosa que <em><q>arar con los bueyes que tengo</q></em>, es decir, contagiar a otros con mis experiencias. Esto que me pasa, ¿es tan grave como parece, doctor?</p><br /><h4>Actualización: 2011-03-13</h4><p>Sí que es grave y ha empezado por mi memoria. Como me apunta <a href="http://twitter.com/jlontheweb">jlontheweb</a>, en <a href="http://www.scati.com">Scati Labs</a> ya se usaba antes de entrar yo, <a href="http://www.bugzilla.org/">Bugzilla</a> como gestor de incidencias del software creado allí, y <a href="http://filezilla-project.org/">FileZilla</a> como cliente <acronym title="File Transfer Protocol">FTP</acronym>. También me comenta que han empezado a usar <a href="http://www.openoffice.org/">OpenOffice.org</a>.</p><br /><p>Esta <a href="http://es.wikipedia.org/wiki/Suite_ofim%C3%A1tica">suite ofimática</a> está instalada en el 100% de los ordenadores del Ayuntamiento a día de hoy. Y para convertir a los equipos Windows en equipos con Linux, usamos a diario <a href="clonezilla.org/">Clonezilla</a>.</p>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-15675910.post-54992003867221658672010-01-02T16:45:00.018+01:002010-01-02T22:34:26.452+01:00Personalización del listado de directorios de Apache<h4>mod_autoindex</h4><br />Aunque para entornos de producción nunca es buena idea dejar disponible para el público el listado de directorios, para algunas tareas es una funcionalidad que viene bien. Por ejemplo, para un <a href="http://download.opensuse.org/update/">repositorio de paquetes para una distribución Linux</a>. Y la pregunta que surge al ver cómo quedan esos listados tan elaborados es saber cómo se pueden hacer fácilmente.<br /><br />La respuesta viene de la de mano del <a href="http://httpd.apache.org/docs/2.2/mod/mod_autoindex.html">módulo autoindex</a> para Apache. Pero antes de entrar en detalle en este módulo, recordemos cómo evitar la generación de estos listados automáticos en la configuración de Apache.<br /><br /><blockquote><strong>Nota</strong>: Todas las referencias a la configuración y funcionamiento de Apache se han hecho sobre la <a href="http://apache.rediris.es/httpd/binaries/win32/apache_2.2.14-win32-x86-no_ssl.msi">versión 2.2.14 para Win32</a>, excepto las que se indiquen explícitamente.</blockquote><br /><h5>Desactivación de los listados automáticos</h5><br />Dentro de las directivas <a href="http://httpd.apache.org/docs/2.2/mod/core.html#location"><code>Location</code></a> y <a href="http://httpd.apache.org/docs/2.2/mod/core.html#directory"><code>Directory</code></a>, la directiva <a href="http://httpd.apache.org/docs/2.2/mod/core.html#options"><code>Options</code></a> se encarga de configurar las opciones disponibles para esa determinada ubicación. El modificador <code>Indexes</code> es el encargado de activar al módulo <strong>autoindex</strong>, por lo que para evitar esta funcionalidad, deberemos configurarlo más o menos así:<br /><pre><code><Location /><br /> Options -Indexes <em>…</em><br /> <em>…</em><br /></Location></code></pre><br />Otra opción más radical es comentar la línea de carga del módulo en el fichero <code>httpd.conf</code>. Pero si elegimos esta opción, deberemos revisar el resto de la configuración para quitar la opción <code>Indexes</code> de cualquier directiva <code>Options</code> en la que aparezca. En caso contrario, al reiniciar el servicio, Apache informará que se ha producido un error y no arrancará.<br /><h4>Creación de la configuración para autoindex</h4><br />Si nos fijamos en el fichero de configuración global de Apache, la siguiente línea se encuentra comentada por defecto:<br /><pre><code># Fancy directory listings<br />#Include conf/extra/httpd-autoindex.conf</code></pre><br />Por lo que si tenemos activado el listado automático, veremos que el resultado es de lo más espartano.<br /><br /><a href="http://4.bp.blogspot.com/_QKBs06KZRKw/Sz9qxav5qKI/AAAAAAAAAAM/ZIzUOK45nfk/s1600-h/example_without_autoindex.png"><img src="http://4.bp.blogspot.com/_QKBs06KZRKw/Sz9qxav5qKI/AAAAAAAAAAM/ZIzUOK45nfk/s400/example_without_autoindex.png" alt="Ejemplo de listado de directorio sin la configuración de mod_autoindex" /></a><br /><br />En lugar de hacer modificaciones sobre el fichero <code>httpd-autoindex.conf</code>, vamos a crear uno nuevo, llamado <code>custom_autoindex.conf</code>, que situaremos en el mismo directorio donde se encuentre el archivo <code>httpd.conf</code>. De esta forma, sólo con incluir esta línea al final del fichero <code>httpd.conf</code>, se cargarán nuestras modificaciones:<br /><pre><code># Añadir al final del fichero httpd.conf<br />Include conf/custom_autoindex.conf</code></pre><br /><h4>Personalización de las directivas</h4><br />En el manual oficial de Apache, se encuentran explicadas cada una de las directivas disponibles para el <a href="http://httpd.apache.org/docs/2.2/mod/mod_autoindex.html">módulo autoindex</a>. En el presente artículo sólo se muestran algunas de ellas, por lo que si alguien necesita alguna funcionalidad más de las aquí presentadas, recomiendo la lectura de la documentación oficial.<br /><h5>IndexOptions</h5><br />Los modificadores de esta directiva se pueden agrupar todos dentro de la misma línea o bien se pueden ir agregando uno por línea, para que el fichero quede más claro y legible y para que sea más fácil <em>jugar</em> (comentar/descomentar) las diferentes opciones.<br /><br />La primera opción en nombrar es, precisamente, la que permite activar otras opciones más avanzadas de los listados de directorios. Se llama <code>FancyIndexing</code> y, si está desactivada, el listado de archivos se presenta en forma de lista simple (tal y como se puede ver en la imagen del primer ejemplo).<br /><br />La siguiente que vamos a presentar es <code>FoldersFirst</code> y, como su nombre indica, independientemente del orden que escoja el usuario (las columnas nombre, última modificación, tamaño, etc), siempre aparecerán primero los directorios y después los ficheros.<br /><br />Otra opción relacionada con la ordenación es <code>IgnoreCase</code>. Si está activada, mayúsculas y minúsculas no importarán a la hora de ordenar los archivos.<br /><br />Adicionalmente, también vamos a añadir la opción <code>VersionSort</code> para que, en el caso de mostrar varios ficheros con mismo nombre pero versión diferente, se ordenen perfectamente de acuerdo a la versión y no al orden ASCII: la versión <var>1.12</var> iría después de la <var>1.9</var>, por ejemplo.<br /><br /><code>IconsAreLinks</code> permite que los iconos asociados a cada fichero también sean un enlace a dicho archivo. Como las imágenes suelen ser zonas muy apetecibles para el ratón, dejaremos esta opción activada.<br /><br />Para nuestro ejemplo, vamos a activar la opción <code>SuppressDescription</code>, para no mostrar la descripción de los tipos de archivo en el listado. Aunque en un entorno real, es una funcionalidad que puede ser interesante si se listan tipos de fichero poco usuales.<br /><br />Para tener más control sobre la salida <acronym title="HyperText Markup Language">HTML</acronym> generada por <code>mod_autoindex</code>, vamos a activar las opciones <code>SuppressRules</code>, <code>SuppressHTMLPreamble</code> y <code>XHTML</code>. De esta forma, obligamos a que el módulo saque el contenido del listado en formato <a href="http://www.w3.org/1999/xhtml/"><acronym title="eXtensible HyperText Markup Language">XHTML</acronym></a> (y no en <a href="http://www.w3.org/TR/REC-html32">HTML 3.2</a>) y que se ocupe sólamente de generar dicho listado. El resto de la página la generaremos nosotros más adelante.<br /><br />El fichero <code>custom_autoindex.conf</code>, con todo lo visto hasta ahora, comenzaría así:<br /><pre><code>IndexOptions FancyIndexing<br />IndexOptions FoldersFirst<br />IndexOptions IgnoreCase<br />IndexOptions VersionSort<br />IndexOptions IconsAreLinks<br />IndexOptions SuppressDescription<br />IndexOptions SuppressRules<br />IndexOptions SuppressHTMLPreamble<br />IndexOptions XHTML</code></pre><br /><h5>Directorio de iconos</h5><br />Los iconos por defecto que vienen distribuidos con Apache, aunque funcionales, se han quedado algo antiguos en cuanto a diseño. Por esa razón, vamos a cambiarlos por los que vienen en la colección <a href="http://gnome-look.org/content/show.php/hydroxygen?content=88575">hidroxygen</a>.<br /><br />Para ello, vamos a poner en un mismo directorio todos los iconos de esta colección de tamaño 32x32 píxeles. Conviene recordar que cualquier cambio en la asociación de ficheros, requiere reiniciar Apache.<br /><br />La configuración de este directorio, quedaría así:<br /><pre><code>Alias /icons/ "D:/Apache2/conf/hidroxygen/"<br /><br /><Directory "D:/Apache2/conf/hidroxygen"><br /> Options Indexes MultiViews<br /> AllowOverride None<br /> Order allow,deny<br /> Allow from all<br /></Directory></code></pre><br /><h5>Asociación de tipos de archivos</h5><br />Hay varias directivas relacionadas con la asociación:<br /><br /><ul><li><code>AddIconByEncoding</code>: sirve para asociar un icono a una <a href="http://es.wikipedia.org/wiki/Multipurpose_Internet_Mail_Extensions">codificación MIME</a>.</li><br /><li><code>AddIconByType</code>: asocia un icono a un <a href="http://en.wikipedia.org/wiki/Internet_media_type">tipo MIME</a>.</li><br /><li><code>AddIcon</code>: asocia un icono a una extensión.</li></ul><br /><br />Para nuestro ejemplo, este sería el código:<br /><pre><code>AddIconByEncoding (CMP,/icons/compressed.gif) x-compress x-gzip<br /><br />AddIconByType (IMG,/icons/image.png) image/*<br />AddIconByType (SND,/icons/sound.png) audio/*<br />AddIconByType (VID,/icons/video.png) video/*<br /><br />AddIcon /icons/binary.png .bin .exe<br />AddIcon /icons/tar.png .tar<br />AddIcon /icons/zip.png .Z .z .tgz .gz .zip<br />AddIcon /icons/pdf.png .ps .ai .eps .pdf .dvi<br />AddIcon /icons/www.png .html .shtml .htm<br />AddIcon /icons/txt.png .txt<br />AddIcon /icons/text-x-csrc.png .c .h<br />AddIcon /icons/application-x-php.png .php<br />AddIcon /icons/application-x-perl.png .pl<br />AddIcon /icons/application-x-python.png .py<br />AddIcon /icons/text-x-script.png .conf .sh .shar .csh .ksh .tcl .cgi<br />AddIcon /icons/tex.png .tex<br />AddIcon /icons/rar.png .rar<br />AddIcon /icons/rpm.png .rpm<br />AddIcon /icons/text-css.png .css<br /><br />AddIcon /icons/violet-go-up.png ..<br />AddIcon /icons/gnome-blog.png README<br />AddIcon /icons/oxyviolet-folder.png ^^DIRECTORY^^</code></pre><br />Las últimas 3 líneas son especiales porque sirven para asociar al directorio anterior (<code>..</code>), los archivos <a href="http://es.wikipedia.org/wiki/README">README</a> y los directorios, respectivamente.<br /><br />La lista de asociación se puede hacer tan larga y específica como se quiera o necesite. Como podemos ver, puede ser genérica (usando <code>AddIconByEncoding</code> y <code>AddIconByType</code>) o más particular (con <code>AddIcon</code> y la lista de extensiones).<br /><br />Hay una directiva más, <code>DefaultIcon</code>, que sirve para mostrar un icono por defecto para los tipos de archivo que no hayamos declarado explícitamente:<br /><pre><code>DefaultIcon /icons/unknown.png</code></pre><br /><h5>Salida XHTML</h5><br />Antes hemos dicho que del módulo <code>autoindex</code> sólo queríamos que generara los listados de archivos, porque el resto de la salida la personalizaríamos nosotros.<br /><br />La directiva <code>HeaderName</code> sirve para indicar el fichero que se antepondrá al listado de <code>mod_autoindex</code>. Y la directiva <code>ReadmeName</code>, para indicar el archivo que se añadirá al final de listado generado. De esta forma, y con ayuda de la opción <code>SuppressHTMLPreamble</code>, tendremos control total sobre el HTML que enviaremos al navegador desde el servidor web.<br /><br />Si se quisieran diferentes contenidos de cabecera y pie para cada directorio a mostrar, es posible hacerlo indicando una ruta relativa a los ficheros en estas directivas. Sin embargo, para este ejemplo, vamos a usar una ruta absoluta, que debe estar (esta sí) dentro del <a href="http://httpd.apache.org/docs/2.2/mod/core.html#documentroot">directorio de publicación de Apache</a>.<br /><pre><code>ReadmeName "/autoindex/footer.shtml"<br />HeaderName "/autoindex/header.shtml"</code></pre><br /><h5>IndexIgnore</h5><br />Para acabar con la configuración de este ejemplo, conviene nombrar la directiva <code>IndexIgnore</code>. Sirve para ocultar del listado automático ciertos archivos. Por ejemplo, para evitar que se muestren las copias de seguridad (ficheros acabados en <code>~</code> en los sistemas Linux), los propios archivos usados para cabecera y pie de los listados, etcétera.<br /><pre><code>IndexIgnore .??* *~ *# HEADER* README* RCS CVS *,v *,t *.shtml</code></pre><br /><h4>Contenido de los archivos HeaderName y ReadmeName</h4><br />El contenido de estos ficheros debe generar HTML, por lo que o bien puede estar en HTML puro o puede estar programado en algún lenguaje interpretado como <a href="http://httpd.apache.org/docs/1.3/howto/ssi.html"><acronym title="Server Side Includes">SSI</acronym></a>, <a href="http://en.wikipedia.org/wiki/Php"><acronym title="PHP Hypertext Preprocessor">PHP</acronym></a>, <a href="http://es.wikipedia.org/wiki/Python">Python</a> o <a href="http://es.wikipedia.org/wiki/Perl">Perl</a>, por ejemplo. Esta opción es interesante para poder mostrar contenido variable y poder tener unos ficheros de cabecera globales. Dicho contenido variable nos lo proporciona el propio servidor a través de sus <a href="http://httpd.apache.org/docs/2.2/env.html">variables de entorno</a>.<br /><br />En nuestro ejemplo, vamos a hacer la programación en <strong>SSI</strong>, puesto que sólo vamos a mostrar algunas de estas variables de Apache. Para activar la interpretación de las instrucciones SSI en el directorio donde hemos puesto los archivos <code>.shtml</code>, debemos añadir a la configuración:<br /><pre><code><Location "/autoindex"><br /> Options +Includes<br /> AddType text/html .shtml<br /> AddOutputFilter INCLUDES .shtml<br /></Location></code></pre><br /><br />En entornos Linux, los archivos <code>.shtml</code> deben tener el atributo de ejecución (además del de lectura para el usuario que ejecute Apache) para que puedan ser ejecutados por el servidor web.<br /><br /><h4>Ejemplo completo</h4><br /><br />Como resultado de la configuración aplicada en este artículo, el contenido del directorio que hemos mostrado antes, ahora luciría de esta forma:<br /><br /><a href="http://2.bp.blogspot.com/_QKBs06KZRKw/Sz9rHcpLS8I/AAAAAAAAAAU/zWXXk5lvSfo/s1600-h/example_autoindex.png"><img src="http://2.bp.blogspot.com/_QKBs06KZRKw/Sz9rHcpLS8I/AAAAAAAAAAU/zWXXk5lvSfo/s400/example_autoindex.png" alt="Ejemplo de listado de directorio empleando mod_autoindex" /></a><br /><br />El contenido completo del fichero <code>custom_autoindex.conf</code>:<br /><pre><code>IndexOptions FancyIndexing<br />IndexOptions FoldersFirst<br />IndexOptions IgnoreCase<br />IndexOptions VersionSort<br />IndexOptions IconsAreLinks<br />IndexOptions SuppressDescription<br />IndexOptions SuppressRules<br />IndexOptions SuppressHTMLPreamble<br />IndexOptions XHTML<br /><br />Alias /icons/ "D:/Apache2/conf/hidroxygen/"<br /><br /><Directory "D:/Apache2/conf/hidroxygen"><br /> Options Indexes MultiViews<br /> AllowOverride None<br /> Order allow,deny<br /> Allow from all<br /></Directory><br /><br />AddIconByEncoding (CMP,/icons/compressed.gif) x-compress x-gzip<br /><br />AddIconByType (IMG,/icons/image.png) image/*<br />AddIconByType (SND,/icons/sound.png) audio/*<br />AddIconByType (VID,/icons/video.png) video/*<br /><br />AddIcon /icons/binary.png .bin .exe<br />AddIcon /icons/tar.png .tar<br />AddIcon /icons/zip.png .Z .z .tgz .gz .zip<br />AddIcon /icons/pdf.png .ps .ai .eps .pdf .dvi<br />AddIcon /icons/www.png .html .shtml .htm<br />AddIcon /icons/txt.png .txt<br />AddIcon /icons/text-x-csrc.png .c .h<br />AddIcon /icons/application-x-php.png .php<br />AddIcon /icons/application-x-perl.png .pl<br />AddIcon /icons/application-x-python.png .py<br />AddIcon /icons/text-x-script.png .conf .sh .shar .csh .ksh .tcl .cgi<br />AddIcon /icons/tex.png .tex<br />AddIcon /icons/rar.png .rar<br />AddIcon /icons/rpm.png .rpm<br />AddIcon /icons/text-css.png .css<br /><br />AddIcon /icons/violet-go-up.png ..<br />AddIcon /icons/gnome-blog.png README<br />AddIcon /icons/oxyviolet-folder.png ^^DIRECTORY^^<br /><br />DefaultIcon /icons/unknown.png<br /><br />ReadmeName "/autoindex/footer.shtml"<br />HeaderName "/autoindex/header.shtml"<br /><br />IndexIgnore .??* *~ *# HEADER* README* RCS CVS *,v *,t *.shtml<br /><br /><Location "/autoindex"><br /> Options +Includes<br /> AddType text/html .shtml<br /> AddOutputFilter INCLUDES .shtml<br /></Location></code></pre><br />Contenido del fichero <code>header.shtml</code>:<br /><pre><code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr"><br /><head><br /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><br /> <title><!--#echo var="SERVER_NAME" --><!--#echo var="REQUEST_URI" --></title><br /> <link rel="stylesheet" type="text/css" href="/autoindex/style.css" media="screen" /><br /></head><br /><body><br /><div id="header"><br /> <h1><!--#echo var="SERVER_NAME" --><!--#echo var="REQUEST_URI" --></h1><br /></div><br /><div id="content"></code></pre><br />Contenido de <code>footer.shtml</code>:<br /><pre><code></div><br /><div id="footer"><br /> <address>Copyright © jact 2010</address><br /> <address><!--#echo var="SERVER_SOFTWARE" --> on <!--#echo var="SERVER_NAME" --></address><br /></div><br /></body><br /></html></code></pre><br />Hoja de estilos (<code>style.css</code>):<br /><pre><code>body {<br /> background: #F6F6F6;<br /> font-family: "Trebuchet MS", sans-serif;<br /> margin: 1.5em;<br />}<br /><br />#header {<br /> border-bottom: 1px solid #000;<br />}<br /><br />#content pre {<br /> font-family: "Lucida Console", monospace;<br /> font-size: 120%;<br />}<br /><br />#footer {<br /> border-top: 1px solid #000;<br /> padding-top: 1em;<br />}<br /><br />a img {<br /> border: none;<br />}<br /><br />address {<br /> font-style: normal;<br /> font-size: 90%;<br />}</code></pre><br /><h4>Referencias</h4><br /><ul><li><a href="http://www.webmasterworld.com/apache/3589651.htm">Tutorial: Custom Apache Directory Listing with linked CSS, and PHP</a></li><br /><li><a href="http://howto.unixdev.net/dirlist.html">Apache 2 Custom Directory Listing</a></li></ul>Unknownnoreply@blogger.com1tag:blogger.com,1999:blog-15675910.post-23937111615627177222009-12-18T12:19:00.009+01:002009-12-18T12:36:29.536+01:00El falso proxyA primera vista, un <em>proxy falso</em> (o mal configurado), lo único que puede provocar es que no naveguemos en absoluto por la red. Sin embargo, <em>bien configurado</em>, puede ser un sustituto casero para permitir el acceso a determinados sitios, y restringir el resto. Efectivamente, sería mejor montar una solución con <a href="http://www.squid-cache.org/">Squid</a>, pero ya he dicho que es un <strong>remedio casero</strong>, siempre y cuando, la lista de sitios permitidos no sea muy grande.<br /><br />Un ejemplo válido sería un ordenador de consulta público, en <a href="http://en.wikipedia.org/wiki/Kiosk_software">modo quiosco</a>, en el que sólo queremos que se pueda visitar la web de nuestra empresa.<br /><br />El truco radica, básicamente, en configurar un <strong>proxy inexistente</strong> en el navegador web y poner como excepciones de ese proxy, la lista de sitios a los que se quiere dar acceso exclusivo. La gracia del truco está en que esta configuración no pueda ser cambiada por el usuario que tiene acceso al navegador.<br /><br />A continuación, vamos a configurar adecuadamente el navegador <a href="http://www.mozilla.com/">Firefox</a> para que sirva a nuestros propósitos. Los parámetros a configurar son:<br /><br /><ul><li><a href="http://kb.mozillazine.org/Network.proxy.type">network.proxy.type</a>: Deberá tener valor <strong>1</strong> para hacer la configuración manual del proxy.</li><br /><li><a href="http://kb.mozillazine.org/Network.proxy.%28protocol%29">network.proxy.http</a>: Este es el lugar donde indicaremos el nombre del <em>falso proxy</em>.</li><br /><li><a href="http://kb.mozillazine.org/Network.proxy.%28protocol%29_port">network.proxy.http_port</a>: Indica el puerto de escucha del proxy. Como en nuestro caso no existe, pondremos un valor comprendido entre 1024 y 65535.</li><br /><li><a href="http://kb.mozillazine.org/Network.proxy.share_proxy_settings">network.proxy.share_proxy_settings</a>: Al poner a true esta clave, la configuración para el protocolo HTTP valdrá también para el resto de protocolos (SSL, FTP, ...).</li><br /><li><a href="http://kb.mozillazine.org/Network.proxy.no_proxies_on">network.proxy.no_proxies_on</a>: Como valor, separados por comas, pondremos la lista de sitios a los que sí se quiere tener acceso.</li></ul><br /><br />Ahora, lo que interesa es poner en el sitio adecuado los parámetros anteriores. Deberán estar en la configuración global del navegador (para que afecte a todos los usuarios de la máquina) y estarán bloqueados para que nadie los pueda modificar en su configuración local.<br /><br />¿Cómo bloquear las preferencias? Para ello utilizaremos la directiva <a href="http://kb.mozillazine.org/Lock_Prefs">lockPref</a>. El código resultante sería el siguiente:<br /><br /><pre><samp>// Opciones bloquedas<br />lockPref("network.proxy.type", 1);<br />lockPref("network.proxy.http", "falso.proxy.miempresa.com");<br />lockPref("network.proxy.http_port", 8888);<br />lockPref("network.proxy.share_proxy_settings", true);<br />lockPref("network.proxy.no_proxies_on", "miempresa.com,otrapagina.com");<br />lockPref("browser.startup.homepage", "http://miempresa.com");</samp></pre><br />Además, hemos incluido la opción <a href="http://kb.mozillazine.org/Browser.startup.homepage">browser.startup.homepage</a>, para que la página de inicio del navegador sea una de la lista permitida (la principal). Aunque siempre es posible <a href="http://www.pcc-services.com/kixtart/firefox-lockdown.html">bloquear más opciones de configuración</a>.<br /><br />Para el final, hemos dejado la parte difícil: elegir el sitio donde poner el código. Como ya hemos dicho, no interesa poner esta configuración en el <a href="http://www.gemal.dk/mozilla/profile.html">perfil del usuario</a> de consulta, sino que es mejor que esté a nivel global y con permisos restringidos.<br /><br />Llamaremos al archivo de configuración con los bloqueos <code><strong>lock.js</strong></code>. Este fichero lo tendremos que colocar dentro del directorio de instalación de Firefox. Para Windows sería <code><a href="http://en.wikipedia.org/wiki/Program_Files">%ProgramFiles%</a>\Mozilla Firefox\</code> y para entornos Linux, algo parecido a esta ruta: <code>/usr/lib/firefox/</code>.<br /><br />Por último, para que Firefox tenga en cuenta estos nuevos parámetros, habrá que añadir o modificar los siguientes parámetros:<br /><ul><li><code>pref("general.config.filename", "lock.js");</code> Así se indica un fichero adicional de configuración. No debe indicarse la ruta, sólo el nombre.</li><br /><li><code>pref("general.config.obscure_value", 0);</code> El valor <strong>0</strong> permite que el contenido del fichero <code>lock.js</code> vaya en texto claro. Por defecto, suele tener el valor <strong>13</strong>, y eso significaría que el archivo debe estar <a href="http://www.alain.knaff.lu/howto/MozillaCustomization/cgi/byteshf.cgi">codificado</a>.</li></ul><br /><br />Dichos parámetros se encuentran dentro de los ficheros de configuración globales de la aplicación, y es en este punto donde hay alguna variación de la ruta, dependiendo de la versión de Firefox. Algunos ejemplos:<br /><ul><li>Para la versión 3.0 de Firefox para Windows, el fichero a modificar sería <code>%ProgramFiles%\Mozilla Firefox\greprefs\all.js</code>.</li><br /><li>Para <a href="http://fedoraproject.org/">Fedora 12</a> y Firefox 3.5, el fichero sería <code>/usr/lib/firefox-3.5.5/defaults/preferences/firefox.js</code>.</li></ul><br /><br />Pero es conveniente avisar que, dependiendo de la distribución de Linux utilizada, estos parámetros pueden encontrarse en algún otro fichero que haya en ese directorio.Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-15675910.post-23169064244818489722009-01-12T21:23:00.009+01:002009-07-08T21:43:57.992+02:00Pidgin y el protocolo MSNHoy, como todos los días, he llegado a casa y he puesto en marcha mi <a href="http://pidgin.im/">cliente de mensajería instantánea multiplataforma, Pidgin</a>. Pero hoy, una de las cuentas, la de <acronym title="Microsoft Network">MSN</acronym> para más señas, no ha conectado al iniciar el programa. El mensaje que mostraba Pidgin era el siguiente:<br /><br /><pre><code lang="en_US">Unable to retrieve MSN Address Book<br /></code></pre><br /><br />Lo primero que he hecho, ha sido intentar entrar con mi cuenta <em lang="en_US">passport</em> en el <a href="http://messenger.live.com/">sitio de Windows Live</a> para verificar si estaba o no activa. <br /><br />Como sí lo estaba, he empezado a buscar por Internet. Allí, he encontrado una <a href="http://www.alphatek.info/2009/01/12/live-msn-messenger-is-broken-in-pidgin/">noticia que señalaba que hoy (precisamente hoy), Microsoft había hecho un cambio en el protocolo</a> y que era necesario instalar un nuevo plugin en Pidgin para solucionar el problema. O eso, o utilizar otro programa de mensajería.<br /><br />De hecho, al probar con <a href="http://kopete.kde.org/">Kopete</a> (el cliente por defecto del escritorio <acronym title="K Desktop Environment">KDE</acronym>), he entrado sin inconvenientes a la cuenta y he podido acceder a mis contactos. Otro programa que recomendaba la noticia era <a href="http://live.gnome.org/Empathy">Empathy Instant Messenger</a>. Aunque el programa es bastante más simple que Pidgin, también ha funcionado a la primera.<br /><br />Pero el asunto es que quería solucionar el problema para Pidgin. Existe ya, desde hace unos meses, un paquete específico con el plugin para los usuarios de <a href="http://www.ubuntu.com/">Ubuntu</a>, que se puede descargar desde la web oficial del proyecto (<a href="http://code.google.com/p/msn-pecan/">msn-pecan</a>, <em lang="en_US">Alternative MSN protocol plugin for libpurple</em>) y que también reside en los repositorios de la distribución.<br /><br />En cambio, para <a href="http://fedoraproject.org/">Fedora</a>, sólo parecían existir 2 opciones:<br /><ul><li>Compilar el fuente.</li><li>Esperar a que Pidgin (que ya comentan en su web el problema y que ya están trabajando en ello), sacara una actualización para el sistema.</li></ul><br /><br />Pero he encontrado una tercera opción. Edouard Bourguignon, ha compilado el código fuente y ha hecho un paquete específico para <strong>Fedora Core 10</strong> y lo ha colgado en <a href="http://www.linuxed.net/~madko/fedora/">su página web</a>. Gracias a él (otro héroe anónimo del software libre), el imprevisto con el protocolo MSN ha estado resuelto en menos de un día, preparado para miles de usuarios.<br /><br />El último paso para volver a conectar con la red MSN en Pidgin, tras instalar el paquete, es reiniciarlo y <a href="http://www.lifelog.be/2009/01/12/pidgin-unable-to-retrieve-msn-address-list/">cambiar el tipo de cuenta de MSN a WLM</a>.<br /><br />¿Qué sistema de pago hubiera hecho lo mismo, de forma gratuita, para sus clientes, en tan poco tiempo?Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-15675910.post-6811474754563324882009-01-05T15:17:00.037+01:002009-07-08T10:17:46.072+02:00Actualización de Fedora 7 a la versión 10Un año y medio en informática es muchísimo tiempo y, más si cabe, si hablamos de la evolución de escritorio de las distribuciones Linux. Desde mediados del año 2007, en el que me instalé <a href="http://fedoraproject.org/wiki/Releases/7">Fedora Core 7</a>, tan sólo había renovado el sistema con las actualizaciones de seguridad de la versión. Por fin, estas navidades, aprovechando el tiempo libre, me decidí a hacer un <a href="http://en.wikipedia.org/wiki/Upgrade" lang="en_US">upgrade</a> de la distribución.<br /><br /><h4>Primera desilusión</h4><a href="http://fedoraproject.org/">Fedora</a>, que está basada en <a href="http://www.redhat.com/">Red Hat</a>, tiene <a href="http://es.wikipedia.org/wiki/Yellow_dog_Updater,_Modified"><code>yum</code></a> como gestor de paquetes. Podríamos decir que <code>yum</code> es a Fedora como <a href="http://es.wikipedia.org/wiki/Advanced_Packaging_Tool"><code>apt</code></a> es a <a href="http://www.debian.org/">Debian</a>: la herramienta que permite instalar lo que necesitas sin preocuparte por las (odiosas, en algunos casos) dependencias.<br /><br />Una de las opciones que tiene <code>yum</code>, es actualizar el sistema entero a través del modificador <a href="http://fedoraproject.org/wiki/YumUpgradeFaq"><code>upgrade</code></a>. Al menos, eso era lo que creía. Siempre que ejecutaba el comando en cuestión, llegaba al mismo problema irresoluble de dependencias conflictivas. ¿No se suponía que esta herramienta era, precisamente, la indicada para no tratar nunca más con semejantes problemas? Pues no hubo manera, aún cuando, en un intento desesperado, le cambié las direcciones de los repositorios para apuntar a las versiones más modernas (e inestables) de dichos repositorios.<br /><br /><h4>El único camino posible</h4>La única alternativa viable era iniciar una instalación/actualización desde un <acronym title="Compact Disc">CD</acronym> de la nueva versión. Para ello, aprovechando la <q><em>magnífica</em></q> banda ancha de la que disponemos en España, me descargué la <a href="http://fedoraproject.org/es/get-fedora-all">ISO más pequeña</a>, que instala todos los componentes desde los repositorios de Internet.<br /><br />Para que este método funcione, por precaución, siempre es conveniente seguir estas 2 normas:<br /><br /><ol><li>Tener los datos de los usuarios (<code>/home</code>) en una partición diferente a la del sistema. (Actualmente, casi todas las distribuciones Linux respetan esta norma y no hay que preocuparse por ello.)</li><li>Hacer una copia de seguridad de los datos, en otro disco duro independiente al del sistema (o en un <acronym title="Digital Versatile Disc">DVD</acronym>, si cabe).</li></ol><br /><br /><h4>Primer arranque tras la instalación</h4>Antes de comenzar con los <q>problemillas</q> que encontré tras la actualización de Fedora, un comentario sobre el proceso de instalación: el asistente de instalación a través de red es verdaderamente simple, pero casi demasiado escueto en información sobre el proceso (cada vez se parece más a la filosofía de Windows, ocultando el máximo de información...).<br /><br />Ahora, empecemos con lo bueno. El proceso de arranque de esta versión 10 es muchísimo más simplista que el de la 7 (está visto que hay que parecerse al sistema de <em>ventanas</em> como sea...). Mi anterior sistema estaba preparado para <a href="http://www.comptechdoc.org/os/linux/howlinuxworks/linux_hlrunlevels.html">entrar en modo gráfico tras el arranque</a>, pero tras el <em lang="en_US">upgrade</em>... este último paso, falló. Al menos tenía acceso al sistema desde la consola de texto. También tenía acceso a Internet para buscar soluciones, pero... sin modo gráfico... ¿cómo continuar?<br /><br />Había una alternativa de primeros auxilios, y otra un poco más... ¿cómo decirlo?, de chico con recursos. La primera consistía en instalar (en modo texto) un navegador en modo texto, como <a href="http://lynx.isc.org/">lynx</a> o <a href="http://links.sourceforge.net/">links</a>. La segunda, por la que opté, era utilizar otro ordenador para conectarme a Internet en busca de información. Para ello, me agencié un <a href="http://es.wikipedia.org/wiki/Aspire_One">Acer Aspire One</a> con Linux preinstalado (una distro llamada <a href="http://es.wikipedia.org/wiki/Linpus_Linux">Linpus</a> que está basada en Fedora) y procedí a solventar mi contratiempo.<br /><br />En uno de los foros donde recalé, indicaban que buscara más detalles sobre el problema en el fichero <code>/var/log/Xorg.0.log</code>. Editándolo, pude ver al final del mismo, estas líneas:<br /><br /><pre>(EE) No devices detected<br />Fatal server error:<br />No screens found<br /></pre><br /><br />Increible, pero cierto. Hasta hace unos minutos había tenido mi <a href="http://es.wikipedia.org/wiki/X_Window_System">servidor X</a> funcionando a la perfección, pero el proceso de actualización había sido incapaz de reconocer mi tarjeta gráfica (pese a que todo el procedimiento se había llevado a a cabo en modo gráfico).<br /><br />Por suerte, existía una solución: ejecutar en modo root el siguiente comando (habiendo realizado antes una copia del fichero <code>/etc/X11/xorg.conf</code>, por si acaso):<br /><br /><pre># <kbd>system-config-display</kbd><br /></pre><br /><br />Tras reiniciar el equipo, la secuencia de arranque se completó hasta el final correctamente, pero... siguieron las sorpresas.<br /><br /><h4>Nueva versión de KDE</h4>Una especie de <a href="http://es.wikipedia.org/wiki/Dejavu" lang="fr">déjà vu</a> recorrió mi mente la primera vez que vi arrancar el escritorio <acronym title="K Desktop Environment">KDE</acronym>. Parecía que estaba viendo el escritorio de <acronym title="Microsoft Windows XP">XP</acronym>: limpio como una patena, sin ningún icono ni documento a la vista. ¿Quién se había llevado mis <a href="http://standards.freedesktop.org/desktop-entry-spec/latest/">lanzadores de aplicaciones</a> y archivos?<br /><br />Hasta entonces, KDE (versión 3.5), siempre me había parecido un entorno muy amigable (aunque tal vez, demasiado parecido al de Windows), pero la desaparición de iconos del escritorio (en esta versión 4.1) ya me parecía un toque de mimetismo demasiado... cruel. Así pues empecé a investigar por el nuevo sistema, por si era una opción de configuración (como en su <a href="http://es.wikipedia.org/wiki/Alter_ego"><em>alter ego</em></a>). Después de un rato de no encontrar nada, pasé la búsqueda al ámbito de Internet. Tan sólo extraje como conclusiones que <a href="http://plasma.kde.org/">KDE reinventaba el escritorio</a> y que la documentación oficial sobre <a href="http://techbase.kde.org/Projects/Plasma">Plasma</a> (que así se llama ahora la aplicación que lo controla) está un <a href="http://docs.kde.org/development/en/kdebase-workspace/plasma/index.html">poco</a> <a href="http://techbase.kde.org/Projects/Plasma/">verde</a> todavía.<br /><br />Lo que parecía claro, es que el directorio <code>/home/<var>mi_usuario</var>/Escritorio</code> no era lo que estaba viendo en pantalla y que, ahora, no se creaban lanzadores, sino <em lang="en_US">applets</em> (incluso se pueden utilizar los de Mac OS X), <em lang="en_US">widgets</em> y <em lang="en_US">plasmoids</em>.<br /><br /><h4>¿Dónde estaba el explorador de archivos?</h4>Eso es lo que me pregunté cuando intenté ver el contenido del disco duro. Ni rastro de <a href="http://www.konqueror.org/">Konqueror</a>, ni de su sustituto en esta versión: <a href="http://dolphin.kde.org/">Dolphin</a>. Tampoco encontré el programa de terminal de KDE: <a href="http://konsole.kde.org/">Konsole</a>. Ni siquiera estaba el editor de textos sencillo, el programa <a href="http://docs.kde.org/stable/en/kdebase-apps/kwrite/index.html">KWrite</a>.<br /><br />Una vez más, eché mano de Internet a través de mi flamante nueva versión de Firefox (¡por fin podía disfrutar de la versión 3!). Llegué a una página donde podía buscar programas de Fedora, y me devolvía <a href="https://admin.fedoraproject.org/pkgdb/search/">información sobre el desarrollo (código fuente) de la herramienta</a>. De esta forma, pude encontrar la clave de la cuestión: todos los programas que echaba en falta, estaban dentro de un paquete llamado <code>kdebase</code>. Cuando busqué ese paquete en mi sistema (<kbd>rpm -qa | grep kdebase</kbd>), comprobé que, efectivamente, no estaba... el de la versión 4. Sí que seguía estando el correspodiente paquete para la versión 3. Entonces, ¿por qué no se había actualizado?<br /><br />La herramienta <code>yum</code>, cuando actualiza paquetes, se fija en el nombre de los mismos. El formato de los nombres de los paquetes es como sigue:<br /><br /><pre><var>nombre<var>-<var>versión</var>-<var>release</var>.<var>arquitectura</var>.rpm<br /></pre><br /><br />Resumiendo, que si el nombre no coincide, <code>yum</code> no actualiza. Eso es lo que había pasado en mi caso. El paquete, para KDE 3.5, se llamaba <code>kdebase3</code>, y, para la versión 4, el nombre había cambiado a, simplemente, <code>kdebase</code>.<br /><br />Instalando manualmente el paquete (<kbd>yum install kdebase</kbd>), tuve de nuevo todos mis programas.<br /><br /><h4>Inconvenientes con las codificaciones de archivos</h4>Ni la nueva versión de Konqueror, ni el nuevo Dolphin, entendían algunos de los nombres de mis antiguos archivos: aquellos que estaban en una codificación distinta a <a href="http://es.wikipedia.org/wiki/UTF-8">UTF-8</a>. Ni siquiera me dejaban, ninguno de los 2 exploradores de archivos, renombrar los ficheros de la discordia. Solución: hacerlo manualmente desde la línea de comando.<br /><br />Esto, en cuanto a nombres se refiere. Pero el contenido de mis archivos de texto (abiertos con KWrite), en <a href="http://es.wikipedia.org/wiki/ISO_8859-1">codificación ISO-8859-1</a>, tampoco se salvaba de la quema. Como ya he dicho, ahora todos los programas en Linux, trabajan con UTF-8 por defecto, y cada vez va siendo más complicado cambiar este comportamiento. En KWrite, versión para KDE 3.5, existía un menú de la aplicación, donde se podía cambiar fácilmente el modo de la codificación, pero en la nueva versión, está algo más escondido. Más exáctamente, está en: <strong lang="en_US">Settings</strong>, <strong lang="en_US">Configure editor...</strong>, <strong lang="en_US">Open/save</strong>, <strong lang="en_US">General</strong>, opción <strong lang="en_US">Encoding autodetection</strong>. Es necesario poner el valor <var lang="en_US">western european</var> para ver correctamente el contenido de los archivos generados en <a href="http://es.wikipedia.org/wiki/ISO_8859-1">ISO Latin 1</a>.<br /><br />Los nombres de las opciones de la aplicación los pongo en inglés, porque el instalador no me puso el paquete de español para KDE. Tal vez pase algo parecido que en el caso del paquete <code>kdebase</code>, pero la verdad es que el cambio de idioma no me afecta tanto como el perder programas.<br /><br /><h4>Conclusiones</h4>Seguro que me dejo de comentar más pequeñas pegas pero, por el momento, tan sólo comentaré una más: el directorio <code>/sbin</code> ya no está en el <strong>PATH</strong> del usuario <em>root</em>. Aunque solucionarlo es sencillo (añadirlo en el archivo <code>.bash_profile</code> del usuario, por ejemplo), no dejó de resultarme curioso que antes estuviera y ahora no.<br /><br />La pregunta que me hago es si los problemillas que me han surgido en la actualización, también hubieran ocurrido en una instalación limpia. Por lo demás, con la nueva versión, el ordenador ha mejorado en rendimiento y la respuesta al usuario de los programas es más ligera que antes. Así que, pese a todo, el cambio ha sido para mejor.<br /><br />En todo cambio, mudanza, innovación... hay pérdidas. Unas veces reales y tangibles, otras veces en comodidad. Pero si hay una cosa que he aprendido en este año que termina es que si no te atreves a cambiar, no hay posibilidad de mejorar y de aprender cosas nuevas.<br /><br /><strong>Actualización (2009-01-14):</strong><br />Como me temía, que KDE 4 estuviera en inglés en lugar de en español, era debido al cambio de nombre del paquete de internacionalización. En la versión 3.5 se llama <code>kde-i18n-Spanish</code> y, en la versión 4.1, pasa a ser <code>kde-l10n-Spanish</code>. Instalando el nuevo paquete y configurando el idioma en las preferencias del sistema (<em lang="en_US">Systems Settings</em>, <em lang="en_US">Country & Language</em>), el tema queda solucionado.Unknownnoreply@blogger.com2tag:blogger.com,1999:blog-15675910.post-40903118648216903752008-06-08T11:52:00.002+02:002008-06-08T12:27:24.035+02:00Si lo pago, lo usoSoy linuxero de pro. Tengo actualmente una <a href="http://www.debian.org/releases/testing/">Debian testing</a> en el sobremesa y una <a href="http://es.wikipedia.org/wiki/Arch_Linux">Arch linux</a> en el <a href="http://servicios.ahtec.org/index_menu.htm">portátil</a>. Y me encanta. Lo que necesito, lo tiene. Navegar por internet, escuchar música, ver vídeos y dvd's, tareas ofimáticas, amuladores, juegos...<br /><br />Pero he comprado un nuevo portátil. Un Sony VAIO VGN-FZ31E. Muy pero que muy bonito. Y claro, viene con un Windows Vista Home Premium. Así que me dije, vamos a ponerle un linux.<br /><br />Pero para qué? Libertad, licencias, mejor seguridad... Si, me conozco todos los argumentos. Pero he pagado por un producto. Considero absurdo tirar algo que he pagado. Se actualiza solo, lleva software por un tubo ya instalado, bien propio de Sony o de terceros. Y si necesito de veras algo más, siempre puedo poner <a href="http://www.gimp.org.es/">GIMP</a>, <a href="http://es.openoffice.org/">OpenOffice</a>, <a href="http://www.pidgin.im/">Pidgin</a>, <a href="http://www.difundefirefox.com/">Firefox</a>, <a href="http://www.mozilla-europe.org/es/products/thunderbird/">Thunderbird</a>. Y ahora con los futuros ports de kde podría incluso poner alguna de las utilidades que más me gustan. Como <a href="http://www.k3b.org/">k3b</a>, <a href="http://kopete.kde.org/">kopete</a>, <a href="http://basket.kde.org/">basket</a>, <a href="http://amarok.kde.org/">amarok</a>, <a href="http://kaffeine.kde.org/">kaffeine</a> o <a href="http://es.wikipedia.org/wiki/D3lphin">dolphin</a>. Aunque en este último caso creo que no hay nada mejor que <a href="http://www.ghisler.com/">Total Commander</a>, aunque sea <a href="http://es.wikipedia.org/wiki/Shareware">shareware</a> ;)<br /><br />Pero en general, para qué? El portátil viene ya con todo lo que necesito para mi trabajo habitual. Así que este portátil se va a quedar con su Windows Vista Home Premium y todas sus utilidades.<br /><br />Al menos hasta que me harte de reinicios y de preguntas estúpidas. Preguntas, no llevo muchas la verdad, pero reinicios llevo ya 5 y no hace ni una hora que está en marcha.<br /><br />No me lo quiero ni imaginar cuando le ponga la capturadora de DVB-T. Seguro que alcanzaré los 15 reinicios antes de que funcione del todo.Mr Azulhttp://www.blogger.com/profile/02978209112090777687noreply@blogger.com7tag:blogger.com,1999:blog-15675910.post-58486053846524974652007-12-16T15:22:00.001+01:002007-12-16T15:54:59.993+01:00Cómo instalar WAPP (II)Los tiempos avanzan que es una barbaridad y ya ha pasado casi año y medio desde que escribí <a href="http://abcweb.blogspot.com/2006/08/cmo-instalar-wapp.html">la primera parte de este artículo</a>. En él explicaba cómo instalar 2 versiones de PHP (PHP4 y PHP5), sobre un mismo servidor Apache, en un sistema operativo Microsoft Windows. En esta segunda parte voy a intentar dar un giro de tuerca al asunto, instalando ambas versiones de PHP como módulos del mismo servidor Apache, pero corriendo en procesos (servicios) separados.<br /><br />Con este proceso, podremos aprovechar la misma potencia que nos ofrece Apache para un intérprete y para el otro. Además, de esta forma, iremos renovando nuestra infraestructura para el día en que <a href="http://www.gophp5.org/">la versión 4 de PHP no se soporte más</a>. Podremos tener nuestro servidor preparado por defecto para PHP5 y, a la vez, seguir manteniendo algún viejo script de PHP4.<br /><br />Este método sólo tiene un problema: necesita de más memoria RAM en el servidor porque se estarán lanzando 2 servicios en lugar de uno.<br /><br /><h3>Requisitos previos</h3><ul><li>Tener una máquina con Microsoft Windows (recomendado XP, pero también sirve 2003 Server).</li><li>Haber leído <a href="http://abcweb.blogspot.com/2006/08/cmo-instalar-wapp.html">la primera parte de este artículo</a> para tener instaladas ambas versiones de PHP en el ordenador. Actualmente, recomiendo instalar las últimas versiones disponibles: la <a href="http://www.php.net/downloads.php#v4">4.4.7</a> y la <a href="http://www.php.net/downloads.php#v5">5.2.5</a>.</li></ul><br /><br /><h3>Desinstalación de Apache</h3>Este apartado es opcional, pero es recomendable seguirlo si en nuestra máquina ya estamos ejecutando el servidor de Apache y queremos partir de cero para continuar con el resto de instrucciones que se mencionan más adelante.<br /><br />La idea es dejar la máquina lo más limpia posible, para que nada de lo que haya anteriormente instalado, cause complicaciones con lo que instalaremos a continuación. Estos son los pasos a seguir:<br /><br /><ol><br /><li>Parar el servicio de Apache. Para ello hay varias opciones:<ul><br /><li>Ejecutar desde una consola de comandos la orden:<br /><pre><code>c:\> <kbd>net stop nombre_del_servicio_apache</kbd></code></pre></li><br /><li>Ir a la consola de servicios del sistema (<code>services.msc</code>) y parar desde allí el servicio.</li><br /><li>Utilizar <strong>Apache Monitor</strong> (el programa que se instala en la bandeja del sistema cuando instalamos Apache).</li></ul></li><br /><li>Parar la ejecución de <strong>Apache Monitor</strong>, abriéndo la aplicación y pulsando el botón <kbd>Exit</kbd>.</li><br /><li>Desinstalar Apache desde <strong>Agregar/Quitar programas</strong> (en el Panel de Control).</li><br /><li>Borrar la carpeta de instalación de Apache desde el explorador de archivos. Antes de hacer esto, podemos hacer una copia de seguridad por si acaso luego quisiéramos restaurar alguna configuración especial.</li></ol><br /><br /><h3>Un Apache, 2 procesos</h3>Vamos a instalar la versión 2.0.61 de Apache. La razón de no utilizar una versión 2.2.x es la misma que daba hace ya un tiempo: la librería de PHP4 que se carga como módulo de Apache no funciona con la versión 2.2.<br /><br />Si alguien quiere probar con Windows Vista, será mejor que <a href="http://sentidoweb.com/2007/02/05/como-instalar-apache-en-windows-vista.php">lea estas instrucciones para instalar Apache</a>.<br /><br />Haremos una instalación normal, hasta que lleguemos al paso en que pregunta si queremos instalar como servicio (utilizando el puerto 80) o sólo para el usuario actual (en el puerto 8080). Elegiremos esta última opción porque, posteriormente, ya nos encargaremos de instalar manualmente los servicios que necesitemos. Para el resto del artículo, consideraré que Apache se ha instalado en el directorio <code>c:\apache\</code>.<br /><br />Una vez acabado el asistente de instalación, iremos al directorio de configuración de Apache (<code>c:\apache\conf\</code>) y haremos 2 copias del fichero <code>httpd.conf</code>: una se llamará <code>php5_httpd.conf</code> y la otra <code>php4_httpd.conf</code>.<br /><br />Nuestro servidor <em>"principal"</em> (el que operará en el puerto 80), cargará como módulo PHP5. El otro servidor, que estará en el puerto 8080 (pero puede elegirse otro puerto), llevará el módulo de PHP4.<br /><br /><h4>Edición del fichero php5_httpd.conf</h4>Partiendo de la configuración base de Apache, estas son las líneas que deberemos modificar:<br /><br /><pre><samp><br />ScoreBoardFile logs/php5_apache_runtime_status<br />PidFile logs/php5_httpd.pid<br />Listen 80<br />ServerName localhost:80<br />ErrorLog logs/php5_error.log<br />CustomLog logs/php5_access.log common<br /></samp></pre><br /><br />Y estas líneas, las deberemos añadir (se considera que PHP5 está instalado en <code>c:\php5\</code>, si no es así, habrá que modificar la ruta):<br /><br /><pre><samp><br />LoadModule php5_module "c:/php5/php5apache2.dll"<br />AddType application/x-httpd-php .php<br />PHPIniDir "C:/php5"<br /></samp></pre><br /><br /><h4>Edición del fichero php4_httpd.conf</h4>Líneas a modificar:<br /><br /><pre><samp><br />ScoreBoardFile logs/php4_apache_runtime_status<br />PidFile logs/php4_httpd.pid<br />Listen 8080<br />ServerName localhost:8080<br />ErrorLog logs/php4_error.log<br />CustomLog logs/php4_access.log common<br /></samp></pre><br /><br />Líneas a añadir (se considera que PHP4 está instalado en <code>c:\php4\</code>, si no es así, habrá que modificar la ruta):<br /><br /><pre><samp><br />LoadModule php4_module "c:/php/sapi/php4apache2.dll"<br />AddType application/x-httpd-php .php<br />PHPIniDir "C:/php"<br /></samp></pre><br /><br /><h4>Dos configuraciones, dos servicios</h4>La idea es, viendo el contenido de ambos ficheros, mantener en archivos distintos la información de cada uno de los procesos que vamos a lanzar. Y como van a ser 2 los servicios ejecutados, tenemos que utilizar puertos de escucha diferentes.<br /><br />El siguiente paso a seguir es instalar los 2 servicios. Desde una consola de comandos, iremos al directorio donde está el ejecutable de Apache y escribiremos:<br /><br /><pre><code><br />c:\> <kbd>cd c:\apache\bin</kbd><br />c:\apache\bin> <kbd>apache -k install -n "Apache2PHP5" -f "c:\apache\conf\php5_httpd.conf"</kbd><br />c:\apache\bin> <kdb>apache -k install -n "Apache2PHP4" -f "c:\apache\conf\php4_httpd.conf"</kbd><br /></code></pre><br /><br />Y para lanzar los servicios:<br /><br /><pre><code><br />c:\apache\bin> <kbd>apache -k start -n "Apache2PHP5"</kbd><br />c:\apache\bin> <kbd>apache -k start -n "Apache2PHP4"</kbd><br /></code></pre><br /><br />Si todo ha ido bien, ya tenemos todo listo para invocar a ambos servicios por separado. Vamos a hacer una prueba rápida, escribiendo un script llamado <code>prueba_php.php</code> con este contenido:<br /><br /><pre><samp><br /><?php<br />/* fichero prueba_php.php */<br />phpinfo();<br />?><br /></samp></pre><br /><br />El script lo colocaremos en el directorio <a href="http://httpd.apache.org/docs/1.3/mod/core.html#documentroot">DocumentRoot</a> de ambos servidores (que debería ser <code>c:\apache\htdocs\</code> si no hemos modificado la ruta por defecto). Ejecutando <kbd>http://localhost/prueba_php.php</kbd> y <kbd>http://localhost:8080/prueba_php.php</kbd> en el navegador, nos debería salir información diferente acerca de cada uno de los módulos de PHP.<br /><br /><h4>Cómo testear la configuración de cada servicio</h4>Por si necesitáramos añadir más prestaciones a alguno de los 2 servicios, voy a comentar como comprobar si el fichero de configuración tiene o no algún fallo. Desde una consola de comandos, tendríamos que escribir:<br /><br /><pre><code><br />c:\> <kbd>cd c:\apache\bin</kbd><br />c:\apache\bin> <kbd>apache -t -f "c:\apache\conf\fichero_de_configuracion.conf"</kbd><br /></code></pre><br /><br /><h3>Un puerto abierto, 2 servicios en puertos diferentes</h3>Las siguientes instrucciones son totalmente opcionales pero pueden venir bien, en el caso de que queramos dejar solamente abierto un puerto en nuestro router para acceder a cualquiera de los 2 Apaches montados y tengamos acceso al <acronym title="Domain Name System">DNS</acronym> para montar más dominios.<br /><br />Como último paso, podemos hacer que desde fuera del servidor, parezca que las todas las peticiones sean para un único servidor. Realmente, lo que ocurre es que las peticiones que no puede gestionar el primero, las redirige al segundo, sin que por ello cambie la <acronym title="Universal Resource Locator">URL</acronym> que escribe el usuario. Para ello será necesario que podamos discriminar por nombre de dominio ambos servidores porque sólo disponemos de un puerto de salida para los dos.<br /><br />Para el siguiente ejemplo, se considerará que el Apache con PHP5 es accesible a través de <code>www.examplephp5.org</code> y el otro Apache con PHP4, a través de <code>www.examplephp4.org</code>. Estas 2 entradas, en el DNS, apuntarán a la misma máquina física (serán 2 alias de esa máquina).<br /><br />Podemos hacer las pruebas en la máquina local, añadiendo estas entradas en el fichero <code>c:\windows\system32\drivers\etc\hosts</code>:<br /><br /><pre><samp><br />127.0.0.1 www.examplephp5.org<br />127.0.0.1 www.examplephp4.org<br /></samp></pre><br /><br /><strong>¡Ojo!. Esta configuración del archivo <code>hosts</code> sólo sirve para la máquina local, no para un cliente exterior.</strong><br /><br />Una vez que ya tenemos nuestro entorno de prueba, veamos qué es lo que tenemos que configurar en el servicio principal (<strong>Apache2PHP5</strong> que escucha en el puerto 80). En el fichero de configuración <code>php5_httpd.conf</code> debemos modificar estas líneas (descomentándolas):<br /><br /><pre><samp><br />NameVirtualHost *:80<br />LoadModule proxy_module modules/mod_proxy.so<br />LoadModule proxy_http_module modules/mod_proxy_http.so<br /></samp></pre><br /><br />Y añadiremos estas:<br /><br /><pre><samp><br /><VirtualHost *:80><br /> ServerName localhost<br /></VirtualHost><br /><br /><VirtualHost *:80><br /> ServerName www.examplephp4.org<br /> ProxyPass / http://localhost:8080/<br /> ProxyPassReverse / http://localhost:8080/<br /></VirtualHost><br /></samp></pre><br /><br />Tras reiniciar el servicio, podemos hacer la prueba, poniendo las URLs a nuestro fichero de prueba en el navegador web: <kbd>http://www.examplephp5.org/prueba_php.php</kbd> y <kbd>http://www.examplephp4.org/prueba_php.php</kbd>. Si todo ha ido bien, la información mostrada debe ser diferente. En el primer caso, el módulo cargado es el de PHP5 y, en el segundo, el de PHP4.<br /><br /><h3>Referencias</h3><ul><li><a href="http://www.skiffie.com/code/server/run-2-versions-php-as-modules">Run 2 Versions of PHP as Apache Modules</a></li><li><a href="http://www.gentoo.org/proj/en/php/php4-php5-configuration.xml">Configure Apache to work with PHP4 and PHP5</a></li><li><a href="http://schlitt.info/applications/blog/index.php?/archives/83-How-to-run-PHP4-and-PHP-5-prallel.html">How to run PHP4 and PHP 5 prallel</a></li><li><a href="http://httpd.apache.org/docs/2.0/mod/mod_proxy.html">Apache Module mod_proxy</a></li></ul>Unknownnoreply@blogger.com3tag:blogger.com,1999:blog-15675910.post-45337857095265694032007-11-06T19:31:00.001+01:002009-01-05T16:52:57.214+01:00Firefox & ProxyA veces, cuando trabajas con un portátil lo tienes que enchufar a diferentes redes. Y estas a veces te proporcionan acceso a internet a través de un <a href="http://es.wikipedia.org/wiki/Proxy">proxy</a>. Y como cada red seguro que tiene su propio proxy definido, pues hay que hacer el cambio en las preferencias de <a href="http://www.getfirefox.es/">firefox</a> a mano.<br /><br />Para evitarnos tener que hacer eso hay una extensión de firefox de lo más interesante. Se llama <a href="https://addons.mozilla.org/es-ES/firefox/addon/125">SwitchProxy</a> y tiene un montón de características interesantes. Entre otras, la posibilidad de añadirle un listado de servidores proxy anónimos e ir pasando de uno a otro automáticamente cada x tiempo. Con lo que tu navegación será todo lo anónima que este sistema permite (para cosas más <span style="font-style: italic;">serias</span>, mírese <a href="http://www.torproject.org/index.html.es">tor</a> y téngase siempre en cuenta que <span style="font-weight: bold;">todo</span> pasa por la red del proveedor ;-) y que lo único verdaderamente seguro por ahora es el <a href="http://es.wikipedia.org/wiki/GPG">cifrado</a> <a href="http://www.openssh.com/es/features.html">fuerte</a>)<br /><br />Como colofón a esta entrada, aquí van una serie de direcciones interesantes relacionadas con el tema.<br /><ul><li><a href="http://www.security-database.com/toolswatch/Turning-Firefox-to-an-Ethical.html">Turning Firefox to an Ethical Hacking Platform</a></li><li><a href="http://www.security-database.com/toolswatch/FireCAT-1-Firefox-Catalog-of.html">FireCAT 1.0 Firefox Catalog of Auditing Tools released</a></li><li>Otras extensiones interesantes para firefox sobre el tema: <a href="https://addons.mozilla.org/en-US/firefox/addon/4457">ProxySel</a> y <a href="https://addons.mozilla.org/en-US/firefox/addon/2464">FoxProxy</a> (la más famosa) aunque yo me quedo con <a href="https://addons.mozilla.org/es-ES/firefox/addon/125">SwitchProxy Tool</a>.<a href="https://addons.mozilla.org/es-ES/firefox/addon/125"><br /></a></li><li>Listas de servidores proxy (no fiarse mucho): <a href="http://www.checkedproxylists.com/">http://www.checkedproxylists.com/</a> y <a href="http://gonzo.teoriza.com/almacen/proxy-lista.html">http://gonzo.teoriza.com/almacen/proxy-lista.html</a></li></ul>Mr Azulhttp://www.blogger.com/profile/02978209112090777687noreply@blogger.com0tag:blogger.com,1999:blog-15675910.post-37753479527193928362007-10-20T20:15:00.002+02:002007-10-20T21:12:07.590+02:00Jornadas sobre la web móvilDentro de los simposios del <a href="http://www.congresocedi.es/2007/">CEDI 2007</a>, que se celebró en Zaragoza del 11 al 14 de septiembre, hubo uno dedicado a la web móvil, organizado por la <a href="http://www.w3c.es/">oficina del W3C de España</a>, la <a href="http://www.fundacionctic.org/">fundación CTIC</a> y el <a href="http://zaragoza.es/">Ayuntamiento de Zaragoza</a>. Las conferencias de estas jornadas tuvieron lugar los días 12 y 13. El <a href="http://www.w3c.es/Eventos/2007/MWeb/Programa/">programa y las ponencias están disponibles en la página del W3C</a>.<br /><br />El resumen que se presenta a continuación está basado en el contenido de las ponencias y en apuntes personales que tomé como asistente a las mismas.<br /><h4>Introducción</h4>Como ocurre en la web de escritorio (para <acronym title="Personal Computers">PCs</acronym>), es muy difícil desarrollar un diseño que sirva para todos los dispositivos y navegadores de los móviles. El hardware es muy diverso y tiene inconvenientes frente al mundo del PC:<br /><ul><br /><li>Poca capacidad de proceso y memoria.</li><li>Limitado tamaño de pantalla (resolución, orientación).</li><li>Escasos colores.</li><li>Dificultad a la hora de introducir datos.</li><li>Poco ancho de banda.</li><li>Excesivo precio de las tarifas de conexión.</li></ul><br />Los navegadores (como siempre), tampoco ayudan a mejorar el panorama pues cada uno implementa un <a href="http://www.littlespringsdesign.com/resources/articles/xhtmlinfo/">lenguaje de marcado distinto</a>:<br /><ul><li><a href="http://en.wikipedia.org/wiki/Wireless_Markup_Language">WML</a></li><li><a href="http://www.i-mode-emulator.com/en/ihtml/ihtml_reference.php">iHTML</a></li><li><a href="http://www.w3.org/TR/xhtml-basic/">XHTML-Basic</a></li><li><a href="http://en.wikipedia.org/wiki/XHTML_Mobile_Profile">XHTML-MP</a></li></ul><br /><br />Y sólo algunos tienen características avanzadas como el soporte de CSS y de JavaScript. Por si fuera poco, el abanico de navegadores disponibles es incluso mayor que en el caso de los PCs. Sin embargo, el parque de móviles se renueva mucho más rápidamente que el de ordenadores de escritorio.<br /><h4>El concepto de movilidad</h4><blockquote><em>Toda la información disponible para cualquier persona, en cualquier lugar y en cualquier instante de tiempo.</em></blockquote><br /><br />Por primera vez en la historia de la tecnología, se está más cerca de conseguir este sueño, gracias a la utilización de dispositivos móviles. Gracias a su pequeño tamaño, y cada vez más prestaciones, pueden acercarnos a la información que necesitemos en cualquier momento (como la <a href="http://en.wikipedia.org/wiki/Proximity_marketing">información de proximidad</a>). Siempre que contemos con la cobertura necesaria y si se empiezan a desarrollar servicios que cubran la gran demanda de información que puede surgir.<br /><br />Aún así, Internet a través del móvil nunca será como la Internet que vemos en los ordenadores de sobremesa:<br /><ul><li>Por las limitaciones de los dispositivos y del medio de acceso.</li><li>Por las ventajas que le otorga la movilidad.</li><li>Por la diferencia en el tipo de uso y la necesidad del usuario.</li></ul><br /><br />La web móvil requiere que la información sea breve, concisa y que se pueda acceder ágil y rápidamente a ella. Para ello hay que recordar a los generadores de contenidos para los dispositivos móviles que, más que en ningún otro medio de comunicación, la palabra la tienen los usuarios. Si no hay buenos (y útiles) servicios, los usuarios no los consumirán.<br /><br />Otro reto que queda, para las empresas que ofrecen la cobertura, es disminuir los costes para que más gente pueda acceder a los servicios creados.<br /><br />Esto con respecto a Internet, pero también hay claras ventajas que aporta la <em>movilización</em> en aplicaciones:<br /><br /><ul><li>Gestión en tiempo real<br /><ul><li>Capacidad de procesar incidentes en tiempo real</li><li>Mejor información al cliente</li><br /></ul></li><li>Mejora de productividad (evitar el envío posterior de datos)</li><li>Mejora de calidad (evitar la perdida de datos, detalles)</li></ul><br /><br /><h4>Desarrollo móvil</h4>Pero para tener esas ventajas es necesario producir aplicaciones para los dispositivos móviles. En este apartado comentaremos algunas herramientas disponibles para llevar a cabo la difícil tarea del desarrollo.<br /><br /><h5>Identificación de dispositivos</h5>En primer lugar es crucial conocer las características técnicas de los dispositivos de los potenciales usuarios. Al conjunto de capacidades del dispositivo (hardware y software) y preferencias de usuario se le denomina <em>perfil de dispositivo</em>. Hay diversos sistemas que podemos consultar para acceder a estos perfiles:<br /><br /><ul><li><a href="http://www.w3.org/Mobile/CCPP/"><acronym title="Composite Capabilities/Preference Profiles">CC/PP</acronym></a>: Para almacenar la información usa notación <a href="http://www.w3.org/RDF/"><acronym title="Resource Description Framework">RDF</acronym></a>.</li><br /><li><a href="http://en.wikipedia.org/wiki/UAProf"><acronym title="User Agent Profile">UAProf</acronym></a>: Promovido por la <a href="http://www.openmobilealliance.org/">Open Mobile Alliance</a>. También se basa en RDF. Pero no están todos los que son (los grandes ausentes son dispositivos con Windows Mobile) ni son todos los que están (parte de la información puede no corresponder con datos reales).</li><br /><li><a href="http://wurfl.sourceforge.net/index.php"><acronym title="Wireless Universal Resource File">WURFL</acronym></a>: A diferencia de los otros sistemas, la <em>base de datos</em> se va completando con datos aportados por usuarios de los dispositivos móviles (es una de las ventajas por ser software libre). Esto tiene el problema de que contiene información no autentificada por los fabricante. Sin embargo, tiene la ventaja de que se puede recoger información sobre todo tipo de dispositivos (incluso de los que no tienen perfil UAProf). Además, este sistema se complementa con <acronym title="Application Program Interfaces">APIs</acronym> de consulta para la base de datos (que es un fichero XML) en diversos lenguajes de programación (Java, PHP, Perl, Ruby, Python, dotNet, ...). Por todo esto, es un sistema mucho más usado y fiable que UAProf.</li><br /><li><a href="http://www.w3.org/2005/MWI/DDWG/"><acronym title="Device Description Repository">DDR</acronym></a>: Con el objetivo de solucionar los problemas de UAProf, el W3C está desarrollando este nuevo sistema. El apoyo por parte de los fabricantes de dispositivos será crucial para que esta iniciativa fructifique.</li></ul><br /><br />Por su parte, para el desarrollo de aplicaciones en Java <acronym title="Micro Edition">ME</acronym>, están disponibles estas herramientas:<br /><br /><ul><li><a href="http://java.sun.com/products/midp/"><acronym title="Mobile Information Device Profile">MIDP</acronym> 2.0</a></li><br /><li><a href="http://java.sun.com/products/cldc/"><acronym title="Connected Limited Device Configuration">CLDC</acronym> 1.1</a></li></ul><br /><br /><h5>Buenas prácticas en el desarrollo de la web móvil</h5>Reconocer las capacidades que permite el dispositivo de un usuario es sólo el inicio del camino en el desarrollo de contenidos web. Aparte de seleccionar el lenguaje de marcado adecuado a cada situación, es preciso hacer un buen diseño de arquitectura de la información para mostrar tan sólo los datos justos y precisos en cada página mostrada.<br /><br />Para no dejarnos solos en esta ardua tarea, el W3C ha escrito un <em>manual</em> donde se recogen las buenas prácticas que nunca debemos olvidar en el desarrollo de contenidos para la web móvil: <a href="http://w3.org/TR/mobile-bp">Mobile Web Best Practice 1.0 Basic Guidelines</a>.<br /><br />Como resumen de la presentación de estas normas, veamos cuáles han puesto en práctica el <a href="http://zaragoza.es/">Ayuntamiento de Zaragoza</a> para adaptar su web a los dispositivos móviles:<br /><br /><ul><li><a href="http://www.w3.org/TR/mobile-bp/#iddiv3126749392">Adaptación del lenguaje de marcado</a></li><br /><li><a href="http://www.w3.org/TR/mobile-bp/#bpgroupplayout">Reubicación del contenido</a></li><br /><li><a href="http://www.w3.org/TR/mobile-bp/#iddiv3126702920">Particionado de los documentos</a></li><br /><li><a href="http://www.w3.org/TR/mobile-bp/#OBJECTS_OR_SCRIPT">Eliminación de JavaScript</a></li><br /><li><a href="http://www.w3.org/TR/mobile-bp/#iddiv3126724712">Transformación de tablas</a> y <a href="http://www.w3.org/TR/mobile-bp/#iddiv3126678344">mapas de imágenes</a></li><br /><li><a href="http://www.w3.org/TR/mobile-bp/#ImageSize">Imágenes: escalado y reducción de colores</a><ul><li>Archivos de audio: reducción de la frecuencia de muestreo</li><br /><li>Archivos de video: escalado y reducción de la calidad de codificación</li></ul></li><br /><li><a href="http://www.w3.org/TR/mobile-bp/#CACHING">Mecanismos de caché de información</a></li></ul><br /><br /><h5>Herramientas de desarrollo</h5>Cuando sale un nuevo dispositivo, no siempre podremos acceder a la compra del mismo. Una buena alternativa (aunque no sea fiable al 100%), es usar emuladores. Todos los fabricantes importantes ponen a disposición de los desarrolladores emuladores de sus modelos más significativos.<br /><br />Durante el proceso de diseño e implantación de la solución son herramientas esenciales, para las pruebas finales siempre sería recomendable usar los dispositivos reales, porque no siempre las emulaciones se van a corresponder con la realidad.<br /><br />La otra gran herramienta que debemos tener siempre a mano es un validador de código para dispositivos móviles. Hay uno disponible en la <a href="http://validadores.tawdis.net/mobileok">web de TAW</a>. Además de verificar que el código esté bien escrito, al igual que hacen con los tests de accesibilidad, nos dirá si nuestras páginas son <a href="http://www.w3.org/TR/mobileOK-basic10-tests/">MobileOK</a>. Es decir, si cumplimos las <em>buenas prácticas</em> o no.<br /><br /><h4>dotMobi</h4>Con el fin de proporcionar un servicio de calidad a los usuarios móviles, ha nacido la iniciativa <a href="http://mtld.mobi/">dotMobi</a>. Estas son algunas de sus características:<br /><br /><ul><br /><li>dotMobi es un dominio <em>específico</em> para el móvil.</li><br /><br /><li>Cualquiera puede conseguir un dominio dotMobi, pero se compromete a cumplir esta máxima y respetar las guías de estilo obligatorias. Por ejemplo, en el caso de un site:<ul><br /><li>Accesible como dominio de segundo nivel (<a href="http://bmw.mobi">bmw.mobi</a>) (sin <strong>www.</strong>).</li><br /><li>Desarrollado conforme a <a href="http://www.w3.org/Mobile/">W3C MWI</a>.</li><br /><li>No frames: Muchos móviles no soportan frames.</li></ul></li><br /><li>Si un servicio dotMobi no cumple las guías de estilo, mTLD (el organismo que desarrolla esta iniciativa) iniciará un proceso de apercibimiento que podría terminar con su desconexión del <acronym title="Domain Name System">DNS</acronym>.</li><br /><li>Es muy intuitivo, fácil de publicitar y de recordar.</li><br /><li>Las páginas dotMobi son una garantía de que el contenido estará bien distribuido, no tendrá grandes fotos, no habrá texto que no se pueda ver ni información fuera de contexto o que no pueda mostrar la pantalla del móvil, ...</li><br /><li><a href="http://pc.dev.mobi/?q=node/197">dotMobi Mobile Web Developer Guide</a> ofrece información extremadamente útil con reglas para los profesionales.</li><br /><li><a href="http://ready.mobi/">Ready.mobi</a> es un analizador de conformidad para las páginas y sites dotMobi que, además de una clasificación, ofrece recomendaciones específicas para mejorar el código empleado.</li></ul><br /><hr /><br /><h4>Opinión personal sobre las conferencias</h4>El nivel de las ponencias fue grande y me ayudaron a asentar los pocos conocimientos que hasta entonces tenía sobre los fundamentos de la web móvil.<br /><br />Como nota negativa, no para el simposio, pero sí para la organización del congreso, decir que la publicidad que se hizo de un evento de estas características fue bastante pobre y escasa (sobre todo en Zaragoza). Personalmente, me enteré del evento a través del <a href="http://www.torresburriel.com/weblog/2007/09/04/accesibilidad-y-las-buenas-practicas-para-la-web-movil/">blog de Torres Burriel</a>. Si se hubiera dado la cobertura necesaria, el congreso habría tenido incluso más éxito en participación (sobre todo local) que el que no dudo que obtuvo.Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-15675910.post-54110965550578323722007-10-07T14:34:00.001+02:002009-01-05T16:54:22.522+01:00A la hora señaladaA veces, cuando la pila del ordenador está muy gastada o simplemente por un problema hardware, el reloj del ordenador se retrasa. Y no deja de ser incómodo el tener la hora que no toca en la esquina inferior derecha de la pantalla.<br /><br />En M$ Windows existe desde su versión 2000 la posibilidad de ajustar la hora mediante un servidor de <a href="http://es.wikipedia.org/wiki/Network_Time_Protocol">ntp</a>. Aunque muchas veces, no se porqué no funciona del todo bien. Al final, la última vez que lidie con este problema tuve que buscar en el registro la clave HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\DateTime\Servers y cambiar su contenido por alguno de los servidores que aparecen en alguno de los links que hay al final del todo de esta entrada.<br /><br />En linux es como siempre mucho más fácil. Sólo se se necesita el programa ntpdate. Y el resto de la explicación en <a href="http://administradores.educarex.es/wiki/index.php/NTPDATE">este link</a>.<br /><br />También está la opción de utilizar un demonio para ello, con lo que se puede tener un único ordenador de la red que tenga la hora bien establecida desde internet y los demás que la actualicen desde este. Con lo que se se reduce la carga de los servidores de ntp de internet.<br /><br />Para más información, mirar <a href="http://bulma.net/body.phtml?nIdNoticia=1778">aquí</a>, <a href="http://bulma.net/impresion.phtml?nIdNoticia=1947">aquí</a> y <a href="http://linuca.org/body.phtml?nIdNoticia=124">aquí</a>.Mr Azulhttp://www.blogger.com/profile/02978209112090777687noreply@blogger.com0tag:blogger.com,1999:blog-15675910.post-70503070759929752702007-08-27T17:47:00.000+02:002007-08-27T23:00:44.182+02:00Formularios web (II): Agrupación de los campos con HTMLEn el primer artículo de esta serie, vimos <a href="http://abcweb.blogspot.com/2007/08/formularios-web-i-elementos-bsicos-de.html">como se codificaba cada uno de los elementos del formulario de contacto en HTML</a>. Aun siendo totalmente funcional el formulario resultante, no es muy usable porque todos los elementos están apelotonados, sin orden ni sentido. Hay que dotar de estructura y semántica al conjunto y para ello veremos varias opciones de distribución y agrupación.<br /><br /><h4>Distribución libre</h4>La primera forma de <em>ordenar</em> los elementos del formulario podría ser esta: <a href="http://openclinic.sourceforge.net/examples/web_forms/form_free_layout_unstyled.html">form_free_layout_unstyled.html</a><br /><br />Simplemente ponemos un <em>retorno de carro</em> después de cada campo y listo. Como primera aproximación, no está mal pero no es la más acertada. De hecho, recuerda mucho a como construyen algunos usuarios de un conocido procesador de textos los saltos de página: a base de retornos de carro hasta pasar de página. Pero ambos casos tienen el mismo problema: simplemente, <strong>no funcionan</strong>.<br /><br />En el caso del procesador de textos, si aumentamos o disminuimos el tamaño de letra o quitamos o añadimos contenido, tendremos que cambiar el número de retornos de carro que sirven para alcanzar la siguiente página.<br /><br />En el caso de nuestro formulario, la etiqueta <code><br /></code> no tiene significado alguno dentro de la enumeración de campos. Sólo tiene como objetivo <em>mejorar</em> la presentación. Pero la presentación no debería ser objeto de la codificación HTML, para eso ya están las hojas de estilo CSS. Mediante HTML debemos escribir el contenido de las páginas y dotarlo de significado a través de los diferentes elementos. Así pues, esta primera opción queda descartada.<br /><br /><h4>Distribución basada en tabla</h4>Es la forma más <em>sencilla</em> de disponer los elementos en la plantilla y la que más <em>prestaciones de presentación</em> ofrece, pero también es la que menos semántica aporta al contenido y la que más marcado HTML necesita.<br /><br />Es sencilla si se domina la codificación de las tablas (que no es nada fácil de aprender) pero, lamentablemente, debido a un <a href="http://www.effectivetranslations.com/stupidtables/">mal uso de este elemento</a>, es fácil asumir que esta es una técnica muy conocida porque en multitud de páginas se usan para lo que no fueron hechas: para <a href="http://www.wordreference.com/definicion/maquetar">maquetar</a> las páginas en lugar de usarlas para mostrar datos tabulados.<br /><br />Ejemplo: <a href="http://openclinic.sourceforge.net/examples/web_forms/form_table_layout_unstyled.html">form_table_layout_unstyled.html</a><br /><br />Con este ejemplo se puede observar que:<br /><br /><ul><li>Cada etiqueta queda alineada con su campo asociado.</li><li>Aunque no se aprecie, la tabla se ajusta al contenido. Es decir, no tiene un ancho del 100% de la página.</li></ul><br /><br />Estas <em>ventajas</em> que nos aporta el uso de tablas sólo tienen fines de presentación pero, hemos dicho que de la presentación ya se ocuparían las hojas de estilo, ¿no? De lo que se trata en HTML es de dotar de significado al contenido mediante el marcado. Sin embargo, lo que hemos conseguido es esto:<br /><br /><ul><li>El título del formulario se ha convertido en un encabezado de tabla.</li><li>Hacer trabajar más a los lectores de pantalla porque hemos aumentado el marcado.</li><li>La estructura se ha convertido en algo sin sentido por utilizar las celdas de la tabla como contenedores de los campos (¿qué sentido tiene poner un botón dentro de la celda de una tabla?).</li></ul><br /><br />Ante estas <em>terribles</em> circunstancias, será mejor valorar otras opciones.<br /><br /><h4>Distribución basada en lista</h4>Para dotar de significado a la codificación del formulario, se podría pensar que los campos constituyen una enumeración (y poder utilizar entonces como contenedor el elemento <code>ul</code>), que puede incluso determinarse un orden en la importancia de los campos (para usar el elemento <code>ol</code>). Otra posible idea sería considerar que tenemos que rellenar la <em>definición</em> que se nos da en la etiqueta (entonces podríamos escribir una lista de definiciones con los elementos <code>dl, dd y dt</code>).<br /><br />Ejemplo: <a href="http://openclinic.sourceforge.net/examples/web_forms/form_list_layout_unstyled.html">form_list_layout_unstyled.html</a><br /><br />Con cualquiera de estas formas se dota de estructura al contenido y de <em>cierto significado</em>, si alguna de las metáforas tuviera fundamento. Todas me parecen algo sacadas de contexto, sobre todo la de la lista de definiciones (aunque no me he podido resistir a ponerla en el ejemplo por ser la más rebuscada). De todas maneras, veamos si hemos ganado algo respecto al anterior punto:<br /><br /><ul><li>Hemos conseguido la ordenación de los campos.</li><li>Hay menos marcado HTML.</li><li>Se consigue dotar de semántica al contenido (aunque no sea la más adecuada).</li></ul><br /><br /><h4>Distribución basada en párrafos</h4>Antes de explicar la siguiente propuesta, vamos a hacer un pequeño paréntesis para explicar 2 elementos que dotarán de significado al formulario.<br /><br />El elemento <code>fieldset</code> sirve para agrupar lógicamente un grupo de campos dentro de un formulario. Por ejemplo, podríamos agrupar dentro de un <code>fieldset</code> los datos personales (nombre y apellidos) y dentro de otro, los datos postales (dirección, código postal, etc.), todo ello dentro de un mismo formulario:<br /><br /><pre><samp><br /><form action="http://www.example.com/store_info.php" method="post"><br /> <strong><fieldset><br /> <legend>Datos personales</legend></strong><br /> <label for="first_name">Nombre:</label> <input type="text" id="first_name" name="first_name" value="" /><br /> <label for="surname">Apellidos:</label> <input type="text" id="surname" name="surname" value="" /><br /> ...<br /> <strong></fieldset></strong><br /><br /> <strong><fieldset><br /> <legend>Datos postales</legend></strong><br /> <label for="address">Dirección:</label> <input type="text" id="address" name="address" value="" /><br /> <label for="city">Población:</label> <input type="text" id="city" name="city" value="" /><br /> ...<br /> <strong></fieldset></strong><br /><br /> <strong><fieldset></strong><br /> <input type="submit" name="send" value="Enviar" /><br /> <strong></fieldset></strong><br /></form><br /></samp></pre><br /><br />Aunque con el ejemplo ya se puede intuir el uso del elemento <code>legend</code>, vamos a explicarlo un poco más en detalle. Con este elemento se <em>etiqueta</em> a un grupo de campos, se describe la función lógica de ese conjunto de datos.<br /><br />Como hemos visto, sólo con el uso de estos elementos ya se dota de cierta estructura al contenido pero todavía es necesario utilizar elementos de bloque para dar estructura a cada uno de los campos. Para ello, vamos a ver como queda utilizando párrafos: <a href="http://openclinic.sourceforge.net/examples/web_forms/form_paragraph_layout_unstyled.html">form_paragraph_layout_unstyled.html</a><br /><br /><ul><li>Hemos cambiado el encabezado <code>h1</code> por el uso del elemento <code>legend</code>, con lo que hemos dotado de más semántica al <em>título</em> del formulario. De rebote, también hemos mejorado la accesibilidad ya que los lectores de pantalla podrán describir mejor los campos del formulario.</li><li>Hemos conseguido <em>ordenar</em> los campos para que sea más fácil rellenarlos.</li><li>El marcado HTML no puede ser más simple ni reducido y, a la vez, no puede tener más semántica.</li></ul><br /><br />¿Acaso ya hemos descubierto la forma más correcta de escribir el formulario en HTML? Pues, como casi todo, es relativo y dependerá de nuestras necesidades. Hay un pequeño inconveniente en esta distribución y por eso vamos a ver un ejemplo más.<br /><br /><h4>Distribución basada en divisiones lógicas</h4>El inconveniente tiene que ver con lo que puede ir dentro de un elemento <code>p</code>. Existe una limitación que, en algunos casos, puede ser importante: no podemos poner otros <a href="http://www.librosweb.es/xhtml/capitulo2/elementos_en_linea_y_elementos_de_bloque.html">elementos de bloque</a> dentro (sólo es posible insertar texto y algunos elementos en línea). Esta es la razón por la que, en lugar de utilizar el elemento <code>p</code>, utilizaremos el elemento <code>div</code>.<br /><br />Ejemplo: <a href="http://openclinic.sourceforge.net/examples/web_forms/form_div_layout_unstyled.html">form_div_layout_unstyled.html</a> (este será el formulario que utilizaremos en el siguiente artículo de la serie para aplicarle estilos CSS y darle una apariencia más amigable).<br /><br /><ul><li>La legibilidad se mantiene a la hora de rellenar el formulario.</li><li>El marcado HTML es casi tan mínimo como antes e igual de sencillo.</li><li>Podemos añadir elementos de bloque dentro de cada agrupación lógica de cada campo. Por ejemplo, si se quiere adjuntar una pequeña ayuda en línea para algún campo.</li></ul><br /><br /><pre><samp><br />...<br /><fieldset><br /> <legend>Datos postales</legend><br /><br /> <div><br /> <label for="address">Dirección:</label><br /> <input type="text" id="address" name="address" value="" /><br /><br /> <p>Ejemplo: calle, número, piso, letra</p><br /> </div><br /><br /> ...<br /></fieldset><br />...<br /></samp></pre><br /><br /><h4>Bibliografía recomendada</h4><ul><li><a href="http://www.sitepoint.com/books/cssdesign1/">The Art and Science of CSS</a></li><li><a href="http://www.amazon.com/Web-Accessibility-Standards-Regulatory-Compliance/dp/1590596382">Web Accessibility</a></li></ul>Unknownnoreply@blogger.com2tag:blogger.com,1999:blog-15675910.post-2328412939610940402007-08-19T19:57:00.000+02:002007-08-27T23:00:28.948+02:00Formularios web (I): Elementos básicos de HTMLLos formularios en las páginas web sirven para obtener datos de los usuarios. Igual que a nadie gusta rellenar largos e interminables formularios en papel, debemos tener esto, aún más en cuenta, a la hora de diseñar para la web. Para ello, podemos seguir estas sencillas reglas:<br /><br /><ul><li>Nunca se deben pedir más datos de los estrictamente necesarios. De esta forma evitaremos pesadez al usuario y nos ahorraremos espacio en nuestro sistema de almacenamiento de datos. A este consejo habría que añadir esta recomendación: nunca pedir datos al usuario <strong>hasta</strong> que no sean necesarios para la acción que está realizando. En una tienda del <em>mundo real</em>, a nadie nos preguntan el número de la tarjeta de crédito hasta que no vamos a pagar en la caja.</li><li>Proporcionar valores por defecto siempre que sea posible (para rellenar menos campos y mejorar la satisfacción del usuario: cuanto menos tenga que teclear, mejor).</li><li>En los campos que necesiten información específica, es buena idea proporcionar ayuda <em>en línea</em> que explique cómo rellenarlo, mostrando ejemplos reales o determinando rangos de entrada.</li><li>Si hay errores en el formulario, mostrar claramente dónde se han producido y cómo resolverlos. Para los valores que sí estén correctos, habrá que recordarlos para evitar que el usuario los tenga que volver a rellenar.</li><li>Si el número de campos a completar es alto, habrá que mostrar la información en grupos lógicos que tengan relación para que sea más fácil localizarla. Incluso puede ser buena idea descomponer un formulario grande en varias páginas, simulando el funcionamiento de un asistente. Si optamos por esta opción, la navegación entre las distintas páginas debe ser clara para permitir al usuario moverse de una a otra sin perder ningún dato.</li><li>No hay nada más frustrante para el usuario que llegar al final de un formulario y equivocarse de botón (por ejemplo, pulsar el botón <strong>Cancelar</strong> y observar que todo lo que había escrito desaparece como por arte de magia). Hay que separar (o hacer más grande, o poner en una posición predominante, ...) la opción principal (que es enviar los datos) de otras secundarias (como la de restablecer los campos o volver a otra página anterior) para evitar esta situación.</li></ul><br /><br />Esta lista podría seguir hasta casi el infinito. El diablo está en los detalles y la diferencia entre un sitio amigable y con un buen número de visitantes puede estar en cómo, cuándo y cuánta información pide a los usuarios. Un buen estudio sobre estos y otros consejos para el diseño de formularios, podemos encontrarlo en <a href="http://www.lukew.com/resources/articles/WebForms_LukeW.pdf">Best Practices For Form Design</a>.<br /><br />El objetivo de esta serie de artículos es presentar un ejemplo sencillo de formulario web y ver los diferentes pasos que hay que hacer para integrarlo en una página web. Más concretamente, los objetivos de cada uno de los artículos son los siguientes:<br /><br /><ul><li>Elementos básicos de HTML (el presente artículo): breve introducción a algunos de los elementos disponibles en HTML para la construcción de los campos.</li><li><a href="http://abcweb.blogspot.com/2007/08/formularios-web-ii-agrupacin-de-los.html">Agrupación de los campos con HTML</a>: hay diferentes formas de distribuir y presentar los campos de un formulario en HTML. Veremos algunas de ellas junto con sus ventajas e inconvenientes.</li><li>Diseño con CSS: una vez estructurado el contenido en HTML, llega el momento de mostrar al usuario de la forma más amigable posible el formulario.</li><li>Programación del lado del servidor: es buena idea crear una <em>librería</em> de código (para PHP) para construir formularios HTML puesto que es una tarea repetitiva en cualquier proyecto web.</li></ul><br /><br />El ejemplo que nos va a servir para ir viendo cada una de las partes (HTML, CSS y programación), es la creación de un sencillo formulario de contacto. Contendrá 3 campos: el nombre, el correo electrónico (para que podamos responder al visitante) y un campo de texto libre en el que irá el comentario que nos quieran escribir.<br /><br /><h4>Campo de texto simple</h4>En primer lugar vamos a ver como se codificaría en HTML el campo para el correo electrónico:<br /><br /><pre><samp><br />Correo electrónico: <input type="text" name="email" size="35" value=""><br /><br />Correo electrónico: <input type="text" name="email" size="35" value=""><br /></samp></pre><br /><br />En principio, esta sería la forma más básica (y totalmente funcional) de construir el campo de nuestro formulario:<br /><br /><ul><li>El atributo <code>type</code> indica que es un campo de texto simple (que sólo puede contener una línea de texto).</li><li>El atributo <code>name</code> indica el nombre de la variable que contendrá el valor del formulario.</li><li><code>size</code> indica el ancho del control en la visualización, en este caso, para que quepan 35 caracteres. Nada tiene que ver con el máximo número de caracteres que pueden introducirse en el control.</li><li>Por último, el atributo <code>value</code> sirve para indicar el contenido por defecto que mostrará el control.</li></ul><br /><br />Hemos visto la forma simple, pero vamos a introducir algunas mejoras en el marcado HTML:<br /><br /><pre><samp><br /><label for="email">Correo electrónico:</label> <input type="text" id="email" name="email" size="35" maxlength="35" value="" /><br /><br /><strong><label for="email">Correo electrónico:</label></strong> <input type="text" <strong>id="email"</strong> name="email" size="35" <strong>maxlength="35"</strong> value="" <strong>/</strong>><br /></samp></pre><br /><br />El elemento <code>label</code> sirve para relacionar un texto (que llamaremos etiqueta) con el campo al que hace referencia. Esto se hace en 2 fases: primero se marca en el atributo <code>id</code> del elemento <code>input</code> correspondiente el identificador del campo (que puede tener el mismo valor que el atributo <code>name</code>) y, después, indicar en el atributo <code>for</code> de <code>label</code> el identificador del campo al que se asocia. Con esta medida mejoramos el formulario en estos aspectos:<br /><br /><ul><li>En semántica, porque dotamos de estructura lógica al texto que hace de etiqueta del campo.</li><li>En usabilidad, porque si se pulsa sobre el texto, el foco se situará sobre el control asociado.</li><li><a href="http://diveintoaccessibility.org/day_28_labeling_form_elements.html">En accesibilidad, al proporcionar la asociación implícita entre el texto y el campo</a>. Alguien que ve el formulario en la pantalla <em>asocia</em> la etiqueta al campo por la cercanía de los elementos pero para quien no lo puede ver, esa pista, por sí sola, no es suficiente.</li></ul><br /><br />Hemos indicado, a través del atributo <code>maxlength</code> la cantidad máxima de caracteres que admitirá el campo. De esta forma, por más que lo intente, el usuario no podrá introducir más caracteres de los permitidos y se evita que luego halla efectos de truncado de la información (si hubiéramos permitido introducir más pero en la base de datos no caben, tendríamos que haber truncado los caracteres sobrantes).<br /><br />Como último retoque, hemos cambiado la forma en la que se <em>cierra</em> el elemento <code>input</code> (<code><input ... /></code>), añadiendo una barra al final. De esta forma conseguimos compatibilidad con XHTML si queremos usar un formato más riguroso, sin perder la compatibilidad con el HTML normal porque también acepta esta forma de cerrar los elementos vacíos. Por la misma razón, los elementos y atributos siempre deben ir en minúsculas y los valores de los atributos entre comillas.<br /><br />Los valores de los atributos <code>id</code> y <code>name</code> no tienen por qué coincidir. Sólo hay que recordar que se puede repetir el mismo valor de <code>name</code> en un formulario pero no así el valor de <code>id</code>, que debe ser único para cada elemento en una misma página.<br /><br />Otra posible forma de codificar el campo del correo electrónico en HTML sería esta:<br /><br /><pre><samp><br /><label>Correo electrónico: <input type="text" name="email" size="35" maxlength="35" value="" /></label><br /></samp></pre><br /><br />Escribiendo el elemento <code>input</code> dentro del <code>label</code> no hace falta indicar explícitamente la relación entre ambos elementos (atributos <code>id</code> y <code>for</code>). Pero, aun siendo totalmente válida esta alternativa, no es recomendable usarla porque puede causar algún problema en ciertos navegadores y lectores de pantalla.<br /><br /><h4>Campo de texto multilínea</h4>Continuemos viendo como escribir el código del campo <strong>Comentario</strong>. La idea es que el visitante de nuestra página escriba <em>todo lo que quiera</em> sin problemas de espacio. Como hemos visto antes, el elemento <code>input</code> se nos queda un poco pequeño pues sólo permite una línea de texto. Existe otro elemento, llamado <code>textarea</code>, que se ajusta mucho mejor a nuestras necesidades: el usuario puede escribir en varias líneas y viendo más texto de vez, como si escribiera un correo.<br /><br /><pre><samp><br /><label for="comment">Comentario:</label> <textarea id="comment" name="comment" rows="4" cols="40"></textarea><br /><br /><label for="comment">Comentario:</label> <textarea id="comment" name="comment" rows="4" cols="40"></textarea><br /></samp></pre><br /><br />Hemos utilizado la asociación entre etiqueta y control a través de los atributos <code>for</code> e <code>id</code>, como en el caso anterior.<br /><br />Los atributos <code>rows</code> y <code>cols</code> sirven para dar dimensiones gráficas al control dentro de la página (4 líneas de alto y 40 caracteres de ancho).<br /><br />En este elemento, el valor por defecto que se mostraría al visitante, debemos escribirlo como contenido de la etiqueta <code>textarea</code>. Por ejemplo, si quisiéramos mostrar un texto de muestra, tendríamos que escribir algo como esto:<br /><br /><pre><samp><br /><label for="comment2">Comentario:</label> <textarea id="comment2" name="comment" rows="4" cols="40">Texto de ejemplo</textarea><br /><br /><label for="comment">Comentario:</label> <textarea id="comment" name="comment" rows="4" cols="40"><strong>Texto de ejemplo</strong></textarea><br /></samp></pre><br /><br />En cambio, si lo que queremos es que el campo esté completamente vacío, no debe haber ningún caracter extra (como un espacio o un retorno de carro) entre el cierre de <code><textarea ... <strong>></strong></code> y el comienzo de <code><strong><</strong>/textarea></code>.<br /><br /><h4>Botón de envío</h4>Ahora necesitamos añadir un botón de envío para que el usuario pueda mandarnos sus datos a un lugar donde podamos almacenar la información.<br /><br /><pre><samp><br /><input type="submit" name="send" value="Enviar" /><br /><br /><input type="submit" name="send" value="Enviar" /><br /></samp></pre><br /><br />Utilizando de nuevo el elemento <code>input</code>, cambiando el valor del atributo <code>type</code> por <strong>submit</strong> ya tenemos nuestro botón. Además, este valor indica que cuando se pulse el botón, se producirá el envío de los datos al lugar especificado por el atributo <code>action</code> del elemento <code>form</code>.<br /><br />En este caso, el contenido del atributo <code>value</code> es lo que se mostrará como texto del botón, por lo que no es necesario añadir una etiqueta con el elemento <code>label</code>.<br /><br /><h4>Elemento form</h4>Todos los controles de formulario que hemos visto hasta ahora, tenemos que ponerlos dentro de otro elemento, denominado <code>form</code>, para indicar que todos los campos forman parte de la misma transacción de información y, también, para indicar el destino de esos datos.<br /><br /><pre><samp><br /><strong><form action="http://www.example.com/store_info.php" method="post"></strong><br /> <label for="name">Nombre:</label> <input type="text" id="name" name="name" size="35" maxlength="35" value="" /><br /> <label for="email">Correo electrónico:</label> <input type="text" id="email" name="email" size="35" maxlength="35" value="" /><br /> <label for="comment">Comentario:</label> <textarea id="comment" name="comment" rows="4" cols="40"></textarea><br /> <input type="submit" name="send" value="Enviar" /><br /><strong></form></strong><br /></samp></pre><br /><br />El atributo <code>action</code> establece el lugar a donde irán a parar los datos del formulario. Generalmente, indicaremos la dirección de un <a href="http://es.wikipedia.org/wiki/Gui%C3%B3n_%28inform%C3%A1tica%29">script</a> donde recoger y procesar la información pero también se puede indicar una dirección de correo de destino para que los datos se envíen mediante correo electrónico. Sólo recomiendo esta opción si no se dispone de otra forma de envío de datos porque el funcionamiento depende mucho de los programas con los que cuente el usuario en su máquina para enviar el correo.<br /><br />Según el método de codificación de datos indicado en el atributo <code>method</code>, la información tendrá que ser decodificada de forma diferente en el lado del servidor porque se enviará de distinta forma desde el navegador cliente. Para simplificar esta cuestión, diré que el método <strong>post</strong> es algo más seguro y permite enviar más datos en la transacción.<br /><br />Antes de terminar, quisiera comentar el uso del atributo <code>title</code> dentro de los campos para simular una sencilla ayuda contextual para rellenar el control.<br /><br /><pre><samp><br /><label for="email2">Correo electrónico:</label> <input type="text" id="email2" name="email" size="35" maxlength="35" value="" title="Se requiere una dirección de correo válida" /><br /><br /><label for="email">Correo electrónico:</label> <input type="text" id="email" name="email" size="35" maxlength="35" value="" <strong>title="Se requiere una dirección de correo válida"</strong> /><br /></samp></pre><br /><br />Aunque su uso no es totalmente eficaz, pues sólo aparece si nos posicionamos sobre el control y no es un buen sistema para textos largos, sin embargo puede servir si el mensaje no es muy largo, además de ser una solución accesible para los programas <a href="http://en.wikipedia.org/wiki/Screen_reader">lectores de pantalla</a>.<br /><br />Para una información más detallada sobre otros elementos que se pueden agregar en los formularios (como listas despleglables o casillas de verificación), recomiendo la lectura de los siguientes enlaces:<br /><br /><ul><li><a href="http://www.w3.org/TR/html401/interact/forms.html">Forms in HTML documents</a></li><li><a href="http://webdesign.about.com/od/forms/a/aa071299.htm">How to Use the Input Tag</a></li><li><a href="http://www.yourhtmlsource.com/forms/basicforms.html">Basic Forms</a></li><li><a href="http://www.webaim.org/techniques/forms/">Creating Accessible Forms</a></li></ul><br /><br /><h4>Bibliografía recomendada</h4><ul><li><a href="http://www.oreilly.com/catalog/html5/">HTML & XHTML: The Definitive Guide</a></li><li><a href="http://www.amazon.com/Mastering-Integrated-HTML-CSS/dp/047009754X">Mastering Integrated HTML And CSS</a></li></ul>Unknownnoreply@blogger.com2tag:blogger.com,1999:blog-15675910.post-18223376698750385262007-04-14T19:15:00.000+02:002007-04-14T20:58:21.451+02:00Pruebas de una webHay muchas formas de probar una página (o un sitio) web. Disponemos de validadores automáticos que nos pueden dar una primera valoración del trabajo realizado y que también ayudan durante el proceso de desarrollo, para saber si vamos por el buen camino:<br /><ul><li><a href="http://validator.w3.org/">Validador HTML</a></li><li><a href="http://jigsaw.w3.org/css-validator/">Validador CSS</a></li><li><a href="http://validator.w3.org/checklink">Validador de enlaces</a></li><li><a href="http://www.w3.org/WAI/ER/tools/complete.php">Validadores de accesibilidad</a></li></ul><br />Pero estos validadores automáticos tienen algunas carencias, que sólo se pueden cubrir con otra serie de pruebas (manualmente en muchos casos). Dependerá de factores como el público al que está orientado nuestro sitio web, el realizar todas o algunas de las siguientes pruebas.<br /><h4>Navegadores</h4>Las páginas web pueden verse en diferentes en muy distintos navegadores y en muchas posibles configuraciones. Como mínimo, será necesario probar en este subconjunto de navegadores:<br /><h5><a href="http://www.firefox.com/">Firefox</a></h5>Este primer lugar en la lista no es por casualidad. Es un navegador en constante desarrollo, con un buen nivel de seguimiento de los estándares y que cuenta con una serie de <a href="http://abcweb.blogspot.com/2005/10/extensiones-para-desarrolladores-web.html">herramientas (extensiones) que facilitan la realización de una página web</a>.<br /><h5><acronym title="Microsoft Internet Explorer">MSIE</acronym></h5>Es el más usado y con el que más cuidado habrá que tener, ya que sus diferentes versiones (5.5, 6.0, 7.0 entre otras) son muy diferentes entre sí. Dependerá de nuestro público objetivo el soportar más o menos versiones de este navegador. Seguramente, deberemos saltarnos algún estándar (CSS sobre todo) para adecuar nuestro trabajo a las particularidades de este cliente web. Esta es una de las razones por las que un validador automático no siempre es una buena medida de la situación.<br /><h5><a href="http://www.opera.com/">Opera</a></h5>Tiene menos seguidores que Firefox, pero tiene una mejor implantación de los estándares. Además, su versión para dispositivos móviles puede extenderse casi tanto como <acronym title="Microsoft Internet Explorer">MSIE</acronym> en los próximos años.<br /><h5><a href="http://www.apple.com/macosx/features/safari/">Safari</a></h5>Es un navegador específico para Mac OS X. Esta en esta lista por 2 razones: porque cubre una parte importante de los usuarios de esta plataforma y (una razón más técnica) porque utiliza internamente otro motor de renderizado de páginas distinto de los anteriores, que también deberemos tener en cuenta (diferente motor => distintas reglas que pueden tener <a href="http://es.wikipedia.org/wiki/Error_de_software">bugs</a> y que tendremos que solventar).<br /><h5><a href="http://lynx.browser.org/">Lynx</a></h5>Es la nota exótica de esta lista. Pero no por ser exótica, está de más saltársela. Aunque su uso está relegado a unos cuantos <a href="http://es.wikipedia.org/wiki/Geek">geeks</a> de sistemas Unix y Linux, tiene poderosas razones (prácticas) para estar aquí: nos da una buena aproximación a cómo se ve nuestra página en ausencia de CSS, imágenes, JavaScript y nos permite probar la navegación sin ratón entre los contenidos del sitio web.<br /><br />Todas estas pruebas se pueden simular por separado con otras herramientas, pero con este navegador de sólo texto podemos llevar a cabo estas pruebas de una sóla tacada. Si no podemos acceder a una versión de este programa (y eso que la hay hasta para Windows), siempre podemos tener <a href="http://www.delorie.com/web/lynxview.html">acceso a una simulación online</a>.<br /><h4>Configuraciones de navegadores</h4>Según la plataforma que utilice el usuario, el abanico de posibilidades de configuración de un mismo navegador puede ser extenso. Ante todo, para valorar el resultado de las siguientes pruebas, hay que ver si nuestra página <em>se degrada elegantemente</em> (<a href="http://en.wikipedia.org/wiki/Fault-tolerance" lang="en">graceful degradation</a>). Es decir, como reacciona la página ante la pérdida de funcionalidad.<br /><h5>Sin imágenes</h5>Si el cliente no dispone de una conexión rápida, puede que tenga desactivada la descarga de imágenes. Si es así, el contenido de nuestra página deber seguir siendo legible. Es una buena prueba para ver cómo se adaptan los textos alternativos de los elementos gráficos dentro del resto del contenido escrito.<br /><h5>Sin JavaScript</h5>No es una situación tan extraña si recordamos que muchas personas, en su trabajo, por cuestiones de seguridad (que no pueden cambiar), tienen deshabilitado el soporte de JavaScript en sus navegadores. Así pues, ante esta circunstancia, la página debe seguir operativa, prescindiendo de la funcionalidad añadida que le daba JavaScript). <br /><br />Esto, aunque ideal, no siempre puede cumplirse (sobre todo, en aplicaciones web). Por ello, al menos, se deberá mostrar un mensaje aclarando por qué la página no puede funcionar.<br /><h5>Sin cookies</h5>Por las mismas razones que el apartado anterior, el soporte de cookies, por motivos de seguridad, no siempre está garantizado. Cómo reaccionar ante esto, dependerá del contexto de nuestro sitio web.<br /><h5>Sin plugin de Flash</h5>Si gran parte de nuestro contenido se basa en el uso de Flash, puede que estemos en un grave problema si nuestros usuarios, o bien no tienen el plugin, o bien no tienen la versión adecuada. Habrá que verificar como de legible es nuestro contenido ante la ausencia de Flash.<br /><h5>Sin CSS</h5>Aunque hoy en día esta circunstancia ya no es muy frecuente (hay muy pocas personas que todavía utilicen navegadores antiguos sin soporte para CSS), sí que es útil probar a leer y a navegar por el contenido sin <em>estilo</em>. De esta forma veremos si hemos utilizado correctamente los elementos <acronym title="HyperText Markup Language">HTML</acronym> a la hora de construir la página (los encabezados, las listas, si no hemos <a href="http://www.effectivetranslations.com/stupidtables/">utilizado tablas para maquetar</a>, etc.).<br /><h4>Configuraciones de pantalla</h4>Si diversos son los navegadores que nos pueden visitar, también son diferentes las propiedades de los monitores que usarán los visitantes.<br /><h5>Resolución</h5>¿Qué resoluciones deberemos soportar: 800x600, 1024x768, 1280x1024, 1600x1200, ...? Y la lista sigue y sigue. Pero la respuesta es simple y a la vez complicada de resolver: todas ellas. O bien nuestra <a href="http://en.wikipedia.org/wiki/Page_layout">plantilla</a> es lo suficientemente fluída como para adaptarse a las distintas resoluciones o bien cambiamos la <a href="http://www.alistapart.com/articles/switchymclayout">plantilla dependiendo de la resolución</a> (esto se puede hacer mediante JavaScript).<br /><br />Sinceramente, creo que lo mejor y más pragmático es lo primero: hacer un diseño fluído que se adapte lo mejor posible a todas las resoluciones posibles. Con las demasiado pequeñas o las demasiado grandes tal vez el resultado no sea el más adecuado, pero para el resto de rangos, será óptimo (pero si no lo probamos, no lo sabremos).<br /><h5>Colores</h5>Si difícil es hacer un diseño (en cuanto a disposición de los elementos), más difícil es aún conseguir una buena paleta de colores para ese diseño. Una buena paleta que consiga un buen contraste entre fondo y texto y que diferencie de un vistazo distintos elementos.<br /><br />Una buena prueba para probar un contraste adecuado, es poner en escala de grises la página. Esto podemos conseguirlo cambiando nuestra configuración de escritorio o utilizando esta <a href="http://colorfilter.wickline.org/">herramienta online para simular defectos de visión</a>. Nos dará una buena medida de la accesibilidad de nuestra página (pensando en usuarios con problemas en la visión y para evitar que nuestros visitantes tengan estos problemas de visión).<br /><br />También podemos hacer pruebas de otros problemas de visión (como el daltonismo), a través del <a href="http://www.vischeck.com/">servicio online de Vischeck</a>.<br /><br />Probar la página a 256 colores, hoy en día, no creo que sea necesario. Al igual que el número de usuarios con navegadores del siglo pasado, el número con configuraciones tan restrictivas, es muy pequeño. A no ser que sepamos, a ciencia cierta, que alguno de nuestros potenciales clientes pertenece a este reducido grupo, podemos prescindir de esta prueba.<br /><h4>Formato de impresión</h4>¿Qué tal se imprimen nuestros contenidos? Aunque es más ecológico (y algunas veces más cómodo) guardar en formato electrónico una página web, en ocasiones, es interesante imprimir algunas páginas, o exportar a <a href="http://es.wikipedia.org/wiki/Portable_Document_Format">PDF</a>.<br /><br />Hay unas cuantas recomendaciones que conviene seguir para conseguir un <a href="http://www.alistapart.com/articles/goingtoprint/">buen formato de impresión</a>, pero todas tienen un denominador común: la simplicidad. Se deberá prescindir de todos los elementos del diseño que no aporten nada al contenido principal de la página.<br /><h4>Sistemas operativos</h4>Para cuidar el diseño de la página, habrá que elegir un conjunto de fuentes de letras adecuadas a los distintos sistemas operativos, porque no todas están en todos ellos. Habrá que probar estas elecciones en cada uno de los sistemas que hayamos optado por hacer nuestro desarrollo. Una forma de ahorrar en máquinas físicas (hardware), es hacer uso de máquinas virtuales.<br /><br />Cada sistema operativo tiene sus propias herramientas de virtualización:<br /><ul><li>Microsoft Windows: <a href="http://www.microsoft.com/windows/virtualpc/default.mspx">Virtual PC</a>, <a href="http://www.vmware.com/">VMWare</a></li><li><a href="http://www.usinglinux.org/emulators/">Linux</a></li><li>Mac OS X: <a href="http://www.iemulator.com/">iEmulator</a></li></ul><br />Otro aspecto a tener en cuenta en las diferentes plataformas, serán los plugins que tengan unas y otras. No todas soportan el uso de ActiveX (por ejemplo), o no todas poseen las mismas versiones de los plugins (como el de Flash).<br /><h4>Redes lentas</h4>Puede que hayamos hecho un sitio demasiado recargado o que utilice demasiados ficheros. Una forma de probar si nuestro sitio es rápido (en cuanto a velocidad de descarga), es probándolo en una red lenta. Esto se puede conseguir utilizando un módem o un programa limitador de la red, como <a href="http://www.netlimiter.com/">NetLimiter</a>.<br /><h4>Dispositivos móviles</h4>¿Está nuestra página preparada para ser vista desde un móvil? ¿Tiene que estarlo? La respuesta a estas preguntas, es un rotundo <strong>sí</strong>. Las ciencias adelantan que es una barbaridad y seguramente, dentro de poco tiempo (si no es ya mismo), la gran mayoría de nuestros visitantes lo harán a través de alguna clase de dispositivo móvil.<br /><br />Debemos preparar nuestro sitio web para esta circunstancia y deberemos probarlo. La opción más económica es hacerlo a través de emuladores de dispositivos móviles. Cada fabricante suele tener disponibles en su web unos cuantos de los modelos que va sacando al mercado.<br /><h4>Lectores de pantalla</h4>Otra forma de probar la accesibilidad de una página web, es leerla tal y como la leería un lector de pantalla para un usuario invidente.<br /><br />Como estos dispositivos suelen ser bastante caros (como <a href="http://www.freedomscientific.com/fs_products/software_jaws.asp">Jaws</a>), la mejor forma de hacer nuestras pruebas será, una vez, a través de emuladores.<br /><br />Uno de ellos se llama <a href="http://www.standards-schmandards.com/index.php?show/fangs">Fangs</a> y es una extensión para Firefox.Unknownnoreply@blogger.com6tag:blogger.com,1999:blog-15675910.post-1948160728354738692007-03-14T12:31:00.000+01:002007-03-14T13:30:55.063+01:00Dos programasA veces uno descubre programas que se le acaban convirtiendo en casi imprescindibles. Sobre todo cuando se necesitan compartir datos entre Linux y Windows o entre el trabajo y casa.<br /><br />Programas como <a href="http://portableapps.com/apps/office/openoffice_portable">OpenOffice portable</a>, <a href="http://portableapps.com/apps/internet/firefox_portable">Firefox portable</a> o <a href="http://portableapps.com/apps/internet/putty_portable">Putty portable</a>. Todos ellos descargables desde <a href="http://www.portableapps.com/">PortableApps</a> y que pueden correr desde un lapiz usb sin dejar rastro en el ordenador en el que estás. Y que, como he dicho antes, puedes usar igualmente en Linux y en Windows (Putty tal cual no, pero para eso está ssh).<br /><br />Aún así, he encontrado dos programas que no están en esa página y que utilizo sin parar desde que los encontré:<br /><br /><ol><li><span style="font-weight: bold;">KeePass:</span> Gestor de contraseñas. Después de probar varios de ellos tanto libres como 'pirateados', me quedo con este de lejos. Versión para <a href="http://keepass.sourceforge.net/">windows</a> y <a href="http://keepassx.sourceforge.net/">linux</a>, tiene un campo de comentarios grande para cada entrada, generador de claves mediante aleatoriedad (del tamaño y complejidad que se quiera) y se pueden adjuntar archivos en las entradas. Lo uso principalmente para las claves del trabajo, pero también para las de casa.<br /></li><li><span style="font-weight: bold;">TreeLine:</span> Gestor de notas, outliner, no sé cómo llamarlo. Pero desde luego, de nuevo, otro que me ha enganchado. Sirve para casi todo. Es como una base de datos donde los datos pueden ser estructurados y buscados de la forma que mejor te convenga (viva el XML!!!). Hecho de menos el uso de etiquetas en vez de la forma de arbol, pero como es tan configurable, se las puedes poner igualmente en el registro/s que te crees. Adiós a las notas que pierdes o que no puedes encontrar, los papelitos por encima de la mesa, las 200 ideas diferentes apuntadas una entre otra en una hoja de cuaderno. Los cuadernos de notas no son en absoluto algo obsoleto, pero desde luego son menos versátiles que este tipo de aplicaciones. Imprescindible (creo yo) para programadores, administradores y demás geeks informáticos. Programado en python, con versión para <a href="http://www.bellz.org/treeline/">Linux</a> y <a href="http://www.bellz.org/treeline/">Windows</a> y permite cifrar el fichero de notas (algo creo que imprescindible para un programa portable de los de llevar en un pendrive).</li></ol><br />Desde luego que existen programas on-line que permiten lo mismo. O incluso quizá más versátiles (como <a href="http://www.google.com/notebook">google notebook</a> y su sistema de etiquetas o <a href="https://www.passpack.com/info/home/">PassPack</a> como gestor de claves on-line). Pero a mi no me gusta mucho dejar estas cosas en los servidores de otros. Mejor en mi disco local ;) por si acaso.<br /><br />Por cierto, para ver cómo hacer TreeLine portable, buscarlo en <a href="http://www.portablefreeware.com/">esta página</a>. Hay muchas instrucciones de cómo hacer aplicaciones de primeras no portables, portables.Mr Azulhttp://www.blogger.com/profile/02978209112090777687noreply@blogger.com0tag:blogger.com,1999:blog-15675910.post-35288269959193314012007-02-14T15:30:00.001+01:002007-02-14T15:30:35.772+01:00Seguridad informática<blockquote>"La defensa necesita cubrir todas las vulnerabilidades. El atacante sólo necesita explotar una."</blockquote><br />Mr_Marshall.<br /><br />Leido en los comentarios de <a href="http://www.kriptopolis.org/">Kriptópolis</a>.Mr Azulhttp://www.blogger.com/profile/02978209112090777687noreply@blogger.com2tag:blogger.com,1999:blog-15675910.post-76877947914890677222007-01-28T18:58:00.000+01:002007-01-28T21:03:03.884+01:00Usabilidad y cartografía medievalEl pasado día 18 de enero, asistí al laboratorio sobre cartografía medieval que impartió <a href="http://pasapues.blogia.com/2007/011901-laboratorio-cadius-en-zaragoza-sobre-cartografia-medieval.-i.php">Javier Mendívil</a> en <a href="http://cadius-zaragoza.blogia.com/2007/012301-cronica-del-i-laboratorio-de-cadius-zaragoza.php">Cadius Zaragoza</a>. Mi visión particular de aquel acto, va a consistir en ver algunos problemas de usabilidad comunes entre mapas y páginas web, y mencionar directrices de cómo solucionarlos. Eso sí, quisiera agradecer a Javier, tanto los magníficos contenidos impartidos en el laboratorio, como los complementarios que iban como regalo para los asistentes.<br /><br /><h4>Contenido denso</h4>La apariencia de una página llena de texto y de imágenes sugiere que será difícil obtener la información que se está buscando. No es posible rastrear bien el contenido.<br /><br />En un sitio web, esto es aún más problemático que en un mapa, puesto que el usuario simplemente decidirá que no merece la pena invertir esfuerzo en la búsqueda, y se irá a otra página.<br /><br />Habrá que redactar contenidos más cortos, que vayan al grano, que hablen el mismo idioma que la clientela a la que está dirigido el contenido, y saber jugar con el <a href="http://www.sheriftariq.org/design/whitespace/">espacio en blanco</a> en el diseño para que los usuarios puedan centrar su atención en el rastreo de la información.<br /><br /><h4>Diseño relleno</h4>Muchas páginas web comenten el error de abrumar a los usuarios con elementos móviles, luces parpadeantes y enlaces mal estructurados.<br /><br />No hay necesidad de poner más gráficos que los necesarios y a un tamaño manejable. No hace falta perder el tiempo y el espacio en decorar, sino en comunicar. Los sitios web deberían ir directos al negocio, que es lo que buscan los clientes.<br /><br /><h4>Artilugios de interfaz gráfica de usuario de diseño propio</h4>Algunos diseñadores de interfaz, <em>prefieren</em> no seguir las convenciones existentes para ciertos elementos de diseño, como campos de introducción de datos (cajas de texto, botones de radio, casillas de verificación) o las barras de desplazamiento. En muchas ocasiones por ser sitios construidos en <a href="http://en.wikipedia.org/wiki/Adobe_Flash">Flash</a> o por intentar diferenciar el diseño del sitio web.<br /><br />Si algo no parece lo que es, seguramente no se percibirá como tal y no se usará correctamente. Esto se traduce en que si se están pidiendo datos al usuario, tal vez este no logre enviarlos, o que si se está cambiando la forma de una barra de desplazamiento, al no reconocerse como tal, no se utilice y se pierda contenido importante.<br /><br /><h4>No mostrar quién está detrás de la información</h4>Al igual que para dar credibilidad de una obra vale con una firma, para dar credibilidad y confianza a los usuarios de un sitio web, es conveniente añadir información sobre la compañía (o las personas) que están detrás.<br /><br />Es muy común facilitar esta información en páginas tituladas <em>Acerca de nosotros</em> o <em>Quiénes somos</em>. En ellas debe figurar claramente como contactar y encontrar la compañía, la filosofía de la organización y, como información auxiliar, no estaría mal añadir algunos hechos relevantes en la historia de la empresa.<br /><br /><h4>Legibilidad</h4>La tipografía ofrece una idea sobre el sitio web y transmite información acerca de lo que el usuario puede hacer en él. Las distintas fuentes de letra pueden significar capricho o seriedad y el tamaño y el color pueden destacar el contenido.<br /><br />Pero si el tamaño no es legible, ya sea por el tamaño o por la grafía, se convierte en incómodo y molesto, y el usuario desistirá de leer el contenido aunque le pueda resultar de interés.<br /><br />Para contenidos en pantalla, es mejor utilizar letras <a href="http://es.wikipedia.org/wiki/Serifa">sin serifa</a>. Para titulares, puede utilizarse tanto letras con serifa como sin ella porque el tamaño será mayor y habrá menos problemas con la resolución. En tamaños pequeños, las letras con serifa se vuelven borrosas por el <a href="http://en.wikipedia.org/wiki/Font_rasterization">suavizado de los bordes dentados</a>.<br /><br />Si, por cuestiones de diseño, se ha elegido un tamaño menor al recomendable (12 puntos), siempre hay que dar la posibilidad de que el usuario pueda aumentar el tamaño, ya sea mediante alguna herramienta del navegador o <a href="http://alexking.org/blog/2006/12/23/font-size-switcher">proporcionando enlaces (o botones) en la página para agrandar el texto</a>. Para que desde el navegador siempre se pueda cambiar el tamaño del texto, es mejor usar <a href="http://www.maxdesign.com.au/presentation/relative/">tamaños relativos</a>.<br /><br /><h4>Contraste entre texto y fondo</h4>Leer en pantalla es mucho más costoso que leer en papel porque existe menos resolución para <em>pintar</em> las letras. En un libro podemos tener unos 3000 puntos por pulgada (<acronym title="dots per inch">dpi</acronym>), mientras que en un monitor podemos haber 100 dpi como mucho (lo normal suele ser 72 dpi).<br /><br />Los contrastes altos entre texto y fondo pueden hacer la lectura más fácil. Aunque lo mejor sigue siendo texto negro sobre fondo blanco, la norma a seguir es evitar el uso de colores similares, ya que el bajo contraste cansa la vista causa molestias. Tampoco es recomendable utilizar combinaciones de colores brillantes porque causan un efecto vibrante en los textos (como usar texto rojo sobre fondo azul).<br /><br /><h4>Palabras clave resaltadas</h4>Resaltar las palabras importantes de un texto atraen la atención del lector hacia áreas específicas. Sin embargo, resaltar frases completas o demasiado largas, ralentiza la lectura, porque enfatizar demasiados elementos, causa el efecto contrario: nada destaca, todo parece igual de importante.<br /><hr /><br />El extracto del listado de problemas de usabilidad ha sido obtenido del libro <cite><a href="http://www.useit.com/prioritizing/">Prioritizing Web Usability</a></cite>, escrito por <cite><a href="http://www.useit.com/jakob/">Jakob Nielsen</a></cite> y <cite><a href="http://www.nngroup.com/about/people/hloranger.html">Hoa Loranger</a></cite>, disponible en español en la colección de <cite><a href="http://www.anayamultimedia.es/">Anaya Multimedia</a></cite>.Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-15675910.post-78557634260159081702007-01-03T16:37:00.000+01:002007-01-12T21:25:26.649+01:00Los elementos perdidos de HTMLSoy una de esas personas que, cuando miran una nueva página web, no se fijan tanto en lo que se ve a simple vista como en el esqueleto que le da forma: el código fuente. Ahí es donde se puede apreciar la verdadera estructura del contenido y la semántica que se ha utilizado (la que se encontrarán los motores que indexen esa página web).<br /><br />Bien es verdad que <acronym title="HyperText Markup Language">HTML</acronym> tiene algunas carencias para marcar el contenido, que se están intentando solucionar con la redacción de <a href="http://www.w3.org/TR/xhtml2/">XHTML 2.0</a> o <a href="http://whatwg.org/specs/">HTML 5.0</a> (que todavía está más en pañales que XHTML 2.0). Pero también es cierto que, algunos elementos que sí posee, no son utilizados (en los casos en los que se deberían utilizar). Tal vez sea por desconocimiento o por usar algunos editores <acronym title="What You See Is What You Get">WYSIWYG</acronym> (bien sean de escritorio como <a href="http://www.adobe.com/products/dreamweaver/">DreamWeaver</a> o bien estén hechos en JavaScript como <a href="http://tinymce.moxiecode.com/">TinyMCE</a>), pero no debemos olvidar que para darle un correcto significado al contenido, hay que marcarlo de la forma adecuada.<br /><br />No debemos caer en la tentación de <em>marcar</em> en función de la presentación que luego los navegadores dan a esos elementos. Hay que recordar que siempre podemos cambiar la presentación gracias a las <dfn>hojas de estilo en cascada</dfn> (CSS).<br /><br /><h4>Marcado de edición de textos</h4><h5>ins y del</h5>Cuando estamos desarrollando un documento, hay cosas que no siempre se escriben bien a la primera, o bien luego hay que hacer algún ajuste o actualización. HTML nos permite marcar los cambios, ya sean añadidos o borrados, con las etiquetas <code>ins</code> y <code>del</code>. De esta forma, al igual que en otros editores de texto, de un vistazo, se pueden descubrir los cambios en el documento.<br /><br />Además, estas etiquetas tienen 2 atributos que sirven para saber las razones del cambio (<code>cite</code>) y cuándo se realizó dicho cambio (<code>datetime</code>). El formato de este último atributo es un poco especial y riguroso. Está basado en esta plantilla: <var>YYYY-MM-DDThh:mm:ssTZD</var><br /><ul><li><var>YYYY</var>: año con 4 dígitos</li><li><var>MM</var>: mes con 2 dígitos (01-12)</li><li><var>DD</var>: día con 2 dígitos (01-31)</li><li><code>T</code>: caracter separador entre fecha y hora</li><li><var>hh</var>: hora con 2 dígitos (00-23)</li><li><var>mm</var>: minutos con 2 dígitos (00-59); es información opcional</li><li><var>ss</var>: segundos con 2 dígitos (00-59); es información opcional</li><li><var>TZD</var>: zona horaria, <code>Z</code> para hora <dfn>Zulú</dfn> (la del meridiano de Greenwich) o desfase en horas y minutos (positivo o negativo) del huso horario correspondiente</li></ul><br /><br />Más información sobre la plantilla de datetime en <a href="http://en.wikipedia.org/wiki/ISO_8601">ISO 8601 de la Wikipedia</a>.<br /><br />Ejemplo de uso de los elementos <code>ins</code> y <code>del</code>:<br /><samp><br /><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit<ins cite="lorem ipsum..." datetime="2007-01-05T13:24+01:00">, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat</ins>. Ut wisi enim ad minim veniam<del cite="lorem ipsum..." datetime="2007-01-04T08:21:34-05:00">, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat</del>. Duis autem vel eum iriure dolor in hendrerit in ...</p><br /></samp><br /><h5>bdo</h5><br />Otro desconocido elemento para la edición de textos es <code>bdo</code>. En inglés, <abbr>bdo</abbr> es la abreviatura de <em lang="en-US">bidirectional override</em>, y si nos atenemos a esta definición, podemos adivinar su función: sobreescribir el tratamiento direccional del texto para el contenido que se encierre dentro del elemento.<br /><br />Por si no ha quedado claro, intentaré explicarlo mejor. Uno de los atributos de la etiqueta <code>html</code> es <code>dir</code>, que sirve para indicar cómo se debe escribir (el navegador) el texto que contiene el documento, es decir, si se escribe de izquierda a derecha (<code>ltr</code>) o de derecha a izquierda (<code>rtl</code>).<br /><pre><samp><br /><!DOCTYPE html<br /> PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br /> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" <strong>dir="ltr"</strong> lang="es"><br />...<br /></pre></samp><br />Como se puede ver en el ejemplo, con el atributo <code>dir</code> se define la legibilidad de todo el documento pero, ¿qué ocurre si dentro de un texto que se lee de izquierda a derecha, necesitamos incrustar algo de contenido que está en otro idioma y además se lee al revés? Para eso existe el elemento <code>bdo</code>. Veámoslo con otro ejemplo:<br /><pre><samp><br />...<br /><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" <strong>dir="ltr"</strong> lang="es"><br />...<br /><p>Contenido en idioma español. Se escribe de izquierda a derecha.</p><br /><p><bdo lang="zh-TW" dir="rtl">Contenido en otro idioma (chino tradicional) que se redacta de derecha a izquierda.</bdo><p><br />...<br /></samp></pre><br />Como se puede ver en el ejemplo, se ha definido un idioma y una dirección de escritura general para el documento (en la etiqueta <code>html</code>) y luego se ha marcado el texto en otro idioma (que si supiera chino, estaría correctamente escrito ;-) ) gracias a la etiqueta <code>bdo</code>.<br /><h4>Etiquetas de estilo basado en contenido</h4><br /><h5>cite</h5><br /><code>cite</code> sirve para indicar que el texto que contiene es una referencia bibliográfica. Junto con el elemento para enlaces (<code>a</code>), puede servir para hacer referencia a otro documento donde se encuentra la fuente que hemos citado.<br /><pre><samp><br /><blockquote lang="en-GB">You can't always get what you want; but if you try sometimes, you just might find, you get what you need.</blockquote><br /><br /><p><cite><a href="http://en.wikipedia.org/wiki/You_Can't_Always_Get_What_You_Want">Rolling Stones</a></cite></p><br /></samp></pre><br /><h5>code</h5><br />La etiqueta <code>code</code> indica que el texto que encierra es código fuente de programación. Esto hace que los navegadores utilicen (por defecto y a no ser que establezcamos lo contrario con CSS) una <dfn>fuente monoespaciada</dfn> (todos los caracteres tienen la misma anchura) para visualizar el texto.<br /><pre><samp><br /><pre><code lang="en-US"><br />/**<br />* string numberToAlphabet(int $number)<br />*<br />* Converts an integer in an alphabetical string (1 <= $number <= 702)<br />*<br />* @author PHP manual, user contributes notes for chr() function<br />* @param int $number integer to convert<br />* @return string alphabetical string<br />* @access public<br />*/<br />function numberToAlphabet($number)<br />{<br /> return ($number-- > 26 ? chr(($number / 26 + 25) % 26 + ord('A')) : '') . chr($number % 26 + ord('A'));<br />}<br /></code></pre><br /></samp></pre><br />En el ejemplo, se ha encerrado el contenido de <code>code</code> dentro de la etiqueta <code>pre</code> por 2 razones:<br /><ul><li><code>code</code> es una etiqueta para texto en línea (es decir, tiene [o debe] ir dentro de otra etiqueta de bloque distinta de <code>body</code>, que sólo debería contener otros elementos de bloque)</li><li>con el uso de <code>pre</code> se preservan los espacios y líneas en blanco del texto, necesarios para dar formato al código fuente</li></ul><br /><h5>dfn</h5><br />La etiqueta <code>dfn</code> se utiliza para marcar los términos (y no las definiciones) nuevos (o especiales) de un documento que necesitan la atención del lector. Como regla de buen estilo, sólo se delimita la primera aparición del término en el texto.<br /><samp><br /><p>El software libre es también llamado software de código abierto. La razón por la que se llama así es que, junto con el <dfn>programa objeto</dfn>, se distribuye el <dfn>código fuente</dfn> del mismo.</p><br /></samp><br /><br />Para definir los conceptos (como cuando se escribe un glosario de términos) existe otro conjunto de etiquetas:<br /><ul><li><code>dl</code>: lista de definiciones</li><li><code>dt</code>: término a definir</li><li><code>dd</code>: definición del término</li></ul><br /><pre><samp><br /><dl><br /> <dt>Programa objeto</dt><br /><br /> <dd>Instrucciones que se ejecutan directamente contra la máquina y que no son comprensibles por las personas.</dd><br /><br /> <dt>Código fuente</dt><br /><br /> <dd>Instrucciones escritas en un lenguaje de programación que el ser humano puede leer pero que no comprende directamente la máquina.</dd><br /></dl><br /></samp></pre><br /><h5>kbd</h5><br /><code>kbd</code> es la forma más indicada de indicar que un determinado texto es introducido desde el teclado (<span lang="en"><strong>k</strong>ey<strong>b</strong>oar<strong>d</strong></span>). Es muy útil para el caso de redactar manuales o cualquier otro tipo de documentación técnica.<br /><pre><samp><br /><pre><samp><br />C:\><kbd>c:\mysql\bin\mysql -uadmin -p mysql</kbd><br />Enter password: <kbd>*********</kbd><br /></samp></pre><br /></samp></pre><br /><h5>samp</h5><br />Como se ha podido ver en el ejemplo anterior, en el que hemos hecho uso ya de la etiqueta <code>samp</code> (<span lang="en"><strong>samp</strong>le</span>), esta sirve para mostrar la salida de algunos programas o ejemplos de código fuente (como los que estoy utilizando en este artículo).<br /><h5>var</h5><br />La etiqueta <code>var</code> se utiliza para marcar texto que sirve de <em>plantilla</em>, es decir, para texto que no se debe introducir tal cual, sino que debe reemplazarse por otro a la hora de teclearlo. Como ejemplo, puede servir este extracto donde se combinan además otras etiquetas vistas anteriormente.<br /><pre><samp><br /><p>Verifique su base de datos y usuario accediendo a la nueva base de datos con el nuevo usuario.</p><br /><br /><pre><samp><br />C:\><kbd>C:\mysql\bin\mysql -u <var>new_user</var> -p<var>new_password</var> <var>new_database</var></kbd><br /></samp></pre><br /></samp></pre><br /><h4>Notas finales</h4><br />Para la redacción de este artículo he utilizado algunas deficiones y ejemplos que aparecen en el libro <cite><a href="http://www.oreilly.com/catalog/html5/">HTML y XHTML: La Guía Definitiva</a></cite>, original de la editorial <cite><a href="http://www.oreilly.com/">O'Reilly</a></cite> pero traducido al español por <cite><a href="http://www.anayamultimedia.es/">Anaya Multimedia</a></cite>.<br /><br />En los ejemplos expuestos se ha usado el punto de vista de quien codifica la página, por eso se muestra el código fuente necesario para marcar el contenido. Queda a disposición del lector la prueba de dichos ejemplos en su propio navegador para ver cómo se visualizan. Se ha optado por hacerlo de este modo porque no existen reglas fijas de presentación y estas pueden diferir entre diferentes <dfn>agentes de usuario</dfn> (navegadores web).<br /><br /><strong>Actualización (2007-01-04):</strong><br />Sólo un día después de la publicación de este artículo, me encuentro con esta <a href="http://www.blue-anvil.com/archives/guide-to-semantic-mark-up">guía de marcado semántico</a>. Para quienes deseen completar esta lectura, se lo recomiendo encarecidamente: se habla también del correcto uso de los elementos más habituales (encabezados, párrafos, listas, ...) y hay más ejemplos sobre la adecuada utilización de las etiquetas de HTML.Unknownnoreply@blogger.com3