Diseño Web

Diseño Web, Gestores de contenidos, Webs

OpenX el servidor de anuncios Open Source

/

Si tienes varias páginas web que están empezando a tener accesos, puede que te interese tener ingresos por anunciantes. Esto se puede hacer de muchas maneras, pero OpenX es un gestor Open Source, gratuito (a menos que queramos que lo tengan ellos en sus servidores), que te permite gestionar campañas de anuncios en una o varias páginas web. El comentario de todos los que lo usan es que es muy sencillo, permite dar a los anunciantes acceso a paneles para que gestionen sus anuncios, puedes ver un seguimiento de tus anuncios. Para los usuarios de WordPress también tiene un plugin: http://www.openx.com/community/openx-plugin-for-wordpress Aquí podéis ver un vídeo sobre este gestor: Podéis ver más vídeos en su canal.

Diseño Web, Trucos, Webs

Cómo insertar un pdf en una web

/

Bueno, evidentemente están los métodos de usar lectores de revistas etc, y podemos poner un icono con un pdf para que se descarge, pero en este caso queremos incrustarlo (embed) en la página para que se lea. El código es sencillo en html: Donde ruta es la ruta del fichero (donde esté en Internet) y evidentemente los parámetros de anchura y altura pueden cambiarse, así como el aviso de “It appears…”. Esto es con código html, también puedes hacerlo con Javascript, para lo que necesitas descargar un fichero java como http://pdfobject.com/  (descargar el js aquí). Esto es lo que básicamente funciona. En pdfobject tenéis un generador de código: http://pdfobject.com/generator.php que os puede ayudar con muchas opciones sobre cómo abrir el pdf y demás. Nota: No perdáis el tiempo en intentar ajustar el pdf al contenedor (div, iframe etc). Parece ser que las instrucciones que están ahí (Fit, FitB etc), funcionaban antes en IE pero los navegadores actuales no les hacen ni caso. Otra opción interesante es pasar todo el pdf a imágenes y usar un slideshow para pasarlas.

Diseño Web, Gestores de contenidos, Trucos

Evitar que la plantilla de WordPress se actualice

/

A veces hacemos alguna página web para clientes, y muchas en WordPress. Y nos ha pasado que después de semanas de trabajo y de personificación de la plantilla para el cliente, después de entregada, al cabo del tiempo nos encontramos con que el cliente ha actualizado la plantilla y los cambios se han ido al traste. A ver, no es culpa del cliente, este actualiza con toda la buena voluntad del mundo, y mantener todas las partes del wordpress es importantísimo para la seguridad de tu web. Pero claro, si esta va a cambiar de aspecto radicalmente no es muy buena idea. Así que aquí os dejo dos maneras de evitar que el WordPress diga que tienes que actualizar tu plantilla: Cambiar el directorio de nombre: Con que cambies por FTP el nombre del directorio de la plantilla, WordPress ya no detecta que es esa para actualizar. Sin embargo verás como si la reconoce como plantilla y la llama igual. Esto está bien para afectar sólo a una plantilla, y es un método muy fácil. Plugin: El plugin Disable WordPress Themes Updates hace esto mismo pero es para todas las plantillas. Es algo más radical por lo tanto y puede crear más puntos con poca seguridad (plantillas no actualizadas), pero es que hay plantillas que dan error si están en otro directorio. En estos casos por ejemplo nosotros lo instalamos y quitamos el resto de plantillas.  

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.

Scroll al inicio