06 abril 2008

Firefox Personalizado

Firefox es un navegador excelente, pero añadiéndole un par de cosas que os voy a decir todavía irá mejor.

Firefox con Wikipedia en Español
En primer lugar en la esquina superior derecha hay una casilla en blanco y justo a la izquierda un menú desplegable. La casilla en blanco lógicamente es para introducir un término a buscar, y el menú desplegable indica que motor de búsqueda usaremos para encontrar url relacionadas con esa palabra.
Los motores de búsqueda más importantes son google, yahoo, creative commons, wikipedia...
Se pueden añadir motores de búsqueda en Administrar Motores de Búsqueda.
Resulta que si queremos buscar algo con la Wikipedia nos sale en inglés. ¿Dónde esta la Wikipedia en Español?. No nos lo han puesto fácil, pero en mycroft.mozdev.org he encontrado la solución.

Firebug es un plugin para probar el cambio de estilo de un website antes de hacer los cambios reales. En vez de cambiar las hojas de estilo CSS o el código JavaScript en el Blog, lo hacemos en nuestro navegador. Si el resultado es satisfactorio hacemos el cambio definitivo en el código del blog.

Fasterfox es un plugin que acelera la navegación. Va muy bien cuando accedes a algunas páginas muy lentas.

ColorZilla es un analizador de colores. Se trata de un plugin para ver el número hexadecimal del color que te interese de cualquier zona de una páginas web. Otras unciones explicadas en inglés en iosart

Si usas Ubuntu necesitas poner lo siguiente en la terminal para que sea compatible.
sudo aptitude install libstdc++5

Otros Plugins:

Atajos de Teclado

Algunos combinaciones de teclas útiles son:

Alt + D: va directamente a la barra de direcciones.
Ctrl + D: para añadir a marcadores.
Ctrl + T y Ctrl + Shift + T: el primero abre una pestaña nueva y el segundo abre una pestaña que acabes de cerrar por error.
Ctrl + N: abre una nueva ventana en vez de una nueva pestaña.
Ctrl + ratón izquierdo sobre un link: abre el link en una pestaña nueva.
Ctrl + Tab: salta a la siguiente pestaña.
Barra Espaciadora y Barra Espaciadora + Shift: baja o sube para seguir leyendo la página web. Es el equivalente a AvPg y RePg.
Supr: para borrar páginas específicas de autocompletado.

05 abril 2008

Script Para Redimensionar Imágenes Por Lotes

Para redimensionar muchas imágenes a la vez tengo una solución sencilla. El problema es que las fotos horizontales y las fotos verticales tienen un ancho diferente y no se pueden tratar de la misma manera. Se podría redimensionar por lotes las fotos verticales en una carpeta y las fotos horizontales en otra, pero he encontrado una solución global que lo hace todo de un tirón.

Para evitar fotos duplicadas usaremos una sola extensión. Pongamos jpg.
Cuando hacemos una foto, la cámara le pone un nombre que no significa nada para nosotros, así que se me ha ocurrido cambiar esos nombres por la fecha en que se hizo.
Como las fotos que tomamos con la cámara tienen demasiada resolución para las páginas web vamos a hacer copias a un tamaño menor. En mi caso 720 pixels de ancho es suficiente. La altura se calcula automáticamente quedando la foto escalada proporcionalmente.
Dependiendo de si la foto la tomamos horizontalmente o verticalmente el script que he escrito creará miniaturas con unas dimensiones o con otras. Si son verticales las miniaturas son de 240x135 pixels. Si son horizontales las miniaturas son de 180x240 pixels.

La manera de utilizarlo es copiarlo en un archivo que irá dentro de la carpeta que tenga las imágenes a redimensionar. Lo ejecutas desde la terminal y te hace el trabajo. Imagínate hacerlo con Gimp o Photoshop de una en una. Tardarías horas. Con este Script son unos minutos.

#!/bin/bash
# script creado por http://webyfoto.blogspot.com
# puedes usar o publicar este script libremente.
# solo pido que digas que lo has sacado de webyfoto.blogspot.com

# renombra JPG ajpg (puedes poner otra extension)
rename 's/\.JPG/.jpg/' *.JPG
# renombra ficheros segun su fecha
# jhead -autorot -nf%y%m%d%H%M%S *.jpg

