Está usted en Indice > Maletin > Artículos > Cinco pasos hacia páginas más profesionales con Dreamweaver MX
Construcción
Maletín
Utilidades
Cursos
Promoción
Rentabilidad
Zona Novatos
Foros
Acceso a tu cuenta

Cinco pasos hacia páginas más profesionales con Dreamweaver MX

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.

 

Paso 1: Exporte JavaScript y CSS a archivos externos


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:

  • Centralizar el código. Si tiene que hacer cambios al código, sólo tiene que hacerlo una vez en lugar de una vez para cada página que lo utiliza.
  • Ahorrar ancho de banda. El navegador cliente sólo descarga los archivos de JavaScript y CSS una vez, en lugar de una vez por página.

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" />


Paso 2: Exporte su sitio sin marcación de plantilla

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.

 

Paso 3: Prepare su sitio para el futuro con XHTML

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:

  • Si está por empezar una página nueva, no deje de marcar la opción Hacer el documento compatible con XHTML en la esquina inferior de la ventana Nuevo documento.
  • Si tiene una página existente en HTML, conviértala a XHTML seleccionando Archivo> Convertir > XHTML.
    Facilísimo.

 

Paso 4: Ordene el código con el comando Aplicar formato de origen


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:

  • Nunca se sabe quién va a hacer cambios al código una vez que usted termina. ¿Qué pasa si su cliente solicita cambios mientras usted está de vacaciones? Su compañero de trabajo debería poder mirar la página y entenderla.
  • Lo que parece claro hoy día, podría no serlo de aquí en cuatro meses. Aun si usted mismo edita la página dentro de unos meses, es posible que su familiaridad con el código ahora ya no sea igual y no le ayude a entender el código más tarde. Un formato de código ordenado le permite leer el código con mayor claridad.
  • ¿Qué pasa si le entra la curiosidad al cliente y mira el código fuente en su sitio? ¿Prefiere que vea un gran desorden o un código ordenado que da la impresión que cada etiqueta hubiese sido colocada con el mayor cuidado posible? (Me sospecho que lo segundo.)
    Esto no quiere decir que se tiene que pasar siglos ordenando su página antes de cargarla en el servidor. Dreamweaver MX le facilita las cosas: elija Comandos > Aplicar formato de origen después de editar una página, y ya está.

 

Paso 5: Valide la página para buscar errores básicos


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.

Artículo original de: http://www.macromedia.com/es/devnet/mx/dreamweaver/extreme/five_steps.html



Usuarios que han visto este tema también han visto...

- RSS y Sindicación
- Analiza tu audiencia. Clave de éxito en la Web
- Consejos para tomar buenas fotografías en un concierto
- Cómo convencer a tu jefe de que los estándares sí importan
- Promos en la portada, buenas o malas


Versión imprimible - Versión imprimible de este documento
Enviar e-mail - Enviar por e-mail este documento
Publicidad






Publicidad








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.


Página generada el 20-01-2017 a las 06:37:58