Encontrar contenido duplicado, enlaces rotos y más

Siteliner es una aplicación online y gratuita que con solo introducir la url de un sitio, nos permite saber si hay enlaces rotos en el mismo, muy útil para el posicionamiento de nuestro blog o web en Google ya que penaliza por ello y hacen bajar en posicionamiento.
También nos permite ver si tenemos documentación duplicada o si ha sido duplicada en otro sitio ya que eso perjudica a la hora de visualizar nuestra web a otros usuarios.
Otra herramienta web para encontrar enlaces rotos en nuestros sitios que funciona muy bien es W3C Link Checker que además nos da una posible solución y nos permite validar el código HTML de nuestro blog o Web.

Evitar que descarguen imágenes o copien contenido de nuestro blog.

No existe un método cien por cien efectivo pero lo podemos dificultar. Aunque lo lógico es que nos prestemos a compartir, siempre podemos tener textos o imágenes propias que no deseamos se divulguen. Por lo tanto, podemos hacer que cuando se ingrese en nuestro blog el botón derecho del ratón esté bloqueado en la zona de las entradas, para evitar que nos puedan seleccionar texto o imágenes.
También se pueden copiar imágenes simplemente arrastrándolas al escritorio por lo tanto también lo vamos a evitar.
Entraremos en la Plantilla de nuestro blog, seleccionamos Edicion HTML, marcaremos la casilla de verificación Expandir plantilla de artilugios y buscamos el siguiente código:

<div class='post-body entry-content'>

y lo sustituiremos por el siguiente:

<div class='post-body entry-content' oncontextmenu='return false' ondragstart='return false' onmousedown='return false' onselectstart='return false'>

En el caso que no encontremos el código anterior, buscaremos el siguiente:

<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>

y lo sustituimos por:

<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody' oncontextmenu='return false' ondragstart='return false' onmousedown='return false' onselectstart='return false'>

Si no nos queremos quedar ciegos a la hora de buscar el código, cuando estemos en Edición HTML pulsaremos CTRL+F y en el cuadro que aparece copiamos el código para proceder a la búsqueda.

Crear y convertir formato de Iconos para usar en diferentes dispositivos

iConvert Icons es aplicación que nos permite la conversión de iconos a diferentes formatos.
Si nos fijamos, las extensiones de los iconos no son las mismas en los diferentes sistemas operativos que usamos (Android, iOS, Windows, etc), así por ejemplo, en Windows, la extensión de los iconos es ICO y no podemos usar otra, ya que no funcionarían en dicho Sistema Operativo.
Pues bien, esta herramienta nos permite la conversión,  un icono que creemos, podemos usarlo en cualquier sistema operativo.
Cuenta también con una aplicación Web, gratuita,  donde nos permite subir cualquier imagen y convertirla a icono de forma muy sencilla.
Está probando nuevas mejoras, aquí tenemos la fase beta de la misma.

Herramienta muy útil para los programadores de aplicaciones, donde podemos conseguir iconos con máxima calidad de imagen, en pocos segundos.

Insertar un mapa de google y ponerle audio.

Si deseamos colocar un  mapa de Google en un blog o Web y deseamos que cuando se muestre en pantalla, también emita un audio, como el que se muestra a continuación:



La forma de hacerlo es muy simple:
Primero entramos en Google Maps, insertamos la dirección de la cual queremos obtener el mapa y cuando tengamos, pinchamos en el símbolo de enlazar, marcado con la flecha roja, posteriormente copiamos lo remarcado en verde y lo pegamos en el lugar que deseemos que aparezca el mapa.
Justo debajo del código anterior, copiamos el siguiente código:

<EMBED SRC="http://www.goear.com/listen/ac3ae53/solamente-tu-pablo-alboran" AUTOSTART=true LOOP=true VOLUME="80" WIDTH="0" HEIGHT="0">

Lo que está en verde sería la url del archivo de audio que deseamos si oiga.

Insertar presentación de un álbum de Picasa en Blog o Web

Para insertar una presentación de diapositivas flash de cualquiera de nuestros álbumes de Picasa en una Web o Blog, sólo tendremos que seguir los siguientes pasos:
Pinchamos en el álbum que deseemos insertar y en la zona derecha de la ventana donde nos encontramos, hacemos clic sobre enlazar este álbum :

Se nos despliegan unas opciones, ahí pinchamos en Incrustar proyección de diapositivas:

Se nos abrirá una ventana, en la cual podemos elegir: el tamaño de la imagen, si deseamos que aparezcan los títulos y el tipo de reproducción, si deseamos que sea automática o que sea la persona que visita nuestro sitio la que la active:

Si nos fijamos hay una zona en amarillo, ese es el código HTML el cual seleccionaremos, copiaremos (CTRL+C) y pegaremos (CTRL+V) en el lugar que deseemos aparezca la presentación en nuestro Blog o Web.

La presentación que hemos incrustado se actualizará de forma automática si añadimos o eliminamos fotografías del álbum que hemos incrustado.

Estupendo editor de textos online.

StackEdit es un editor de textos online y gratuito, que nos permite editar textos desde cualquier equipo, incluido dispositivos móviles, consiguiendo resultados similares que con Word.

La aplicación nos facilita agilizar la tarea a realizar utilizando símbolos (sintaxis Markdown) así redactaremos un texto en menos tiempo.
Podremos exportar el resultado a Google Drive o Dropbox, importar documentos como texto Markdown y html, así como publicarlo en Drive, Blogger, WordPress, etc.
Al entrar en el sitio, la pantalla se divide en dos paneles, en el de la izquierda para escribir, usando html, sintáxis Markdown, etc. y en el de la derecha veremos el resultado en tiempo real de las modificaciones que vayamos haciendo en el documento.

Innovación en diseño y desarrollo Web.

Brackets es un editor de código fuente abierto para la web.
Está construido con JavaScript, HTML y CSS.
Aún está en fase beta, le faltan funciones y mejoras, pero tiene actualizaciones periódicas que se incorporarán automáticamente, aunque resulta un poco pesado, se instala rápidamente.
En la plantilla guía HTML incorpora Brackets.

Disponemos de una guia en Github para aprender totalmente su manejo.

Características del programa:

• Interfaz limpia, ordenada y de edición amigable. 
• Desarrollo en tiempo real, sólo funciona con el navegador Chrome.
• Extensión Color Picker está incluida y es estupenda para diseñadores web, se activa presionando CTRL+E. 
• Cuando está en modo de vista previa, al colocar el cursor en un elemento HTML se resaltará ese elemento en el navegador. La función se puede activar / desactivar con Ctrl + Shift + C. 
• Una barra de herramientas acoplada a la derecha entre paréntesis, reemplaza la barra de título superior y menús HTML. 
• Iconos para la vista previa y otras extensiones. 

Requisitos del Sistema:

Requisitos del sistema Mac OSX

• Procesador multinúcleo Intel Mac OS X v10.6, v10.7 o v10.8 256 MB de RAM (se recomienda 2 GB de RAM para el Desarrollo en tiempo real)
• 200 MB de espacio disponible en disco duro para la instalación
• 1280x800 pantalla con la tarjeta de vídeo de 16 bits

Windows

• Procesador Intel ® Pentium ® 4 o AMD Athlon ® 64
• Windows XP, Vista, 7 o 8
• 256 MB de RAM (se recomienda 2 GB de RAM para el Desarrollo en vivo)
• 200 MB de espacio disponible en disco duro para la instalación
• 1280x800 pantalla con la tarjeta de vídeo de 16 bits

Instrucciones de instalación.
Guardar el archivo en una ubicación en el disco duro.Hacer doble clic en él, para iniciar la instalación.
Mountain Lion (OS X 10.8) por defecto no permite Brackets, ya que no está firmado digitalmente. Para solucionar este problema,  clic derecho en Brackets. Aplicación y seleccionar Abrir, y luego hacemos clic en Abrir en el cuadro de diálogo que aparece. Sólo necesitamos hacerlo una vez.
Desde Windows nos permite especificar una ubicación de instalación personalizada. No se recomienda instalar más de una copia.

Prueba el rendimiento de tu sitio Web.

WebPageTest nos realiza pruebas de rendimiento de un sitio Web en un entorno real, es decir, mide el rendimiento tanto del navegador como el de la propia red.
Puede ejecutar pruebas simples o realizar pruebas avanzadas incluyendo múltiples pasos, transacciones, captura de vídeo, bloqueo de contenido y mucho más.
Sólo tendremos que insertar la Url del sitio en la zona remarcada en rojo y pulsar el botón Start Test:

Comenzará a realizarse el test, la duración del mismo dependerá de la Web, mientras se está ejecutando aparecerá lo siguiente:

 
Una vez finalizado el test, el resultado proporcionará valiosa información de diagnóstico, incluidas las gráficas de recursos de cascada de carga, controles de velocidad de página de optimización:
 

