Diseño Web

Diseño Web, Webs

Mete contenido externo en tus webs: Embed Responsively

Para los que usamos páginas webs (tanto diseñando como escribiendo artículos como la web de tu empresa), muchas veces meter contenido externo es un problema. Que si no coge bien el código, que si no se ve bien….Al final retocando lo consigues….pero pierdes mucho tiempo. Esto intenta resolver http://embedresponsively.com/ , una página en la que pones la url del vídeo de Youtube, Vimeo, Dailymotion…o la url de Google Maps, Instagram y alguno más y te da exactamente el código necesario para meterlo en tu web y cómo se vería. Sencillo y sin romperse la cabeza. También puedes descargar embedresonsively y modificarlo tu desde Github.  

Android, Diseño Web, Sistemas, Smartphones

Monitorizar una web desde tu móvil

Para los que trabajamos con webs, en ocasiones es interesante saber, durante periodos de tiempos concretos, cuándo se ha caído para dar un tiempo de respuesta rápido a esa caída. Tiempos en los que que la web esté online sea esencial. Por ejemplo puedes tener una tienda de la que dependan tus ventas y no quieras que se caiga, o un evento durante el cual todos los asistentes acudan a la misma. Por ejemplo hora tenemos un cliente con un evento que dura dos semanas y durante las cuales es esencial que la web esté arriba. Para monitorizar existen muchas soluciones. El servidor puede avisarte (pero y si se “congela”), puedes poner soluciones cliente/servidor (pero cargas el servidor) o puedes usar soluciones de Internet (como algunas que diremos en los próximos días).  Pero una solución muy útil es tener una aplicación en el móvil que te avise cuando se caiga la web. Porque al fin y al cabo el móvil es lo que llevas encima siempre. Os doy dos: Website Monitor: El que estoy usando ahora. Muy útil, permite agregar varias webs, y avisa cuando recibe un estado diferente de 200 (HTTP OK). Puedes poner cada cuanto tiene que comprobar el estado y el tipo de aviso (tipo de tono de llamada). Además puedes decirle que avise hasta que le des a la tecla para que pare (tipo alarma). A veces el servicio me da algún error pero por lo demás funciona sin problemas.   Site Checker:  Muy similar al anterior con opciones casi idénticas y también dispone de una versión pro por si quieres usar los servicios añadidos de la misma.      

Diseño Web, Webs

Color Scheme designer: elige colores para tu web

Una de las cosas que más nos cuesta a la gente técnica a la hora de tratar temas de diseño es elegir colores. Yo distingo poco más que los colores básicos 😀 Pero evidentemente esto no es suficiente cuando estás haciendo el proyecto de un cliente. Así que usamos herramientas que faciliten un poco la vida, como esta de Color Scheme Designer. La herramienta en modo básico es muy sencilla de usar, eliges un color y te da la gama cromática que puedes usar alrededor de ella con sus códigos de color. Puedes ver los resultados hasta desde el punto de vista de gente con daltonismo. Y luego exportar a paletas de GIMP y Photoshop. Para cosas más avanzadas os dejo un vídeo sobre como usarlo.

Diseño Web, Webs

Emuladores de iPad online

En ocasiones nos piden que probemos cómo se ven ciertas web en iPad. Nosotros no tenemos iPad ni queremos tenerlos, así que, aunque puede haber ciertas diferencias, os dejamos aquí una serie de emuladores online desde los que podéis ver cómo se vería en uno de estos dispositivos: http://ipad-emulator.org/  Básico, sólo para ver webs pero suficiente. http://www.alexw.me/ipad2/  Alucinante, emula hasta desbloquear la pantalla. Se lo han currado. http://ipadpeek.com/  También muy bueno.

Buscadores, Diseño Web, SEO

Herramientas para comprobar enlaces

