Categoría: Utilidades para blogs y sites

Recursos de todo tipo para profesionales web

Publicado el 17 octubre, 2014

Hoy les traemos más de medio centenar de elementos de todo tipo para que los apliquen en sus diseños web, sus páginas de WordPress, aplicaciones, etc. Los recursos se encuentran ordenados por categorías para facilitar la lectura y para que puedas extraer lo que más te interesa con facilidad.

Iconos vectoriales para iOS 8, iOS 7 y Android (necesitas registrarte para descargar)

Lumina: Una colección de 32 íconos hexagonales en formato AI y PSD

Bushcraft: Familia de fuentes con texturas

Un paquete de fuentes con diseños alternativos

Polya: Una fuente genial con diseño poligonal

Scratch: Una fuente gratuita con mucho color y detalle

Set gratuito de 10 mockups en PSD

6 mockups fotorrealistas de iPhone 5

Reglas de marketing por Apple: Mockups de productos

Grilla para iPhone 6 en formato PSD

Mockup de Samsung Galaxy S5 en PSD

Explora la naturaleza: Logo en estilo actual

Mockups de papelería y branding en formato PSD

Parallax.js: Usa tu teléfono y mira el sitio reaccionar cuando lo inclinas o mueves el mouse

App icon template: Crea iconos para aplicaciones móviles

Paths-js: Genera rutas SVG para figuras geométricas

Parallax slider: Aplica un efecto parallax a tu próximo slider de imágenes

Url: Una librería para simplificar el manejo de URLs en PHP

Divas slider: un plugin de jQuery para sliders, modificable mediante CSS

Plugin para validación en jQuery

Gifdeck: convierte slideshows a GIFs

Geniales efectos de carga en CSS para imágenes organizadas en grilla

Jquery-fblogin: Deja a tus visitantes loguearse con Facebook usando este pequeño plugin

Cropbox: Un plugin sencillo para recortar tu avatar

Enjoyhint: Pistas interactivas para tu aplicación o sitio web

Swiftdevs.co: Un nuevo lugar para compartir y recibir conocimiento

iOS Dev Weekly: Lo mejor en desarrollo de iOS, enviado cada semana

Radarc online: Crea aplicaciones móviles sin saber de código

Life: UI kit gratuito en PSD

Paquete de infográficas en vectores

Aplicación para chequeo de vuelos: Plantilla PSD

Plantilla de negocios americana en PSD

Sailor: Tema gratuito en PSD con temática marina

Thelanding: Plantilla en PSD para una web de una sola página

Architect: PSD con un modelo de sitio web de una página

App lander: Una plantilla de Bootstrap basada en aplicaciones móviles (PSD y HTML)

Uno: Plantilla en HTML5 para sitios de una página

Tema gratuito de restaurantes para WordPress

Foodness: Tema para WordPress con énfasis en alimentos

Illustratr: Tema minimalista para WordPress

Railgun: Simple y elegante tema para WordPress

Clearsky: Tema responsivo para WordPress basado en Masonry

Baskerville: Tema gratuito para WordPress

Efecto de monedas animadas con CSS

Tarjeta de información con CSS y JavaScript

Inspírate con estos efectos de menu off-canvas usando CSS y SVG

Una interesante animación en CSS

Efecto de fondo: Haz que el fondo de tu página cambie con tus acciones

wovn, una nueva forma de mostrar sitios en varios idiomas

Publicado el 14 octubre, 2014

por Juan Diego Polo

La traducción automática que Google ofrece para sitios web a veces no es todo lo buena que debería ser. Es siempre necesario un trabajo «manual» por detrás de las traducciones realizadas si lo que queremos es ofrecer el contenido que publicamos en Internet en varios idiomas, y es ahí donde wovn.io quiere ayudar.

Se trata de un proyecto en el que podemos especificar las urls que queremos traducir y realizar la traducción a mano. Una vez alterado el idioma de todas las páginas o artículos, podremos un código en el head de nuestro sitio web para que aparezca la opción de traducción disponible para nuestros lectores.

Cuando informamos la url vemos como se detecta automáticamente el idioma del texto allí incluido. Podemos entonces seleccionar el idioma de destino e ir traduciendo las frases en un panel como el mostrado en la figura inferior:

Es importante registrar el número máximo de páginas posibles antes de incluir el código en nuestro sitio, ya que cuando un visitante seleccione su idioma, Wovn verificará si la url está traducida, y no mostrará nada en caso de no encontrarla.

Es posible usar un sistema de traducción Pro, para lo cual hay que pagar, aunque el uso de la traducción manual es gratuita.

No hay información relacionada con cómo interpretarán los buscadores dicho material traducido, por lo que si vuestro objetivo es el SEO, lo mejor continúa siendo crear subdominios diferentes para cada versión traducida usando, cuando sea posible, las recomendaciones existentes en este enlace.

Gmail, Google Calendar y Google Drive ahora disponibles para sitios creados con WordPress.com

Publicado el 13 octubre, 2014

por Juan David Quiñónez

La gente de Auttomatic ha trabajado de la mano con el equipo de Google para ofrecer a los millones de sitios web creados con WordPress.com la integración inmediata de las Google Apps: Gmail, Google Calendar, Google Drive, Hangouts, etc. Así es, ahora será posible enlazar y configurar profesionales cuentas de email con los dominios comprados en WordPress.com (contacto@tusitioweb.com, soporte@tusitioweb.com, etc.), gestionar eventos a través del calendario y almacenar archivos incluso de forma ilimitada en Google Drive, entre otras cosas.

Varias aclaraciones hacen falta para promover su activación y aprovechamiento: Google Apps for Work titula el programa, estará disponible solo para los nuevos clientes de WordPress.com que opten a partir de ahora por comprar dominios personalizados a través de la plataforma -para los que ya han comprado dominios, se les avisará próximamente sobre lo que deben hacer para actualizarse- y en este enlace se encontrará un completo espacio de soporte. Respecto a los precios de integración hay dos planes disponibles, el primero con opciones estándar y con un valor de 50 dólares anuales por dominio, o bien, un segundo plan con espacio ilimitado en Google Drive por un valor de 120 dólares al año y por dominio.

En fin, una importante integración que enriquece el servicio de Auttomatic facilitando la gestión de los sitios web la cual no solo implica administrar artículos y páginas sino que además requiere un trabajo multicanal ya que no solo visitantes son los que frecuentan nuestras creaciones, son clientes potenciales listos para convertir en cualquier momento. Claro, sin las herramientas adecuadas la labor se complica, incluso con profesionales equipos de trabajo a nuestra disposición, pero con las reconocidas apps de Google a la mano quizá pueda ser menos engorroso.

Y hablando de equipos de trabajo, vale decir que los pagos están también relacionados al número de usuarios diferentes del mismo dominio. Así pues, como nos da ejemplo Bruno en la sección de comentarios, por 10 usuarios diferentes que se valgan del mismo dominio, haría falta pagar 500 dólares anuales (US$50 x 10).

Más información: Blog oficial de WordPress.com

6 herramientas para añadir un foro a tu sitio web creado con WordPress

Publicado el 11 octubre, 2014

por Juan David Quiñónez

Ya sea para brindar un soporte para un software específico o para enriquecer el servicio al cliente, independientemente del producto o servicio ofrecido por nuestra empresa, resulta interesante el pensar en implementar un foro que vaya de la mano con el actual sitio web de la compañía y donde los usuarios (clientes) puedan despejar sus dudas, compartir con otros usuarios, publicar sus comentarios y hasta ofrecer sugerencias enriquecedoras. Claro, todo de forma organizada y llevadera, sin ceder un segundo ante el SPAM que la libertad de publicación podría generar.

