DISEÑO WEB

EDITORES WEB: 

El desarrollo web es quizás la rama informática que aglutina más lenguajes (HTML, CSS, Javascript, PHP, Java) distintos que deben interaccionar entre sí, y por ello necesitamos un editor web que nos facilite nuestro arduo trabajo.

Son muchos los editores web existentes en el mercado (Dreamweaver, Front Page, CoffeCup HTML Editor, Homesite) cada uno con sus propias peculiaridades, aunque en realidad no son muy distintos unos de otros.

Las características principales que observamos en todos ellos son edición WYSIWYG, cliente FTP, control de versiones, autocompletado de código, resaltado de sintaxis, soporte de lenguajes de servidor, depuración, documentación en línea.

Y cada uno de nosotros le dará más valor a unas u otras dependiendo del entorno en el que trabaje y el trabajo específico que realice. Por ejemplo, un desarrollador novel encontrará muy útil la edición WYSIWYG, pero no así un desarrollador más experimentado, que rara vez lo utilizará.

PRIMEROS EDITORES

Desde CoffeeCup HTML Editor, el primer editor HTML del mercado allá por 1994, mucho ha crecido la web, y con ella los editores web.

En aquella época las webs eran muy sencillas, construidas básicamente con HTML, y se podían crear usando cualquier editor de texto, como el Bloc de Notas, o el Vi. Eran tiempos de frames, imágenes animadas horribles, y sin ningún tipo de diseño.

Hoy día no sólo se usa HTML para crear una web, que incluso se usa una variante de éste, XHTML . Ahora tienen la misma importancia (X)HTML, CSS, Javascript/ECMAScript, o lenguajes de servidor como PHP, Java o .NET/ASP. Aún es posible crear una web con Bloc de Notas o vi, pero, a riesgo de ser un poco menos geek, los principales editores web del mercado nos harán la vida mucho más fácil.

Como en cualquier aspecto de la informática, no existe una única aplicación que sirva para todo, y el amplio mundo del desarrollo web no es una excepción. Cada cual utilizará la aplicación que mejor se adapte a sus necesidades. Hay que tener en cuenta si se necesita control de versiones (CVS, Subversion), cliente FTP o WebDAV, documentación en línea, lenguajes soportados, autocompletado de código, WYSIWYG (What You See Is What You Get), depuración de código, etc.

Pero una herramienta común para todos los desarrolladores web, es sin duda alguna Firefox. Depurar una página web nunca fue tan fácil y rápido, gracias a las extensiones de las que disponemos, como Web Developer o Firebug.

Con ésta última podremos modificar por completo una página web, conviertiéndose así en un WYSIWYG imprescindible, además de un inmejorable inspector delDOM, y un maravilloso depurador Javascript. Pero desgraciadamente no debemos olvidar que nuestra web también debe visualizarse correctamente en Internet Explorer, donde la depuración de nuestras webs es mucho más tediosa.

EDITORES WINDOWS

COFFEECUP HTML EDITOR:

Las principales características del CoffeeCup HTML Editor son sus asistentes (inserción de imágenes, enlaces, menús DHTML, etc.) tratando a los elementos HTML como objetos con sus propiedades, resaltado de sintaxis (HTML, CSS, PHP, ASP…), editor de múltiples ficheros, cliente FTP, editor visual drag&drop (WYSIWYG), y poco más. Ha quedado un tanto desfasado, aunque sigue siendo muy válido como editor HTML.

ADOBE DREAMWEAVER:

Muchos hemos aprendido HTML y CSS gracias al producto de Macromedia Dreamweaver (ahora propiedad de Adobe). Es muy similar a CoffeeCup aunque con mayores prestaciones, aunque también es mucho más caro.

En la última versión (CS3) dispone de un muy mejorado soporte de CSS, que junto a su funcionalidad de autocompletado de atributos CSS (ideal para los que empiezan) lo convierte quizás en uno de los editores más cómodos para trabajar con CSS, y por ello quizás también sea el más usado por los diseñadores web.

