Blog

ImageMagick

ImageMagick, es una suite de software libre, sirve para crear, editar y componer imágenes en mapa de bits. Puede leer, convertir y crear imágenes en una larga variedad de formatos (más de 90 formatos soportados). Las imágenes pueden ser cortadas, los colores pueden ser cambiados, ciertos efectos pueden ser aplicados, las imágenes pueden rotadas y combinadas, se pueden agregar a las imágenes, textos, líneas, polígonos, elipses, entre otros.

Es una suite realmente potente bajo la línea de comandos, puede ver una serie de ejemplos, esto le demostrará lo que puede llegar a hacer con esta eficaz aplicación.

Esta herramienta me ha facilitado enormemente el procesamiento de gran cantidad de imágenes que requieren el mismo tratamiento, solamente con una línea de comandos voy a establecer todas las opciones que deseo. Por ejemplo:

convert origen.jpg -resize 50% -bordercolor "#666"
-border 4 destino.png

Imagen Original -> Imagen modificada con ImageMagick.

Con esta simple línea de comandos estoy realizando las siguientes conversiones sobre la imagen origen.jpg, en primer lugar estoy reduciendo las proporciones de anchura y altura al 50%, posteriormente estoy designando el color del borde al valor hexadecimal (#666, gris), el ancho de dicho borde será de 4px, finalmente estoy cambiando el formato de la imagen, estoy convirtiendo de jpg a png, los resultados se podrán apreciar en la imagen destino.png. Ahora bien, imagínese procesar 500 imágenes desde una aplicación con interfaz gráfica que le brinde la rapidez que le ofrece ImageMagick, creo que hasta la fecha es imposible, por lo que resulta un buen recurso el emplear esta herramienta para el procesamiento de grandes lotes de imágenes.

Ahora vamos a “jugar” un poco para colocar una “marca de agua” a la imagen en cuestión.

convert origen.jpg -resize 50% -bordercolor "#666"
-border 4 -font "Bitstream Vera Sans" -pointsize 16 -gravity SouthEast
-fill "#FFF" -draw "text 10,10 'http://blog.milmazz.com.ve'" destino.png

Imagen Original -> Imagen modificada con ImageMagick.

Esta vez el número de opciones que he empleado han aumentado ligeramente. Vamos a explicar brevemente cada una de ellas, la opción font nos permite elegir una fuente, en el ejemplo he escogido la fuente Bitstream Vera Sans, la opción pointsize permite escoger el tamaño de la fuente, la opción gravity nos permite establecer la colocación horizontal y vertical del texto, he elegido la primitiva SouthEast, la cual colocará el texto en la parte inferior derecha de la imagen, la opción fill me permite establecer el color de relleno del texto que se dibujará con la opción draw, esta última opción escribirá la cadena http://blog.milmazz.com.ve.

Para mayor información acerca de las distintas opciones que puede manejar le recomiendo leer detenidamente la descripción de las herramientas en línea de comando de ImageMagick.

¿Es necesario activar la cuenta root en Ubuntu?

Los desarrolladores de Ubuntu Linux en un principio querían que el proceso de instalación fuese lo más fácil posible, el hecho de desactivar de manera predeterminada la cuenta de usuario root permitía obviar algunos pasos en el proceso de instalación. Esto para muchos es un inconveniente, pues Ubuntu Linux “difiere” en cuanto al modelo de seguridad que se maneja comúnmente en sistemas GNU/Linux, el modelo que plantea Ubuntu Linux es simplemente no recomendar hacer uso extensivo del usuario root (por eso ha desactivado la cuenta). Debido a que esta distribución está orientada hacia usuarios que quizás no han tenido un contacto extenso con sistemas GNU/Linux, el modelo propuesto me parece bastante lógico.

Por supuesto, este modelo presenta ventajas y desventajas, desde mi punto de vista son más ventajas que desventajas, ¿por qué?, a continuación detallo mis argumentos.

• Ubuntu Linux está orientada hacia usuarios finales que no han tenido tanto contacto con el mundo GNU/Linux, seguramente estos nuevos usuarios no están adaptados al modelo de seguridad que se maneja en estos sistemas, por lo que seguramente se generen más olvidos a la hora de recordar la contraseña que se utiliza para fines administrativos, puesto que esta cuenta es pocas veces usadas por ellos. Con el uso de sudo (Super User DO) esto no pasa, puesto que se maneja la misma contraseña del usuario principal (o aquellos que estén autorizados) para fines administrativos.
• Seguramente el hecho de introducir la contraseña para realizar cambios administrativos te detenga a pensar en lo que estas haciendo realmente, lo cual puede reducir la tasa de errores en la administración del sistema.
• Puedes ver un registro de las actividades que se realizan con el comando sudo en /var/log/auth.log, lo cual puede ayudar a administrar tu sistema eficientemente.

He escuchado argumentos de personas que dicen que el usar sudo es tedioso, puesto que debes introducir la constraseña a cada instante, eso no es cierto, la primera vez que introduzcas la contraseña, ésta se almacenará por quince (15) minutos, después de transcurrido ese tiempo y si necesitas hacer alguna actividad administrativa se te volverá a solicitar.

Quizás la mayor desventaja de este modelo es que el mantener una contraseña “diferente” para el superusuario existe mayor protección en el caso en que las contraseñas de los usuarios con derehos administrativos se vean comprometidas. Pero esto puede ser evitado al ponerle mayor cuidado a las cuentas de usuarios con derechos administrativos, la debilidad es allí y no en el modelo en cuestión.

Lo cierto es que el uso de sudo puede considerarse para ejecutar pocos comandos administrativos, mientras que su generalmente es utilizado para ejecutar múltiples tareas administrativas, el problema es que su puede dejar “abierta” indefinidamente una shell con derechos de superusuario, esto último es un gran inconveniente para la seguridad del sistema. En cambio sudo limita estas cosas, como se menciono anteriormente, al menos tienes quince (15) minutos de derechos de superusuario. Si a pesar de lo que he mencionado hasta ahora, ud. considera conveniente activar la cuenta de superusuario en Ubuntu Linux, aca está la serie de pasos que deberá seguir:

1. sudo passwd root
2. Cambiar la configuración de sudo, para evitar que el usuario principal haga uso de él, este paso puede ser opcional, aunque es recomendable hacerlo si realmente se desea hacer la “separación” a la cual estamos acostumbrados en los sistemas GNU/Linux.
3. Cambiar las entradas del menú que hacen uso de gksudo (comúnmente aquellas aplicaciones con fines administrativos) por gksu, para que realmente pidan la contraseña de root y no la del usuario principal.

Como conclusión, desde mi punto de vista considero innecesario tomarse tantas molestias para activar al usuario root en Ubuntu Linux cuando el mecanismo propuesto (sudo) funciona perfectamente.

Rediseñando NNL Newsletter II

En este artículo se mostrará la facilidad de emplear hojas de estilos en cascada o CSS cuando poseemos una buena estructura en nuestros documentos. Como estructura vamos a utilizar una modificación que he realizado de la primera edición de NNL Newsletter. La edición de la estructura se ha explicado en el artículo Rediseñando NNL Newsletter I.

Estableciendo valores a los márgenes y rellenos

Usualmente mi primera regla en CSS es establecer los márgenes y rellenos de todos los elementos XHTML (o HTML) a cero (0), ¿por qué hacer esto?, simplemente porque los Agentes de Usuario (p.ej. Navegadores) implementan distintas reglas sobre estas dos propiedades. Desde mi punto de vista, la mejor forma de controlar estas diferencias es ir estableciendo los valores de dichas propiedades de acuerdo a las necesidades que tengamos, aunque previamente se han inicializado a cero.

Muestra de ejemplo en CSS

<code>*{
  margin: 0;
  padding: 0;
}</code>

Creando nuestro Layout

Antes que nada debemos pensar en que tipo de contenido mostraremos y que extensos serán estos. En nuestro ejemplo de análisis, NNL Newsletter se basa principalmente en texto, estos textos suelen ser extensos, por lo que debemos ser precavidos a la hora de mostrarlos, la lectura no debe “cansar” al lector, debemos mostrar el mayor contraste posible. Partiendo de las características del sitio en particular, podemos concluir que lo mejor es implantar un layout elástico, este tipo de diagramación simplemente se basa en el concepto de medidas relativas tanto en los bloques de la página como en las tipografías, por lo que al usuario se le facilitará la ampliación (o disminución) de los elementos mostrados desde el panel de control del navegador.

Inicialmente vamos a centrar la página.

Muestra de ejemplo en CSS

<code>body{
  text-align: center;
}
#wrapper{
  margin: 3em auto;
  width: 35em;
  text-align: left;
}</code>

