14 trucos para evitar ataques de fuerza bruta en WordPress

WordPress es el gestor de contenido web por excelencia, día tras día el número de sites creados con este CMS aumenta, y no es de extrañar, su facilidad de uso y la posibilidad de hacer casi cualquier cosa a través de sencillos plugins, lo hacen perfecto para poner en marcha un portal online con una inversión reducida y una imagen muy profesional .

Hablamos de millones de sites online creados con esta plataforma por su profesionalidad y posibilidades infinitas por lo que, al igual que es atractiva para empresarios, emprendedores, diseñadores, etc., también lo es para todos aquellos que buscan hacer daño en el mundo virtual.

Es mucho más fácil localizar “puertas traseras” o vulnerabilidades en plataformas usadas por miles de usuarios que trabajar de forma individual webs creadas a medida, de la primera forma te aseguras poder hackear múltiples sites en un tiempo muy reducido.

Pero que no cunda el pánico, al igual que los hackers conocen los puntos frágiles de un site para acceder y campar a sus anchas, nosotros sabemos cómo evitar dichos accesos y os vamos a contar los trucos más usados por nuestros diseñadores web además de las acciones necesarias que deberéis realizar a vuestro WordPress para mantenerlo seguro con el paso del tiempo.

Trucos para evitar hackeos en tu web WordPress

Durante la fase de diseño:

La fase de diseño de la web es uno de los momentos más decisivos. Hay aspectos a tener en cuenta de los que dependerá que el site sea más o menos seguro y todo se resume en los siguientes 10 puntos:

#1. Base de datos

Normalmente se crean con el prefijo wp_ y esto, por supuesto, es algo que todo hacker conoce por lo que, a partir de ahora, cambia el prefijo y personalízalo de forma distinta en cada uno de tus proyectos sino tendrán demasiada facilidad de localizar las tablas de tu base de datos.

#2. Nombre usuario

Al igual que el anterior punto, existen una serie de nombres que se suelen usar y debéis por tanto evitarlos, se trata de los siguientes: admin, Admin, root, etc. Serán los primeros nombres que pongan los hackers a la hora de probar el acceso a una web.

#3. Contraseña

WordPress te facilita esta tarea generando passwords muy seguras de forma automática. Úsalo, aprovéchate de ello y por supuesto nunca uses contraseñas del tipo: 12345678, 00000000, etc.

#4. Autenticación en 2 pasos

Esta opción incrementará la seguridad de la web ya que implica la realización de un paso algo más complicado, por ejemplo, el envío de un código a un móvil que forme parte de su base de datos.

Es muy útil y, además, muy fácil de activar a través de plugins. Pero mucho cuidado, utiliza siempre plugins fiables de desarrolladores certificados, evita abrir tú mismo la puerta a posibles intrusos con plugins que no sean de fiar…

#5. Versión WordPress

Utiliza siempre la última versión en tu instalación así como mantén tus sitios web actualizados (incluido en la fase de mantenimiento). WordPress trabaja continuamente para evitar verse afectado por este tipo de problemas e incrementa la seguridad de su plataforma con cada actualización.

#6. Plugins

Utiliza siempre plugins de sitios verificados y de confianza, que además sean compatibles con tu versión de Wp. Por otro lado, elimina aquellos que no vayas a utilizar, de este modo además, reducirás el peso de la web y mejorarás su rendimiento.

#7. wp-config.php

Este archivo es la moneda de oro de cualquier wordpress y es que incluye todos los datos de acceso a la base de datos. Pero, ¿qué puedes hacer para protegerlo? Cualquiera de las siguientes acciones:

    • Moverlo a la carpeta superior del servidor
      Cambiar los permisos a 444 para evitar que cualquier usuario pueda reescribirlo
    Incluir la siguiente línea en el htaccess que evitará accesos no deseados:

<Files wp-config.php>
order allow,deny
deny from all
</Files>

#8. Wp-admin con password

Desde el c-panel o plesk e incluyendo varias configuraciones en el htaccess se consigue que, antes de aparecer el típico acceso de un wordpress aparezca otra ventana solicitando primero dicha contraseña que hemos incluido en nuestro servidor. Es una forma más técnica y compleja de llevar a cabo el punto 4 del que hemos hablado anteriormente.

#9. Plugins Seguridad