Una de las cosas que más cuentan en el SEO son los enlaces (de calidad). Al principio es difícil conseguir enlaces, y una manera de sacar ideas para ello es hacer “ingeniería inversa” con la competencia. Es decir mirar dónde ha puesto la competencia (competencia que tenga buen posicionamiento claro) los enlaces y hacer lo mismo. Copia lo que esté funcionando bien. Eso si, cuidado que algunos están ahí por enlaces “fraudulentos” que “hayan colado” en Google hasta ahora pero que con las revisiones continuas de Google pueden penalizar. Usad vuestro sentido común y poned enlaces RELEVANTES. Os dejamos algunas herramientas para ello. La mayoría te deja hacer un análisis sin registrarte, o uno al día. Muchos de ellos te permiten ampliar eso gratis una vez que te registras. Recomiendo usar más de una en tu web: Open Site Explorer: Muy recomendable…sólo una al día. Ahrefs: Muy sencillo y claro de usar. Majestic SEO: Hay que registrarse (gratis) pero es de las más recomendables. Link Diagnosis. Rapid Searchmetrics.

Buscadores, Diseño Web, SEO

Dos guías de SEO (posicionamiento) gratuitas y para “tontos”.

Nos tenemos que pasar mucho tiempo explicando conceptos básicos de SEO (posicionamiento) a muchos clientes. Como dice una de estas guías hay poca cultura SEO, y mucho anuncio imposible de “te coloco el primero por 60€”. Bueno, si tienes una tienda web, una página o quieres informarte respecto a esto, os dejamos dos lecturas recomendables: dos manuales SEO “para que nos entendamos todos”. Primero el ebook “SEO para los que no son SEO”, elaborado por Websa100. Y luego un manual de una empresa que se está moviendo mucho por las redes sociales, puede que hayáis visto sus anuncios en Facebook: Rebeldes Marketing Online. En esta última podréis descargaros de aquí la “Guía Rebeldes del Seo”, una guía que recomiendo leer. Ambos, junto con los vídeos de Marketing Activo del otro día, son aportes de empresas que podemos usar para mejorar nuestros conocimientos básicos de posicionamiento en buscadores. Para ver que no son fórmulas mágicas, sino indicaciones muy lógicas y que requiere esfuerzo y trabajo constante (para una recompensa muy golosa…que nos vean en Internet rápido). Cuando me preguntan: ¿cómo puedo aparecer en la primer página de Google?, siempre digo ¿qué aportas tu para merecértelo? Recordad no preguntéis que puede hacer mi país por mi sino qué puedo hacer yo por mi país. 😀 Las palabras son: Generar contenido y Relevancia.    

Diseño Web, Redes Sociales, Trucos

WordPress: añadir el muro de una página de Facebook de manera sencilla

Últimamente añadir a tu página web un muro de una red social está volviéndose complicado, ¡con lo sencillo que era antes! Ahora que si vete al sitio de desarrolladores, consigue la ID de la API, blablalbla. Imagínate un particular llevando su web. Después de la solución para Twitter, os dejamos la de Facebook que también es sencilla. Vete al like box de desarrolladores de Facebook: https://developers.facebook.com/docs/reference/plugins/like-box/ Elige entre las, pocas, opciones que tienes para personalizar cómo se muestra. Asegúrate marcar la de Show Posts. Pincha en Get Code para que te de el código. Hay varias opciones y te dice cómo hacerlo para cada una, la más sencilla es el iframe. Vete a Apariencia, Widgets y pon un widget de texto donde quieres que aparezca el muro de Facebook. Pega el código y ya está. También puedes poner este código en una página o en una entrada pegándolo en la pestaña texto de la misma.

Diseño Web, Redes Sociales, Trucos

Vaciar cache que tiene Facebook de tu página web