Hay decenas de completas herramientas para crear foros y algunas de las mejores vienen empaquetadas como plugins para WordPress, así que si estás entre las decenas de millones que cuentan con sitios web bajo este CMS, estás a una sencilla instalación de montar tu propio foro. Ahora ¿por cuál empezar? Pues bien, en ElegantThemes han recogido más de una decena de recomendaciones de plugins de foros para WordPress y hoy destacamos algunas de ellas, en particular, las gratuitas:

1. Bublaa Forum and Comments

Foros, sistema de comentarios y un widget de actividad social reciente son los ítems que componen a Bublaa. Para los primeros ofrece una integración inmediata con opciones de discusiones en tiempo real tanto entre usuarios logueados como visitantes casuales (perfecto para la parte lateral de videotransmisiones).

2. DW Question & Answer

Como su nombre lo indica, es una herramienta para sitios web de preguntas y respuestas tipo Stack Overflow, Quora o Yahoo Answers, o simplemente para establecer un espacio de ayuda (FAQ) en una web convencional. Le enriquece su sistema de votaciones por respuestas individuales, categorización de preguntas, múltiples lenguajes, reCAPTCHA y la posibilidad de dar «follow» a las publicaciones.

3. AnsPress

También un muy útil sistema para sitios de preguntas y respuestas pero con más facilidades en su proceso de configuración. Incluye opciones similares al anterior además de varios themes para su personalización, selección de mejores respuestas, sugerencias de etiquetas, mensajes privados, rankings de usuarios y social login.

4. WP Symposium

Se define como una herramienta para darle un toque de red social a cualquier sitio web en WordPress y que entre otras cosas puede suplir las necesidades de implementación de un foro usando apenas un shortcode. Lleno de características se encuentra (votaciones, notificaciones vía email, marcación de temas específicos como favoritos, widget para destacar publicaciones recientes, etc.), además, es ofrecido de forma gratuita pero viene también en versión premium.

5. bbPress

bbPress
Previamente un completo sistema para montar foros desde cero y ahora un evolucionado plugin creado por el equipo de WordPress que se integra de manera perfecta a cualquier sitio montado con el CMS de Automattic. Foros, debates y respuestas son las categorías de contenido que componen su gestión, categorías a las que los usuarios podrán dar seguimiento. Incluye perfiles básicos para usuarios, widgets y la posibilidad de extender sus funcionalidades con más plugins.

6. BuddyPress

Otro plugin creado por el equipo de WordPress el cual representa todo un abánico de posibilidades para armar una red social sin complicación, claro, proveyendo entre otras cosas de las opciones suficientes para que los usuarios conozcan y compartan con otros a través de foros, mensajes privados, streams de actividad, microcomunidades, etc. Su funcionalidad, al igual que bbPress, se puede extender con más plugins, incluso pueden trabajar juntos en una misma instalación.

¿Usas alguna de las opciones presentadas o acaso te vales de una que no está en el listado? No dudes en dejar tus recomendaciones en los comentarios.

Llega el SEO a Ghost, la plataforma open source de blogs

Publicado el 7 octubre, 2014

por Juan David Quiñónez

Atención usuarios de Ghost, la minimalista y elegante plataforma open source para la creación de blogs que sigue ganando adeptos a diestra y siniestra -incluso restando usuarios a WordPress-, ahora permite editar las metaetiquetas en cada artículo creado. De ese modo, a la hora de terminar de escribir una entrada y antes de publicarla, será posible administrar las etiquetas de título (Meta Title) y descripción (Meta Description) que serán las que tomarán los buscadores para indexarla y presentarla en los resultados de las consultas de los usuarios.

Y por buscadores nos referimos particularmente a Google pues la tarea de poner metaetiquetas será tan fácil y hasta más sencilla que como ya muchos la hacemos en WordPress con ayuda de plugins -por ejemplo, con el de Yoast SEO o el All in One SEO Pack-: Por defecto se desplegará una barra lateral titulada «Meta Data» que a modo de formulario permitirá llenar el par de espacios relacionados a las etiquetas de título y descripción; Para enriquecer las opciones, se mostrará una vista previa en tiempo real y con los colores de texto en los resultados de Google, además, con el ánimo de dar precisión, se mostrará un contador de caracteres en cada cajón.

