Cómo optimizar HTML? Optimización y depuración del código. 1. Limpieza del código

Transcripción

1 Cómo optimizar HTML? Optimización y depuración del código 1. Limpieza del código Se pueden eliminar automáticamente etiquetas vacías, combinar etiquetas font anidadas y en general mejorar códigos HTML o XHTML desordenados o ilegibles. 1. Abra un documento: o Si el documento está en HTML, seleccione Comandos > Limpiar HTML. o Si el documento está en XHTML, elija Comandos> Limpiar XHTML. En un documento XHTML, el comando Limpiar XHTML soluciona errores de sintaxis, establece que los atributos de etiqueta aparezcan en minúsculas y añade o informa de los atributos obligatorios de una etiqueta que faltan, además de realizar operaciones de limpieza de HTML. 2. En el cuadro de diálogo que aparece, seleccione las opciones deseadas y haga clic en Aceptar. Nota: Según el tamaño del documento y el número de opciones seleccionadas, la operación de limpieza puede tardar varios segundos en realizarse. Eliminar Etiquetas contenedoras vacías Elimina las etiquetas que carecen de contenido. Por ejemplo, las etiquetas y están vacías, pero la etiqueta en texto no lo está. Eliminar Etiquetas anidadas repetidas Elimina todas las repeticiones de una etiqueta. Por ejemplo, en el código esto es lo que realmente quería decir, las etiquetas b que delimitan la palabra realmente son redundantes y serían eliminadas. Eliminar Comentarios HTML ajenos a Dreamweaver Elimina todos los comentarios que Dreamweaver no haya insertado. Por ejemplo,  se eliminaría, pero no , ya que se trata de un comentario de Dreamweaver que marca el comienzo de una región editable en la plantilla. Eliminar Formato especial de Dreamweaver Elimina comentarios que Dreamweaver añade al código para permitir que los documentos se actualicen automáticamente cuando se actualizan las plantillas y los elementos de biblioteca. Si selecciona esta opción al limpiar el código en un documento creado a partir de una plantilla, el documento se separará de la plantilla. Eliminar Etiqueta(s) específica(s) Elimina las etiquetas especificadas en el cuadro de texto contiguo. Utilice esta opción para eliminar etiquetas personalizadas insertadas por otros editores visuales y otras etiquetas que no desea que aparezcan en el sitio (por ejemplo, blink). Separe las distintas etiquetas mediante comas (por ejemplo, font, blink). Combinar etiquetas de anidadas cuando sea posible Consolida dos o más etiquetas font cuando controlan el mismo rango de texto. Por ejemplo, rojo grande se cambiaría a rojo grande. Mostrar registro al terminar Muestra un cuadro de alerta con detalles acerca de los cambios realizados en el documento inmediatamente después de concluir la limpieza.

2 2. Verificación de que las etiquetas y llaves están equilibradas Puede realizar una comprobación para asegurarse de que las etiquetas, paréntesis (()), llaves ({ }) y corchetes ([ ]) de la página estén equilibrados. Equilibrados significa que todos los paréntesis, etiquetas, llaves y corchetes de apertura tienen uno de cierre, y viceversa. 3. Comprobación de la compatibilidad con los navegadores La función Comprobar compatibilidad con navegadores (BCC) le ayuda a ubicar combinaciones de código HTML y CSS que pueden provocar problemas en determinados navegadores. Esta función también comprueba el código de los documentos para cualquier propiedad o valor CSS que sea incompatible con los navegadores de destino. 4. Validación de documentos XML Siga uno de estos procedimientos: o Para un archivo XML o XHTML, seleccione Archivo > Validar > Como XML. o La ficha Validación del panel Resultados mostrará el mensaje No se han encontrado errores ni advertencias o una lista de los errores de sintaxis encontrados. Haga doble clic sobre un mensaje de error para seleccionar el error en el documento. Para guardar el informe como un archivo XML, haga clic en el botón Guardar informe. Para ver el informe en su navegador principal (así podrá imprimir el informe), haga clic en el botón Examinar informe. 5. Validación de documentos con el validador de W3C (CS 5.5) Dreamweaver CS5.5 y posterior le ayuda a crear páginas Web compatibles con estándares gracias a su compatibilidad incorporada con el validador de W3C. El validador de W3C valida el cumplimiento de los estándares HTML o XHTML en los documentos HTML. Puede validar documentos abiertos y archivos publicados en un servidor en vivo. Utilice el informe que se genera tras la validación para corregir los errores existentes en el archivo. Nota: La función de validador de W3C está disponible en Dreamweaver CS5.5 y posterior solamente. La versión anterior de la función, disponible en Dreamweaver CS4, dejó de utilizarse en Dreamweaver CS5. Consulte la documentación de Dreamweaver CS4 para obtener más información sobre la versión anterior de la función. 6. Configuración de las preferencias del Validador La función Validar etiquetas ya no se utiliza en la versión Dreamweaver CS5. Sin embargo, Dreamweaver continúa siendo compatible con validadores de código externos que instale como extensiones. Cuando instale una extensión de validador externo, Dreamweaver enumerará sus preferencias en la categoría Validador del cuadro de diálogo Preferencias. 1. Seleccione Edición > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh). 2. Seleccione Validador en la lista Categoría de la izquierda. 3. Seleccione las bibliotecas de etiquetas que desea utilizar para la validación. No puede seleccionar varias versiones de la misma biblioteca de etiquetas y del mismo idioma. Por ejemplo, si selecciona HTML 4.0, no podrá seleccionar también HTML 3.2 o HTML 2.0. Seleccione la versión más antigua con la que desee realizar la validación. Por ejemplo, si un documento contiene código HTML 2.0 válido, el código HTML 4.0 también será válido.