El otro día estábamos con la web de un cliente, y cada vez que compartíamos en Facebook la página, una vez subida, daba un “página alojada con el proveedor”. No había manera de cambiarlo. Supusimos que era cosa de un caché de Facebook, esperamos unos días y nada. Si te pasa lo mismo, que al compartir contenido de tu página no aparece como quieres, esta es la solución. Te enseñamos a vaciar el la caché que tiene Facebook de tu página. Para ello debemos ir a la herramienta Debugger de Facebook: https://developers.facebook.com/tools/debug/ Ahí tenéis un hueco en blanco para poder poner la dirección de tu web. Ponla y pincha en el botón de Depuración. Esto forzará a Facebook a “releer” tu web y se limpiará la caché. Además te de mucha información que puede ser de utilidad. No hace falta que hagas nada más, cierra eso, vete a Facebook y pon tu página. Ahora verás que ya debería estar solucionado.    

Diseño Web, Webs

Dos generadores de CSS más online

Ya hemos puesto varios generadores de CSS online, como el de gradientes o el de bordes redondeados. La verdad es que para los que hacemos web son muy útiles porque te deja no recordar de memoria los códigos, ver los cambios en tiempo real e incluso la compatibilidad con cada navegador. Hoy os dejo dos más: Box Shadow Generator:  Para conseguir el código para crear sombras en divs. Muy fácil de usar y muy intuitivo. http://css3generator.com/  tiene varios generadores, desde el de sombra de texto, sombra de cajas, bordes redondeados y muchos más. Un todo en uno. CUIDADO con la compatibilidad. Alguno de sus efectos, aunque chulos, no son compatibles con todos los navegadores, algunos sólo lo son con Opera.  

Diseño Web, Gestores de contenidos

Insertar paginación en tu plantilla de WordPress

Ayer tuvimos que lidiar con una plantilla de WordPress que no paginaba. Aquí fue cómo lo arreglamos. La página que más te puede ayudar es esta, aunque hay otras maneras de hacerlo como esta, o con un plugin. A nosotros nos gusta controlar más las cosas. Vete al editor y edita la página personalizada que has creado. Ahí tendrás una parte superior con un header (optativo):   <?php get_header(); ?>. Justo después el título de la página. Después un código que busca las entradas. Esto hay dos maneras, con wp_query() y query_posts(), os aconsejo el segundo. Si no has puesto un filtro estará en blanco, os pongo el nuestro. <?php $args = array( ‘posts_per_page’ => 5, ‘category_name’ => ‘blog’, ‘paged’ => $paged, ); query_posts($args); ?> Esto lo que hace es “muestra 5 posts por página, de la categoría blog y los paginas. Esta última opción es importante. Después le dices que haga una búsqueda con esos argumentos (args). Evidentemente todo eso es modificable. A continuación viene el LOOP que se llama en WordPress, es decir mostrar los artículos. Esto se puede hacer con varias modificaciones, ved el nuestro como ejemplo al final. Justo detrás del Loop ponemos los enlaces de paginación: <?php previous_posts_link(); ?> <?php next_posts_link(); ?> Cuidado que esto puede ser así de simple (página anterior y página siguiente) o con números (algo más complicado) Y por último el sidebar y el footer. Aquí está el código de ejemplo: <?php /* Template Name: Blog */;?> <?php get_header(); ?> <!– Begin #colleft –> <div id=”colLeft”> <h1><?php the_title(); ?></h1> <?php $args = array( ‘posts_per_page’ => 5, ‘category_name’ => ‘blog’, ‘paged’ => $paged, ); query_posts($args); ?> <?php if (have_posts()): while (have_posts()) : the_post(); ?> <h1><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></h1> <?php global $more; $more = false; ?> <?php the_content(‘Continue Reading’); ?> <?php $more = true; ?> <?php endwhile; else: ?> <p><?php _e(‘Sorry, no posts matched your criteria.’); ?></p> <?php endif; ?> <!– pagination –> <?php previous_posts_link(); ?> &nbsp; &nbsp; <?php next_posts_link(); ?> <?php comments_template(); ?> </div> <!– End #colLeft –> <?php get_sidebar(); ?> <?php get_footer(); ?>

Scroll al inicio