Mis pinitos en HTML. Marcos en Dreamweaver.

En esta práctica aprendimos a utilizar los marcos de Dreamweaver para dividir la web en partes y así poder modificarlas individualmente.

Hay dos formas de crear un conjunto de marcos en Dreamweaver: puede diseñarlo usted mismo o seleccionarlo de una serie de conjuntos de marcos predefinidos. Si elige un conjunto de marcos predefinido se configurarán automáticamente todos los conjuntos de marcos necesarios para crear la disposición. Ésta es la forma más sencilla de insertar rápidamente un diseño de marcos en la página. Insertar un conjunto de marcos predefinido Los conjuntos de marcos predefinidos facilitan la selección del tipo de conjunto de marcos que desea crear. Los iconos de conjuntos de marcos predefinidos de la categoría Marcos del panel Objetos proporcionan una representación visual de cada conjunto de marcos al aplicarse a un documento seleccionado. El conjunto de marcos seleccionado rodea al documento actual (el documento en el que se encuentra el punto de inserción). El área azul de un icono de conjunto de marcos predefinido representa la página o el marco seleccionado actualmente en un documento, mientras que el área blanca representa el nuevo o los nuevos marcos. Para insertar un conjunto de marcos predefinido: Sitúe el punto de inserción en el documento. A continuación, lleve a cabo una de estas operaciones: En la categoría Marcos del panel Objetos, seleccione un conjunto de marcos predefinido. Para insertar el conjunto de marcos, puede hacer clic en un icono o arrastrar un icono directamente al documento. Para seleccionar un conjunto de marcos predefinido, elija Insertar > Marcos >Izquierda, Derecha, Arriba, Abajo, Izquierda y arriba, Superior izquierda, Izquierda superior o Dividir. Diseñar e insertar un conjunto de marcos Elija Modificar > Conjunto de marcos > Dividir marco a la izquierda, a la derecha, hacia arriba o hacia abajo. Arrastre uno de los bordes del marco a la ventana de documento para dividir el documento vertical u horizontalmente. Arrastre un borde del marco por una de las esquinas para dividir el documento en cuatro marcos nuevos. Presione la tecla Alt mientras arrastra el ratón si desea dividir un marco interior. Modificar un conjunto de marcos Para modificar el cunjunto de marcos puede eliminar marcos, o crear un nuevo conjunto de marcos dentro de un marco ya existente(marcos anidados) Para eliminar un marco: Arrastre el borde del marco fuera de la página o hasta el borde del marco padre. Crear un conjunto de marcos anidado Un conjunto de marcos dentro de otro conjunto recibe el nombre de conjunto de marcos anidado. Cada nuevo conjunto de marcos creado incluye su propio documento HTML de conjunto de marcos y sus documentos de marcos. La mayoría de las páginas Web con marcos utilizan en realidad marcos anidados y varios de los conjuntos de marcos predefinidos en Dreamweaver también utilizan la anidación. Para crear un conjunto de marcos anidado Sitúe el punto de inserción en el marco en el que desea insertar el conjunto de marcos anidado. Lleve a cabo una de estas operaciones: Elija Modificar > Conjunto de marcos > Dividir marco hacia arriba, hacia abajo, a la izquierda o a la derecha. En la categoría Marcos del panel Objetos , seleccione un icono de conjunto de marcos. Elija Insertar > Marcos > Izquierda, Derecha, Arriba, Abajo, Izquierda y arriba, Superior izquierda, Izquierda superior o Dividir. Seleccionar un marco o un conjunto de marcos Los marcos y los conjuntos de marcos son documentos HTML individuales. Para realizar cambios en un marco o en el conjunto de marcos, comience seleccionando el marco o conjunto de marcos que desea cambiar. Puede seleccionar un marco o un conjunto de marcos en la ventana de documento o utilizando el panel Marcos. Cuando seleccione un marco o el conjunto de marcos, aparecerán líneas de selección en el panel Marcos y en la ventana de documento. Utilizar el panel Marcos El panel Marcos proporciona una representación visual de los marcos del documento. Puede hacer clic en un marco o conjunto de marcos en el panel Marcos para seleccionarlo en el documento y, seguidamente, ver o editar las propiedades del elemento seleccionado en el inspector de propiedades. El panel Marcos también muestra la jerarquía de la estructura del conjunto de marcos de una manera que puede no percibirse en la ventana de documento. En el panel Marcos, el conjunto de marcos está rodeado por un borde grueso tridimensional, los marcos están rodeados por una línea delgada gris, mientras que los distintos marcos se identifican a través de sus nombres. Para mostrar el panel Marcos, lleve a cabo una de estas operaciones: Elija Ventana > Marcos . Presione MAY + F 2 Guardar archivos de marcos y de conjunto de marcos Puede guardar de forma individual una página del conjunto de marcos o una página de marco, o bien guardar todos los archivos de marco abiertos y la página de conjunto de marcos. Cuando se utiliza Dreamweaver para crear documentos de marcos, cada nuevo documento de marco recibe un nombre de archivo temporal (por ejemplo, UntitledFrame_1 para la página de conjunto de marcos, Untitled-1, Untitled-2, etc. para las páginas de marcos). Para guardar un archivo de conjunto de marcos: Seleccione el conjunto de marcos en el panel Marcos o en la ventana de documento. Lleve a cabo una de estas operaciones:  Para guardar el archivo de conjunto de marcos , elija Archivo > Guardar conjunto de marcos. Para guardar el archivo de conjunto de marcos como un archivo nuevo , elijaArchivo > Guardar conjunto de marcos como. Para guardar un documento que está dentro de un marco: Haga clic en el marco para seleccionarlo y, a continuación, elija Archivo > Guardar marco o Archivo > Guardar marco como. Para guardar todos los archivos de un conjunto de marcos: Elija Archivo > Guardar todos los marcos. De este modo se guardarán todos los documentos abiertos, incluidos los documentos individuales, los documentos de marcos y los documentos de conjunto de marcos. Nota: Utilice las líneas de selección de marcos de la ventana de documento para identificar los documentos de conjunto de marcos o los documentos de marcos al guardar los archivos.