Personalmente, tras haber sufrido ataques en varias webs que tenían instalados plugins de seguridad como el famoso Wordfence, no soy muy partidaria de dejar la suerte en manos de alguien o algo externo. En cualquier caso, si hemos realizado todas las acciones anteriores, podemos instalar algúno que nos informe de si algún archivo ha sido modificado, de este modo podemos detectar un ataque a tiempo, cargar una copia de seguridad y solucionar el problema de la forma más fácil y rápida posible.

No voy a recomendar ningún plugin en concreto pero próximamente prepararemos un listado de los que debes evitar a toda costa si no quieres sufrir un ataque con mayor facilidad. Suscríbete para estar al tanto de todas nuestras actualizaciones.


#10. htaccess

Este archivo es uno de los más importantes por lo que podemos protegerlo de forma muy sencilla incluyendo en el mismo la siguiente línea:

<files .htaccess>
order allow,deny
deny from all
</files>

Además, en él se pueden incluir diferentes directivas que impidan el acceso a la web desde países o IP’s que forman parte de una base de datos de sitios maliciosos.

Durante la fase de mantenimiento:

Las acciones necesarias para proteger tu web no terminan en la fase de desarrollo sino suponen un trabajo continuo y conocimientos avanzados de desarrollo web

#1. Copias de Seguridad

Una vez tengas tu web en el aire deberás programar una tarea que genere copias de seguridad cada cierto tiempo. El periodo dependerá de las veces que actualices tu web, por ejemplo, si se trata de una web conectada a una base de datos de productos o en la que se realicen pedidos, necesitarás una copia diaria que te asegure disponer de todos los datos lo más recientes posibles.

#2. Actualizaciones

Todos los aspectos actualizables de los que hemos hablado antes, no deben estar al día sólamente la fase de desarrollo e instalación, sino que debe ser un trabajo de mantenimiento continuo.

Aconsejamos hacer una copia de seguridad previa ya que se pueden producir incompatibilidades y que la web no se vea correctamente. Lo mejor es contar con expertos de wordpress que se encarguen de su mantenimiento anualmente.

#3. Search Console

Conectar tu web a la Search Console de Google (la herramienta para webmasters del buscador) no sirve sólo para trabajar el SEO de tu web sino que te servirá para estar al tanto de todo aquello anómalo que ocurra.

Esta herramienta es capaz de localizar sitios comprometidos y que además te avisará a tu correo si tienes los avisos activados (muy recomendable). Además te servirá también para localizar archivos infectados y de comprobar si se encuentran limpios, tras realizar las acciones requeridas en caso de verse afectados.

#4. Comentarios con captcha

Localizar spam en los comentarios es la primera advertencia de que nuestro sitio está en el punto de mira de los hackers y de que es susceptible de sufrir un ataque de fuerza bruta.

Para evitarlo lo mejor es incluir un sistema que nos asegure que el comentario está siendo incluido por un humano y no por un robot como un captcha, y configurar el wp de modo que requiera ser aprobado en la sección de ajustes del escritorio.

Puedes aprender a instalar el invisible reCAPTCHA de Google en este post.

En definitiva todo se resume a dificultar el acceso y a mantener el backoffice de tu web lo más actualizado posible así que, todas las vulnerabilidades encontradas por los hackers en los sites web atacados, se vayan solucionando gracias a las nuevas versiones.

Diseño flexible con Flexbox

Maquetación FLEX con CSS

En el siguiente artículo, vamos a describir, cómo usar flexbox para realizar nuestros diseños con CSS.

En el layout flex, los hijos de un contenedor definido cómo FLEX, sé comportarán de manera flexible. Estos, podrán entre otras cosas, ajustar al ancho del contenedor para ocupar todo el espacio, ajustarse para quedarse centrado, variar su ancho e incluso, ordenarse de manera inversa al definido.

Esto nos permitirá realizar maquetaciones flexibles, y será una gran ayuda para realizar nuestras versiones responsive, ya que todo el contenido se reajustará acorde al espacio que haya.

¿Podemos usar Flex con todos los navegadores?

Sí, podéis visitar este enlace, Can I use, donde veréis que navegadores soportan ahora mismo flexbox. Cómo podréis ver, a fecha de hoy, todos los navegadores con soporte, tienen un verde, por lo tanto se puede usar sin problemas.

¿Cómo empezamos con FLEXBOX?

Propiedades que afectan al contenedor (parent)

Bien, cómo todo, vamos a empezar con ejemplos:

En primer lugar, imaginemos que queremos tener 6 bloques de contenido, uno al lado de otro:

flex-direction