Al igual que CoffeeCup, sus asistentes harán las delicias de los más novatos, aunque de poca utilidad para los más avanzados. Incluye lo que han llamado Spry, una librería de widgets y efectos mediante Javascript, que en mi opinión ha llegado demasiado tarde y mal, puesto que existen fabulosas librerías de widgets/efectos, como Dojo Toolkit, jQuery, script.aculo.us, etc. Podrían haber creado asistentes para usar dichas librerías, pero han preferido usar las suyas propias.

LINUX / MULTIPLATAFORMA

AMAYA:

Amaya es más una curiosidad que una herramienta popular. Está desarrollado por la W3C (World Wide Web Consortium), la asociación que se encarga de construir los estándares web.

Es un navegador y un editor web, cuya peculiaridad es que permite editar directamente cualquier página web que se visualice, y que permite editar SVG y MathML, para codificar e integrar junto con HTML. Es bastante espartano y carece de asistentes, pero sus modos de vistas pueden resultar muy interesantes.

APTANA:

Este editor está basado en Eclipse, e incluso puede usarse como plugin en éste. Su asistente de código (HTML, CSS y Javascript) es único, mostrando documentación en línea de todos y cada uno de los elementos, como en qué navegadores está soportada una función de Javascript o un atributo CSS.

Además muestra información en línea sobre las funciones Javascript propias. Viene con cliente FTP y depurador de Javascript. Pero lo mejor es verlo enfuncionamiento .Es el editor web más completo del mercado y además es libre (gratuito y con código fuente abierto).

ZEND STUDIO:

Más que un editor web, Zen Studio es todo un entorno de desarrollo para PHP. Tiene autocompletado de código HTML (no para Javascript y CSS) además de para PHP, y no es posible editar en modo WYSIWYG, aunque el resaltado de sintaxis les podría valer a los desarrolladores más expertos.

Su punto fuerte está en su editor y depurador PHP, que a día de hoy no existe nada mejor. Su soporte para gestionar bases de datos (MySQL, MS SQL Server, Oracle, PostgreSQL, …), cliente FTP, y soporte de control de versiones integrado (CVS y Subversion), lo convierte en el mejor entorno de desarrollo web para PHP existente.

LENGUAJES DE PROGRAMACION: 

LENGUAJE HTML

Desde el surgimiento de internet se han publicado sitios web gracias al lenguajeHTML. Es un lenguaje estático para el desarrollo de sitios web (acrónimo en inglés de HyperText Markup Language, en español Lenguaje de Marcas Hipertextuales). Desarrollado por el World Wide Web Consortium (W3C). Los archivos pueden tener las extensiones (htm, html).

SINTAXIS:

<html> (Inicio del documento HTML)
<head>
( Cabecera )
</head>
<body>
( Cuerpo )
</body>
</html>

<b>  </b> Negrita
<p>  </p> Definir parrafo
<etiqueta> Apertura de la etiqueta
</etiqueta> Cierre de la etiqueta

LENGUAJE JAVASCRIPT

Este es un lenguaje interpretado, no requiere compilación. Fue creado por Brendan Eich en la empresa Netscape Communications. Utilizado principalmente en páginas web. Es similar a Java, aunque no es un lenguaje orientado a objetos, el mismo no dispone de herencias. La mayoría de los navegadores en sus últimas versiones interpretan código Javascript.

El código Javascript puede ser integrado dentro de nuestras páginas web. Para evitar incompatibilidades el World Wide Web Consortium (W3C) diseño un estándar denominado DOM (en inglés Document Object Model, en su traducción al español Modelo de Objetos del Documento).

SINTAXIS:

<script type="text/javascript"> ... </script>


LENGUAJE PHP

Es un lenguaje de programación utilizado para la creación de sitio web. PHP es un acrónimo recursivo que significa “PHP Hypertext Pre-processor”, (inicialmente se llamó Personal Home Page). Surgió en 1995, desarrollado por PHP Group.