Por cierto, la nueva barra se despliega simplemente pulsando en la rueda dentada de Configuraciónes presente en la parte inferior derecha del editor de Ghost y luego eligiendo la opción «Meta Data» previamente mencionada. Eso si y solo si se está usando el tema por defecto de Ghost, de lo contrario, para themes personalizados, hará falta recurrir a los helpers {{meta_title}} y {{meta_description}}.

En fin, el gran inconveniente con las nuevas plataformas de creación de blogs y sitios web, quizá un miedo generalizado entre quienes buscan migrar de sus plataformas actuales para conseguir todas las innovadoras características que ofrecen Ghost y similares, es que el SEO básico, el «on page», no puede solventarse con lo disponible en ellas. Pues bien, con esta novedad Ghost se pone a la vanguardia y llama a todos a usarle como CMS principal, especialmente a quienes ya usan otras herramientas.

Más información: Blog de Ghost – Registro de cambios en Ghost

SweetAlert, una forma elegante de mostrar alertas en tu sitio web

Publicado el 2 octubre, 2014

por Juan Diego Polo

En tristanedwards.me/sweetalert tenemos la posibilidad de bajar un script + CSS que podemos incluir en nuestro sitio web para cambiar las aburridas y clásicas alertas por mensajes mucho más atractivos.

En la imagen veis lo que se vería con el típico alert() y lo que se muestra usando este nuevo SweetAlert(). Al usar el script veremos una ventana emergente que, al mismo tiempo que aparece, deja el fondo más oscuro, destacando así el mensaje que queremos transmitir.

En su página podéis encontrar otros ejemplo, así como instrucciones para su instalación y las variables que podemos usar para personalizar el resultado.

Se trata de un proyecto realizado por el diseñador Tristan Edwards, tristanedwards.me, quien lo ofrece de forma gratuita y con código abierto disponible en github

Para ganar suscriptores: Plugins gratuitos de ventanas emergentes (popups) para WordPress

Publicado el 1 octubre, 2014

por Juan David Quiñónez

Echamos hoy un vistazo a las opciones que nos recomiendan los profesionales de ElegantThemes para trabajar en campañas de marketing con popups, esas pequeñas ventanas con avisos y algunos mensajes especiales que suelen mostrarse al llegar a algún sitio web, en particular, con opciones rápidas para suscribirse a la newsletter. Es totalmente debatible si se trata de un método molesto o no, lo que sí es cierto es que es un método eficiente y que con una buena gestión, teniendo en cuenta en gran medida los intereses de los usuarios, puede generar buenos resultados.

1. Cliftons Lightbox

Un interesante plugin que desplegará un popup con un mensaje, una lista de cinco ítems con viñetas (perfecto para sitios web que ofrecen algún producto) y/o un video en YouTube que se reproducirá allí mismo. Igualmente dispondrá en su parte inferior de un pequeño formulario para seguir la newsletter. No cuenta con diseños diferentes pero se puede controlar el tiempo en segundos hasta su aparición.

2. ITRO Popup Plugin

ITRO se caracteriza por su sencillez y libertad a la hora de armar el mensaje que se mostrará al usuario ya que permite crearlo con el editor visual de WordPres controlando al máximo títulos y otros estilos de texto junto a las páginas en las que se presentará. Se puede enriquecer con imágenes y videos de YouTube, cambiar su imagen de fondo, bordes, márgenes, padding, altura, ancho, etc.

3. Dreamgrow Scroll Triggered Box

Con cuatro diseños de colores, permite habilitar mensajes sencillos, banners, botones sociales y hasta formularios de suscripción a la newsletter en un recuadro que será desplegado al usuario si se desplaza hacia abajo en el sitio web (scroll down); Desaparecerá con la acción contraria (scroll up). Se puede mostrar en las páginas, artículos y en la homepage, además, se puede controlar su tamaño.

4. Icegram

Una completa herramienta profesional lanzada recientemente y diseñada para crear avanzadas campañas valiéndose de popups comunes, barras de notificaciones en la parte superior del sitio web, mensajes en pequeños recuadros desplegados en la parte inferior u otros avisos, también abajo, mostrados de forma similar a como se despliega el chat de Facebook. Incluye themes para su personalización además de que se puede elegir en qué páginas y dispositivos específicos se mostrará.

5. YITH Newsletter Popup

Otro sencillo plugin para promover suscripciones a la newsletter. Se compone de dos sencillas pestañas de configuración, una para ajustar algunas características de presentación del formulario y la otra para definir sus detalles visuales: Título, imagen, mensaje, color de fondo, CSS personalizado, fuentes tipográficas y su color. Solo dispone de un elegante esquema para la disposición de los elementos.

6. WordPress PopUp

Otro plugin libre en cuanto a temas de personalización ya que se valdrá del editor del WordPress. Un factor diferenciador son las nueve reglas disponibles con las que se controlará al máximo de qué forma, para qué tipo de usuarios y en qué eventos se desplegará la popup. Viene también en versión de pago (US$ 19) con posibilidades para especificar el público objetivo según su localización.

7. Optin Revolution

Finalmente una herramienta enfocada a la gestión de campañas de suscripciones con ayuda de cuentas en los servicios populares de email marketing que soporta: Aweber, iContact, GetResponse, MailChimp, etc. Claro, la personalización visual también está a disposición del usuario. Su versión de pago (US$ 47) permite incluir videos y manejar opciones avanzadas como analíticas y pruebas A/B.

inlinemanual, para crear un tutorial web sobre nuestra aplicación

Publicado el 29 septiembre, 2014

por Juan Diego Polo

Si habéis creado una aplicación web y queréis crear un tutorial que ayude a los visitantes a entender su funcionamiento, echad un vistazo en inlinemanual.com.

Se trata de una herramienta que añade una capa de información encima de las pantallas de nuestra web, permitiendo crear áreas sensibles al toque que muestren datos específicos sobre el uso de dicha región.

La versión gratuita, creada para quien tiene un sitio web, permite crear hasta 3 tutoriales, todos ellos basándose en la misma filosofía: orientar paso a paso a los nuevos visitantes.

Además de incluir regiones con textos en las pantallas, inlinemanual ofrece accesos directos a las diferentes secciones del tutorial con un componente siempre visible en la parte inferior derecha.

Las versiones no gratuitas permiten añadir tutoriales privados, así como reproductores que pueden incrustarse en cualquier sitio web y funciones de exportación de los tutoriales en HTML.

5 plugins para activar la verificación de dos pasos en WordPress

Publicado el 29 septiembre, 2014

por Juan David Quiñónez

Un método de seguridad que se ha puesto de moda en los últimos tiempos tanto por su eficiencia como por su facilidad de uso, además de su implementación en sitios populares (Gmail.com, Dropbox, Amazon, iCloud, Facebook, Twitter, etc.), ha sido el de la verificación o autenticación en dos pasos. La idea es tan simple como inteligente: Al tratar de iniciar sesión en alguno de tales sitios una pantalla adicional pedirá un código que es enviado cada vez a nuestros móviles (vía SMS o con completas apps), así se completa el proceso de login con ayuda de algo que nos pertenece (el móvil) y se complica en buena medida el trabajo de posibles atacantes.

Pues bien, es posible agregar este nivel de seguridad a nuestros sitios web creados con WordPress.org a través de diferentes plugins especializados, por ejemplo, los siguientes 5 que han sido recomendados previamente por el portal ElegantThemes. Todos son gratuitos aunque en varios se puede pagar por acceder a funcionalidades extra, eso sí, no son requeridas para un uso básico.

1. Duo Two-Factor Authentication