Por defecto, tenemos los elementos todos alineados a la izquierda, y en la parte superior. Vamos a empezar a hacer uso de flex. Imaginemos que ahora, queremos que en lugar de estar en la misma línea, estos elementos formen una sóla columna. Para ello haremos uso de flex-direction, que se aplica al contenedor.

Más opciones para flex-direction:

  • flex-direction: row para mostrarlos en una misma fila en orden normal. (opción por defecto)
  • flex-direction: column para mostrarlos en una misma columna en orden normal.
  • flex-direction: row-reverse para mostrarlos en una misma fila en orden inverso.
  • flex-direction: column-reverse para mostrarlos en una misma columna en orden inverso.

flex-wrap

Ahora vamos a intentar ahora, hacer que el contenido siempre se mantenga en la misma línea, tanto si es columna cómo si es fila, es decir, que aunque no quepan los elementos dentro del contendor que las contiene, que estás se ajusten al espacio que hay. Hay que tener en cuenta que es el comportamiento por defecto, aunque en este caso lo vamos a indicar.

¿Y si tiene más espacio el contenedor? Veamoslo:

Vaya, se queda igual. Ni se han movido… ¿no habíamos dicho antes, que el contenido se «ajustaba»?

Hagamos una pequeña presentación de justify-content: space-around (más adelante entraremos con más detalle)

Ahora, si queremos que las cajas tengan un tamaño mínimo, ¿cómo podemos forzar a que cuando no quepan, bajen de línea y el contenido se ajuste?

Más opciones para flex-wrap:

  • flex-wrap: wrap para mostrarlos en una misma fila en orden normal.
  • flex-wrap: nowrap para mostrarlos en una misma columna en orden normal. (por defecto )
  • flex-wrap: wrap-reverse la línea se rompe por arriba

Bien, hasta ahora, ya hemos visto cómo podemos poner el contenido en filas, columnas, darle la vuelta, y luego podemos hacer que siempre esté en una misma línea o en varias.

Ahora vamos a poner ese contenido, en relación al contenedor, donde queramos.

justify-content

Vamos ahora, a centrar nuestro contenido, sin tener en cuenta lo que haya a los lados

¿Y si queremos ponerlo a la izquierda?

usemos justify-content: flex-start

Vale, de acuerdo, flex-start, ¿eso es correcto, por qué no se usa «left»?. Bien, esto es por el siguiente motivo. Cuando el contenido está con columna (visto hace unas líneas), flex-start es sinónimo de «lo más arriba posible» y ya no es igual que left. Lo mismo pasa con row-reverse, y column-reverse. En cada contexto significa una cosa diferente.

justify-content con direction: column

justify-content con direction: row-reverse

justify-content con direction: column-reverse

En cada contexto, flex-start significa algo diferente

justify-content: flex-start | flex-end | center | space-between | space-around;

Más opciones para justify-content:

  • justify-content: flex-start para poner el contenido al principio.
  • justify-content: flex-end para poner el contenido al final
  • justify-content: center para centrar
  • justify-content: space-between deja el mayor espacio posible entre los elementos
  • justify-content: space-around deja el mayor espacio posible entre elementos además de añadirlo a los lados

align-items

Una vez hemos visto el concepto de justify-content, align-items es lo mismo pero en la otra dirección. Es decir, cuando usamos una dirección row, con los elementos en la misma fila, justify-content, nos ajusta el contenido de forma horizontal. align-items, lo hace de forma vertical.

Sí, con una sola línea, hemos conseguido que el contenido, se centrara verticalmente.

Y con ayuda del justify-content… podemos centrar todo el contenido, tanto horizontal cómo verticalmente

Pero esto no es todo!! Hay varias opciones, que pueden ser más que interesantes, ¿quieres columnas con mismo alto?

 

Otra propiedad es, baseline, con el que se consigue que estén todos los textos a la misma altura, si usamos de referencia la base de la línea.

Más opciones para align-items:

  • align-items: flex-start para poner el contenido al principio.
  • align-items: flex-end para poner el contenido al final
  • align-items: center para centrar
  • align-items: stretch deja el mayor espacio posible entre los elementos
  • align-items: baseline deja el mayor espacio posible entre elementos además de añadirlo a los lados

align-content

Esta propiedad nos sirve para definir cómo queremos el contenido cuando hay más de una línea. Es parecido a justify-content, pero con más líneas. Es más, si sólo hay una línea, esta propiedad no afecta.