PHP es un lenguaje de script interpretado en el lado del servidor utilizado para la generación de páginas web dinámicas, embebidas en páginas HTML y ejecutadas en el servidor. PHP no necesita ser compilado para ejecutarse. Para su funcionamiento necesita tener instalado Apache o IIS con las librerías de PHP. La mayor parte de su sintaxis ha sido tomada de C, Java y Perl con algunas características específicas. Los archivos cuentan con la extensión (php).

SINTAXIS:

La sintaxis utilizada para incorporar código PHP es la siguiente:
<?
$mensaje = “Hola”;
echo $mensaje;
?>

LENGUAJE PYTHON

Es un lenguaje de programación creado en el año 1990 por Guido van Rossum, es el sucesor del lenguaje de programación ABC. Python es comparado habitualmente con Perl. Los usuarios lo consideran como un lenguaje más limpio para programar. Permite la creación de todo tipo de programas incluyendo los sitios web.

Su código no necesita ser compilado, por lo que se llama que el código es interpretado. Es un lenguaje de programación multiparadigma, lo cual fuerza a que los programadores adopten por un estilo de programación particular:

Programación orientada a objetos.
Programación estructurada.
Programación funcional.
Programación orientada a aspectos.


SINTAXIS:

Ejemplo de una clase en Phyton:

def dibujar_muneco(opcion):
    if opcion == 1:
        C.create_line(580, 150, 580, 320, width=4, fill="blue")
        C.create_oval(510, 150, 560, 200, width=2, fill='PeachPuff')




LENGUAJE ASP

Es una tecnología del lado de servidor desarrollada por Microsoft para el desarrollo de sitio web dinámicos. ASP significa en inglés (Active Server Pages), fue liberado por Microsoft en 1996. Las páginas web desarrolladas bajo este lenguaje es necesario tener instalado Internet Information Server (IIS).

ASP no necesita ser compilado para ejecutarse. Existen varios lenguajes que se pueden utilizar para crear páginas ASP. El más utilizado es VBScript, nativo de Microsoft. ASP se puede hacer también en Perl and Jscript (no JavaScript). El código ASP puede ser insertado junto con el código HTML. Los archivos cuentan con la extensión (asp).

Estructura del Sitio Web:

Cuando ingrese el dominio establecido para el Sitio Web en el navegador, verá una página con una estructura básica similar a la siguiente.

1. Título del Sitio Web: Es el título principal del Sitio Web, editable en la “Información básica” del Panel Admin. Opcionalmente puede mostrarse aquí una imagen cargada como logotipo en el sector “Diseño” del Panel Admin.
2. Vínculos cabecera: Son vínculos de acceso a las páginas del Sitio Web, que han marcadas como vínculo de cabecera, en el sector “Mapa del Sitio” del Panel Admin.
3. Buscador (opcional): Es la vista en cabecera del formulario de búsqueda, activado en el sector “Recurso Buscador” del Panel Admin.
4. Botonera principal: Son vínculos de acceso a las páginas del Sitio Web, que han marcadas como de acceso predeterminado en el sector “Mapa del Sitio” del Panel Admin, y además son del primer nivel jerárquico de dicho mapa.
5. Rastro: Son vínculos anidados, que conforman el camino jerárquico de la página abierta. Existen algunos diseños que no incorporan este parte de su estructura.
6. Botonera secundaria: Son vínculos de acceso a las páginas del Sitio Web, contenidas en la página de primer nivel activa. Estas jerarquías son editables en el sector “Mapa del Sitio” del Panel Admin.
7. Título de página: Es el título de la página abierta, que ha sido editado en el sector “Edición de Página” del Panel Admin.
8. Subtítulo de página: Es el subtítulo de la página abierta, que ha sido editado en el sector “Edición de Página” del Panel Admin.
9. Contenido de página: Es el contenido de la página abierta, que ha sido editado en el sector “Edición de Página” del Panel Admin.
10. Vínculos de pie: Son vínculos de acceso a las páginas del Sitio Web, que han marcadas como vínculo de pie, en el sector “Mapa del Sitio” del Panel Admin. Generalmente se incluyen aquí el Copyright, la declaración de privacidad, etc.

