Marco de trabajo Web

Hoy en día el flujo de trabajo para desarrollo Web se ha vuelto muy complejo, se usan muchos lenguajes, herramientas, compiladores, plugins, widgets, gestores de contenido, lenguajes front-end, lenguajes back-end, controladores de versiones, etc.. Pelearse cada vez con todo esto es muy tedioso, así que poco a poco vas adaptando o evolucionando tu marco de trabajo Web para que no repercuta en tiempos y eficiencia.

Mis Herramientas y el marco de trabajo Web

Hay herramientas y marcos de trabajo alternativos (sublimetext, gulp, terminal…), aquí voy a comentar las herramientas que yo utilizo desde ya hace unos añitos como marco de trabajo Web para desarrollo: Coda2, CodeKit, MAMP y SourceTree. Son herramientas que han ido evolucionando con los tiempos, y con ello yo he ido adaptandome a esa mejoras.

Coda, Codekit, Mamp, SourceTree
Continue reading «Marco de trabajo Web para desarrollo: Coda2, CodeKit, MAMP y SourceTree»

Captura de la home de DISQUS

Al hilo de una pregunta del señor Sotoca de Criterion voy a repasar este tema de la Implementación de DISQUS en WordPress, pues creo que hace ya un par de años que implemente DISQUS como sistema de gestión de comentarios en aurea.es, por aquel entonces ningún problema. Pero no siempre es así, en otras implementaciones me ha dado errores a la hora de importar los datos, principalmente en aquellos WordPress que tengan antigüedad. Los errores son causados generalmente por el sistema de codificación de caracteres donde se dan divergencias.

Primero de todo un backup general (base de datos y ficheros), más vale que sobre que no falte.

Del lado de DISQUS

  1. Añadimos nuestro sitio desde disqus.com, y en el admin de disqus > “add new site”.
  2. Configuramos las preferencias del “new site” en disqus, https://site.disqus.com/admin/settings/
  3. Incluimos los moderadores, https://site.disqus.com/admin/settings/moderation/
  4. Añadimos filters por seguridad, https://site.disqus.com/admin/settings/access/#!/?l=blacklist

    Ejemplo de filter:

    .*fuck.*, .*whore.*, 5h1t, 5hit,
    , a55, alert, anal, anus, ar5e, arrse, arse, ass, asses, assfukka, asshole.*, b!tch, b00bs, b17ch, b1tch, ballsack, bastard, beastial.*, bestial.*, bi+ch, biatch, bitch.*, blow job, blowjob, blowjobs, body, bollock, bollok, boner, buceta, bukkake, butthole, buttmunch, buttplug, c0ck, c0cksucker, carpet muncher, chink, cl1t, clit, cock, cock-sucker, cockface, cockhead, cockmunch.*, cocks, cocksuck.*, cocksuka, cocksukka, cok, cokmuncher, coksucka, coon, cox, cum, cummer, cumming, cums, cumshot, cunilingus, cunillingus, cunnilingus, cunt, cuntlick.*, cunts, cyalis, cyberfuc, d1ck, dick, dickhead, dirsa, dlck, donkeypunch.*, doosh, duche, dyke, ejaculat.*, ejakulate, f u c k, f u c k e r, f_u_c_k, fag, fagging, faggitt, faggot, faggs, fagot, fagots, fags, fatass, fcuker, fcuking, feck, fecker, felch.*, fellate, fellatio, flange, fleshflute, fook, fooker, fudge packer, fudgepacker, fuk, fuker, fukker, fukkin, fuks, fukwhit, fukwit, fux, fux0r, gangbang.*, gaylord, gaysex, goatse, hardcoresex, hell, heshe, hoar, hoare, homo, horniest, horny, hotsex, jack-off, jackoff, jap, java, javascript, jerk-off, jizz, kike, knob, knobead, knobed, knobend, knobhead, knobjocky, kondum, kondums, kum, kummer, kumming, kums, kunilingus, m0f0, m0fo, m45terbate, ma5terb8, ma5terbate, masochist, master-bate, masterb8, masterbat.*, mo-fo, mof0, mofo, muff, mutha, muthafecker, nazi, nigga, niggah, niggas, niggaz, nigger, niggers, nob, nob jokey, nobhead, nobjocky, nobjokey, numbnuts, nutsack, orgasim, orgasims, orgasm, orgasms, p0rn, phonesex, phuck, phuk, phuked, phuking, phukked, phukking, phuks, phuq, pimpis, poop, porn, porno, pornography, pornos, prick, pricks, pube, pusse, pussi, pussies, pussy, pussys, rectum, retard, rimjaw, rimming, s_h_i_t, sadist, schlong, screwing, script, scroat, scrote, scrotum, semen, sex, sh!+, sh!t, sh1t, shemale, shi+, shit, shitdick, shite, shithead, shiting, shitings, shits, shitted, shitter.*, shitting.*, shitty, skank.*, slut, sluts, smegma, smut, snatch, son-of-a-bitch, spic, spunk, t1tt1e5, t1tties, tit, tits, titt, tittie5, titties, tittywank, titwank, tosser, tw4t, twat, twathead, twatty, twunt.*, v14gra, viagra, wank.*, whoar, willies, xrated, xss, xxx
    
  5. En opciones avanzadas también podemos ir al link de API donde crear una app para las opciones especiale que podamos integrar, https://disqus.com/api/docs/categories/