jhead -autorot -nf%m%d%H%M *.jpg
for n in *.jpg; do convert -quality 70 -scale 720x $n 720x$n; done

# mueve los archivos creados al escritorio
for n in 720*.jpg; do mv $n ~/Escritorio/; done

for IMAGE in *.jpg
do
WIDTH=$(identify -format %w $IMAGE)
HEIGHT=$(identify -format %h $IMAGE)

# Resultado da 0 si es cierto y 1 si es mentira
let "WIDTH>HEIGHT"; let Resultado=$?
if [[ "$Resultado" -ne "1" ]]
then convert -size 300x300 $IMAGE -thumbnail 240x -gravity center -crop 240x135+0+0 +repage 240x$IMAGE; echo "horizontal: $IMAGE $WIDTH x $HEIGHT"
else convert -size 300x300 $IMAGE -thumbnail x240 -gravity center -crop 180x240+0+0 +repage 180x$IMAGE; echo "vertical: $IMAGE $WIDTH x $HEIGHT"
fi

Podeis votar esta noticia marcando la V

Enlaces relacionados:

04 abril 2008

Breve Repaso a las Tendéncias de Diseño Web

Voy a describir como ha evolucionado el diseño de páginas web desde los primeros días hasta nuestros tiempos. Para los neófilos puede ser útil.

Años 90: las webs son estáticas. Se hacen en puro lenguaje HTML -Hyper Text MarkUp Languaje- Lenguaje de Hypertexto en nuestro idioma. Se basa en etiquetas y enlaces para definir el contenido. Las más básicas son:

<html>nos dice que estamos creando un documento del tipo html.
<head><title>Título de la Página</title></head>
<body>
Cuerpo y Texto que ponemos en el Documento.
</body>fin del cuerpo
</html>fin de la página html

<head> es el encabezado. Aquí ponemos el título de la página, las hojas de estilo, y JavaScript si es necesario. También los metadatos para que los buscadores encuentren las palabres clave.

Finales de los 90:
Aparecen los editores WYSIWYG -what you see is what you get- tradicido como lo que ves es lo que sale. Esto hace más sencillo crear páginas web a no entendidos en la materia. Dreamweaver de Adobe se convierte en el editor más conocido.

Primeros años del siglo XXI:
Aparecen los Gestores de Contenido y los Frameworks que aumentan las posiblidades en la creación de contenido web.
Blogger y otras plataformas gratuitas, permiten hacer Blogs con unos conocimientos mínimos. El contenido se hace más homogéneo grácias a las plantillas.
Las páginas web más profesionales necesitan de especialización. Se requieren conocimientos de nuevas tecnologías: XML, XSL, PHP, Ruby on Rails. Apache (sobre todo en entorno Linux) desbanca a IIS -Internet information Server- como servidor web.
El trabajo se reparte entre el programador, el fotógrafo, el editor de contenidos, el CEO ...

Ahora:
El usuario no se limita a visitar páginas web sino que ayuda en su clasificación ya que se le posiblilita etiquetar e incluso votar los artículos que le interesan. Puede clasificar y compartir contenidos mediante tags (etiquetas).

Es la época de las redes sociales (social networking en inglés) también llamado Web 2.0. Las Social Networking han tenido una gran expansión en el 2007, y la tendéncia sigue el 2008. Las más conocidas son MySpace, Facebook, Bebo, Orkut, Hi5, Friendster, Tagged...

Las taxonomías populares son un sistema de clasificación abiertos que emergen de forma espontánea, caótica y descoordinada. Su principal valor es su carácter social y cooperativo. No solo etiquetan artículos de texto, sino también fotografías, música, libros...

Futuro próximo:
Otro concepto todavía por desarrollar es el de la Semantic Web -Web Semántica- se trata de que los ordenadores sean capaces de gestionar el contenido con un lenguaje más sofisticado que el actual, y con apenas intervención humana. Ya veremos en que deriva esto.

03 abril 2008

Lo que un Webmaster Principiante Debe Saber

CSS: hojas de estilo