DISEÑO DE ENTRADA DE UNA PAGINA WEB: 

Cuando accedemos a una fuente de información de cualquier tipo, ésta nos muestra una serie de informaciones que nos indica la obra, el autor, el editor, la fecha y el lugar de publicación, además de otras informaciones accesorias. Esto es absolutamente necesario, dado que servirá para que los usuarios tengan toda la información necesaria acerca de la publicación.

Cuando se trata de libros u otros materiales impresos, existen una serie de convenciones, muchas de las cuales están regidas por la costumbre, tras varios siglos de uso. Por ejemplo, todos sabemos que a la hora de acceder a un libro, nos encontraremos en primer lugar con el lomo del mismo, y ya desde allí, el libro nos da información, como el título, su autor y la editorial.

Todo lector sabe que en las primeras páginas se encontrará con información adicional, y que en las primeras páginas o en las últimas, hallará un índice que le servirá para indicarle en que parte de la obra encontrará los diferentes contenidos del material impreso.

Toda esta información se encuentra clasificada y ordenada de acuerdo a estándares que todos conocemos, lo que simplifica enormemente la tarea de las personas que acceden a ellos. Dado que las características de las páginas web son diferentes, estas informaciones tienen otras características.

Información de una página web

Básicamente podríamos decir que la información necesaria a ser introducida en una página webdebe decir a quien accede a ella como se llama la obra, quien o quienes son sus autores, cuando fue publicado el material contenido y el lugar de publicación. Toda esta información resulta relevante, aún cuando en una primera instancia nos parezca no tenerla.

El título de la web

El título de la página no solo tiene importancia para que quien llega a ella sepa como se llama el sitio a donde llega, sino que es vital para que los usuarios regresen. La más usual de las formas de acceder a una página web es a través de los buscadores. Además de que en los resultados de las búsquedas el título de una página sea lo primero que ve el usuario, contiene en sí mismo una información que tiene gran importancia para el posicionamiento de la página y que losbuscadores emplean para hacer su ranking.

El autor del sitio web

El conocimiento por parte del usuario del autor del material que se publica, tiene importancia en la medida que éste busque conocer la autenticidad del material que se ofrece. La web está llena de mensajes y contenidos engañosos, de los que nadie se hace responsable. Si el contenido de una web presenta el nombre de la persona o institución responsable de la autenticidad y calidad del mismo, el usuario se sentirá más confiado que cuando se encuentre frente a un contenido del que nadie se responsabiliza ni se dice su autor.

Fecha de publicación

A pesar de que no lo parezca, que el usuario tenga conocimiento de la fecha de publicación de un contenido puede tener importancia. Como es de suponerse, este elemento adquiere o pierde algo de relevancia de acuerdo al tipo de contenidos que se publican. Por ejemplo, para un sitio de noticias, la fecha de publicación es un elemento primordial, mientras que para un sitio de arte medieval, tiene bastante menos importancia.

Además de la fecha de publicación, otro elemento que resulta relevante para el usuario y está relacionado con el tiempo, es la versión del material que se ofrece. La validez y actualidad de los contenidos tiene gran importancia para el usuario, por lo que el mismo debe tener acceso a este tipo de informaciones. Esto da seguridad al usuario, elemento muy importante para determinar si el mismo volverá o no a visitarnos.

Si un documento web publicado, además de contener la fecha de publicación, periódicamente aparece con una fecha de revisión, en la cual se ha hecho una actualización, éste ganará en confiabilidad, ya que muestra una preocupación por parte del autor por mantenerlo vigente,

REQUERIMIENTOS DE UN SITIO WEB: 

Hay que tomar en cuenta algunos aspectos importantes para iniciar una página web. A continuación explicamos términos usados para que usted conozca lo que implica tener una web. Es sencillo:

• Dominio.
• Hosting.
• Redacción para la página web.
• Fotografía de sus productos o del servicio.
• Información Organizada.