Del Lado de WordPress

  1. Instalamos (desde wp-admin > añadir plugin), el plugin oficial de disqus.

  2. Desde wp-admin > comentarios > plugin settings. Establecemos la configuración básica.

  3. Para migrar los comentarios hay dos formas, a mi la que menos errores me da y más rápida me parece es:

    1. Exportar de WordPress los comentarios (fichero WXR): wp-admin >tools > export.
    2. Importar en disqus subiendo el fichero WXR resultante de la exportación.

Conflictos

Como decía, a veces se producen errores relacionados con el sistema de caracteres. DISQUS nos dirá el error y con nuestro gestor de código preferido podemos buscar ese patrón erróneo y remplazarlo por el bueno en el fichero XML. Cuando estén solucionados todos los errores volvemos a importar. Si se dan muchos errores sería más rápido atajarlos con querys a la base de datos o cambiando la codificación de caracteres de ese campo o tabla en la base de datos.

formacion+alumnosigualproyectos

La verdad es que tenía pendiente este post desde hace un par de semanas para recordar el curso de wordpress, pero… bueno ya se sabe y claro ya se me han adelantado 🙂

La cuestión es que de aquel curso que hemos impartido @qmarcos de [Q]Interactiva y yo a través del CEPA Olloniego ha dado sus frutos (al poco tiempo), y menudos frutos!!!

Como no podría contarlo de mejor forma, os dejo por aquí los enlaces que hablan de ello.

seguridad-en-wordpress

1. Tu equipo y tu conexión segura antes que la seguridad en WordPress

  • Parece obvio, pero no lo es tanto. Esto es lo primero antes de meternos con la seguridad en WordPress.
  • Usa sFTP.
  • Accede al panel de administración de tu WordPress, únicamente desde tu conexión y equipo habitual (entendiendo que ambos son completamente seguros).

2. Backups

Realizar copias periódicas de seguridad tanto de los ficheros como de la base de datos de nuestro WordPress.

3. WordPress

  • Descargar WordPress de su web oficial: http://wordpress.org
  • Siempre actualizar WordPress tras la salida de una nueva versión.

4. Plugins

  • Ser conscientes de que los plugins son códigos realizados por terceros programadores.
  • Usar los plugins estrictamente necesarios y de total confianza para nuestro proyecto.
  • Solo descargar del sitio oficial: http://wordpress.org/plugins/.
  • Tener las últimas versiones de los plugins almacenado en nuestro WordPress (esten activos o no).
  • Quitar del servidor todos los plugins que no usemos.
  • Saber que cuanto más plugins, más vulnerabilidad y menor escalabilidad tendremos.

Hay solo un plugin que si consideraría implementar para la seguridad en WordPress:

  • Better WordPress Security: Asegura tu WordPress en pocos minutos. Chequea, recomienda y facilita la configuración más segura.

5. Themes

  • Usar un buen theme, bien programado y de confianza.
  • Tener las últimas versiones de los themes almacenado en nuestro WordPress (esten activos o no).
  • Solo usamos un theme, quitar del servidor el resto.

6. Ficheros y permisos

7. Base de datos

  • Cambiar el prefijo por defecto de WordPress para las tablas «wp_» por uno más complejo.

8. Editar htaccess, wp-config.php y functions.php

.htaccess

A continuación he reunido algunos códigos para evitar posibles puntos flojos de seguridad y protegernos más del spam.
Sustituir *yourdomain.com.* por nuestro dominio en el código del apartado «# For AntiSpam Deny Access to No Referrer Requests».
Estos códigos deben incorporarse al fichero .htaccess del directorio raíz de nuestra instalación de WordPress.

