Hoy vamos a inaugurar una nueva categoría en nuestro blog: Nuestros proyectos, donde poco a poco iremos publicando nuestro portafolio.
Recientemente, hemos trabajado con Carolina Mera (@acameal) en esta web que os presentamos. Y la verdad, no podemos estar más contentos con esta chica. Eso sí es trabajar! Qué organización, qué rapidez y qué ganas de aprender… Ella se ha ocupado del diseño, nosotros de la maquetación y este ha sido el resultado:
Enlace: www.sevillabackpackers.es
A veces, si no conocemos buenas páginas donde descargar iconos, imágenes, vectores…, podemos perder mucho tiempo para conseguir lo que buscamos. Os dejo una web que llevo usando años y donde siempre suelo encontrar lo que busco, una de esas que deberían estar en tu Delicious:
Podrás encontrar de todo: imágenes, texturas, vectores, iconos, fuentes, pinceles para photoshop, patterns, sonidos, fondos de escritorio… Y todo estructurado por categorías que indican si son recursos gratuitos o de pago.
La web tiene un diseño peculiar ya que el scroll es horizontal, algo que me resulta incómodo, pero claro, es bastante original…
No suelo usar el iPhone para escribir entradas en WordPress, pero sí que muchas veces he podido corregir algún error, pero entiendo a aquellos que no suelen sentarse delante del ordenador y necesitan hacerlo de esta forma. A continuación os explicamos cómo hacerlo, suponiendo que ya tenéis vuestro blog funcionando:
Paso 1: Abre el panel de administración de tu blog y ve a la opción: Ajustes -> Escritura, busca la opción Activar los protocolos de publicación XML-RPC para WordPress, Movable Type, MetaWeblog y Blogger y actívala.
Paso 2: Descárgate la aplicación WordPress desde la App Store.
Paso 3: Abre la aplicación y pulsa en Añadir WordPress.org propio si lo tienes alojado en tu propio alojamiento web, en caso contrario, pulsa en Añadir un blog en WordPress.com.
Paso 4: A continuación te pedirá los datos de acceso. La URL es la dirección de la web (no te confundas con la dirección del panel de administración y recuerda que debe ir con http://), el usuario y la contraseña ya debes saber cuáles son. Una vez que los tengas escritos, pulsa en Guardar en la parte superior.
Paso 5: Para escribir una entrada nueva, ve a Entradas y pulsa en el icono de la parte superior derecha:
Paso 6: A continuación verás una pantalla donde puedes escribir el título de la entrada, las etiquetas (separadas con comas) y las categorías a la que pertenece. En el campo inferior, empieza a escribir.
Entre las opciones de la parte inferior vamos a destacar los siguientes:
Insertar imágen: Te permitirá elegir una foto de la biblioteca o hacer la foto.
Previsualizar entrada. Verás cómo aparece la entrada en tu blog.
Información de la entrada. Podrás ver el estado o programar la entrada.
Descargar el archivo KML de Google Maps es tan fácil como añadirle a la URL del mapa el parámetro output=kml seguido de &
Por ejemplo:
http://maps.google.es/maps?q=aeropuerto&hl=es&sll=37.389936,-5.997076&sspn=0.033279,0.047851&hq=aeropuerto&t=m&z=15&output=kml
Aunque ya en Google Maps tienes la opción para descargarlo directamente, en algunos navegadores esta opción no aparece.
Como sabrás, no es posible traducir términos en wordpress a través del panel de administración. Existen plugins con los que puedes hacerlo, como por ejemplo Codestyling Localization, pero también tienes la opción de modificar directamente el archivo .po que realmente es lo que hace el plugin, pero de una forma más visual. Con Poedit, podrás editar el archivo y generar el .mo, que también es necesario.
Para aquellos que no lo sepan… Hay tres tipos de archivos utilizados en la traducción de WordPress. Estos archivos se utilizan y/o son generados por las herramientas de traducción durante el proceso de traducción, de la siguiente manera:
Archivo POT (Portable Object Template)
Es el archivo donde se encuentran todos los textos traducibles, extraídas de un fichero de código fuente.
Archivo PO (Portable Object)
Este archivo existirá por cada idioma activado en nuestro WordPress, serán del tipo es.po, es-ES.po… Contiene la cadena a traducir del POT, y la traducción al idioma destino.
Archivo MO (Machine Object)
El archivo PO se ejecuta a través de un programa que lo convierte en un archivo binario optimizado y legible de una forma más rápida. Este archivo debe generarse a partir del PO.
Ahora que sabes cómo funcionan los archivos de traducción de WordPress, puedes empezar con las traducciones:
Paso 1: Lo primero que debes hacer es descargar Poedit, el cual está disponible en:
Paso 2: A continuación instálalo en tu ordenador, y abre tu cliente ftp para descargar los archivos .po y .mo que quieras modificar. Hay varios archivos de este tipo en una instalación de WordPress, depende de la traducción que busques tendrás que descargar uno u otro. Donde se sueles encontrar es en:
Paso 3: Abre el .po en Poedit y empieza a traducir. Tienes un buscador que te hará la vida más fácil!
Paso 4: Una vez que hayas traducido lo que querías, con el simple hecho de guardar, se genera el .mo. Ahora simplemente te falta subir los dos archivos a donde estaban y comprobar que tus traducciones funcionan correctamente!
Normalmente, si vas a trabajar en una página web, debes disminuir el peso de tus imágenes para que sea rápida al cargar. Ya sabrás que si tu web es lenta, el usuario tiene más probabilidad de abandonar antes. A este proceso se le llama optimización de imágenes y vamos a explicar cómo hacerlo en Photoshop y Fireworks (mi preferido).
Abre la imagen en Photoshop, y haz clic en Archivo -> Guardar para Web y dispositivos… y te aparecerá una venta con muchísimas opciones para optimizar la imagen, pero te bastará con seleccionar un Ajuste preestablecido e ir viendo la calidad de la imagen y cuánto pesa en los datos que aparecen en la parte inferior derecha de la ventana.
En Fireworks, al igual que en Photoshop, debes abrir tu imagen y hacer clic en Archivo -> Presentación preliminar de la imagen… Verás una ventana donde puedes seleccionar el formato (GIF, JPG…). Dependiendo del formato que elijas, tendrás unas opciones u otras. Por ejemplo, si te conviene en JPG, verás un campo que es Calidad, donde podrás poner un porcentaje. Lo normal es ponerlo al 90%, en mi opinión menos del 90% perdería bastante calidad. Ve fijándote en la parte superior de la ventana cómo va cambiando el peso de la imagen dependiendo de la calidad que le pongas. Si eliges GIF podrás seleccionar la paleta que quieras usar, que por lo general siempre suelo usar Exacta. Además puedes elegir si quieres que la imagen tenga transparencia o no.
Si eres diseñador, maquetador o programador web seguramente ya conocerás Web Developer, pero seguro que hay alguno por ahí que aún no conozca esta herramienta. Aunque me gusta más Chrome que Firefox, siempre he usado esta barra en Firefox, pero también existe la versión de Chrome.
Si aún no la tienes, descárgala en la página del autor. No te preocupes si la página está en inglés, la herramienta se instalará en español!
Hemos preparado unas capturas para que te hagas una idea de la infinidad de cosas que puedes hacer con esta herramienta. Una vez que la instales, verás una nueva barra en tu navegador (Firefox o Chrome):
Vamos a ver cada opción de la barra Web Developer de forma resumida:
Desactivar. No creo que haga falta explicar nada. Un menú para desactivar elementos en la web que estés viendo.
Cookies. Muy útil cuando estás tocando código javascript y necesitas borrar cookies sólo de ese dominio para refrescar la página.
CSS. Si estás maquetando una web, puedes editar directamente el CSS para probar a tiempo real, desactivar estilos…
Formularios. Aquí, por ejemplo si necesitas ver los datos del formulario, ids, names, labels… haz clic en “Ver información de los formularios” y verás todos los datos en una tabla. 
Imágenes. A través de esta opción, puedes dejar la web sin imágenes desactivándolas, mostrar los “alt” para ver si has olvidado poner alguno, ver los tamaños de las imágenes, las rutas, ver si hay alguna imagen que no se esté cargando, diferenciar las imágenes con background de las img…
Información. En este menú se proporciona bastante información, cada opción indica exactamente lo que quieras mostrar…
Varios. Podemos limpiar la caché sin tenter que entrar en las preferencias del navegador, mostrar elementos que ayudan a la maquinación…
Resaltar. Como su propio nombre indica, sirve para resaltar ciertos elementos.
Tamaño. Esta opción es muy útil, si necesitas ver la web en diferentes resoluciones, incluso puedes personalizar los tamaños…
Herramientas. Valida tu CSS, HTML, según la norma WAI… Se usa la validación de w3.org pero si quieres usar otra, sólo tienes que poner el enlace en Editar Herramientas…
Código fuente. A veces nuestra web genera código que no se ve directamente en el código fuente, para verlo, puedes usar la opción Ver código generado.
Opciones. Si has marcado algunas de las opciones y quieres restablecer la página, haz clic en Restablecer página y volverá al estado inicial.
Esto sólo ha sido una introducción sobre esta herramienta, si necesitas más información, puedes visitar la web del autor de la extensión: www.chrispederick.com
Nuevos proyectos de Aquí hay dominios:
