Archivo de la categoría: Maquetación y diseño web

Listado de sitios para descargar todo tipo de recursos para tu web

Publicado el por
2

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:

Blue Vertigo

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…

Cómo descargar el archivo KML de Google Maps

Publicado el por
Responder

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.

Cómo reducir el peso de una imagen para la web con Photoshop o Fireworks

Publicado el por
2

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.

Web Developer: una herramienta indispensable para el desarrollo web

Publicado el por
Responder

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!

Barra Web Developer

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

Tipos de cursores del ratón en CSS

Publicado el por
Responder

En algunas ocasiones seguro que has necesitado mostrar el cursor del ratón de forma diferente para ponérselo más fácil al usuario. Con CSS, a través de la propiedad cursor: valor; podemos conseguirlo. A continuación os detallamos cada valor posible que puede recibir el cursor. Si vas colocando el ratón encima de cada bloque verás el resultado de cada uno:

cursor:context-menu;
cursor:help;
cursor:pointer;
cursor:progress;
cursor:wait;
cursor:cell;
cursor:crosshair;
cursor:text;
cursor:vertical-text;
cursor:alias;
cursor:copy;
cursor:move;
cursor:no-drop;
cursor:not-allowed;
cursor:all-scroll;
cursor:col-resize;
cursor:e-resize;
cursor:ew-resize;
cursor:n-resize;
cursor:ne-resize;
cursor:nesw-resize;
cursor:ns-resize;
cursor:nw-resize;
cursor:nwse-resize;
cursor:row-resize;
cursor:s-resize;
cursor:se-resize;
cursor:sw-resize;
cursor:w-resize;
cursor:none;

Cuando creamos un enlace con <a href=”"></a> el cursor automáticamente será pointer. Si tu enlace es con el evento onclick, verás que el cursor no cambia, en este caso lo ideal es que lo pongas en cursor: pointer; (no uses hand porque es un valor que sólo lo soporta Internet Explorer). No obstante, estos efectos pueden variar dependiendo del navegador que estés usando.

Modificar el tamaño de JqZoom en Prestashop

Publicado el por
Responder

Si estás usando Prestashop para tu tienda y has activado JqZoom en la ficha del producto para conseguir un zoom de detalle de la imagen, sabrás que el tamaño por defecto es 200x200px.

Pero ¿qué ocurre si quieres modificar este tamaño? No puedes hacerlo a través del panel de administración, tendrás que acceder a tu alojamiento web a través de un cliente FTP y tocar código, concretamente el archivo product.js que se encuentra en /themes/tu-theme/js/product.js

No olvides que para que cualquier modificación en código tenga efecto debes marcar la opción Forzar compilación dentro de Herramientas -> Rendimiento

Para cambiar el tamaño de JqZoom, abre product.js y busca el siguiente código aproximadamente por la linea 443 (depende de la versión de Prestashop):

//set jqZoom parameters if needed
if (typeof(jqZoomEnabled) != 'undefined' && jqZoomEnabled)
{
$('img.jqzoom').jqueryzoom({
xzoom: 200, //zooming div default width(default width value is 200)
yzoom: 200, //zooming div default width(default height value is 200)
offset: 21 //zooming div default offset(default offset value is 10)
//position: "right" //zooming div position(default position value is "right")
});
}

xzoom es el ancho del cuadro de JqZoom e yzoom el alto, cámbialo a tu gusto y actualiza en el navegador para ver los cambios.

Una vez que termines de hacer cambios recuerda desmarcar la casilla de Forzar compilación.

Tutorial básico para hacer tu web con WordPress

Publicado el por
Responder

Muchos de vosotros, cuando tenéis vuestro propio alojamiento web, nos comentáis que no sabéis cómo empezar para hacer vuestra web con WordPress, así que os vamos a explicar brevemente cuáles son los pasos que debéis seguir para ello:

Paso 1: Instalar wordpress en tu alojamiento. Tienes varias formas de hacerlo, si tus conocimientos son básicos instala wordpress desde tu panel Plesk (si lo haces así, por defecto se instalará en inglés, si lo quieres en español puedes Cambiar el idioma de wordpress a español), y si estás familiarizado con clientes ftp, instálalo de forma manual. Una vez instalado, accede al panel de administración de WordPress con tu usuario y clave. Recuerda que para acceder debes usar la URL: http://www.tudominio.com/wp-login.php

Paso 2: Una vez que estés en el panel de administración de wordpress, puedes ver una serie de opciones en la zona de la izquierda. Lo primero que debes hacer es ir a los Ajustes para configurar algunas opciones de tu blog.

En la sección Generales escribe el Título del sitio (ej: Blog de Aquí hay dominios) y la Descripción corta (ej: Alojamiento web, registrar dominios, SEO, SEM, SMO, diseño y mucho más). No cambies la Dirección de WordPress (URL) o  la Dirección del sitio (URL) a no ser que sepas lo que estás haciendo.