# BEGIN SECURE
# Block Sensitive Files from Browser 
Options All -Indexes
<files .htaccess>
Order allow,deny
Deny from all
</files>
<files wp-config.php>
Order allow,deny
Deny from all
</files>
<files error_log>
Order allow,deny
Deny from all
</files>
# Block the include-only files.
RewriteEngine On
RewriteBase /
RewriteRule ^wp-admin/includes/ - [F,L]
RewriteRule !^wp-includes/ - [S=3]
RewriteRule ^wp-includes/[^/]+\.php$ - [F,L]
RewriteRule ^wp-includes/js/tinymce/langs/.+\.php - [F,L]
RewriteRule ^wp-includes/theme-compat/ - [F,L]
# Disable the Server Signature 
ServerSignature Off
# For AntiSpam Deny Access to No Referrer Requests 
RewriteEngine On
RewriteCond %{REQUEST_METHOD} POST
RewriteCond %{REQUEST_URI} .wp-comments-post\.php*
RewriteCond %{HTTP_REFERER} !.*yourdomain.com.* [OR]
RewriteCond %{HTTP_USER_AGENT} ^$
RewriteRule (.*) http://%{REMOTE_ADDR}/$ [R=301,L]
# END SECURE

wp-config.php

Usar claves secretas y únicas de autenticación:

  1. Puedes generar las claves de forma aleatoria a través de la API de WordPress.
  2. Una vez generadas ponlas en tu fichero wp-config.php.
  3. Puedes cambiar las claves en cualquier momento para invalidar todas las cookies existentes. Esto forzará a todos los usuarios a volver a hacer login.

Desactivar la opción de editar ficheros desde wp-admin:

define('DISALLOW_FILE_EDIT', true);

Forzando el login seguro con SSL:

define('FORCE_SSL_ADMIN', true);

functions.php

Eliminar la versión de WordPress:

function wpsecure_remove_version() { return ''; }
add_filter('the_generator', 'wpsecure_remove_version');

9. Usuarios registrados

Super admin y administradores

  • Cambiar el usuario por defecto de WordPress admin por otro username más complejo.
  • Un solo administrador es más que suficiente.
  • El admin en especial debe tener una contraseña compleja. Por ejemplo 20 caracteres que incorpore números, letras y signos.

Resto de usuarios

  • Revisar los roles de usuarios en WordPress.
  • No todos tienen que ser «editores», probablemente puedan ser «autores».
  • El product manager o coordinador si podría tener el rol de «editor».
  • ¿Realmente necesitas usuarios anónimos «suscriptores» de tu WordPress?. Si no es así fuera con ellos, quien quiera suscribirse lo hará por feed con programas a tal efecto como feedly.
  • Ojo con activar la opción para permitir el registro de usuarios anónimos que se encuentra en wp-admin > ajustes > general.

10. Comentarios y Spam

La mayoría de opciones a tratar en: wp-admin > ajustes > comentarios

  • Obligatorio activar la opción de rellenar nombre y email para comentar.
  • Obligatorio usar un plugin antispam como akismet.
  • Obligatorio incluir en la blacklist palabras típicas de spam.
  • Preferible marcar la opción para que un administrador apruebe el comentario antes de ser publicado.
  • También podemos usar un sistema de comentarios externo como DISQUS, más seguro y dinamizador.

Referencias para la seguridad en WordPress

cookieslaw

Image by ssoosay

Llevo un par de días dando alguna vueltas a la ley de cookies, salió el tema a raiz de @chavalina y el post ley de cookie en error500.

Lo primero de todo decir que soy desarrollador web, no abogado, pero me toca este asunto, así que voy a dar mi opinión y a meterme de paso en camisa de once varas. 😳

Ley de cookies

Esta ley obliga a los propietarios de sitios web a informar de forma clara y obtener el consentimiento por parte del usuario para la utilización de cookies, justo antes de su carga en la página.

¿Quién cumple la ley de cookies?

Después de rastrear mucho la red, no acabo de encontrar ninguna solución ya implementada, que cumpla al 100% la ley de cookies, al menos en su interpretación estricta y en sitios de cierto nivel tecnológico. Seguro que por el gravísimo impacto que pueda ocasionar sobre el desarrollo, el poscionamiento del sitio web, su analítica o el socialmedia.

Ejemplo de web que cumpliría la ley

Supongamos que llegas a una página de entrada, y esta hace un bloqueo de cookies de antemano (interpretación estricta de la ley). Luego muestra un mensaje para pedir el consentimiento del usuario sobre unas cosas llamadas «cookies» donde se dice que es para mejorar su experiencia de navegación y hacer un seguimiento de las visitas.

