Vista dinámica

miércoles, 18 de septiembre de 2013

Como montar un buen blog - PARTE 6: herramientas online


En el artículo de hoy pongo a tu disposición una gran cantidad de herramientas muy útiles para analizar tu blog y facilitar la creación, modificación y optimización de códigos HTML y JavaScript. Por supuesto hay miles de herramientas por Internet, pero solo les presento algunas, las que generalmente uso yo, espero les sean de utilidad.

Al momento de crear un sitio web existen una infinidad de aspectos que necesitan ser comprobados para conocer su correcto funcionamiento, lo bueno es que existen herramientas gratuitas que permiten evaluar estos aspectos y facilitarnos en algo nuestro trabajo.

I. Herramientas de validación

 

Herramientas de validación

La Validación (XML, HTML, CSS, etc.) es la comprobación de que un documento en alguno de esos lenguajes está bien formado y se ajusta a una estructura definida. Un documento bien formado sigue las reglas básicas establecidas para el diseño de documentos. Un documento válido además respeta las normas dictadas por su definición de tipo de documento o esquema utilizado.

1. MarkUp Validator
Le permitirá validar HTML,XHTML, SMIL, MathML. También es posible conocer si no cumple con las normas W3C.

2. CSS Validator
Introduzca la URL de su pagina y esta herramienta le permitirá conocer si hay errores HTML con CSS o CSS solamente.

3. Links Validator
Introduzca la URL de su pagina y podrá conocer si sus enlaces tienen algún error.

4. RSS Feed Validator
Esto le permitirá conocer mas a acerca de su feed RSS.

5. MobileOK Checker
Compatibilidad entre un móvil y su sitio web.

6. JSHint
JSHint es una herramienta que ayuda a detectar errores y problemas potenciales en el código JavaScript.

7. Colour Contrast Analyser
Evalúa la norma de color W3C.

II. Rendimiento

 

Rendimiento

Un análisis de rendimiento (profiler) tiene por objetivo medir el tiempo dedicado a la ejecución de diferentes partes de un programa o código para detectar los puntos problemáticos y las áreas dónde sea posible llevar a cabo una optimización del rendimiento (ya sea en velocidad o en consumo de recursos). Un profiler puede proporcionar distintas salidas, como una traza de ejecución o un resumen estadístico de los eventos observados.

1. Pingdom Tools
Revisa la red y su servidor.

2. Browsershots
Compruebe su sitio web con diferentes navegadores y resoluciones.

3. Xenocode Browser Sandbox
Un buen recurso para ver la compatibilidad de su sitio web en diferentes navegadores como IE6/7, Safari, Chrome etc.

4. NetRenderer
Permite ver la apariencia de su sitio web en IE 6/7/5.5.

5. ViewLikeUs
Permite ver el sitio en diferentes resoluciones.

6. WebPagetest
Analiza la velocidad de su sitio web.

7. Open Site Explorer
Simplemente escriba en cualquier URL que desees examinar el perfil de vinculación.

8. SEO Analiza
Analiza el valor de una web y conoce sus estadísticas

III. Cajas de prueba HTML/JS

 

Cajas de prueba HTML/JS

Estas son algunas consolas para edición HTML del tipo WYSIWYG (acrónimo en español, "lo que ves es lo que obtienes"). Permiten escribir un documento viendo directamente el resultado final, frecuentemente el resultado impreso, ocupándose en este caso el programa de generar el código fuente en HTML.

1. Real-time HTML Editor
Ejecuta en tiempo real los códigos HTML/JS

2. Prueba de código HTML/JS
Prueba tus códigos HTML/JS (Mazosoft)

3. Prueba de código HTML/JS
Prueba tus códigos HTML/JS (LaWebera)

4. BDS
Consola de prueba para HTML, CSS y JS

IV. Conversores, generadores de código HTML/JS

 

Conversores, generadores de código HTML/JS

Estas son herramientas que permiten generar u obtener códigos HTML de objetos o bloques de uso común como tablas, ventanas POPUP, cajas y además, obtener colores complementarios, comprimir el código JS, etc.

1. Conversor a texto plano
Convierte códigos HTML a texto Plano (nosetup).

2. Generador de POPUP
Genera un código para abrir ventanas emergentes (Ricardo Mejias).

3. Generador de POPUP
Genera un código para abrir ventanas emergentes (Contadorwap).

4. HTML Table Generator
Genera el código para establecer una tabla según nuestros requerimientos.

5. Generador de METAs
Generador de etiquetas meta para la correcta indexación en buscadores.

6. Generador de código QR
Seleccionar el tipo de código QR a generar (direcciones url,  SMS, texto libre, números del teléfono y datos de contacto), rellenar los datos del formulario dependiendo del tipo de contenido a codificar y listo.

7. Bordes redondeados con imagenes y CSS
Genera cajas con bordes redondeados, útil para navegadores que no soportan redondeado con CSS.

8. Genfavicon
Permite la creación de iconos y faviconos.

9. Colores web (wiki)
En el código CSS (y antiguamente en HTML) son especificados como valores numéricos, aunque hay algunos colores que son nombrados por nombres propios ingleses.

10. Color codes
El sitio web Códigos de colores HTML le proporciona herramientas gratuitas de colores para encontrar colores HTML para su sitio web.

11. EasyRGB
Crea colores complementarios, armónicos entre si.

12. Minify JS
Comprime tu código JavaScript

V. Imágenes

 

Optimizacion de imagenes

Procesamiento y optimización de imágenes.

1. Easily Remove
Permite descartar el fondo de una imagen y dejar solo la parte que nos interesa.

2. Round My Pic
Redondea el borde de tus imágenes.

3. JPEGmini
Optimiza el tamaño de las imágenes.

4. ImgFlip
Generador de memes y GIFs animados.

VI. Gadgets

 

Gadgets

Aplicaciones listas para añadr a tu blog

1. Euroresidentes
Gadgets de todo tipo que puedes poner en tu propia página web o blog.

2. Widgetbox
Servicio popular Tiene una amplísima variedad de widgets clasificados y con buscador interno.

VII. Paquetes de herramientas para websmaster

 

Paquetes de herramientas para websmaster

Por último estas son algunas webs que contienen muchas herramientas de la que he hablado anteriormente.

1. FreeFormatter
Estas herramientas incluyen varios formateadores, validadores, minifiers de código, acortador de enlaces, codificadores y decodificadores, digestores de mensajes, recursos web y mucho más.

2. Accessify
Multiplicidad de herramientas y creadores.

3. Google Developers
De todo para el desarrollador

Sigue el siguiente artículo para conocer como rastrea Google las páginas web, algo muy interesante a la hora del SEO y posicionamiento. Ci sentiamo presto!

Palabras clave: herramientas, blog, desarrollador, creación, código, HTML, Javascript, recursos, web, análisis, test, SEO, errores, optimización.

1 comentario:

Todos los mensajes son moderados por el administrador