Estudio Creativo lo asesora y guia en todo momento. Nosotros nos encargamos del proceso técnico y usted solo ve como su página web es creada y empieza a funcionar. Sin embargo esta en nuestra ética el informar a nuestros clientes el aspecto técnico.

IMPORTANCIA DE UNA PAGINA WEB:

Se recomienda comenzar por generar un objetivo central y luego definir varios objetivos secundarios; no obstante lo anterior, es importante que estos objetivos sean explicitados adecuadamente al comienzo del desarrollo, con el fin de que todo el equipo tenga claro el horizonte que debe tener el proyecto.

Para generar objetivos que sean válidos y comprensibles, se aconseja escribirlos a través de frases que se inicien con verbos que expresen las acciones a realizar. Por ejemplo: Recibir preguntas de los usuarios sobre las actividades de la institución o Presentar públicamente los informes más importantes de la institución.

Una forma de llegar más concretamente a los objetivos, es revisar la visión y la misión de la organización, desde la cual se pueden obtener las claves que permitan definirlos. De más está decir que los objetivos del sitio deberán estar en concordancia con las necesidades y planificación que haya hecho la institución en sus planes anuales.

Una de las primeras metas que se debe cumplir consiste en tener presencia en Internet, siguiendo en este sentido el Instructivo Presidencial de Gobierno Electrónico. No obstante, se debe entender como tal la entrega de información actualizada de la institución, más la proposición de alguna actividad interactiva, mediante el aprovechamiento del estado actual de la tecnología. Por ejemplo, ofrecer las respuestas de las principales Preguntas Frecuentes que se reciben en la institución o entregar la explicación detallada sobre los principales trámites, permiten cumplir con la idea de tener presencia, a través de una propuesta de contenido que ofrece un valor agregado a quienes ingresan al sitio.

Idealmente el listado de objetivos del sitio debe estar acotado y no llegar a más de cinco proposiciones. Este número, si bien es arbitrario, se indica como una forma de señalar que los objetivos no pueden ser tantos como para impedir su cumplimiento; ni tan pocos como para que el sitio sea poco ambicioso.

De cada uno de estos objetivos se pueden desprender tareas concretas que permitan avanzar en el cumplimiento de ellos.

Arquitectura de un sitio Web: 

El diseño web es una actividad que consiste en la planificación, diseño e implementación de sitios web y páginas web. No es simplemente una aplicación del diseño convencional, ya que requiere tener en cuenta cuestiones tales como navegabilidad, interactividad, usabilidad, arquitectura de la información y la interacción de medios como el audio, texto, imagen, enlaces y vídeo. Se lo considera dentro del diseño multimedia.

La unión de un buen diseño con una jerarquía bien elaborada de contenidos aumenta la eficiencia de la web como canal de comunicación e intercambio de datos, que brinda posibilidades como el contacto directo entre el productor y el consumidor de contenidos, característica destacable del medio.

El diseño web ha visto amplia aplicación en los sectores comerciales de Internet especialmente en la World Wide Web. Asimismo, a menudo la web se utiliza como medio de expresión plástica en sí. Artistas y creadores hacen de las páginas en Internet un medio más para ofrecer sus producciones y utilizarlas como un canal más de difusión de su obra.

PAGINA WEB

Se conoce como página web al documento que forma parte de un sitio web y que suele contar con enlaces (también conocidos como hipervínculos o links) para facilitar la navegación entre los contenidos.

Las páginas web están desarrolladas con lenguajes de marcado como el HTML, que pueden ser interpretados por los navegadores. De esta forma, las páginas pueden presentar información en distintos formatos (texto, imágenes, sonidos, videos, animaciones), estar asociadas a datos de estilo o contar con aplicaciones interactivas


INTERNET 
 Es una red de redes que permite la interconexión descentralizada de computadoras a través de un conjunto de protocolos denominado TCP/IP.Internet proviene de “interconneted networks” (“redes interconectadas”): básicamente se trata de millones de computadoras conectadas entre sí en una red mundial.