En la sección Lectura, además de otras opciones, podrás configurar si quieres que tu página de inicio contenga las últimas entradas del blog o por el contrario prefieres una página estática. Si quieres una página de inicio estática, debes crear la página previamente.

En la sección Comentarios, podrás establecer los ajustes para los comentarios, pudiendo desactivarlos por completo. Pero no olvides que al crear una página o una entrada siempre podrás hacerlo de forma independiente marcando la opción Permitir comentarios. También puedes Permitir trackbacks y pingbacks que son algo así como menciones de tus post en otros sitios. Puedes leer un buen ejemplo en el post Introducción a pingbacks y trackbacks de Ayuda WordPress, blog que recomendamos si estás interesado en aprender más sobre wordpress.

Si no ves esta opción, en cada pantalla, en la parte superior tienes Opciones de pantalla desde donde podrás activar o desactivar los campos que quieres ver.

Paso 3: Vamos ahora con la parte que más nos gusta: el diseño! Tienes varias opciones:

  • Hacer tu propio diseño. Es decir, hacer tu propio Tema de WordPress. Si estás familiarizado con html, css, php… siempre puedes tocar el código y hacer lo que quieras. WordPress no tiene límites! Pero si estás leyendo esto… seguramente este no sea tu caso.
  • La más fácil es elegir un Tema que te guste en la sección Apariencia. Para ello, accede a Apariencia -> Tema -> Instalar Temas. Verás en principio los temas que tienes instalados por defecto en tu wordpress. Para instalar nuevos, haz clic en la pestaña Instalar temas. Puedes filtrar por color, por número de columnas… pero te aconsejo que los mires todos a no ser que busques algo muy específico. Si te gusta alguno, simplemente haz clic en Instalar y sigue los pasos que te indica.
  • Y si buscas algo más original, siempre te quedará hacer una búsqueda en internet y descargar un Tema (hay muchos que no están en el repositorio oficial de wordpress). Una vez que lo encuentres puedes subirlo a través de un cliente FTP o a través de Apariencia -> Tema -> Instalar Temas.
    Ten en cuenta que cada Tema traerá opciones diferentes, en algunos podrás establecer una imagen de cabecera, el fondo de la web, hacer menús personalizados, activar widgets diferentes (ahora verás qué son los widgets)… Pero no te preocupes, puedes tener varios Temas instalados e ir cambiando para probar.

Paso 4: Ahora que ya tienes tu diseño, empieza a meter contenido: Entradas y Páginas. Lo normal, es que el menú que aparezca en la web sean las Páginas que hayas creado. Pero si lo quieres personalizar puedes ir a Apariencia -> Menús y configurar uno personalizado. Así tendrás más control.

Para insertar una Entrada o una página ve a Entradas -> Añadir nueva o a Páginas -> Añadir nueva y empieza a escribir, añadir fotos… No olvides añadir Categorías, Etiquetas…

Paso 5: Ahora vamos a configurar la sidebar. Tu tema puede tener varias, lo más normal es que tenga una o dos columnas laterales, pues a esto le llamamos sidebar, en cada una podrás añadir bloques a tu gusto, a los que llamamos widgets. Para acceder debes ir a Apariencia -> Widgets. Por defecto, WordPress trae algunos widgets útiles, como por ejemplo un bloque para mostrar tus categorías, etiquetas, un buscador… Añade y arrastra como más te guste! A continuación te explicaremos los plugins para instalar más widgets o funcionalidades nuevas.

Paso 6: Seguramente habrá cosas que no vienen por defecto y no sabes cómo añadir. No te preocupes, para eso están los plugins. Casi todo ya está hecho en WordPress! Simplemente tienes que hacer una búsqueda y encontrar el que más se adapte a tus necesidades. Para ello ve a Plugins -> Añadir nuevo y busca lo que necesitas.

Para elegirlo haz clic antes en Detalles y fíjate en el número de estrellas, en la última vez que fue actualizado, en el número de descargas… Estas pistas son muy importantes. Si un plugin hace más de dos años que no se actualiza, puede que no funcione.

A continuación os detallamos algunos plugins que pensamos que pueden ser indispensables o bastante útiles:

  • Akismet: Viene por defecto, actívalo porque te librará de la mayoría de spam.
  • Jetpack: Es un plugin con muchas funcionalidades: estadísticas, compartir en redes sociales, corrector ortográfico, suscripción al blog y a los comentarios… Debes tener o crear una cuenta en wordpress.com, pero no te preocupes, cuando lo instales te pedirá lo necesario.
  • Contact Form 7: Para crear todo tipo de formularios.
  • NextGen Gallery: Te permite crear galerías de imágenes en entradas, páginas, sidebar…

Con esta breve introducción, seguro que puedes empezar a trastear tu wordpress. Y si necesitas ayuda, puedes hacer tu consulta a través de los tickets en tu zona privada de www.aquihaydominios.com o a través de los comentarios. Si podemos ayudarte, lo haremos! Esperamos que esta entrada sea de utilidad si estás empezando a usar wordpress.