Las páginas web estan hechas de texto y gráficos. Pueden crearse con un simple editor de texto tal como el Notepad u otros similares. Eso no quiere decir que el resultado sea pobre, al contrario, las páginas mas elaboradas se pueden hacer con los editores más sencillos. Lo único necesario es saber el código que hay que poner.
La manera tradicional era ponerlo todo en la misma página, sin embargo es mas conveniente separar el contenido del estilo. De esta manera una vez tenemos el texto redactado podemos jugar con varios estilos hasta encontrar el más apropiado. Esto lo logramos con las hojas de estilo CSS (Cascading Style Sheet). Usando un CSS para todas las páginas le damos homogeneidad a nuestro sitio.

Enlaces relacionados con el CSS:

JavaScript
Un lenguaje tipo Script es aquel que no necesita compilarse y puede verse su código fuente. Javascript es de este tipo. Se puede poner dentro o fuera de una página html al igual que CSS. Si miras el codigo de alguna pagina que te guste es muy posible que tenga una parte hecha con JavaScript. Hay miles de ejemplos en la red.
Para que sirve, pues para lo que tu quieras. Se pueden hacer cosas tan complicadas como reflejar una fotografia (Reflection.js o reflex.js (with IE 6/7 support)), manejar formularios, etc.

Enlaces de JavaScript:

Las etiquetas XML
xml (extensible markup language) es la respuesta al caos de informacion que circula por internet. Es un lenguaje en principio sencillo pero que puede dar lugar a informacion muy bien esctructurada. Se basa en unas etiquetas inventadas por el programador o aceptadas por la comunidad que definen el contenido incluido en ellas. Gracias a este lenguaje se han inventado los feeds (noticias distribuidas como este blog), tambien son utiles para definir configuraciones de otros programas etc. Es un estandar muy nuevo basado en ficheros de texto. Otra caracteristica muy interesante es la de permitir separar los datos del estilo. Asi podrimos exportar una base de datos a xml y modificarla con una hoja de estilo del tipo xsl para presentarla como codigo html.

Las etiquetas XSL
XSL es en realidad un archivo hecho en XML pero con la particularidad de que manipula otros archivos XML. Con XSL se puede cambiar tanto estilo del documento XML (al igual que hace el CSS), como cambiar el contenido del XML. Por ejemplo se pueden juntar varios ficheros xml en uno solo, filtrar datos etc...

XHTML viene a ser una correccion del HTML de toda la vida pero con todas las etiquetas correctamente validadas. Toda etiqueta debe tener una contraetiqueta.

DOM -Document Object Model- Hace reférencia a la estructura de la página web, tratandola como un objeto con su forma jerarquica.

AJAX -Asynchronous JavaScript And XML-
En realidad AJAX es el nombre que se le ha dado a la combinación de varias tecnologías:
JavaScript y XML principalmente, pero se puede añadir DOM -Document Object Model- CSS y otras.
La ventaja de este método es su rapidez ya que se ejecuta en el navegador del cliente en vez de hacer peticiones al servidor que esta al otro lado de la red.

En AJAX se usa JavaScript para manipular las relaciones de unos elementos con otros.
Normalmente se cogen los datos del servidor en formato XML de una sola vez y luego se filtran o manipulan. También es posible hacer lo mismo con otros formatos (html normal, texto plano...)
Otra alternativa a XML seria usar JSON (muy implementado en yahoo o google por su sencillez).

Enlaces de AJAX:

Otros lenguajes Script
ASP -Active Server Pages- es un lenguaje que se ejecuta en un Servidor para crear páginas web dinámicas. Como ha sido desarrollado por Microsoft tiene que correr bajo IIS -Internet Information Server-.

PHP ha sido desarrollado por la Comunidad de Código Libre, y no está limitado a IIS, sino que además puede trabajar en Servidores Apache u otros Servidores.

Ruby es un lenguaje de programación inventado en Japón en los años 90. Ha tardado en hacerse popular en el resto del mundo pero parece que ha cogido con fuerza. Es un lenguaje de alto nivel (es decir proximo al lenguaje humano). Lo contrario es un lenguaje de bajo nivel (próximo al lenguaje binario o hexadecimal del computador). Un ejemplo de lenguaje de bajo nivel es el lenguaje C (al que ha seguido el C++ y ahora se esta reconvirtiendo en lenguaje D).
Con Ruby on Rails se puede hacer cosas parecidas a lo que se hace con Java pero en mucho menos tiempo (es un lenguaje muy productivo).

Enlaces de Ruby:

02 abril 2008

Ofimática con Software Libre

ODF -Open Document Format- traducido como Documento de Formato Abierto estaba destinado a ser el único formato estandarizado por la ISO. Es un formato que han adoptado muchas organizaciones y gobiernos sobre todo desde el año pasado. Sin embargo Microsoft ha logrado "convencer" a la ISO para que su formato OOXML también sea considerado un standard. Esta decisión ha creado mucha polémica, ya que Microsoft no suele cumplir con los estandares creados por la comunidad sino intenta imponer los suyos.

El problema radica en que Word es un procesador de textos comercial, incompatible con otros procesadores de texto de otras marcas. Incluso se da la circunstáncia de que un documento creado con Word no es compatible con otra versión de Word más antigua, lo que obliga a los usuarios a comprar procesadores Word cada pocos años. Writer es otro procesador de textos muy popular que no tiene nada que envidiar a Word; además es gratuito. Writer está integrado en la Suite Ofimática Open Office de Sun Microsistems. Viene en casi todos los lenguajes y es multiplataforma. Hay versiones para Mac, Windows y Linux. Ubuntu lo lleva preinstalado.

La pregunta que nos debemos hacer es ¿cómo hacemos que nuestros documentos se puedan intercambiar?. Para eso se crean los estandares. La mayoría de expertos piensan que ODF es la solución.

¿Y que hacemos si nos obligan a usar Word y Microsoft Office?. Pues una solución es instalar un plugin que permita generar documentos ODF con Word. Lo podeis encontrar buscando en la página de Open Office que he indicado antes.

Otra opción más sencilla es simplemente no usar Microsoft Office ni Word, sino aplicaciones que cumplan con los estandares del software libre.

Si tienes una cuenta con Google puedes usar Google Docs para crear tus documentos en línea. De esta manera puedes acceder a ellos desde cualquier cybercafé o desde cualquier sitio con conexión a internet. Los puedes mantener privados o publicarlos.
Otra opción interesante de Google Docs es que puedes usarlo como copia de seguridad de tus documentos. Ya sea con Open Office o con Microsoft Office. Para facilitar esta tarea hay dos aplicaciones que te pueden interesar:

Si usas Open Office OpenOffice2GoogleDocs sincroniza tus documentos de OpenOffice con los de Google Docs.

Si usas Microsoft Office Docsyncer sincroniza tus documentos de Microsoft Office con los de Google Docs.

Con ambos sistemas puedes hacer un backup del trabajo en la oficina y seguir en casa. Pero no le des ideas a tu jefe que luego pasa lo que pasa.

01 abril 2008

Creative Commons

Esta organización desarrolla planes para ayudar a reducir las barreras legales de la creatividad por medio de nueva legislación y de las nuevas tecnologías.
Creative Commons está inspirada en la licencia GPL (General Public License) de la Free Software Foundation (Sin embargo no es un tipo de licenciamiento de software libre). La idea principal es posibilitar un modelo legal y ayudado de herramientas informáticas para así facilitar la distribución y el uso de contenidos para el dominio público.
Ofrece una serie de licencias, cada una con diferentes configuraciones o principios como el derecho del autor original a dar libertad para citar su obra, reproducirla, crear obras derivadas, ofrecerlo públicamente y con diferentes restricciones como no permitir el uso comercial o respetar la autoría original.
Una de las licencias ofrecidas por Creative Commons es la licencia que lleva por nombre "Developing Nations" (Naciones en Desarrollo). Esta licencia permite que los derechos de autor y regalías por las obras, se cobren solo en los países desarrollados del primer mundo, mientras que las mismas se ofrecen de forma abierta en los países en vías de desarrollo.
Aunque originalmente fueron redactadas en inglés, las licencias han sido adaptadas a varias legislaciones alrededor del mundo. Entre otros idiomas, han sido traducidas al castellano, al portugués y al catalán a través del proyecto Creative Commons International. Existen varios países que están involucrados en el proceso: Brasil, España, Chile, Argentina, México, Perú y Colombia ya tienen las licencias traducidas y en funcionamiento. Entre tanto, Venezuela y Puerto Rico (entre muchos otros) se encuentran en proceso de traducción e implementación de las mismas.

Enlaces:

Si tienes un blog o website puedes incluir la licencia Creative Commons que más te interese.

Esta obra está bajo una licencia de Creative Commons.