Mis pinitos en HTML. Tablas en Dreamweaver.

Bien, llegados a este punto tenemos un conocimiento básico de Dreamweaver y es hora de ir complicando un poco más las cosas. Así, empezamos con una base de un CV aplicable a cualquier programa. Es decir, guardamos la base para tener así una pauta con la que guiarnos para redactar tantos CV como queramos.


En otro documento, rellenamos el CVcon nuestros datos y empezamos a crear la tabla, cambiando colores de fondo, texto, formato, hipervínculos y demás para personalizar nuestra página. En mi caso, el resultado es este:

Siguiendo pasos anteriores, enlazamos las diferentes partes del CV para lograr una navegación más simple. A continuación, una breve explicación de la herramienta TABLAS de Dreamweaver:

Mis pinitos en HTML. Metiendo mano a Dreamweaver y rescatando Wuala.

Tras "toquetear" brevemente los editores de texto y servidores FTP, empezamos a crear webs desde Dreamweaver.


"Adobe Dreamweaver es una aplicación en forma de suite (basada en la forma de estudio de Adobe Flash) que está destinada a la construcción, diseño y edición de sitios y aplicaciones Web basados en estándares. Creado inicialmente por Macromedia (actualmente producido por Adobe Systems) es el programa más utilizado en el sector del diseño y la programación web, por sus funcionalidades, su integración con otras herramientas como Adobe Flash y, recientemente, por su soporte de los estándares del World Wide Web Consortium. Su principal competidor es Microsoft Expression Weby tiene soporte tanto para edición de imágenes como para animación a través de su integración con otras. Hasta la versión MX, fue duramente criticado por su escaso soporte de los estándares de la web, ya que el código que generaba era con frecuencia sólo válido para Internet Explorer y no validaba como HTML estándar. Esto se ha ido corrigiendo en las versiones recientes."


Aunque este programa nos da la opción de trabajar a partir de plantillas, nosotros lo haremos en un formato simple y "vintage", como se hacían en los orígenes de la web.


Así, creamos una tercera página en la que mostramos las características de un Ipod (algo vintage también), enlazando conceptos con titulares para navegar de una forma más rápida, y utilizando marcos de enlace dentro del mapa de bits para navegar por la misma imagen.
Así:


















































En este punto, abrimos nuestro Wuala y administramos los sitios de Dreamweaver para tener nuestros trabajos accesibles en cualquier lugar. Atención!! Hay que recordar vincular los sitios de Wuala con los de nuestra "casita" web y asegurarnos de que cada vez que guardamos ambos documentos se actualizan.

Mis pinitos en HTML. Mi segunda página y su ubicación en FTP.

En esta clase continuamos con el editor de textos para crear web, pero nos centramos en los servidores FTP para lozalizar nuestros archivos. En ete caso, construimos una web desde cero, muy sencilla, con un titular y una imagen:

A continuación, buscamos su ruta con FTP: 

Abreviatura de File Transfer Protocol, el protocolo para intercambiar archivos en Internet.

El FTP utiliza los protocolos de Internet TCP/IP para permitir la transferencia de datos, de la misma manera que el HTTP en la transferencia de páginas web desde un servidor al navegador de un usuario y el SMTP para transferir correo electrónico a través de Internet.