Lo ofrece la empresa de seguridad Duo y se caracteriza por su sencilla configuración: Crea una cuenta gratuita en Duo, consigue la API Key, instala el plugin, ingresa la API key, marca en WordPress a qué tipo de usuarios se les pedirá la verificación en dos pasos (administradores, autores, comentaristas, etc.) y listo, la próxima vez que se logueen, se les pedirá alguna acción de verificación (popup, SMS, password) a través de la app de Duo para móviles.

2. Clef

Otra brillante herramienta de seguridad que se vale de una app especial para móviles: En el próximo inicio de sesión, luego de instalar el plugin Cleff, pulsa desde la pantalla de login de WordPress sobre el nuevo botón «Log in with your phone» que aparece en su parte inferior. Enseguida se mostrará una onda animada a la que tendrás que apuntar con la cámara de tu móvil, desde la app de Clef, para que se establezca la conexión entre el dispositivo móvil y el del escritorio.

3. Two Factor Auth

Two Factor Auth permite realizar el login con un código numérico adicional creado aleatoriamente por el algoritmo TOTP/HOTP que se encarga de generar «One Time Passwords», claves que caducan cada cierto tiempo para dar vida a nuevas claves. Éstas pueden ser enviadas automáticamente, tras su generación, tanto vía email como a través de aplicaciones de terceros ofrecidas para dispositivos móviles por herramientas de seguridad como Duo Mobile y Google Authenticator.

4. Authy Two Factor Authentication

Authy se vale de simples mensajes de texto enviados al móvil luego de conseguir una API Key en su sitio web y haber sido configurado su plugin. Una interesante característica es que se le puede permitir a cada usuario de la cuenta en WordPress decidir si optará por este modo de inicio de sesión, aunque también es posible forzar su requerimiento si se cuentan con permisos de administrador.

5. Google Authenticator

Finalmente un método también muy cómodo para agregar una capa de seguridad extra a un sitio WordPress mediante las herramientas especializadas ofrecidas por el proyecto Google Authenticator quien provee múltiples plugins y aplicaciones móviles (iOS/Android/BlackBerry), las mismas que sirven para loguearse de forma segura en diferentes servicios populares (Dropbox, Amazon, Gmail, LastPass, etc.). Se basa en códigos aleatorios generados por la app en el smartphone que deben ser ingresados en la pantalla de login de WordPress la cual es modificada automáticamente por el plugin para facilitar la inclusión de los códigos.

Crédito de la imagen: Centro de ayuda de Google Apps

reembed – pon un reproductor de vídeo personalizado en tu sitio web

Publicado el 29 septiembre, 2014

por Juan Diego Polo

Si estáis acostumbrados a divulgar vídeos de youtube o de dailymotion en vuestro sitio web pero no os gusta el reproductor que ofrecen dichas plataformas, reembed (reembed.com) ofrece una solución bastante interesante.

Se trata de una aplicación que nos permite crear un reproductor personalizado. Podemos elegir entre varios estilos y colores, así como definir una logomarca para que esté presente en todos los vídeos que aparezca en nuestra web (sea o no nuestros). Una vez definido dicho reproductor, copiaremos el código creado en nuestro sitio y veremos como todos los vídeos ya publicados, y los que publicaremos en el futuro, aparecerán personalizados.

Así es, el script que incluimos (permite también instalar plugins en diferentes CMS), no solo alterará el aspecto de los futuros vídeos que publiquemos en nuestro blog, también detectará todos los anteriormente publicados y los transformará para que los visitantes vean el nuevo reproductor y nuestro logo en todos ellos:

Además de personalizar el player, permite también el acceso a un panel de estadísticas desde donde controlaremos no solo las visitas recibidas en cada vídeo, también los errores que puedan generarse, como vídeos publicados que ya no existen en la fuente (youtube o dailymotion).

El proyecto de momento es gratuito para todos, aunque indican que ya están trabajando en cuentas Pro con más funcionalidades.