Diseño Web

Diseño Web, Gestores de contenidos, Seguridad

Website Defender: Plugin para analizar y mantener seguridad en WordPress

/

Cada día hay más webs en WordPress y más complejas. Obviamente esto hace que sea un objetivo para malware, hackers etc. Website Defender te ayuda a mantener la seguridad de tu sitio con WordPress. Analiza tu sitio, te da un reporte sobre seguridad de las contraseñas, posibles virus o malware en tu sitio web, comprueba la base de datos para ver fallos de seguridad, posibles cuentas sospechosas y mucho más. Obviamente no es una seguridad total, eso no existe, pero te permite cerrar más tu web y tener un mecanismo de verificación periódico, para estar más tranquilo.  Y en teoría sin impactar al rendimiento.

Diseño Web, Trucos, Webs

Editor online de gradiente de colores CSS

/

Me encantan estos editores online de CSS. Te permiten hacer algo, como en este caso poner un degradado de colores en un elemento de una página web (por ejemplo una barra de menu) con un montón de configuraciones. Esto se puede hacer “a mano”, pero ¿quién se acuerda de todas las opciones de código? De esta manera podemos poner un efecto bonito y mejorar mucho la página de manera muy sencilla y visual.  Con la ventaja que te pone el código para diferentes navegadores y versiones viejas de IE (por si alguien lo usa). Por cierto que otra cosa que aprovechas al usar estos editores es a aprender nuevas opciones, porque no sabía que se le podía poner tantos efectos. http://www.colorzilla.com/gradient-editor/

Diseño Web, Webs

Dos herramientas web más para programadores: JSFIDDLE y CSSDESK

/

Hace unos días os dejamos una herramienta online que te permitía ver los cambios de html y css que escribías a tiempo real, además de compartirlo con gente, salvarlo etc: JSBIN. Para aquellos que programéis os dejamos dos más, una en JavaScript y otra en CSS. http://jsfiddle.net/  Lo bueno de Jsfiddle es que no sólo puedes programar con Javascript y html (y verlo) sino que también con las librerías  tipo Jquery, Mootools y muchas más, lo que le da una gran potencia y versatilidad. http://www.cssdesk.com/ es más básico, “simplemente” un entorno donde puedo meter html y CSS y ver los cambios en la pantalla lateral. Eso si, por ser tan simple es muy cómodo, útil y rápido. Además no tienes que llevarte tu programa de programación a todos lados.  

Diseño Web, Gestores de contenidos, Redes Sociales, Webs

Encuentra tu ID de Facebook

/

Cuando estás haciendo webs y quieres poner un widget o plugin, éste suele pedirte el ID de Facebook (de tu página, de tu grupo o tu perfil). Antes era fácil de encontrar…ahora no tanto. Os dejo dos maneras de encontrarlo: http://findmyfacebookid.com/  Es una página donde poner la url de tu página de Facebook, grupo o perfil y te devuelve tu ID. Rápido y sencillo. En tu página también puedes ir a editar página (arriba), editar configuración y verás en la barra de las direcciones la id que buscas /?id=……  

Diseño Web, Gestores de contenidos, Trucos, Webs

Crear un fichero robots.txt

/