Vea el resultado de aplicar la regla de estilo a la estructura del documento.

En las dos reglas anteriores, quien realmente hace el trabajo de centrado del documento es la declaración margin: 3em auto;, en donde se especifica que tanto el margen superior como el margen inferior sean iguales a 3em, los márgenes izquierdo y derecho tomarán valores automáticos idénticos, lo cual centrará nuestro documento, ahora bien, para que la declaración anterior funcione correctamente debe especificarse la anchura del bloque que queremos centrar, en nuestro ejemplo hemos seleccionado el valor de 35em. Respecto a la utilización de la declaración text-align sobre el selector body simplemente es para ampliar la compatibilidad de nuestro diseño con los usuarios de IE5 en sistemas Windows, sin dicha declaración la mayoría de los navegadores aún muostrarían el layout centrado, pero IE5/Win no.

Respecto al valor que se le ha asignado a la propiedad width que aplicara sobre el bloque #wrapper, la explicación dada por Nicolás Fantino en el artículo Ni fijo, ni líquido. Elástico, seguramente aclarará las posibles dudas.

Cualquiera que se haya dedicado en algún momento de su vida al diseño gráfico editorial sabrá que existen, o al menos habrá escuchado hablar de, ciertas normas o convenciones. Una de ellas define lo que se considera el ancho óptimo de una línea de texto para ser leído en bloque. Éste es de entre 30 em y 35 em. La unidad de medida de este ancho es el “em”. Un “em” mide exactamente el ancho de la letra “M” mayúscula de una tipografía dada y a un tamaño dado. Efectivamente, según esta definición un “em” no mide físicamente siempre lo mismo. ¿Por qué se usa esta medida? porque el ancho óptimo para la lectura dependerá, necesariamente, del tipo de letra que se use y, más necesariamente aún, del tamaño de ésta.