DISEÑO WEB
El diseño web es una actividad que consiste en la planificación, diseño e implementación de sitios web y paginas web. No es simplemente una aplicación del diseño convencional, ya que requiere tener en cuenta cuestiones tales como navegabilidad, interactibidad, usabilidad, arquitectura de la informacion y la interacción de medios como el audio, texto, imagen y video.Se lo considera dentro del diseño multimedia.
La unión de un buen diseño con una jerarquía bien elaborada de contenidos aumenta la eficiencia de la web como canal de comunicacion e intercambio de datos, que brinda posibilidades como el contacto directo entre el productor y el consumidor de contenidos, característica destacable del medio.
El diseño web ha visto amplia aplicación en los sectores comerciales de Internet especialmente en la World Wide Web. Asimismo, a menudo la web se utiliza como medio de expresión plástica en sí. Artistas y creadores hacen de las páginas en Internet un medio más para ofrecer sus producciones y utilizarlas como un canal más de difusión de su obra.

WWW
 WWW son las iniciales de World Wide Web, el sistema de documentos de hipertexto que se encuentran enlazados entre sí y que son accesibles a través de Internet. Mediante un software  conocido como navegador, los usuarios pueden visualizar las páginas web (que contienen texto, imágenes, videos y otros contenidos multimedia) y navegar a través de ellas mediante los hipervínculos.

ESTRUCTURA JERARQUICA
Este es el tipo de estructura más común. El usuario comienza la navegación en una página principal que se va ramificando en diferentes páginas que a la vez se vuelven a ramificar en otras nuevas. Si utilizas este tipo de estructura es importante recordar que cada página debe tener un enlace que permita al usuario volver a la página principal.A partir de una página de bienvenida o portal (raiz) se abren unas secciones (ramas) que a su vez contienen múltiples páginas web (hojas)

ESTRUCTURA LINEAL
Este tipo de estructura organiza el sitio de manera que el usuario siguiendo un proceso de paso a paso, como si de una presentación se tratara. Si utilizas este tipo de estructura recuerda que debes incluir enlaces que permitan al usuario.  a partir de una página de bienvenida o portal se suceden las siguientes páginas una tras otra como si se tratara de un libro.

ESTRUCTURA COMBINADA

Consiste en la combinación de varias de las estructuras anteriores. El ejemplo que presentamos combina una estructura interconectada con una lineal.

ESTRUCTURA DE RED
Las páginas que forman el sitio web se enlazan unas con otras según sus contenidos en una especie de red en la que no se aprecia ningún tipo de jerarquía.


ESTRUCTURA DE MARCOS
Es otro dilema que afecta a la estructura de la web y que hay que decidir al principio ya que va a tener consecuencias tanto para el diseñador como para el visitante.
Supongamos una web con la siguiente estructura: Un marco superior con el título principal (nombre del centro, localidad, ...), un marco a la izquierda con la barra de navegación y un gran marco principal donde se cargan las páginas que se llaman desde dicha barra. Esta estructura tiene las siguientes ventajas:

• El título y la barra de navegación, por muy complejos que sean, se cargan una sola vez y después permanecen en su marco acelerándose mucho la descarga de las demás páginas.
• Si hay que modificar un enlace, sólo hay que hacerlo en la página del marco de navegación y no en todas las páginas como si cada una llevara la barra en sí misma.
• Las páginas se diseñan de una manera mucho más rápida porque no llevan ni título ni barra de navegación.

SITIO WEB
un sitio web es un sitio (localización) en la World Wide Web que contine documentos (páginas web) organizados gerárquicamente. Cada documento (página web) contiene texto y o gráficos que aparecen como información digital en la pantalla de un ordenador. Un sitio puede contener una combinación de gráficos, texto, audio, vídeo, y otros materiales dinámicos o estáticos.

NAVEGADOR
 Un programa o software, por lo general gratuito, que nos permite visualizar páginas web a través de Internet además de acceder a otros recursos de información alojados también en servidores web, como pueden ser videos, imágenes, audio y archivos XML.