3 4. Haga clic en Opciones y establezca las opciones para dichas bibliotecas. 5. Seleccione las opciones de visualización para los tipos de errores y advertencias que desea que se incluyan en el informe del validador. 6. Seleccione los elementos que debe comprobar el validador: Comillas en el texto Indica que Dreamweaver debe avisarle cada vez que se utilicen comillas en el texto del documento. En el texto de los documentos HTML debe utilizar la entidad " en lugar de las comillas. Entidades en el texto Indica que Dreamweaver debe recomendar el cambio de varios caracteres (por ejemplo, ampersand (&), menor que (<) y mayor que (>)) por las entidades HTML equivalentes. 7. Haga clic en Aceptar para cerrar el cuadro de diálogo Opciones de validador y haga clic de nuevo en Aceptar para establecer las preferencias. 7. Creación de páginas compatibles con XHTML Cuando crea una página, puede hacer que sea compatible con XHTML. También puede hacer que un documento HTML existente sea compatible con XHTML. 8. Uso del depurador de ColdFusion (sólo Windows). Si es desarrollador de ColdFusion y utiliza ColdFusion como servidor de prueba de Dreamweaver, podrá ver esta información y reparar la página sin salir de Dreamweaver. Nota: Esta función no puede utilizarse en un Macintosh. Los desarrolladores de Macintosh pueden utilizar Vista previa en el navegador (F12) para abrir una página de ColdFusion en otro navegador. Si la página contiene errores, aparecerá información acerca de las posibles causas de los errores en la parte inferior de la página. 1. Abra la página de ColdFusion en Dreamweaver. 2. Haga clic en el icono Depuración del servidor en la barra de herramientas Documento. Dreamweaver solicita el archivo del servidor de ColdFusion y lo muestra en una ventana de navegador interna de Internet Explorer. Si la página contiene errores, aparecerán las posibles causas en la parte inferior de la misma. Al mismo tiempo, se abrirá un panel de Depuración del servidor. Dicho panel ofrece una gran cantidad de información útil, por ejemplo todas las páginas procesadas por el servidor para mostrar la página, todas las consultas SQL ejecutadas en la página y todas las variables de servidor con sus valores, si los hubiere. El panel incluye también un resumen de los tiempos de ejecución. 3. Si aparece una categoría Excepciones en el panel Depuración del servidor, haga clic en el icono de signo Más (+) para ampliar la categoría. La categoría Excepciones aparece si el servidor tiene algún problema con la página. Amplíe la categoría para averiguar más sobre el problema. 4. Regrese a la vista Código (Ver > Código) o vista Diseño (Ver > Diseño) y corrija el error. 5. Guarde el archivo y haga clic de nuevo en el icono Depuración del servidor.

4 Dreamweaver volverá a mostrar la página en el navegador interno y actualizará el panel Depuración del servidor. Si no hay más problemas en la página, la categoría Excepciones no aparecerá de nuevo en el panel. 6. Para salir del modo de depuración, cambie a la vista Código (Ver > Código) o a la vista Diseño (Ver > Diseño). Etiquetas META- Cómo insertar? La etiqueta <meta> se utiliza para añadir información sobre la página. Esta información puede ser utilizada por los buscadores. Los buscadores consultan la información de la etiqueta <meta> de las páginas, buscando coincidencias con lo que el usuario pretende encontrar. A través de esta etiqueta pueden especificarse los atributos name y content. El atributo name indica el tipo de información, y el atributo content indica el valor de dicha información. Los tipos de información más utilizados son los siguientes: Tipo author classification description generator keywords Significado Autor de la página Palabras para clasificar la página en los buscadores Descripción del contenido de la página Programa utilizado para crear la página Palabras clave La etiqueta <meta> no necesita etiqueta de cierre. Para cada etiqueta <meta> solo es posible indicar un tipo de información y su valor, pero es posible insertar varias etiquetas <meta> en un mismo documento. La etiqueta <meta> ha de estar entre las etiquetas <head> y </head>. Por ejemplo, el siguiente código indica que el autor de la página es aulaclic, que la página trata sobre un curso de HTML gratuito, y especifica algunas palabras clave a ser consultadas por los buscadores: <html> <head>... <meta name="author" content="aulaclic"> <meta name="description" content="curso de HTML gratuito"> <meta name="keywords" content="código HTML etiqueta página web gratis curso"> </head>... Como se controlan enlaces rotos?

5 El tener muchos enlaces rotos en una web es señal de que está abandonada y que requiere revisión y más atención por parte del webmaster. La forma más sencilla de controlar los enlaces de nuestra web es utilizar herramientas para este control de enlaces rotos una de estas herramientas es Xenu, se puede descargar gratuitamente, y con la que solamente introduciendo nuestra url(direccion) aparecen todos los links de nuestra web, estén rotos o no. Una vez finalizada la búsqueda queda el trabajo de sustituir esos links por otros que si estén activos. Este proceso, que puede ser costoso dependiendo del tamaño de la web es bueno para la salud de nuestras webs y blogs y nos ayudará a llevarnos bien con google. Referencias: Seo, herramientas para páginas web, enero 2014, recuperado de: Aula Clic en español, html, Etiqueta Meta, Noviembre 2014, recuperado de: Adobe, Optimización y depuración del código, Enero 2009, recuperado de: