Diseño web

Cómo crear tu propio menú personalizado en WordPress

Una de las funciones que te ofrece WordPress, es poder crear tu propio menú personalizado de manera muy rápida e intuitiva. Si aún no lo has hecho nunca, ahora no tienes excusa:

Paso 1: Haz clic en Apariencia > Menús.menu

Paso 2: Para empezar a crear el menú, solo tienes que hacer clic en el «+«. Introduce el nombre del menú (el nombre solo es para que lo identifiques posteriormente) y haz clic en Crear menú.

Crear-menu

Paso 3: Una vez creado el menú, puedes empezar a añadir elementos, para ello, cuentas con tres posibilidades:

  1. Enlaces personalizados: Aquí puedes añadir direcciones URL, tanto de páginas externas como de tu web. En el campo URL, tienes que introducir la dirección de la página, mientras que en el campo Etiqueta, debes especificar el nombre que aparecerá en el menú. Para añadirlo, haz clic en Añadir al menú.Enlaces-personalizados
  2. Páginas: Esta opción te permite añadir cualquier página que hayas creado previamente. Solo tienes que seleccionar las páginas que quieres añadir al menú y hacer clic en Añadir al menú. Ten en cuenta que si no ves todas las páginas que has creado, es porque estarás en la pestaña Más reciente, asegúrate de estar en la pestaña Ver todo.paginas
  3. Categorías: También puedes añadir cualquier categoría que hayas creado con anterioridad. Para añadirlas, tan solo selecciona las categorías que quieras y haz clic en Añadir al menú.

añadir-categorias

Paso 4: Una vez que ya haz añadido todos los elementos a tu menú, solo te queda organizarlo. Este proceso es muy fácil, solo tienes que hacer clic en el elemento que quieres organizar y sin soltar el ratón, arrástralo hasta el lugar que quieras dentro de tu menú. Si quieres que tu menú tenga subpáginas, solo tienes que arrástrarlo justo debajo del elemento principal y un poco a su derecha para que quede anidado. Quedaría algo así:

organizar-menu

Paso 5: Para finalizar, haz clic en Guardar menú.

Si tienes cualquier duda o sugerencia, puedes indicarla a través de los comentarios.

Bordes redondeados con CSS3

Hace algún tiempo, para crear un cuadrado (o rectángulo) con bordes redondeados, debíamos crear una imagen y ponerla de fondo, y si este cuadrado tenía un tamaño variable, había que apañárselas para repetir el background. Con CSS3, todo se facilita, crear un cuadrado con bordes redondeados se limita a lo siguiente:

[html title=»HTML para crear el cuadrado»]
<div class="Cuadrado">

</div>
[/html]
[css title=»CSS para bordes redondeados, sombra…»]
.Cuadrado {
border-radius: 25px; // nivel de redondeo (puedes poner cuatro valores, uno para cada esquina)
box-shadow: 5px 5px 5px #000; // tamaño y color de la sombra
width: 200px;
height: 200px;
background: #5e8b00;
color: #FFF;
}
[/css]

A continuación podéis ver cómo quedaría nuestro cuadrado:

 

 

 

Cómo modificar la resolución de tu pantalla en Windows 7

Variando la resolución de pantalla de tu ordenador, podrás conseguir una mejor y adaptada visualización de información en la pantalla, es decir, si aumentas la resolución, veras más información que si la disminuyes.

A continuación os explico cómo modificarla o simplemente ver qué resolución tienes  por si en algún momento te preguntan:

Paso 1: Con el botón derecho del ratón, haz clic en una zona libre del escritorio y selecciona Resolución de pantalla.

Resolucion

Paso 2: Se abrirá una nueva ventana, donde verás un desplegable para cambiar la resolución de pantalla.

Desplegable

Paso 3: Una vez que ya hayas seleccionado la resolución, haz clic en Aplicar. Aparecerá una ventana en la que te pedirá que aceptes o que vuelvas a la resolución anterior, haz clic en Conservar cambios si quieres guardarlo con la nueva resolución.

Conservar-cambios

Paso 4: Por último haz clic en Aceptar.

Como ves, resulta muy fácil cambiar tu resolución de pantalla, si tienes alguna duda o sugerencia puedes dejarla a través de los comentarios.

Paparazzi! Captura completa de una página web

Llevo usando mucho tiempo Paparazzi! que es un programa para mac que hace capturas  de pantalla. Y vosotros estaréis pensando… Qué tontería, si mac ya trae esa utilidad! Pues os cuento lo que tiene de especial…

¿Qué ocurre si tu pantalla es de 1024 y no cabe la web entera? Verías algo así:

Captura incompleta

Pues con Paparazzi! podrás capturar la web completa, lo que no se ve en la pantalla, como puedes ver a continuación:

Captura de pantalla

Además si la captura que quieres hacer es de una zona privada de una web donde es necesario introducir usuario y clave, con Paparazzi también puedes interactuar en la misma captura. Para ello, en la parte  inferior, haz clic en el icono de la manita:

Interactuar en la captura de Paparazzi!

Descarga: Paparazzi!

Cómo crear un formulario con Jetpack en WordPress

El plugin de Jetpack nos lo pone tan fácil que hasta podemos incluir formularios en nuestras páginas o entradas de WordPress con un simple clic. Hasta hace poco, usábamos el plugin Contact Form 7, que sigue siendo mucho más completo, pero para un formulario de contacto en tu página web, creemos que con el de Jetpack es más que suficiente. No hace falta decir que para poder añadirlo, es  necesario que tengas el plugin Jetpack instalado y activado. Si aún no sabes como instalar un plugin en WordPress puedes leer esta entrada: Cómo seleccionar plugins para instalar en WordPress. Para añadir el formulario sigue estos pasos:

Paso 1: Haz clic en el botón de añadir formulario (quizás sería más intuitivo que pusieran un botón igual que han hecho con «Añadir objeto» ¿verdad?). Si no ves este botón, es porque no tienes instalado el plugin de Jetpack.

Añadir formularioPaso 2: Verás que aparece una ventana flotante como la siguiente, donde podrás ir eliminando o añadiendo campos a tu gusto, porque ya por defecto te muestra un formulario típico con los campos Nombre, Email, Sitio Web y Comentario. A la derecha puedes ver un poco de información donde se explica el funcionamiento con más detalle.

Formulario Jetpack

Si necesitas editar un campo, o quieres ponerlo obligatorio, ponte encima del campo con el ratón y verás que aparecen dos opciones: «mover» y «editar«

Editar campo del formulario

Para mover un campo simplemente arrástralo a la posición que quieras. Y si haces clic en «editar» podrás cambiar la etiqueta, el tipo de campo y marcar si es obligatorio o no:

Configuración de un campo del formulario

Paso 3: Por último, y opcionalmente, puedes configurar la cuenta de correo en la que quieres recibir este formulario y el asunto. Ten en cuenta que esto es opcional porque si no lo rellenas, el formulario será enviado a la cuenta de correo del usuario que haya escrito la página o entrada.

Configurar datos de recepción

Cómo usar el inspector web de Safari en el iPad

Aún recuerdo cuando salió Firebug… Ahora pienso ¿cómo podía trabajar antes de existir esta herramienta? La verdad es que hubo un antes y un después… Estoy segura de que todos los que os dedicáis a la maquetación web, pensaréis igual… Después de Firebug (para mí este fue el primero) llegaron muchos más, hasta el punto de que hoy en día, no hay un navegador que no traiga su propio inspector web.

Dejo de enrollarme y voy al grano… Seguro que alguna vez has deseado tener una herramienta tipo Firebug en tu iPad, ¿verdad? Si buscas en Google algo así como «Firebug en iPad» verás que existe, pero después de probarlo y ver que no funcionaba del todo bien, seguí buscando una solución, hasta que me di cuenta que estos de Apple piensan en todo! Sigue estos pasos y podrás inspeccionar los elementos de una web en iPad en tu mac:

  • Conecta tu iPad a tu mac a través del cable USB.
  • En el ordenador, abre Safari y ve a Desarrollo -> iPad de tunombre (o como le hayas llamado). A la derecha verás que aparecen las páginas que tengas abiertas en cada pestaña de Safari en tu iPad. En nuestro caso: www.aquihaydominios.com
    Desarrollo iPad de tunombreSi no ves el menú Desarrollo, haz clic en Safari -> Preferencias, pestaña Avanzado y marca Mostrar el menú  Desarrollo en la barra de menús.Mostrar menú desarrollo en safari
  • Cuando haces clic en la página (correspondiente a la pestaña) verás en tu mac el inspector web, pero en este caso estarás inspeccionando la web que tengas en el iPad.
    Inspector web

Cómo pasar una imagen en CMYK a RGB

CMYK

Si te dedicas a hacer páginas web y tu cliente te ha pasado las imágenes y resulta que tienen un color raro, normalmente chillón, seguramente estas imágenes estarán en modo CMYK. ¿Cómo puedes convertir una imagen CMYK a RGB? Muy sencillo:

  1. Abre la imagen en Photoshop
  2. Haz clic en el menú superior Imagen -> Modo. Comprueba si está marcado CMYK.
  3. Haz clic en RGB
  4. Guarda la imagen y listo!

De CMYK a RGB

Generadores de loadings (cargando…)

Hoy os pasamos un par de enlaces donde podéis generar loadings a vuestro gusto. Cuando decimos loadings, nos referimos a ese icono animado que aparece durante la carga de algún elemento de la web, y en el momento que llega al 100% desaparece.

preloaders.net

Enlace: preloaders.net

ajaxload.info

Enlace: ajaxload.info

A continuación podéis ver algunos ejemplos generados en estas páginas:

Logo PNG transparente en Prestashop 1.5

Si has intentado subir un logo con fondo transparente en PNG a tu tienda de Prestashop ya te habrás dado cuenta que cuando guardas aparece con un fondo blanco, ¿verdad? Esto ocurre porque Prestashop ha convertido tu imagen a JPG, y como ya sabrás, este formato no permite transparencias.

Esto tiene fácil solución! Haz clic en Preferencias -> Imágenes:

Preferencias-Imágenes

Selecciona la opción Usar PNG si la imagen base está en formato PNG:

Usar PNG si la imagen base está en formato PNG

A continuación vuelve a subir tu logo en PNG, verás que ahora ya te aparecerá con transparencia:

Logo PNG transparente en Prestashop 1.5

Buscar trabajo de WordPress: jobs.wordpress.net

Empleo WordPress

¿Eres un experto de WordPress y estás buscando empleo? En esta web podrás encontrar ofertas de empleo, eso sí, en inglés! Pero si sabes WordPress, seguro que el inglés no se te da mal, ya sabes, por eso de mirar en Codex, nuestro gran amigo!

Los trabajos están categorizados, por ejemplo, si lo que te gusta es el diseño busca en WordPress Designer Positions, no obstante, no está de más echarle un vistazo a todo. Además, puedes (y te aconsejamos) suscribirte a los RSS de las categorías que te interesen.

Si por el contrario, no tienes ni idea de WordPress y necesitas a alguien que te haga el trabajo, siempre puedes Publicar una oferta para que te hagan propuestas.

Enlace: http://jobs.wordpress.net/