Más opciones para align-content:

  • align-content: flex-start los elementos, se ajustan a la arriba
  • align-content: flex-end los elementos se ajustan abajo
  • align-content: center para centrar, dejando espacio arriba y abajo
  • align-content: space-between distribuye el espacio entre los elementos, sin contar los bordes del contenedor
  • align-content: space-around distribuye el espacio entre los elementos
  • align-content: stretch aprovecha el espacio entre líneas

Propiedades que afectan a los hijos (children)

order

Order, nos permite ordenar los items de la manera que nosotros queramos. Por defecto, el contenido se muestra, conforme está puesto en el código de la web, pero con flexbox podemos cambiarlo, y por ejemplo destacar un elemento siempre en primer lugar. (admite también número negativos)

se usa de la siguiente manera: order: número

flex-grow

Supongamos que no queremos poner un tamañó de ancho fijo, pero sí que queremos que uno de los elementos ocupe el triple que el resto. Con flex-grow, podemos definir esta relación

Hay que definirles a todos los elementos un valor

se usa así: flex-grow: número

flex-shrink

Ahora, en lugar de hacerlos más grande, queremos hacerlos más pequeños

se usa así: flex-shrink: número

flex-basis

Con esta propiedad, podemos definir un tamaño por defecto, antes de que el espacio se reparta entre los elementos. Se puede usar porcentaje, px o cualquier otra unidad.

Destacar, si el valor que se pone a flex-basis es 0, el espacio que haya interno a cada elemento no se respeta, sin embargo cuando es auto, sí y se distribuye.

align-self

Por último, la propiedad que vamos a ver ahora, es la que nos permite crear niños rebeldes. Es decir, si uno de los elementos, no queremos que se comporte cómo el resto, podemos con esta propiedad, sobreescribir su comportamiento respecto a los demás.

Si por ejemplo, tenemos que poner un elemento abajo del todo del contenedor, podemos indicarle que vaya abajo.

Veamos un ejemplo:

Hasta aquí, hemos visto cómo usar flex para crear un contenedor padre con diferentes elementos. Imaginemos ahora que nos plantean un diseño responsive, con 3 columnas, con texto en cada uno de ellos donde, en movil queremos que se cambie a una sola columna

Veamos, cómo realizar esto con flexbox

Además hemos puesto que a partir de 600px, el contenido salga cómo una columna.

Ahora imaginemos que sólo hay una columna, y queremos que nuestro texto salga completamente centrado.

En resumen, trabajar con flexbox, nos facilita el trabajo, trabajando más rápido y con la certeza de tener un responsive adecuado a todos los dispositivos.

Guía básica de Webpack 2

Los empaquetadores, comúnmente llamados en términos anglosajones, bundlers, son ya una herramienta imprescindible en cualquier entorno web moderno que se precie. Con la reciente ganancia de popularidad de Javascript, gracias a Nodejs, estas herramientas han proliferado en forma de utilidad de consola. Nodejs permite crear con gran agilidad este tipo de herramientas, e incluso escribir los propios módulos.
Grunt y Gulp, fueron los que sentaron las bases de lo que son actualmente herramientas como webpack. Tenían por función la ejecución tareas de cualquier tipo, con plugins para ampliar la funcionalidad. Actualmente, están proliferando diferentes soluciones al problema mas específico de agrupar recursos, como puede ser rollup o jspm entre otros. Todos ellos están escritos en Nodejs.

Nodejs, de ahora en adelante, node, ha supuesto un cambio en la forma de desarrollo de la web por lo que el lado del servidor corresponde. De la propia de definición de su página oficial: usa un node ha supuesto un cambio en la forma de desarrollo de la web por lo que el lado del servidor corresponde. De la propia de definición de su página oficial: usa un  modelo de operaciones Entrada/Salida sin bloqueo y orientado a eventos, que lo hace liviano y eficiente y programación funcional. Cuenta con una comunidad muy activa que desarrolla todo tipo de funcionalidades en forma de paquetes que reside en npm. La equivalencia podría ser packagist, en este caso, respecto de paquetes de php.  La proliferación de páginas SPA, con el uso intensivo de red o RTA combinado ha propiciado la amplia expansión y evolución. Además de poder unificar la lógica en  cliente y servidor, y usar el mismo lenguaje de programación para ambos.

¿Qué es Webpack?

Webpack como se define en web oficial: is a module bundler for modern JavaScript applications. When webpack processes your application, it recursively builds a Webpack como se define en web oficial: is a module bundler for modern JavaScript applications. When webpack processes your application, it recursively builds a  dependency graph that includes every module your application needs, then packages all of those modules into a small number of bundles – often only one – to be loaded  by the browser. O lo que es lo mismo, se encarga de generar gráficos de dependencias y empaquetarlos para que la aplicación sea capaz de funcionar correctamente.