El FTP se utiliza principalmente para descargar un archivo de un servidor o para subir un archivo a un servidor a través de Internet.

Y para Mac, Transmit:

"Las decenas de características con las que cuenta Transmit lo convierten en uno de los clientes FTP favoritos por los usuarios de Mac.

Compatible con los protocolos FTP, SFTP y TLS/SSL, ofrece un acceso más rápido que Finder a las cuentas iDisk y permite editar un fichero de cualquier aplicación al vuelo, sin tener que descargarlo al disco duro.

Cuenta con un sistema de pestañas que permite mantener abiertas varias conexiones al mismo tiempo y con una función favoritos capaz de alcanzar un directorio determinado de forma fácil y rápida.

Descargas por lotes, sincronización con cuentas .Mac o transferencias servidor a servidor son otras características presentes en Transmit."

Mis pinitos en HTML. Mi primera página.

Tras conocer las etiquetas básicas y el editor, empezamos creando una primera web, muy sencilla, con imágenes y texto "lorem ipsum".


Para esto, empezamos utilizando el editor de textos. Es decir, construimos la web desde cero.
Aquí el ejemplo de mi web:

En esta web jugué con los tamaños, colores y formatos de texto, así como con los tipos de inserción de imágenes. La de mi cara está enñazada desde el archivo del equipo, y la otra desde una dirección web.

Mis pinitos en HTML. Etiquetas y editor de textos.

La herramienta básica del HTML son sus etiquetas. Conocerlas a la perfección es difícil, dado al gran número de éstas que hay, pero un buen conocimiento de las mismas puede ahorrarnos mucho tiempo a la hora de programar.

Elemento		Descripción corta
<!-- -->		Inserta comentarios ocultos
<!DOCTYPE>		Establece el tipo de documento
<a>		Inserta vínculos o marcadores
<abbr>		Explica/expande abreviaciones
<acronym>		Explica/expande acrónimos
<address>		Muestra información de contacto del autor
<applet>		Inserta un applet (script)
<area>		Define sectores para un mapa de imagen
<b>		Convierte texto en negrita
<base>		Establece la URI base, usada para resolver URIs relativas
<basefont>		Establece el tamaño de fuente por defecto para todo el documento
<bdo>		Anula el algoritmo bidireccional para su contenido
<big>		Muestra el texto en estilo de fuente "grande"
<blockquote>		Inserta una cita en forma de párrafo
<body>		Actúa como contenedor para toda la parte representable del documento (cuerpo)
<br>		Forza un quiebre de línea
<button>		Crea un botón que permite contenido HTML (elementos)
<caption>		Establece un título para una tabla
<center>		Muestra su contenido centrado
<cite>		Inserta una cita o referencia
<code>		Declara a su contenido como código de computadora
<col>		Establece atributos generales para las columnas de una tabla
<colgroup>		Agrupa un número de columnas en una tabla
<dd>		Muestra una definición en una lista de términos y definiciones
<del>		Incluye texto que debería ser borrado o reemplazado (ya no válido)
<dfn>		Asigna una definición a un término
<dir>		Inserta una lista de directorio (árbol)
<div>		Define un bloque de contenido
<dl>		Inserta una lista de términos y definiciones
<dt>		Inserta un término en una lista de términos y definiciones
<em>		Indica énfasis para su contenido
<fieldset>		Agrupa controles en un formlario
<font>		Establece el estilo de fuente para su contenido
<form>		Inserta un formulario
<frame>		Inserta un marco simple
<frameset>		Inserta un conjunto de marcos
<h1>		Define un encabezado de nivel 1
<h2>		Define un encabezado de nivel 2
<h3>		Define un encabezado de nivel 3
<h4>		Define un encabezado de nivel 4
<h5>		Define un encabezado de nivel 5
<h6>		Define un encabezado de nivel 6
<head>		Encierra el bloque de encabezado del documento (para las declaraciones globales)
<hr>		Dibuja una línea horizontal
<html>		Actúa como contenedor para el documento entero (encabezado y cuerpo)
<i>		Muestra su contenido con estilo de fuente itálica
<iframe>		Inserta un marco dentro del contenido del documento
<img>		Inserta una imagen
<input>		Muestra un control de entrada (texto, contraseña, casillas de verificación, etc.)
<ins>		Indica que su contenido ha sido insertado a un texto anterior en una actualización
<isindex>		Provee una entrada de una sola línea
<kbd>		Representa texto que es ingresado por el usuario
<label>		Establece una etiqueta para un control en un formulario
<legend>		Asigna un título para un "fieldset" (grupo de controles en un formulario)
<li>		Inserta un ítem en una lista (para listas ordenadas y desordenadas)
<link>		Da infromación relacional acerca del documento al vincularlo con otros recursos
<map>		Define un mapa de imagen del lado cliente
<menu>		Inserta una lista menu
<meta>		Provee información acerca del documento en la forma de variables (nombre y valor)
<noframes>		Provee contenido alternativo para marcos, mostrado cuando los mismos no son soportados
<noscript>		Provee texto alternativo para scripts, mostrado cuando los mismo no son soportados
<object>		Inserta aplicaciones externas (por ejemplo, animaciones /prlículas Flash)
<ol>		Inserta una lista ordenada
<optgroup>		Agrupa las opciones en un contro "select"
<option>		Define una opción en un control "select"
<p>		Inserta un párrafo
<param>		Establece un parámetro para un objeto insertado
<pre>		Muestra texto preformateado, usualmente con fuente de ancho fijo y respetando espacios
<q>		Inserta una cita a nivel de línea
<s>		Muestra texto tachado
<samp>		Representa la salida de un programa
<script>		Actúa como contenedor para scripts del lado cliente
<select>		Crea un control select (lista desplegable de opciones)
<small>		Muestra trexto en duente "pequeña"
<span>		Encierra un trozo de texto (en línea), útil para asignar atributos a su contenido
<strike>		Muestra texto tachado
<strong>		Indica énfasis fuerte para su contenido
<style>		Contiene código de hojas de estilo que definen atributos visuales para el documento
<sub>		Inserta texto como subíndice
<sup>		Inserta texto como superíndice
<table>		Actúa como contenedor para la información de una tabla
<tbody>		Define un cuerpo en una tabla
<td>		Inserta una celda regular en un tabla
<textarea>		Crea una entrada de líneas múltiples
<tfoot>		Define un pie para una tabla
<th>		Inserta una celda de encabezado en una tabla
<thead>		Define un encabezado en una tabla
<title>		Define un título para el documento completo
<tr>		Inserta una fola de celdas en una tabla
<tt>		Muestra texto de máquina de escribir
<u>		Muestra texto subrayado
<ul>		Inserta una lista desordenada
<var>		Indica una instancia de una vatiable