Para ampliar la compatibilidad del layout elástico con el navegador IE (sí, otra vez), debemos previamente definir un valor cuya unidad de medida sea el porcentaje a la tipografía en el selector body, por ejemplo:

<code>body{
  font-size: 85%;
}</code>

Vea el resultado de aplicar la regla de estilo a la estructura del documento.

Posteriormente dejaremos de usar la unidad de medida porcentaje, de ahora en adelante utilizaremos como unidad de medida em.

Antes de continuar, vamos a “maquillar” un poco nuestro layout.

<code>body{
  font: 85%/145% "Trebuchet MS", Arial, Verdana, sans-serif;
  color: #333;
  border-top: 5px solid #bbb;
  background: #eee url(bg-bottom.png) repeat-x bottom left fixed;
}
#wrapper{
  border: 1px solid #bbb;
  border-top: 5px solid #bbb;
  background: #fff;
}</code>

Vea el resultado de aplicar la regla de estilo a la estructura del documento.

Solamente hemos “jugado” un poco con los valores de: fuentes, colores, bordes y fondos. Se han utilizado modos abreviados de escritura de código CSS para ahorrarnos unos cuantos bytes.

Sustituyendo texto por una imagen

Desde mi punto de vista, es preferible no hacer uso de imágenes como título más importante, es conveniente utilizar un encabezado h1, pero a veces resulta conveniente sustituir ese título por el logo del sitio en particular, existen muchos métodos para hacerlo a través de CSS, yo utilizaré el método Shea Enhancement planteado por Dave Shea al final del artículo Revised Image Replacement

Nos aprovecharemos de la siguiente estructura en XHTML.

<code><h1 id="header" title="NNL Newsletter"><a href="http://www.nnlnews.com/"><span></span>NNL Newsletter</a></h1></code>

La imagen que sustituirá al título tiene una anchura de 134px y una altura de 130px. Ahora recurrimos a CSS y hacemos lo siguiente:

<code>h1{
font-size: 1.2em;
}
#header{
  width: 134px;
  height: 130px;
  position: relative;
}
#header span{
  background: url(logo.png) no-repeat top left;
  width: 100%;
  height: 100%;
  position: absolute;
}</code>

Vea el resultado de aplicar la regla de estilo a la estructura del documento.

Notas

Carlos Tori, encargado de la redacción de NNL Newsletter, acostumbra colocar un párrafo de notas al principio de las distintas ediciones, para distinguir dicho párrafo, hemos creado un clase llamada note, funciona de la siguiente manera:

<code>p{
  margin: 0 1em 0.5em 1em;
}
p.note{
  border-top: 2px solid #666;
  background: #f5f5f5;
  padding: 1em;
  margin: 1em 0;
}</code>

Vea el resultado de aplicar la regla de estilo a la estructura del documento.

En primera instancia declaramos los márgenes necesarios a todos los párrafos (p), luego vamos al caso particular de la nota, la cual, consiste de una párrafo cuya clase sea igual a note.