La herramienta, nos permite ampliar su funcionalidad a través de una amplia lista de loaders que nos permiten aplicar transformaciones a los archivos que le pasemos.  Entre sus categorías, cuenta con funcionalidades básicas(xml, script, raw), empaquetadores(minificar, modernizr, web-components), específicos(imágenes, svg, base64, etc),  transpilers(coffescript, es6, typescript), plantillas(handlebars, jade, mustache), estilos(less, sass, stylus), traducciones(po, po2mo) o auxiliares(documentación, tests). También cuenta con una sección de plugins, mas limitada, que nos permite extender la funcionalidad mas allá de una simple transformación, pudiendo ejecutar lógica adicional, como es el caso de HotModuleReplacementPlugin, el cual nos permite regenerar los assets generados en función de cambios en los archivos originales.

Beneficios

  • Es una herramienta que nos permite automatizar tareas repetitivas.
  • Modularizar las diferentes secciones de nuestro proyecto.
  • Posibilidad de elección en función del tipo de asset(minificación de imágenes, etc).
  • Tiene una comunidad muy activa, y cuenta con un gran apoyo por parte de empresas como egghead.io, rollbar, etc.
  • Aunque en su primera versión era uno de los principales inconvenientes, en su segunda versión cuenta con una documentación de calidad.
  • Optimiza la velocidad de carga de la web.

Desventajas

  • En proyectos en los que la gestión de los assets no represente un problema, o el proyecto sea pequeño.
  • La separación entre las secciones sea difusa o difícilmente modularizable.
  • La curva de aprendizaje es elevada, necesita mucha configuración y es compleja al principio.

Objetivos del artículo

  • Usar código en ES2015 y transcribirlo a javascript legible para el navegador.
  • Loaders de css.
  • Extraer el css en archivos css.
  • Servidor de webpack Hot-Reloading.

Instalación de la herramienta

Para instalar webpack, debemos tener primero node instalado en el equipo. Puedes encontrar la información sobre cómo instalarlo en el enlace de la página oficial. Ahora que ya tenemos lo tenemos instalado, podemos continuar con la instalación de Webpack desde el terminal. A través del siguiente comando, le indicamos a npm, el gestor de paquetes de node, que queremos instalar en la carpeta actual, y guardarlo como dependencia del entorno de desarrollo:

Con la ejecución de este comando, ya tenemos el entorno preparado para proceder con Webpack.

Utilización

Javascript con ES2015

En primer lugar, vamos a instalar un transpiler para ES2015, aprovechando la implementación de babel, un loader capaz de llevar a cabo tal tarea con la ayuda de webpack.

Esto nos instalará en la carpeta donde lo ejecutemos babel-loader. Ahora creamos un archivo javascript con un ejemplo sencillo de un fragmento de código escrito en ES2015:

Este código javascript, ahora mismo no es funcional en el navegador, porque no entiende las nuevas características que hemos utilizado. Para que webpack empaquete nuestro código y lo reescriba en un estándar compatible con los navegadores, vamos a usar una configuración específica para que antes ejecute el loader de babel con el siguiente archivo de configuración:

En el siguiente enlace, está explicada toda la configuración usada aquí, pero explicaremos brevemente cada apartado. Entry, es el archivo de entrada, output, son todas las opciones referentes a la salida de los recursos, en este caso, usamos el sistema umd, con el nombre bundle.js y lo escribiremos en el directorio /web/js/dist. Por último, le damos la configuración necesaria para que use el loader de babel y nos escriba javascript válido en el  navegador. Si abrimos el archivo(en función de la versión de webpack y de sus loaders puede cambiar el contenido), podemos ver como las primeras lineas,  son las que nos introduce la lógica de webpack. A partir de la línea 86, podemos ver nuestro código, con las porciones de ES2015 reescrito:

Ahora, ya tenemos todos los elementos necesarios para ejecutar webpack, para que genere la salida que estamos buscando, nuestro archivo app.js compilado, con el nombre de bundle.js:

El ejecutable, se encargará de buscar el archivo de configuración(que debe estar donde lo ejecutamos),e interpretarlo para realizar las tareas convenientes.

CSS en javascript

