Blog de Artículos Web

Cinco pasos hacia páginas más profesionales con Dreamweaver (Parte 5)

2009-01-24T04:19:29+01:00

Cinco pasos hacia páginas más profesionales con Dreamweaver (5)

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:

Servicios de validación de HTML y XHTML (http://validator.w3.org/ (en inglés) )
Servicio de validación de CSS (http://jigsaw.w3.org/css-validator/ (en inglés) )

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

Cinco pasos hacia páginas más profesionales con Dreamweaver (Parte 4)

2009-01-24T04:17:05+01:00

Cinco pasos hacia páginas más profesionales con Dreamweaver (4)

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.

Cinco pasos hacia páginas más profesionales con Dreamweaver (Parte 3)

2009-01-24T04:15:15+01:00

Cinco pasos hacia páginas más profesionales con Dreamweaver (3)

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.

Cinco pasos hacia páginas más profesionales con Dreamweaver (Parte 2)

2009-01-24T04:13:20+01:00

Cinco pasos hacia páginas más profesionales con Dreamweaver (2)

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

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

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>

Cinco pasos hacia páginas más profesionales con Dreamweaver (Parte 1)

2009-01-24T04:06:36+01:00

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

</script>

PAGINA 1 DE 5

Calcular el Peso y el Tiempo de Carga de una Web

2009-01-24T04:01:39+01:00

Aunque DreamWeaver nos indica automáticamente el peso y el tiempo de carga de la página web si miramos abajo a la derecha, en la barra de estado, también conviene saber como realizar este cálculo "manualmente".

Lo primero es sumar el tamaño de todos los archivos, el archivo .html, las imágenes y cualquier otro archivo relacionado con ese .html como pueda ser un .css o un .js.

Supongamos que nos da 65KB.

Ahora tenemos que calcular el tiempo de carga, para ello pasaremos los KB (KiloBytes) a Kb (Kilobits), multiplicando 65*8, que nos da 520Kb (Kilobits).

1KB = 8Kb

Ahora calcularemos lo que tardará la página según la conexión, por ejemplo para calcular lo que tardaría mediante un modem de 56Kbps haremos:

520/56 = 9.29s

Mediante ADSL 256Kbps:

520/256 = 2s

ADSL 1Mbps (1024Kbps):

520/1024 = 0.5s

Estos valores son los máximos teóricos, que la práctica nunca se alcanzan, para tener un valor aproximado más real es conveniente sumarles el 20% del tiempo a cada valor (multiplicar por 1.20).

Así, los valores quedarían como 11.5s para 56Kbps, 2.4s para 256Kbps y 0.6 para ADSL 1024Kbps.

Anidación de Capas en DreamWeaver

2009-01-23T19:57:14+01:00

Anidar una capa significa crear una capa dentro de otra, esto se usa a menudo para agrupar capas. Una capa anidada se mueve junto con su capa padre y puede configurarse para que herede la visibilidad de esta.

Hacer que las capas se aniden automáticamente

Para hacer que las capas se aniden automáticamente, es decir que al crear una capa sobre otra, esta quede automáticamente adentro, realice lo siguiente:
Edición / preferencias / Capas / Anidar al crear en capa / Aceptar. Y listo!

Anidar las capas manualmente:

Una vez creada la capa que se desea anidar dentro de otra, abrir la ventana de capas (Ventana / Capas), seleccionar la capa que se desea anidar / mantener oprimido control y arrastrarla hasta la capa padre. En la ventana de Capas aparecerá ligada a la otra