Listas Ordenadas

Carlos Tori, siempre coloca una lista ordenada de los puntos que tratará en la edición de NNL Newsletter, es conveniente implantar una lista ordenada de enlaces, esto facilitará el acceso a los diversos puntos que se tratan.

<code>ol{
  margin: 1em 3em;
}
ol li{
  list-style-type: none;
  background: url(bullet.png) no-repeat left center;
  padding-left: 16px;
}</code>

Vea el resultado de aplicar la regla de estilo a la estructura del documento.

La primera regla aplica sobre las listas ordenadas, en ella establecemos los márgenes. En la segunda regla, en primera instancia evitamos mostrar el marcador de los ítems de la lista, esto lo hacemos a través de la propiedad list-style-type con un valor igual a none, luego empleamos la propiedad background para colocar un marcador de los ítems partiendo de una imagen, la cual estará posicionada hacia la izquierda horizontalmente y estará posicionada verticalmente en la parte central, esto se logra con las palabras claves left y center respectivamente, antes de finalizar la segunda regla, controlamos el relleno izquierdo con un valor fijo.

Listas de definición

De acuerdo a la estructura de NNL Newsletter, normalmente se plantea un tópico e inmediatamente se procede a describirlos, como Carlos define ciertos tópicos, me parece adecuado agruparlos dentro de una lista de definiciones. Ahora bien, vamos a “maquillar” dichas listas a través de las hojas de estilos en cascada.

Primero, vamos a encargarnos de los títulos de las definiciones.

<code>dt{
  font-weight: bold;
  font-size: 1.1em;
  background: #eee;
  margin-top: 14px;
  padding: 6px 6px 7px 12px;
  border-top: 2px solid #bbb;
}</code>

En la regla anterior, vamos a darle cierto peso (font-weight) a los títulos, definimos el tamaño de la fuente (font-size), seleccionamos un color de fondo (background), establecemos un margen superior (margin-top), establecemos los rellenos (padding) y finalmente decoramos los títulos con un borde superior (border-top).

Ahora definamos los rellenos de las descripciones de las definiciones.

<code>dd{
  padding: 6px 6px 10px 8px;
}</code>

Vea el resultado de aplicar la regla de estilo a la estructura del documento.

Si detalla la muestra anterior, puede darse cuenta que después del tópico cuyo título de definición es: Feedback: Los lectores preguntaron…, la descripción de la definición de dicho es tópico es otra lista de definiciones, es decir, existe una lista de definiciones anidada, recuerde que las listas de definiciones también pueden utilizarse para representar dialogos según la especificación del XHTML. Vamos a diferenciar dicha lista de definiciones del resto.

<code>#feedback dl{
  background: #ffe;
  border: 1px solid #999;
  border-top: 0;
  margin: 13px 2px 8px 2px;
  padding: 0 5px 10px 5px;
  color: #000;
}
#feedback dt{
  font-size: 0.95em;
  color: #fff;
  border: 0 none;
  background: #c30;
  margin: 0 -5px;
  padding: 4px 10px;
}
#feedback .nnl, #feedback .ans{
  background: #fcfcfc;
  margin: 0 5px;
  border-right: 1px solid #bbb;
  border-left: 1px solid #bbb;
}
#feedback .ans{
  color: #333;
  border-top: 1px solid #bbb;
  padding: 5px 11px 5px 9px;
}
#feedback .nnl{
  border-bottom: 1px solid #bbb;
  padding: 0 11px 10px 9px;
}
#feedback .to, #feedback .subject, #feedback .date{
  font-style: italic;
}</code>

Vea el resultado de aplicar las reglas de estilo a la estructura del documento.

Simplemente es un “juego” con las propiedades: background, border, margin, padding, font-size, color y font-style; las cuales han sido explicadas con anterioridad.

Quizás deba resaltar la propiedad margin utilizada en la regla #feedback dt, la cual tiene valores negativos (-5px) para los márgenes izquierdo y derecho, esto lo hago simplemente con el fin de ocupar todo el espacio de la lista de definición, en la cual se ha definido previamente un relleno (padding) de 5px.

Código

Vamos a mejorar la presentación del código.

<code>code{
  font-family: "Courier New", Courier, monospace;
  background: #ffe;
  font-size: 0.95em;
}
code.block{
  overflow: auto;
  width: 33em;
  display: block;
}
pre{
  text-align: center;
  background: #ffe;
  color: #000;
  width: 33em;
  border: 1px solid #bbb;
  margin: 6px auto;
  padding: 0;
  overflow: auto;
  height: 100%;
}
pre code{
  display: block;
  text-align: left;
  margin: 6px 7px;
  background: transparent;
}</code>

Vea el resultado de aplicar las reglas de estilo a la estructura del documento.

En primer lugar, se le asigna una tipografía distinta de la normal, para distinguir el código del resto del flujo, en algunas ocasiones Carlos emplea en línea código extremadamente largo, lo cual causa que el código rompa con el layout, por ello he creado una clase llamada block que convertirá el selector code, el cual es un elemento en línea, en un elemento en bloque. Para el caso de los bloques de código, estos se han centrado, para lograr tal efecto he utilizado el mismo método citado en principio para centrar el layout.

Es importante resaltar, que el único concepto aplicado que puede resultarle nuevo es el uso de la propiedad overflow, la cual solamente puede ser aplicada a elementos en bloque, esta propiedad es utilizable cuando el contenido sobresale o desborda de la caja que lo contiene, cuando esto sucede, se proporcionan barras de desplazamiento para visualizar el resto del contenido, evitando así romper el layout.

Enlaces

Es importante resaltar que ciertos navegadores podrían ignorar una o más reglas de pseudo clases en los enlaces, a menos que dichas pseudo clases sean listadas en el orden siguiente: :link, :visited, :hover y :active (LVHA). Según el Sr. Zeldman existe un mnemónico anglosajón que podría ayudarle a recordar dicho orden, dicho mnemónico es LoVe-HA!.

Seguramente ud. se estará preguntando en este instante lo siguiente: ¿qué es un selector de pseudo-clase?, en el mundo de las hojas de estilos en cascada, una clase es aquella que es especificada explicitamente con el atributo class dentro de la estructura del documento XHTML. Una pseudo clase es aquella que depende de la actividad del usuario o del estado que indique el navegador (:hover, :visited).

<code>a:link, a:visited{
  font-size: 0.85em;
  color: #c30;
  background: transparent;
  font-weight: bold;
  text-decoration: none;
}
a:hover, a:active{
  color: #999;
  background: transparent;
  text-decoration: underline;
}
a[hreflang]:after{
  content: " [" attr(hreflang) "]";
}
#footer a:hover {
  color: #666;
  text-decoration: underline;
}</code>

Vea el resultado de aplicar las reglas de estilo a la estructura del documento.

Posiblemente la regla más complicada de las mostradas anteriormente es a[hreflang]:after, voy a explicar brevemente de que trata todo esto, a[hreflang], simplemente aplicará sobre todos aquellos enlaces que posean el atributo hreflang sin importar el valor que tengan. La propiedad content es utilizada en conjunto con los pseudo elementos :before o :after para generar contenido antes o después del elemento respectivamente, dentro de la propiedad content se utilizan dos cadenas de carácteres, tanto el corchete que abre como el corchete que cierra, dentro de los corchetes se utiliza el valor attr(hreflang), el cual devolverá como una cadena el valor del atributo hreflang ubicado dentro del selector a.

Pie de página

El pie de página normalmente es utilizado para indicar el tipo de copyright del contenido o algún tipo de firma en particular.

Se han realizado unos ajustes al pie de página, estos son los siguientes:

<code>#footer{
  background: #fff url(bg-footer.png) repeat-x top left;
  color: #333;
  border-top: 2px solid #666;
}
#footer p{
  margin: 0;
  padding: 4px 9px 3px 10px;
}
#footer a{
  color: #000;
}</code>

Vea el resultado de aplicar las reglas de estilo a la estructura del documento.

Todas las propiedades utilizadas en estas reglas se han descrito previamente, no considero necesario volver a hacerlo.

Referencias

• Ni fijo, ni líquido. Elástico

• CSS Centering 101

• Revised Image Replacement

• CSS in Action: A Hybrid Layout (Part II)

• Fundación Sidar

Rediseñando NNL Newsletter I

Hace ya bastante tiempo que llevo siguiendo esta interesante lista de correo, orientada sobretodo al mundo IT, tambien se publican noticias relacionadas al mundo GNU/Linux, lo cual capto mi atencion de inmediato.

Pero este articulo no tratara sobre el excelente contenido que presenta regularmente Carlos Tori (el hombre detras de NNL Newsletter), este articulo tratara mas bien una propuesta de rediseño en los boletines que se presentan.