El siguiente paso será usar un loader para parsear el css. Webpack hace uso del concepto de Web Components. Es por ello que su fin es el de empaquetar todos los recursos necesarios para el correcto funcionamiento en un archivo javascript, para su posterior reutilización. Sin entrar en detalles del porque, en el siguiente enlace, se exponen algunos de los motivos por los cuales, existe el concepto de CSS en javascript.

Para poder usar el loader de css, necesitamos instalarlo de la siguiente forma, como hemos hecho anteriormente con el loader de babel:

Acto seguido, cambiamos la configuración de webpack, para que quede así:

Con esta nueva regla, y el nuevo archivo de entrada, le estamos diciendo a webpack que queremos que lea y parsee el css que contiene el archivo style.css. Ahora, si abres el  fuente generado, podrás ver como ha incluido mucha mas lógica encargada de hacer la integración entre el fuente generado y el proyecto, además de los estilos css que contenía el archivo que creamos anteriormente. Podemos seguir ampliando nuestro set de herramientas para ser integradas con webpack, con sass, compresores de imágenes y un largo etcétera. Te aconsejamos que mires la documentación de webpack, para tener una visión mas profunda de el ecosistema.

Extracción del css

Para finalizar, con la sección de loaders y plugins, vamos a explicar como se pueden extraer los archivos css. Puesto que ya hemos visto como incluir el css en el archivo final bundle.js, haremos uso de un plugin que nos permite extraerlo y exportarlo a un archivo css común. Esta vez, lo que haremos no es instalar un loader, como lo hicimos previamente, puesto que necesitamos algo más que transformar las líneas. Ahora vamos a necesitar lógica para evaluar que hacer con los estilos que le indicamos a webpack que cargue, instalando un plugin.  En primer lugar, instalaremos el plugin:

Cambiando la configuración, de la siguiente forma, ya podremos incluir el archivo como app.bundle.css, tras la ejecución de webpack, como habíamos hecho anteriormente. Ahora podrás ver como en la carpeta /dist, se ha generado un nuevo archivo de css.

Servidor Web de recursos

Como no podía ser menos, el uso de estas herramientas, se vuelve lento y pesado. Cuando estamos trabajando contínuamente en los mismo recursos, vas a tener que ejecutar en el terminal la herramienta debido a los cambios efectuados y la necesidad de volver a generar el compilado. Antes este problema, con webpack, podemos usar un pequeño servidor que viene integrado, el cual nos compilará los nuevos cambios a través de watchers.

Con el siguiente comando, arrancaremos el servidor local de assets de webpack, que podremos incluir en nuestro proyecto.

En la configuración, añadiremos las siguientes líneas. Por una parte, el path público al que acceda el navegador para solicitar el bundle.js, nombre descrito en el archivo de configuración. Por otra parte, añadiremos en el array de plugins el encargado de comunicar los cambios al navegador. Con la última opción, –hot, le estamos indicando a webpack que queremos que haga uso del hot reloading, el cual, nos refrescará la web automáticamente, cada vez que se lleve a cabo un cambio.

Por último, este pequeño fragmento de código a nuestro app.js para que acepte las conexiones entrantes de hot reloading:

Conclusiones

Webpack es una herramienta muy potente que nos permite empaquetar todo tipo de recursos ya sean estáticos o dinámicos de una forma eficiente a través de sus gráficos de  dependencias. Tener todos los recursos en un mismo archivo de javascript, permite disminuir los tiempos de carga de la web, evitando peticiones innecesarias. Es cierto que al tratarse de javascript, tendremos un retardo en la carga de toda la lógica, pero si gestionamos de forma óptima los recursos, podemos evitar que los tiempos sea superiores respecto a las múltiples peticiones que puede realizar una página hacia el servidor. Así mismo, nos permite regenerar todos los recursos a través de su funcionalidad nombrada anteriormente, para evitar el paso por la consola en tiempo de desarrollo. En este artículo se ha intentado dar una visión básica y funcional de como usar esta herramienta. Asimismo, si estás interesado en la web oficial de webpack, tienes una sección completa de guías.

Los Grupos de Facebook también en IFTTT

Hoy hablamos sobre Facebook e IFTTT. Ya hemos comentado en alguna ocasión sobre esta plataforma, la cual permite unir casi cualquier cosa con casi cualquier otra. Una herramienta realmente útil para ahorrar tiempo si tenemos que publicar o enviar demasiadas cosas.