¿Cómo indexan los buscadores tu página web? Bueno, el proceso es algo más complicado pero tiene unos programas que van recorriendo la web (siguiendo enlaces y viendo lo que hay), almacenando las direcciones y actualizando su base de datos. Estos programas los llamamos robots (en un alarde de creatividad) y por defecto te analizan toda tu web. Pero puede pasar que tu no quieras que aparezcan ciertos resultados en los buscadores (una carpeta temporal, una carpeta de datos, los resultados de la búsqueda) o incluso que queramos decir a estos robots dónde están ciertas cosas que SI quiero que me indexen. Para eso usamos el fichero robots.txt. Ventajas: -Evita contenido duplicado. -Evita que se indexe contenido “restringido” o privado. -Aumenta la importancia de las páginas que queremos indexadas. -Evita que aparezcan en Google las carpetas del sistema. -Evita que el servidor mane 404 cuando el robot busca el fichero robots.txt. Creamos un fichero robots.txt en la raíz de la web, en formato texto plano. Y aquí os dejamos algunos ejemplos. Si queremos permitir el acceso de los robots a toda la web: User-agent: * Disallow: Si quieremos prohibir el acceso de los robots a toda la web: User-agent: * Disallow: / Un ejemplo sencillo de un fichero robots.txt podría ser: User-agent: * Disallow: /cgi-bin/ Disallow: /*.js$ Disallow: /*.css$ # Google Image User-agent: Googlebot-Image Disallow: Allow: /* # Google AdSense User-agent: Mediapartners-Google* Disallow: Allow: /* User-agent identifica el robot sobre el que queremos actuar. Como vemos aquí tenemos unas exclusiones de ficheros (*.css y *.js) y de un directorio (cgi-bin) y permitir todo para Google Image y Adsense. Las líneas marcadas con # son comentarios para nosotros los humanos. Si queremos indicarle a los robots dónde está el fichero sitemap (muy importante tenerlo): Sitemap: http://www.dominio.com/sitemap.xml Y  para prohibir que aparezcan los resultados de las búsquedas en la página en los buscadores: Disallow: /*?* Disallow: /*? Si tienes un gestor de contenidos muchos plugins te permiten hacer este fichero automáticamente.

Diseño Web, Información Tecnica

Tutorial de .htaccess

/

En cuanto te pones a hacer páginas web, redirecciones o manejar un poco dominios, tienes que editar el fichero .htaccess, para poder modificar los parámetros de apache o php. Y no es fácil, porque tiene una sintaxis muy determinada y, como siempre en estos casos, o das con la clave o puedes liarla.   Os dejamos cómo redirigir a una url. En este caso para redirigir sin www a con www: RewriteEngine On rewriteCond %{HTTP_HOST} ^tudominio.com [NC] rewriteRule ^(.*)$ http://www.tudominio.com/$1 [R=301,L] Y aquí para redirigir el www a la de sin: RewriteEngine on RewriteCond %{HTTP_HOST} !^$ RewriteCond %{HTTP_HOST} ^www.(.+)$ [NC] RewriteRule ^/(.*) http://%1/$1 [L,R=301]

Diseño Web, Gestores de contenidos

Artisteer, crea plantillas para tus gestores de contenidos (wordpress,joomla etc)

/

Artisteer es un editro gráfico del tipo WYSIWYG (lo que ves es lo que obtienes), pero no para crear páginas web, como está ahora de moda, sino para crear plantillas web. Es decir te permite cambiar el look de tu página si lo tienes en gestores de contenidos, manteniendo el contenido y sin tener que rehacerlo. Te quita todo el “lío” del html y te permite diseñar tus propias plantillas. Estas se pueden luego salvar para varios gestores de contenidos como Blogger, Joomla, WordPress etc. Puedes trabajar con ellas, partiendo desde cero o desde unas pases prefijadas, modificarlas, previsualizarlas y luego exportarlas al formato que quieras. Tiene un periodo de prueba gratuita con la limitación de no poder salvar proyectos.

Diseño Web, Webs

Piwik: análisis web de código abierto

/

Piwik es una alternativa de código abierto a Google Analytics, es decir una herramienta que te informa acerca de las visitas a tu página web. Dentro de las opciones de análisis web Piwik tiene todos los informes que buscas, pero además permite programar envíos de informes por email (algo muy útil para los clientes). Hay más de 500 opciones así que no vamos a entrar en todas ellas. Os dejamos un vídeo sobre su uso. Nosotros vamos a probarlo lo antes posible.

Diseño Web, Redes Sociales, Webs

Elgg: crea tu red social

/

Si quieres crear una red social tipo Tuenti, Facebook etc, para poder colaborar con tus amigos, compañeros de empresa, familia etc, hay muchos programas para ello. Uno de los más famosos es Elgg. Con Elgg puedes gestionar tu sitio, crear grupos, usuarios, objetos y sitios y gestionar las relaciones entre ellos, crear niveles de acceso, tiene soporte para internacionalización, permite aplicaciones para móviles, APIS y desarrollo de widgets, plugins y aplicaciones. Y los requisitos no son demasiado exigentes: http://elgg.org/requirements.php Muchas organizaciones usan este motor para sus intranets o redes interenas: http://elgg.org/powering.php.      

Diseño Web, Webs

JSBIN: banco de pruebas online para programadores Web

/

Descubrimientos como estos nos alegran el día a los frikis que nos dedicamos a la programación o desarrollo web. Una página donde puedes poner código html, CSS o Javascript y ver los resultados en una ventana al lado. La web tiene ya un tiempo pero el autor no ha estado quieto. Hay un plugin para firefox: https://addons.mozilla.org/es/firefox/addon/easy-jsbin/ y se pueden hacer muchos extras como compartir, customizar el editor y mucho más. Podéis ver muchas de las opciones en el blog del autor sobre la herramienta: http://jsbin.tumblr.com/ Ahí tenéis vídeos como este sobre customizar el editor:  

Scroll al inicio