Pero un navegador también nos permite almacenar información o acceder a diferentes tipos de documentos en el disco duro, etc, acceder a redes privadas, y crear marcadores (bookmarks).
El acceso a otras páginas web a través de los hiperenlaces (hipervínculos o enlaces) se llama navegación, término del que deriva el nombre de navegador, aunque una minoría prefieren llamarlo hojeador que sería la traducción literal de la palabra browser.

 DOMINIO. 
Un dominio se compone normalmente de tres partes: en www.masadelante.com, las tres uves dobles (www), el nombre de la organización (masadelante) y el tipo de organización (com).

LENGUAJE HTML

HTML significa HyperText Markup Language. Es el lenguaje en que se escriben los millones de documentos que hoy existen en el World Wide Web. Cuando accedemos a uno de estos documentos, el cliente (Netscape, IE, Mosaic, Lynx, Mozilla) los interpreta y los muestra.
Los documentos HTML son ficheros de texto plano (también conocidos como ASCII) que pueden ser editados con cualquier editor de texto (como Vim o el "Bloc de notas" de Windows). También podríamos utilizar cualquier programa procesador de textos (como StarWriter o Word), salvando el documento como "solo texto". El nombre de los ficheros escritos en lenguaje HTML suelen tener la extensión html o htm.
El lenguaje HTML se basa en la sintaxis SGML (Standard Generalized Markup Language). Esto quiere decir que los diferentes elementos (párrafos, encabezamientos, tablas, listas, ...) de un documento para la WWW se señalan intercalando etiquetas que indican al navegador cómo debe mostrarlo.
Una etiqueta HTML consiste en un signo menor "<", un nombre de una directiva (orden o comando para el navegador), seguido de los parámetros o atributos y un signo mayor ">". Para cualquier etiqueta que indica un el inicio de un elemento hay otra de cierre que indica que esa directiva ya no debe actuar sobre el texto que sigue (en algunas ocasiones no es necesario poner, o no existe, la etiqueta de cierre correspondiente).

Estructura de un documento HTML

Todas las páginas web tienen la siguiente estructura:

<html>
<head>
<title>Primera página</title>
</head>
<body>

</body>
</html>

FORMATO DE IMAGENES

GIF

El formato GIF (Graphic Interchange Format, Formato de intercambio de gráficos) es un formato de archivos de gráficos de mapa de bits (una trama) desarrollado por Compuserve.

Existen dos versiones de este formato de archivos desarrolladas en 1987 y 1989 respectivamente:

• El GIF 87a, que es compatible con la compresión LZW, puede entrelazar, (permitir la visualización progresiva) una paleta de 256 colores y tiene la posibilidad de crear imágenes animadas (llamadas GIF animados) almacenando varias imágenes en el mismo archivo.
• El GIF 89a, que tiene como agregado la posibilidad de designar un color transparente para la paleta y especificar el tiempo de las animaciones.

JPEG
Antes de que surgiera la necesidad del diseño, desarrollo, programación, usabilidad web, los diseñadores gráficos se empeñaban en que mientras más grande fuera el peso de la imagen por ejemplo 300 KB mejor sería la resolución e impresión de la imagen.
Luego, surge la necesidad de realizar una transición del diseño impreso al diseño en la web, y una de las sorpresas es que esas imágenes gigantescas que se imprimían a todo color, en la web necesitaban ser comprimidas y reducidas de peso, para que las mismas cargaran fácilmente.
Es en esta acción de compresión, donde el formato JPEG juega un papel importante, porque permite graduar el nivel de compresión de cada una de las imágenes de este modo podemos decidir entre una imagen de baja calidad, que implica un menor tamaño en el archivo o una imagen con alta calidad, que representa un mayor peso.
El sistema de compresión que usa JPEG se basa en reducir información promediándola en las zonas de degradado.