Facebook estaba disponible para la creación de “recetas de IFTTT” desde hace mucho tiempo, pero limitado a las páginas personales. Más tarde (realmente no hace mucho) permitió creación de recetas también con sus páginas de empresa (fan pages). Y ahora, cierra el círculo añadiendo también la posibilidad de unir y gestionar desde IFTTT los grupos de Facebook a los que pertenezcamos.

IFTTT

Tenemos la posibilidad de sincronizar el grupo de Facebook con: Nuestros vídeos de Youtube, nuestro Google Calendar y nuestro perfil de Instagram. Dichas recetas permitirán ahorrar tiempo y automatizar el proceso de compartir dicha información. Además, la sincronización con el calendario de google nos ayuda a que no se nos olviden las fechas de los eventos creados del grupo.

IFTTT Grupos Facebook

Además, adicionalmente a dichas acciones, podemos crear un mensaje de bienvenida personalizado, el cual recibirá todo miembro que se una al grupo gracias a IFTTT. En grandes grupos esto no sería posible de otra forma.

Como podemos observar, todavía es escaso el abanico de posibilidades y recetas con los grupos de Facebook, pero esperamos que añadan más acciones con el paso del tiempo.

Facebook renueva sus botones en los sitios web

Ya podemos ver oficialmente el nuevo botón de Facebook por la red. Un botón más moderno y renovado, eliminando la ya muy mítica mano con el pulgar hacia arriba de “Me Gusta”, y apostando por la sencillez de la “F” simbólica de la marca en un contraste de blanco y azul bastante llamativo.

Nuevo botón de facebook

Todavía quedan algunos sitios web con el botón antiguo, pero Facebook ha anunciado que paulatinamente, en breve será un cambio total.

Una de las novedades que mejoran la experiencia de publicar en dicha red social, es la posibilidad de añadir un comentario directamente cuando seleccionamos el botón “Compartir”.

nuevos botones de me gusta y compartir en facebook

Sin duda, el ser destacable y funcional es algo fundamental a la hora de utilizar herramientas de compartir información. Según Facebook, se ha notado el cambio en la utilización de los botones en las páginas web.

Startup Bus 2013 y nuestro patrocinado Jordi Cor

Nos encanta escribir sobres profesionales, emprendedores y proyectos fantásticos. Y hoy podemos comentar sobre todo esto a la vez, puesto que hablamos del Startup Bus y nuestro patrocinado Jordi Cor.

Varios representantes de España han ido a desarrollar una startup únicamente durante 3 días y dentro de un autobús con destino a Viena, para así, competir contra el resto de países participantes.

Ruta StartupBus España 2013

Entre ellos, Jordi Cor, al que acceseo patrocina junto con otras entidades, está luchando por sacar adelante el proyecto Moonmetrics, una plataforma inteligente de negocios, la cual mejora la participación de la empresa en el mundo de los medios sociales.

Jordi Cor - Startup Bus España 2013

Moonmetrics

Entre otras startups españolas nacidas en esta aventura, encontramos algunas muy interesantes como Ask For A Concert (traer artistas a tu ciudad) en el participa Santiago MiguelesShot Division (ropa con tecnología NFC) en el que participan Manuel Mas y Aitor Contreras y Departdate (planificar y facilitar conversaciones).

Todo los mencionados son grandes profesionales del sector y mejores personas. Además, como «Revenue Conductor Spain» del Startup Bus español, ha estado Cesar Mariel, que ha tenido que abandonar ya el autobús para irse a Irlanda.

Les deseamos mucha suerte a todos los participantes, y les felicitamos por la oportunidad que están teniendo de vivir esa gran experiencia.

Desde acceseo (Facebook y Twitter) os mantendremos al corriente de las novedades del Startup Bus.

Canales de Youtube y Vimeo de acceseo

Desde acceseo estamos dándole fuerza a las redes sociales de imagen y vídeo. Si la semana pasada ya comentábamos nuestra nueva estrategia con la red social de presentaciones, documentos y vídeos: Slideshare; esta semana informamos que acceseo va a tomar mucha más fuerza en los canales de vídeos más virales actualmente: Youtube” y “Vimeo. ¡Suscribiros para estar al corriente de las novedades!

La mayoría de vídeos y presentaciones son pequeños trucos, guías, definiciones o consejos sobre el mundo 2.0, Internet, tecnología, redes sociales, etc. Pero aparte, os iréis encontrando alguna que otra sorpresa de parte del equipo de acceseo.

Dejamos aquí algunos de los vídeos que ya hemos colgado, y los cuales ya podéis disfrutar, comentar y compartir por donde queráis.