Pero, ¿cómo gestionamos estas etiquetas? Para Mac, tenemos diversas opciones:

Sin embargo, Mac OS dispone de muy buenas opciones a la hora de desarrollar (ya sea diseño o programación) sitios web, servicios web o gestores de contenidos. Resumiendo las mejores posibilidades gratuitas y/o libres:

Smultron, mi preferido, es un editor escrito en Cocoa que permite editar infinidad de lenguajes de programación (PHP, ASP, SQL, XML, CSS, Ruby, Javascript, etc.) para los que dispone de autocompletado, coloreado de sintaxis, gestión de proyectos, división de la pantalla, sincronización con tu cuenta .Mac, etc.

TextWrangler es un interesante editor de texto, comparable al BBedit Lite, que posee un cliente FTP/SFTP además de soporte para ANSI C, C++, HTML/XHTML, Fortran, Java, JavaScript, Object Pascal, Objective-C, Perl, PHP, Python, Rez, Tcl, TeX, Unix Shell Scripts, y XML.

Aptana es un editor basado en Eclipse y principalmente dirigido a desarrolladoresJavascript, pero también le acompaña soporte para (X)HTML, CSS y XML. Muy recomendado para el desarrollo de aplicaciones AJAX.

En cuanto a los entornos de pago:

Zend Studio, el IDE para PHP por excelencia con soporte para PHP, (X)HTML, Javascript, CSS, XML y SQL, cliente CVS y SVN, SFTP/FTP, conexiones a servidores de bases de datos, seguimiento de trazas, debugging, entre una infinidad de características.

Dreamweaver que sigue al pie del cañón como uno de los editores más versátiles, tanto como editor de programación como para editor WYGWYS.
El completado de código que posee es realmente uno de los mejores que he visto, eso sí, únicamente destacable para CSS y XHTML.

Textmate, uno de los editores que más éxito ha tenido y con mejor diseño, nos aporta a diferencia del resto soporte para Ruby, RoR, Xcode, LaTeX, Markdown, Textile, entre otros.
El año pasado obtuvo el premio Apple Design Award for Best Mac OS X Developer Tool (o lo que es lo mimo, el premio de diseño de Apple a la mejor herramienta de desarrollo para Mac OS X).

BBedit dispone, además de lo comentado para TextWrangler, soporte para FTP/SFTP, Ruby, YAML, SQL, AppleScript y Mac OS X Unix Scripting, entre otros. Así mismo, permite control de versiones con Subversion y Perforce.