Lo más seguro es que el usuario diga que NO, repercutiendo en una perdida de trafico tremenda e inviable para cualquier empresa.  🙁

Así que en definitiva veo técnicamente imposible la implantación estricta de la ley sin una repercusión dramática. No podría aparecer la web cargada correctamente con sus widgets de facebook, twitter, analytics, botones de compartir, etc. Funcionalidades que para muchos son obligatorias para una buena marcha del negocio frente a la competencia.

Posible solución

Puede ser una interpretación de la ley más liviana, donde en el momento que el usuario acceda al sitio web, nos aseguramos de informarle con un breve mensaje sobre el uso de cookies (técnicas, propias y ajenas) y su confirmación implícita al continuar navegando por nuestro sitio web.

También sería necesario mostrar un enlace a más información sobre la «política de cookies» para que el usuario pueda conocer de forma detallada cada cookie y su función.

Se trataría sobre todo de ser transparentes y de demostrar un buen hacer con el usuario, sin otras intenciones.

Ojo, sería importante que el proveedor conozca todas las cookies que estamos enviando, para así saber si se excede en la recopilación de datos y que estos no son de carácter personal.

Plugins para WordPress

Creo que los he probado todos. Mis dos preferidos son:

  • Cookie Warning: Es el más restrictivo, impone un popup y permite el borrado de las cookies.
  • Cookie Law info: Muestra un mensaje y no resulta tan drástico como el anterior, mi preferido por esta razón.

Noticias recientes

Opinión personal sobre la ley

Me parece que este tipo de mensajes asustan más que la transparencia y legalidad que puedan aportar.
Por una parte tiene sentido, pero por otra si seguimos así ya solo falta que el usuario arranque su navegador y le aparezca: Cuidado!!! esta apunto de navegar y adentrarse en el infierno. Esta seguro de que desea que su navegador guarde el historial (por eso de poder ir a la página anterior…).

Y en un futuro

No le veo mucho recorrido a la ley, solo hay que darse una vuelta por internet para darse cuenta del casi total incumplimiento de miles y miles de sitios web. Además de ponernos en desventaja con otros países donde no existen leyes tan restrictivas.

The stupid cookie law is dead at last

Más información en: Cómo cumplir la Ley de Cookies

wordpress

Marcos de q-interactiva y yo, nos volvemos a embarcar en una nueva aventura profesional, esta vez de la mano de CEPA (Centro de Enseñanza y Producción Audiovisual).

Se trata de un Curso de WordPress, donde estudiaremos este gestor de contenidos y crearemos fácilmente un sitio web o blog.

NO se requiere conocimientos técnicos, ni avanzados, nos bastará con el típico «a nivel de usuario» y muchas ganas de querer tener un sitio web propio.

Continue reading «Curso de WordPress»

Aunque recientemente ha salido la versión 2.9 de WordPress voy a comentar un importante giro de la versión 2.8 que se vuelca en la accesibilidad de la estructura de contenidos.

Una de las nuevas características de WordPress es la incorporación de los conocidos landmarks de WAI-ARIA, añadidos a través del atributo role al theme por defecto de WordPress. De esta forma se especifican los roles de las diferentes zonas funcionales del blog haciendo que sea más semántico y accesible.

Los landmarks que WordPress ha incluido en su theme por defecto son: main, contentinfo, banner, complementary y navigation.

Sin duda se trata de una gran apuesta de WordPress volcada a mejorar la accesibilidad de sus blogs.

El problema de la validación XHTML W3C

Esta importante actualización que viene integrada en el theme por defecto de Wrodpress plantea un problema de validación. Las especificaciones HTML 4.01 y las DTD no contemplan aún los landmarks de ARIA y esto hace que nuestro blog no pase positivamente el test de validación W3C.

Para solventar este problema podemos eliminar los atributos role del theme e inyectarlos por medio de JavaScript en tiempo de ejecución.

Inyectando landmarks de ARIA con jQuery

$(document).ready(function() {
	$('#content').attr('role', 'main');	
	$('#footer').attr('role', 'contentinfo');
	$('#header').attr('role', 'banner');
	$('#sidebar').attr('role', 'complementary');
        $('#sidebar ul').attr('role', 'navigation');
	$('#searchform').attr('role', 'search');
});

Sencillamente tomamos los elemento a partir de sus IDs (identificadores) e inyectamos la propiedad role con el valor que representa a cada una de las zonas funcionales role="navigation".
La última línea es un añadido que se encarga de inyectar el landmark del clasico buscador de WordPress.