[vimeo http://vimeo.com/77427727 w=650&h=375]

[youtube https://www.youtube.com/watch?v=zL2fpJ-KsEw

Saludos.

16 Obligaciones de un Vendedor On-line

No hace falta explicar que, el Comercio Electrónico (e-Commerce) cada vez está ganando más importancia tanto en España como en el mundo. Las ventajas que ofrece la venta online, han creado un antes y un después en los negocios y empresas.

Pero estar dentro del e-Commerce, condiciona un cambio de mentalidad y por supuesto, un cambio de estrategia y de punto de vista. Las acciones que se realizan en el Comercio Electrónico (como puede ser pagar el producto, o informar de los gastos de envío o ponerse en contacto con el proveedor) no pueden actuar de la misma manera que en el Comercio Tradicional.

Es por ello que, aquí compartimos 16 Reglas o Normas que debe cumplir un buen profesional del Comercio Electrónico (e-Commerce):

  1. Un vendedor on-line se define como un propietario de un negocio que vende a través de Internet.
  2. Un vendedor on-line tiene la obligación de actuar de acuerdo a las regulaciones pertinentes. En caso de cambiar una ley, el vendedor tiene la obligación de adoptar todas las medidas posibles para que actúen de acuerdo con la legislación vigente.
  3. Un vendedor on-line tiene la obligación de proporcionar información de contacto que permita identificarlo totalmente actualizada. La dirección actual del proveedor y el número de teléfono son la información básica y debe de ser fácilmente accesible.
  4. Un vendedor on-line tiene la obligación de publicar los términos de servicio en su sitio web. Un cliente debe de ser capaz de obtener cualquier información sobre el servicio antes de finalizar su pedido.
  5. Un vendedor on-line tiene la obligación de informar con claridad sobre los propósitos de recogida de datos de sus clientes. Se tiene que actuar en base a la normativa de datos de carácter personal para garantizar la seguridad de la información.
  6. Un vendedor on-line tiene la obligación de informar a su cliente sobre el precio bruto, el precio total y las condiciones de entrega, antes de que el cliente tenga que tomar la decisión final.
  7. Un vendedor on-line tiene la obligación de informar a sus clientes acerca de los métodos de pago disponibles y los posibles cargos adicionales de cada método antes de que el cliente tenga que tomar la decisión final.
  8. Un vendedor on-line tiene la obligación de presentar claramente las descripciones actualizadas de los productos ofrecidos y proporcionar una imagen relevante, si es posible.
  9. Un vendedor on-line tiene la obligación de informar a su cliente sobre el plazo de entrega máximo tan pronto como sea posible. Si el tiempo cambia, el cliente debe ser informado al respecto, así como sobre su derecho de retirada en tal situación.
  10. Un vendedor on-line tiene la obligación de informar a su cliente sobre el derecho de desistimiento.
  11. Un vendedor on-line tiene la obligación de garantizar la seguridad de todos los datos transmitidos.
  12. Un vendedor on-line tiene la obligación de confirmar el pedido en un formato de archivo de impresión fácil. En caso de error o fallo, el cliente puede utilizar dicha confirmación como prueba.
  13. Un vendedor on-line tiene la obligación de permitir a sus clientes a comunicarse con él por teléfono, correo electrónico y por medio de un formulario de contacto. Esta comunicación ayuda a confiar en un proveedor determinado.
  14. Un vendedor on-line tiene la obligación de especificar el tiempo de su respuesta y envío del pedido. Si un pedido no se puede realizar, el vendedor tiene la obligación de hacer un reembolso en los 10 días siguientes.
  15. Un vendedor on-line tiene la obligación de especificar claramente los procedimientos y términos de las quejas y los retornos. Los mismos procedimientos se aplican también a las situaciones en las que las quejas o devoluciones no son aceptadas.
  16. Un vendedor on-line tiene la obligación de educar a sus empleados con el fin de estos principios.

Fuente: Smallbiztechnology.com

¿Tienes alguna incidencia?

Cuéntanos qué ocurre
y nos pondremos con ello lo antes posible.

Este sitio está protegido por reCAPTCHA, y la Política de privacidad y Términos de servicio de Google.
Sucríbete a
nuestra newsletter

para estar al día en el mundo online

¡Cuéntanos tus ideas!
+34 96 653 19 14
+info@acceseo.com
He leído y acepto la política de privacidad

Este sitio está protegido por reCAPTCHA, y la Política de privacidad y Términos de servicio de Google.