Y sugerencias de mejora si pulsamos sobre cualquiera de las siguientes opciónes:

 Además disponemos de foros donde expertos nos pueden asesorar sobre rendimiento y optimización Web.

Juego Flash que permite realizar cuestionarios de preguntas.

JeoQuiz es un juego flash que permite realizar un cuestionario de preguntas elaborado con Hot Potatoes. Inspirado en el concurso “Jeopardy” popular en la televisión americana.
Es una aplicación muy fácil de utilizar e integrar en un artículo de blog, wiki, moodle, joomla o página web.
CanalTIC nos la ofrece para su libre uso en cualquier web educativa sin ánimo de lucro. Tendremos que descargar la aplicación y subirla a nuestro espacio web junto con el cuestionario *.JQZ y podremos insertarla en el código HTML de nuestra web.
Tenemos sus características, descarga e instrucciones de uso de forma detallada en  JeoQuiz | CanalTIC.com.
Información vía @hernanboedo,

Archivos PSD gratuitos para diseño gráfico o web.

Freepik es una página que nos ofrece más de 5000 archivos PSD gratuitos para utilizarlos en diseño gráfico o Web, estos se encuentran organizado en el sitio en diferentes categorías como, fondos, botones, calendarios, íconos, colores, efectos, elementos Web, etc.

Generador de menús html

Agama Web Menus es un software de escritorio avanzado y muy eficaz que nos permite crear estupendos menús en DHTML para nuestras webs en sólo unos minutos, los cuales serán compatibles con todos los navegadores.
Sólo tendremos que agregar el código del menú HTML en nuestra páginas web, por supuesto, con el uso del generador de sitios web que más nos guste, como Homesite,  Dreamweaver u otro.
El software contiene cientos de plantillas de menú predefinidas en los estilos de XP, Vista, Mac y  otros estilos de una alta calidad gráfica. También nos permite aplicarlos a plantillas que hayamos creado nosotros.
Ademas podemos realizar mapas de sitio de Google y posée una herramienta para crear mapas de sitio adaptables.

Seremos  capaces de crear muchos tipos de menús:

• Menú contextual.
• Menú emergente.
• desplegable Horizontal.
• Barras de navegación.
• Árbol de menú.
• Menú desplegable en árbol. 

 Las características de los mismos es que serán ilimitados por página, con submenús y/o niveles ilimitados.

Crear Web de forma fácil con CirclePad

CirclePad es un generador para crear páginas Web de forma sencilla, en el cual a partir de una plantilla que elijamos, nos permite cambiar colores, fuentes, letra, menús, además de eliminar o añadir nuevos elementos sin tener conocimientos ni de Css ni de Html.
Cuenta con un panel similar a al Paint que nos permitirá hacer dibujos.
La versión gratuita incluye anuncios publicitarios, pero podemos optar por la versión limitada, Pro o Plus.

Incrustar diccionario en Blog y Web.

Dixio ForWeb es un diccionario gratuito para incrustar en Web o Blog y que facilitará a los usuarios la búsqueda del significado de cualquier palabra sin abandonar nuestro sitio.
Para conseguir el código html rellenaremos el formulario y nos lo enviarán por correo electrónico.
Podemos ver como insertarlo en WordPress o en  Blogger, y nos ofrecen la posibilidad de descargarlo para nuestro ordenador.

En el siguiente vídeo nos explican su funcionalidad y la forma de utilizarlo:

Generador Html para tablas de Blogs y Webs

TableGen es un generador de tablas online que con introducir las filas (Rows) y las columnas (Cols) de las cuales queremos que esté compuesta nuestra tabla, nos la generará de forma automática.
Supongamos que deseamos crear una tabla de dos filas y tres columnas donde en cada celda deseemos mostrar una imagen. Estableceremos el valor Row a 2 y cols a 3, pulsaremos sobre el botón Change table Size y el resultado será:

Como podemos ver en la zona inferior se nos genera automáticamente el código html, el cual tendremos que copiar en el lugar que deseemos establecer la tabla, siempre en la edición html del sitio.
Y nuestra tabla con imágenes quedaría:


Donde lo único que tenemos es que insertar el código marcado en rojo para cada imagen que va a ir en cada una celdas.

 <table border=1>
<tbody> <tr>
    <td><img src="HTTP://RUTA_DE_LA_IMAGEN1.JPG"/> </td>
    <td><img src="HTTP://RUTA_DE_LA_IMAGEN2.JPG"/> </td>
    <td><img src="HTTP://RUTA_DE_LA_IMAGEN3.JPG"/> </td>