BMP
El formato BMP es uno de los más simples. Fue desarrollado por Microsoft e IBM en forma conjunta, lo que explica su uso particularmente amplio en plataformas Windows y OS/2. Un archivo BMP es un archivo de mapa de bits, es decir, un archivo de imagen de gráficos, con píxeles almacenados en forma de tabla de puntos que administra los colores como colores reales o usando una paleta indexada. El formato BMP ha sido estudiado de manera tal que permite obtener un mapa de bits independiente del dispositivo de visualización periférico (DIB, Mapa de bits independiente del dispositivo).

TIFF
 Viene de Tagged Image File Format, es un formato que lo desarrollo Aldus, una Compañía propiedad actualmente de Adobe.

Es un tipo de archivo estándar para guardar imágenes de alta calidad, ya que es compatible con los sistemas operativos Windows, Linux, Mac, etc. Se encuentra reconocido por muchos programas de retoque y edición gráfica, tales como Paint Shop Pro, Adobe, Quark, Corel etc. No obstante si tenemos alguna duda sobre como enviar un archivo para su impresión o edición, optaremos por el formato universal TIFF, para que se pueda abrir y editar sin problemas.

Al almacenar un archivo en formato TIFF, este lo guarda con 48 bits de color incluyendo capas y canales alfa.

WMF
WMF se debe al término inglés Windows Metafile Format (Metarchivo de Windows). Metarchivo significa que este archivo contiene la información que describe o especifica otro archivo. WMF fue creado por Microsoft.
Archivo WMF fue creado para el sistema operativo de 16 bits. Para el sistema de 32 bits Microsoft lanzó enhanced metafile format (EMF). Un archivo de Microsoft clipboard (CLP) puede contene un archivo EMF, un archivo WMF o un archivo de formato de mapas de bits (BMP).

SOFTWARE PARA DISEÑO WEB

HTML:
Son documentos de hipertexto que se enlazan con otros documentos a la vez
Se utiliza comunmente para dar estructura a otras paginas web
Utiliza codigos como   <html>  <head>   <title>

Dreamweaver
Es una aplicación en forma de estudio (basada en la forma de estudio de Adobe Flash) enfocada a la construcción y edición de sitios y aplicaciones Web basados en estándares. Creado inicialmente por Macromedia (actualmente producido por Adobe Systems). Es el programa de este tipo 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 Web y 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.

PSPAD
es un editor de texto freeware, ligero, portable y con multitud de características y prestaciones sumamente interesantes, y que realmente puede ponerse sin dudar a la par de Notepad. Entre esas podemos nombrar el higlight de sintaxis, el soporte para varios lenguajes de programación y tipos de ficheros y hasta un cliente de FTP integrado.
Pero para sobresalir en estos tiempos que corren es importante que un programa ofrezca personalización, ya que así puede adaptarse a la mayor cantidad posible de usuarios. Así pues, definir tu propio esquema de higlight de sintaxis será sencillo y podrás agregarle soporte para lenguajes inicialmente no previstos en PSPad.

KOMPOZER

KompoZer es un editor de paginas web WYSIWYG (What you see is what you get - Lo

que ves es lo que recibes). Es un derivado de NVU, es decir, una version no oficial de

NVU, el cual ha reparado ciertos errores(bugs) que este presentaba. Komposer esta

basado en Mozilla Composer pero con ejecucion independiente. Su objetivo es facilitar el

desarrollo de paginas web, gracias a las distintas formas de visualizacion disponibles en

su interfaz como: codigo fuente, ventana WYSIWYG, vision con tags de HTML realzados)

Presenta caracteristicas como el soporte integrado de CSS y mejor gestion del soporte

FTP para actualizacion de los ficheros, soporte de marcos, formularios, tablas, pantillas de

diseno, etc. Cabe destacar que esta disponible para diversas plataformas: Windows, Mac

OS, y Linux. La version sobre la cual trabajaremos en este tutorial, es la 0.7.10, traducida

al espanol por el Proyecto Nave. se sentiran comodos con la interfaz y opciones de

KompoZer.