El rediseño que le plantee a Carlos Tori captó su atencion, aun no se ha implantado en el sitio oficial debido a mi “retraso” (algo en lo que mis estudios en la Universidad ha tenido mucho que ver) en la depuracion de los actuales 25 boletines, queda aun mucho trabajo por hacer, solo quiero mostrarle una anticipacion a mis dos fieles lectores. Espero les guste.

Comenzamos

Si observamos los boletines que presenta NNL Newsletter podemos darnos cuenta que aun mantienen el formato usual de mensajes de correo electronico, todo esto a pesar del avance que ha presentado la lista, ahora se puede catalogar como un sitio web en donde se podra leer noticias interesantes, dichas noticias aparecen cada cierto tiempo, agrupadas en un mismo documento, al final de cada documento se anexa el soporte que le ha brindado Carlos Tori a sus fervientes lectores.

Desde mi perspectiva debe darse un “lavado de cara” al Newsletter. Comencemos por la semántica de los documentos. Tomare como muestra el NNL Newsletter » 1.

Eliminando lo innecesario

En primer lugar elimine los estilos incrustados en el mismo documento, la ventaja que nos otorga el uso de hojas de estilos en cascada o CSS es separar la estructura que describe el contenido del documento de su presentacion. Por lo cual, controlaremos la presentacion de los 25 boletines (y posteriores) a través de un solo documento CSS. A continuacion se muestra el bloque eliminado:

<code><style type="text/css">
<!--
.style1 {
  font-family: "Courier New", Courier, mono;
  font-size: 12px;
}
.style2 {color: #000000}
.style11 {font-size: 1px}
.style12 {color: #FFFFFF}
-->
</style></code>

Posteriormente procedi a eliminar el uso excesivo de las etiquetas <br>, de igual manera se eliminaron el uso de las clases: style1, style2, style11 y style12. Esto es realmente sencillo hacerlo, simplemente buscamos en nuestro editor favorito (en mi caso: Bluefish) la opcion de Reemplazo (Edicion -> Reemplazar), introducimos los parametros de busqueda y reemplazo y el editor hara el trabajo por nosotros.

Siguiendo con el proceso de eliminacion nos encontramos con el logo de NNL Newsletter, el cual tiene ciertos inconvenientes:

<code><p><img src="../logo.png" width="134" height="130"></p></code>

El primer inconveniente es el semantico, en realidad un Agente de Usuario no sabra definir la importancia de esta parte del codigo, simplemente lo tratara como un parrafo mas, adicionalmente, se comete el error de emplear una imagen que el Agente de Usuario (P.ej. Un buscador) no sabria interpretar, ya que no se presenta siquiera un texto alternativo, el uso del atributo alt en las imagenes es vital. Ahora bien, lo que en realidad le daria la importancia que se merece esta parte del codigo seria usar un encabezado que le corresponda.

<code><h1><span></span>NNL Newsletter</h1></code>

¡Ahora si!, hemos conseguido darle un alto nivel de importancia al nombre del newsletter, ahora bien, muchos se preguntaran, ¿Por que de manera tan drastica ha eliminado la imagen?, ¿Acaso para lograr documentos realmente semanticos debemos deshacernos de las imagenes?, desde mi perspectiva el uso de imagenes con fines superfluos o unicamente con fines presentacionales deben dejarse del lado de las hojas de estilo en cascada, simplemente se hara (posteriormente) un reemplazo del encabezado por la imagen via CSS (por eso de la etiqueta span vacia en el encabezado h1), este reemplazo via CSS no disminuira el valor semantico de nuestro documento.

Haciendo algunos cambios necesarios

Carlos Tori, mantiene un formato en su newsletter, normalmente, da una breve introduccion, posteriormente presenta una lista ordenada de los topicos a los cuales hara mencion en el boletin. Seguidamente procede a desglosar cada uno de esos topicos, entre otras cosas. Podemos cambiar ciertas cosas en el boletin.

Primero, la lista ordenada que presenta el newsletter comunmente, la unica salvedad son los diferentes topicos a los cuales puede hacer mencion.

<code><p>1- Nota: CGI inseguro<br>
2- Pequeños grandes consejos al admin: .bash_history<br>
3- Mini análisis de xploits privados: RPC Sunos - 0day -<br>
4- Feedback: Los lectores preguntaron...<br>
5- N de la R. ( Notas de la redacción. ) / Next</p></code>

De manera visual puede que parezca una lista, pero debemos darle a las cosas el significado que tienen en realidad, es decir, le agregaremos un valor semantico, de esta manera sera comprensible para cualquier Agente de Usuario la estructura del contenido mostrado.

<code><ol>
<li><a href="#nnl_1_1" title="Vea el
tópico">CGI inseguro</a></li>
<li><a href="#nnl_1_2" title="Vea el
tópico">Peque&ntilde;os grandes consejos al admin:
.bash_history</a></li>
<li><a href="#nnl_1_3" title="Vea el
tópico">Mini an&aacute;lisis de xploits privados:
RPC Sunos -0day-</a></li>
<li><a href="#nnl_1_4" title="Vea el
tópico">Feedback: Los lectores preguntaron...</a></li>
<li><a href="#nnl_1_5" title="Vea el
tópico"><abbr title="Notas de la Redacción"
xml:lang="es">N de la R.</abbr> (Notas
de la Redacci&oacute;n) / Next</a></li>
</ol></code>

En la lista ordenada mostrada arriba debemos hacer notar el uso de las entidades de caracteres. Adicionalmente hemos mejorado la semantica de la abreviacion que hace el autor acerca de las Notas de la Redaccion. Por ultimo, pero no menos importante, es el uso de vinculos que llevan como valor (precediendole el caracter almohadilla ‘#’) en el atributo href el valor de los atributos id de otros elementos, esto beneficiara a aquel lector que desea dedicarse a una parte especifica del newsletter, no debera desplazarse por todo el documento, solo debera dar click en el enlace y este le llevara a la parte requerida, es un gran beneficio para el lector, ya que en algunas ocasiones el newsletter presenta un contenido realmente extenso.

En este punto eliminaremos ciertos separadores que son utilizados para seccionar los topicos y le daremos el significado correcto a los titulos de cada topico. Debemos considerar que es una lista de puntos a los cuales se le da una definicion, por lo cual, me parece bastante adecuado utilizar una lista de definiciones en este caso.

Version de Carlos Tori.

<code><p>***************************************************
((2)) Pequeños grandes consejos al admin: ".bash_history"</p>
<p>Amigo administrador: Sabias que una forma rápida de
conseguir privilegios de root es leyendo los .bash_history
de los usuarios de tu server ? Sí, en efecto es asi.
Muchos admins y users pastean sus dificilisimos passwords
durante algún lapsus mental tipo "su ##@|2ks89u" o
"su root##@|2ks89u" o bien pastean el pass "##@|2ks89u" y
dan enter... y lo dejan allí, a la espera de que alguien
lo lea. Controlen a los usuarios que disponen de dicho
pass, y mas aún sus ".bash_history". Amén.</p></code>

Ahora, presentamos una mejora de la version anterior:

<code><dl>
...
<dt id="nnl_1_2">Peque&ntilde;os
grandes consejos al admin: <code>.bash_history</code></dt>
<dd><p>Amigo administrador: &iquest;Sab&iacute;as
que una forma r&aacute;pida de
conseguir privilegios de <code>root</code> es leyendo los <code>.bash_history</code>
de los usuarios de tu server? S&iacute;, en efecto es asi.</p>
<p>Muchos admins y users pastean sus dificilisimos passwords
durante alg&uacute;n lapsus mental tipo
<code>su ##@|2ks89u</code> o
<code>su root##@|2ks89u</code> o bien pastean el pass <code>##@|2ks89u</code> y
dan enter... y lo dejan all&iacute;, a la espera de que alguien
lo lea. Controlen a los usuarios que disponen de dicho
pass, y mas a&uacute;n sus <code>.bash_history</code>. Am&eacute;n.</p></dd>
...
</dl></code>

En principio, a cada elemento dt le colocamos el atributo id, con el fin de poder enlazar a dicho elemento desde otra ubicacion, en nuestro caso, lo hacemos desde la lista ordenada presentada mas arriba, esto facilitara el desplazamiento por el documento, sobretodo si un lector desea dedicarse en especial a este topico.

Segun la especificacion, las listas de definiciones consisten en dos partes, la primera de ellas sera el termino a definir, la segunda parte es la definicion en si. El termino a definir (dado por dt) puede contener elementos en linea, mas no en elementos en bloque. En cambio, la definicion del termino contiene elementos en bloque.

<code><p>***************************************************</p>
<p>((4)) Feedback: Los lectores preguntaron...
---------------------------------------------------
From: MP emonicap@*
To: [email protected]
Subject: Consulta disquetera
Gracias por permitir consultas :)
Saben si hay alguna manera por software de inhabilitar
la escritura en la disquetera?
Desde ya gracias
Mónica</p>
<p>R: Hablando de una simple plataforma Windows como opciones
tenes varias... o bien podes deshabilitarla desde
propiedades en "MI PC", sino hablando en un plano command-
line tenes Floplock.exe ( Lock Floppy Disk Drives )

disponible en el resource kit de NT o por ultimo
> http://www.protect-me.com/dl/ - software -</p></code>

Haremos algunos cambios en la estructura anterior…

<code><dl>
...
  <dt id="nnl_1_4">Feedback: Los lectores preguntaron...</dt>
    <dd id="feedback">
      <dl>
        <dt class="ask">From: MP emonicap@*</dt>
        <dd class="message">
          <p class="to"><strong>To:</strong> [email protected]</p>
          <p class="subject"><strong>Subject:</strong> Consulta disquetera</p>
          <p>Gracias por permitir consultas :)</p>
          <p>&iquest;Saben si hay alguna manera por software de inhabilitar
        la escritura en la disquetera?</p>
          <p>Desde ya gracias,
          Monica</p>
      </dd>
      <dt class="ans"><strong>From:</strong> [email protected]</dt>
      <dd class="nnl">
      <p><strong><abbr title="Respuesta"
      xml:lang="es">R:&gt;</abbr></strong>
      Hablando de una simple plataforma Windows como opciones tenes varias...
      o bien podes deshabilitarla desde propiedades en &quot;MI PC&quot;,
      sino hablando en un plano command-line tenes Floplock.exe
      (<span xml:lang="en">Lock Floppy Disk Drives</span>)
      disponible en el resource kit de NT o por &uacute;ltimo
      <a href="http://www.protect-me.com/dl/"
      hreflang="en">http://www.protect-me.com/dl/</a>
      -software-</p>
      </dd>
    </dl>
  ...
    <dl>
    	<dt class="ask">...</dt>
    	<dd class="message">...</dd>
    	<dt class="ans">...</dt>
    	<dd class="nnl">...</dd>
    </dl>
   ...
   </dd>
   ...
</dl></code>

Ahora realmente ud. pensara que yo estoy muy loco, ¿Como se le ocurre hacer una anidamiento de listas de definiciones?. En defensa propia y evitar que me “encasillen”, me remito a la especificacion.

Otra aplicación de DL es, por ejemplo, dar formato a un diálogo, de modo que cada DT identifica al hablante, y cada DD contiene sus palabras.

El elemento dd id="feedback" va a contener todas las preguntas/respuestas hechas/dadas a/por Carlos Tori por/a sus fieles lectores, esa seria la descripcion del termino: Feedback: Los lectores preguntaron…. Ahora bien, dentro del elemento dd id="feedback" nos encontraremos con varias listas de definiciones, la cuales mostraran los distintos “dialogos” que mantiene Carlos Tori con sus lectores. Se han marcado debidamente los distintos elementos.

dt class=”ask”

Identificamos al lector, en nuestro caso indicamos sus direcciones de correo electronico.

dd class=”message”

Indicamos el mensaje del lector, adicionalmente se coloca el **Asunto** y a quien va dirijido el mensaje (aunque sea obvio).

dt class=”ans”

Identifica a Carlos Tori, en nuestro caso indicamos su direccion de correo electronico.

dd class=”nnl”

Indicamos la respuesta dada por Carlos Tori al lector.

Ya para finalizar esta primera entrega, mejoramos el pie de pagina y le agregamos un contenedor a nuestro documento.

Mejora en el pie de pagina:

<code><div id="footer">
  <p><em>Carlos Tori</em><br />
  <a href="http://www.wedoit.com.ar/">WedoIT</a> - NNL Newsletter<br />
  <acronym title="Pretty Good Privacy" xml:lang="en">PGP</acronym> ID 0x7F81D818</p>
  <p>Feedback, trabajo, sponsors, notas, contribuciones, dirigirse a:
  <a href="mailto:[email protected]">
  [email protected]</a>.</p>
</div></code>

Agregamos un contenedor al documento:

<code><body>
  <div id="wrapper">
    ...
  </div>
</body></code>

Vea una muestra de los cambios hechos al documento.

En la proxima entrega vendra lo divertido para muchos, mejorar la presentacion del documento a traves de hojas de estilos en cascada o CSS.

Nota:

Este artículo lo publique el día 29 de Marzo de este mismo año en BdW. *[ud.]: usted *[P.ej.]: Por ejemplo

AudioConverter v0.3

El día de hoy he publicado la nueva versión de este script, Audio Converter v0.3, para mayor detalle vea el artículo Convirtiendo los formatos de compresión de audio.