</tr>
<tr>

    <td><img src="HTTP://RUTA_DE_LA_IMAGEN4.JPG"/> </td>
    <td><img src="HTTP://RUTA_DE_LA_IMAGEN5.JPG"/> </td>
    <td><img src="HTTP://RUTA_DE_LA_IMAGEN6.JPG"/> </td>
    </tr>
</tbody>
</table>

Crear Banner online para blog y webs

No necesitamos Photoshop ni ningún otro programa similar de dibujo para poder realizar un banner, para nuestro blog o web, con BannerFans la tarea es sencilla. 

Lo primero es dar clic en el botón Start new, especificamos el tamaño del banner, los colores, el tipo de degradado, fuentes, color del texto, sombras, etc. 

Y por ultimo elegiremos el formato del banner, png, jpg o gif, una vez establecido pulsaremos sobre Download banner y no ofrecerá el código para insertar en nuestro sitio. 

 

 

Diseña botones para Web y blogs facilmente

Da Button Factory es un servicio online gratuito y que no requiere registro, en el cual podemos crear botones personalizados para nuestros blogs y webs de forma sencilla sin tener que controlar a fondo ningún programa de diseño. 

Lo único que tendremos que hacer es escribir el texto que deseemos que muestre el botón, y podemos cambiar la fuente, el color, el tamaño, etc. Cuando termines de crear el botón, nos permitirán descargarlo en formato Png o copiar el código CSS para incorporarlo a nuestro sitio.

Mostrar audio en tu web de forma sencilla

AudioPal nos permite grabar mediante micrófono o teléfono un audio, o bien escribir un texto y dejar que el sistema lo lea, así como seleccionar audio de nuestro ordenador.
Este audio se puede mostrar en nuestra web o blog mediante un pequeño reproductor.
Nos posibilita que nuestro sitio sea más interactivo, el número de mensajes que podemos mostrar es ilimitado, permitíendonos seleccionar entre 25 idiomas y 100 voces para nuestro mensaje en el caso que deseemos que el sistema nos lea un texto escrito.
No es necesaria la instalación de ningún software y es totalmente gratuito.

Una vez que ya tenemos nuestro audio, introduciremos un correo electrónico al cual se nos enviará un link, donde podremos acceder a nuestro audio:

Nos permitirá crear otros audios, sólo con pinchar en el botón marcado en rojo, y si deseamos insertar el reproductor en nuestro sitio, pulsaremos con en el botón rojo, copy o seleccionaremos la pestaña Other, marcada en verde, donde nos muestra el código a insertar en nuestro blog o web.


Información vía @FloresCollazo

Crear iconos y faviconos para tus web, blogs y redes sociales

Un favicon es icono pequeño que aparece en la barra de direcciones justo al lado de la URL de la web, en el caso del blog que nos ocupa se visualiza perfectamente:

GenFavicon es una herramienta online y gratuita, que no requiere registro, y nos permite realizar favicones de forma automática para nuestros sitios web, e iconos para nuestros perfiles en las redes sociales por ejemplo.
Para conseguir nuestro icono o favicono, sólo hay que subir la imagen, insertando la url, si ésta se encuentra en la web, o bien insertándola desde nuestro equipo.
Las imágenes tienen que estar en formato Gif, Png o Jpg, y su tamaño no puede superar los 4MB.
Seleccionaremos las dimensiones del icono y podremos descargarlo con la extensión .Ico a nuestro disco duro.
Una vez que tengamos el favicon listo lo podremos insertar en nuestra web o blog colocando el código:

<link rel=”shortcut icon”href=”/favicon.ico”/>.
entre las etiquetas <head&gt; y </head&gt;.

 Tambien podemos ver como hacer un favicon animado para blog o web se pueden aplicar los mismos pasos utilizando el servicio GetFavicon

Edita código online y sincronízalo con Google Drive

Neutron Drive es una aplicación genial y online que nos permite a los programadores editar nuestros códigos online y tenerlos sincronizados en Google Drive.
Soporta la mayoría de los lenguajes de programación, con resaltado de sintaxis, navegador de documentos, etc.

Crear varios link en una misma imagen

Con html-map.com podemos delimitar áreas en una imagen, para que en cada una de ellas podamos insertar un link, sin necesidad de manejar html, sólo tendremos que seleccionar la imagen y crear cuadros en cada región especificando el link para esa zona.
Al pinchar en el recuadro de la imagen donde se ha insertado el link, automáticamente nos dirigirá a la dirección especificada.
Al finalizar podremos conseguir el código html y también el CSS, para pegarlo en nuestra Web o Blog.