.gif&contenttype=gif)
Cinco pasos hacia páginas más profesionales con Dreamweaver MX
Dicen que un mal artesano siempre le echa la culpa a sus herramientas. Y tienen razón. No importa lo buena que sea la herramienta, es la destreza de la persona que la utiliza lo que produce buenos resultados.
Este artículo esboza los cinco pasos necesarios para obtener resultados más profesionales con Dreamweaver MX.
Aunque crea que mantener todo el código en una página base es más conveniente para la edición, es un gran desperdicio de ancho de banda. Si retira el código JavaScript y CSS de la sección <head> de cada página y lo pone en archivos centrales, logrará dos cosas útiles:
Para lograr esta tarea, primero busque las funciones de JavaScript en la sección <head> de su documento. El siguiente es un ejemplo típico:
<script language="JavaScript"
type="text/JavaScript">
<!--
function MM_openBrWindow(theURL,winName,features)
{ //v2.0
window.open(theURL,winName,features);
}
//-->
</script>
Copie cualquier función en un nuevo archivo de texto y guárdelo con el nombre common.js, por ejemplo. Cree vínculos al mismo en la sección <head> de cada página de su sitio (o póngalo en su plantilla), como sigue:
<script language="JavaScript" type="text/JavaScript"
src="/common.js">
</script>
Busque el código CSS en la sección <head> de sus páginas, cópielo al nuevo archivo de texto y guárdelo con el nombre mystyles.css, por ejemplo. Lo siguiente es lo que hay que buscar en la sección <head>:
<style type="text/css">
<!--
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color : #000000;
}
-->
</style>
Vincule el archivo CSS a la página web mediante un vínculo al archivo CSS en la sección <head> de la página:
<link href="/mystyles.css" rel="stylesheet"
type="text/css" />
Dreamweaver MX usa comentarios HTML para almacenar metadatos dentro de documentos. Estos comentarios permiten que funcionen las características tales como plantillas y elementos de biblioteca. Si bien estas características son muy útiles mientras se crea un sitio, estos comentarios pueden desperdiciar ancho de banda y dar a sus páginas un aspecto poco profesional una vez que sus archivos se encuentren en el sitio web de producción.
Dreamweaver puede retirar estos comentarios y producir una nueva versión limpia del sitio. (Pero no pierda los comentarios de la versión en la que está trabajando, de lo contrario la plantilla podría romperse.) Para hacer esto, elija Modificar > Plantillas> Exportar sin formato desde su sitio. Navegue a una nueva ubicación para su sitio ya limpio y haga clic en Aceptar.
HTML ha llegado al final de su vida y ya no se desarrolla como un lenguaje de marcación. Su reemplazo es HTML ampliable (en inglés) (XHTML): una implementación de XML que funciona en todos los navegadores, tanto los antiguos como los nuevos. Aunque XHTML es puro XML, sus etiquetas y atributos son tan similares a HTML que los navegadores antiguos no notan la diferencia. El uso de XML tiene ventajas porque es una norma moderna y preparada para el futuro.
Si hace codificación manual, hay unas cuantas cosas que debería saber acerca de XHTML antes de convertir los archivos. Por ejemplo, la norma XHTML prefiere atributos que no estén vacíos y etiquetas correctamente emparejadas y anidadas. (Lea acerca de las diferencias entre HTML y XHTML en el artículo de Dan Short, "Coding Standards Using XHTML (en inglés) ".)
Si trabaja en un entorno visual como la mayoría de usuarios, es fácil convertir sus páginas en maravillas de XHTML:
En las páginas largas y complejas, el usuario no tarda en desorientarse usando la vista de código. Cualquier programador profesional le puede decir lo importante que es tener código bien presentado y con sangrías cuidadosamente insertadas.
Los siguientes son algunos de los beneficios de tener un código con un buen formato:
Le sorprendería saber cuántos desarrolladores profesionales del web no saben que existen herramientas para ayudarles a arreglar su código. Se pueden eliminar la mayoría de los problemas de compatibilidad de navegadores de una página con sólo verificar si el código es correcto, pasándolo por un validador. La parte más difícil de corregir problemas pequeños es encontrarlos en primer lugar. Para eso sirve el validador.
Los usuarios de Dreamweaver MX tienen dos maneras de validar su código. La primera manera es en Dreamweaver. Asegúrese de que ha guardado la página en la que está trabajando. Luego seleccione Archivo > Comprobar página. Seleccione ya sea Validar formato si la página es HTML o Validar como XML si la página es XHTML. El panel Resultados aparecerá con una lista de los problemas que ha encontrado.
La segunda manera de validar la página es utilizar la herramienta de validación en línea del World Wide Web Consortium (W3C). Puede validar todos los tipos de HTML y XHTML, así como archivos CSS. Los validadores se encuentran en el sitio web del W3C:
Es realmente asombroso ver la diferencia en la página después de corregir errores menores. Por ejemplo, una etiqueta mal anidada puede impedir que aparezca una página en un navegador pero permitir que aparezca sin problemas en otro. Sólo esto es una gran razón para dejar que los validadores de código hagan el trabajo difícil por usted.
Usuarios que han visto este tema también han visto...
- Aprende a utilizar las expresiones regulares y comprueba todo su potencial con DreamWeaver
- Crear un album de fotos con DreamWeaver
- Imágenes de sustitución en DreamWeaver .
- Crear y editar tablas con dreamweaver
- Envío y creación de formularios con DreamWeaver y el servicio de envío de formularios de WebTaller
- Versión imprimible de este documento
- Enviar por e-mail este documento
Información legal | Política de Privacidad | Contacte con nosotros
Otro proyecto de Factoría de Internet. Copyright© 2003-2011 Factoría de Internet S.L.. Todos los derechos reservados.