ADOBE DREAMWEAVER CS5 BSICO

Unidad Didctica N 1

Adobe Dreamweaver CS5 bsico

Unidad Didctica N 1

Iniciacin al diseo Web

A) Internet B) La web C) Diseo y programacin web Editores Web

Ejercicio de Repaso

Formacin sin barreras

Pg. 2/14

Adobe Dreamweaver CS5 bsico

Unidad Didctica N 1

Iniciacin al diseo web

A) Internet

Internet naci como un proyecto de comunicacin donde se eliminara la dependencia de un ordenador central, de tal manera que las comunicaciones pudieran seguir a pesar de prdidas de nodos de comunicacin. Este proyecto de comunicacin se denomin ARPAnet y fue propulsado por los estados Unidos en los aos de la guerra fra. En la dcada de los 70 surgi el Protocolo de transmisin de datos dentro de Internet denominado TCP/IP. A finales de los 80 la red comenz a internacionalizarse y a tener gran cantidad de usuarios. En estos momentos se utilizaba para el correo electrnico y la bsqueda de informacin. En 1989 desde el CERN (Organizacin Europea para la investigacin nuclear) Bernerslee present un software que permita visualizar la informacin utilizando hipertexto. Naci la posibilidad de insertar texto, imgenes, videos, etc. Y sobretodo el uso de los vnculos a travs de los cuales poder navegar por diferentes pginas de informacin no solo en un ordenador sino en sitios remotos. Podemos decir que asistimos al nacimiento de HTML (HiperText Markup Language) lenguaje que se ha convertido en el estndar de diseo de la web.

Formacin sin barreras

Pg. 3/14

Adobe Dreamweaver CS5 bsico

Unidad Didctica N 1

A partir de los aos 90 Internet se extendi de manera ms comercial y a nivel usuario, dando paso al desarrollo de diferentes navegadores tales como: Mosaic, Opera, Nestcape e Internet Explorer.

Fue la poca de la lucha por la supremaca en Internet. El navegador era la aplicacin indispensable que deba tener todo usuario para navegar por las pginas Web. De esta manera Microsoft introdujo el navegador Internet Explorer como una herramienta bsica en su sistema operativo. Hoy en da hay una gran variedad de navegadores de manera gratuita.

Formacin sin barreras

Pg. 4/14

Adobe Dreamweaver CS5 bsico

Unidad Didctica N 1

Aqu tenis varios enlaces de donde los podis descargar. Google Chrome: http://www.google.es/chrome/ Opera: http://www.softonic.com/s/navegador-opera-espanol-gratis Safari: http://www.apple.com/es/safari/download/ Mozilla Firefox: http://www.mozilla.com/es-ES/firefox/

Internet Explorer: http://windows.microsoft.com/es-ES/internetexplorer/products/ie/home Por la expansin tan grande de Internet se vio la necesidad de desarrollar estndares que ayudaran tanto a diseadores como a programadores en la creacin de Webs homogneas para todos. En este sentido y de la mano de Tim Berners-Lee naci la World Wide Web Consortium (W3C) en 1994. Entidad sin nimo de lucro donde nacen los acuerdos sobre los nuevos protocolos informticos.

Formacin sin barreras

Pg. 5/14

Adobe Dreamweaver CS5 bsico

Unidad Didctica N 1

B) La Web
Internet est formado por millones de redes de ordenadores interconectados entre s que comparten informacin a travs de los diferentes sistemas de navegacin (ordenadores, telfonos mviles, Ipad, etc.). Pero veamos de una manera ms especfica como funciona Internet para saber a qu sistema van dirigidas nuestras pginas Webs. Comenzamos analizando que necesidades tenemos para la conexin a Internet. En primer lugar debemos localizar un proveedor de Internet que nos de el acceso a la red. En Espaa tenemos diferentes proveedores como: Movistar, tele2, etc.

Una vez que tenemos conexin debemos saber que la forma de relacin en internet est basada en la estructura Cliente Servidor. Nosotros como clientes pedimos a travs de nuestro navegador informacin al servidor que es el que nos la proporciona. Las mquinas que tienen la informacin funcionan como servidores y las mquinas que piden la informacin como clientes.

Para garantizar la comunicacin los ordenadores siguen unas reglas. Estas reglas se denominan protocolos. Y son estndares para controlar la informacin a travs de la red. El protocolo de Internet se denomina TCP/IP: TCP: protocolo central de transmisin. IP: protocolo de Internet.

Formacin sin barreras

Pg. 6/14

Adobe Dreamweaver CS5 bsico

Unidad Didctica N 1

El protocolo IP es el identificador de cualquier ordenador de la red. Es un nmero formado por 4 dgitos entre el 0 y el 255. Estos nmeros corresponden a un pas, un dominio especfico y la propia mquina.

Es a travs de estos nmeros por los que buscamos informacin dentro de la web. Pero conocer estos nmeros sera muy difcil, por ello existe un sistema de nombres que identifican la IP denominada DNS. La DNS es el nombre del dominio (URL, direcciones e-mail, etc.). La DNS por ende las URL se pueden dividir en diferentes niveles: Por ejemplo: www.google.es Primer nivel: .es es el primer nivel del dominio, identifica el pas o la organizacin como edu (educacin) com (comercio), etc. Segundo nivel: google sera el texto (direccin) identificativa de la pgina. Tercer nivel: www se denomina subdominio. No tiene porqu aparecer siempre hay pginas que no lo tiene (Ejem: http://affiliates.art.com)

Formacin sin barreras

Pg. 7/14

Adobe Dreamweaver CS5 bsico

Unidad Didctica N 1

Normalmente la DNS la solemos igualar a URL cuando en realidad la web nos ofrece toda una gama de servicios tales como: WWW (World Wide Web): la navegacin por pginas de internet. Chat: charla a tiempo real a travs de texto con aplicaciones tan conocidas como Messenger Videoconferencia / Video chat: comunicacin a tiempo real a travs de cmara web. FTP: sistema de transferencia de ficheros e informacin a travs de la red. Foros: tablones de anuncios que sirven para la comunicacin asincrnica y pblica entre los navegantes. Correo electrnico: envo de mensajes de manera privada entre usuarios.

Una vez que ya sabemos que necesitamos una empresa servidora de la lnea de internet. Que nuestro ordenador debe est configurado identificndose con su propia IP. Adems sabemos a que servicios podemos acceder. Es imprescindible indicar que se necesita un navegador donde identificar en su barra de direccin la direccin del servicio al que queremos acceder. Los navegadores los podis descargar de manera gratuita en las direcciones que os hemos especificado anteriormente. Abriremos el navegador e identificaremos la direccin URL que queremos navegar en la barra de direcciones.

Formacin sin barreras

Pg. 8/14

Adobe Dreamweaver CS5 bsico

Unidad Didctica N 1

Formacin sin barreras

Pg. 9/14

Adobe Dreamweaver CS5 bsico

Unidad Didctica N 1

C) Diseo y programacin web

Hemos visto como se ha ido desarrollando la web, que elementos necesitamos para la navegacin, incluso que servicios nos ofrece. En este apartado vamos a ver que elementos se utilizan para el diseo y la programacin Web. En primer lugar hay que decir que el lenguaje de maquetacin (programacin) bsica de las pginas Webs es HTML. HTML son las siglas de HyperText Markup Language denominado lenguaje de marcas por la forma de introducir contenido y estructurar la web es a travs de etiquetas. La etiqueta determina una orden entre corchetes angulares. Por ejemplo para que un texto est en negrita sera utilizaramos la etiqueta <b>. De manera general las etiquetas tiene apertura y cierre y el contenido que se encuentra entre ellas es al que se le aplica la instruccin. Por ejemplo si queremos el texto Importante en negrita su cdigo HTML sera <b> Importante </b>. Como vemos la etiqueta de cierre tiene una barra invertida.

Html es un lenguaje de programacin de pginas web estticas. Podemos clasificar las pginas web por donde se ejecutan, si en el navegador o en el servidor. Las pginas que se ejecutan directamente en el navegador se denominan estticas. Este tipo de pginas muestran contenido imgenes, texto, videos, etc. pero se da poca interactuacin con la pgina. Los lenguajes de programacin de pginas estticas ms utilizado es HTML. El siguiente paso son los lenguajes de programacin DHTML. Las pginas DHTML son pginas dinmicas pero que se interpretan en la zona del cliente. En el propio navegador.

Formacin sin barreras

Pg. 10/14

Adobe Dreamweaver CS5 bsico

Unidad Didctica N 1

Para este tipo de pginas se utilizan lenguajes de programacin como: CSS: es el lenguaje divulgado por la W3C para separar la estructura y el contenido de la pgina web del estilo grfico de la misma. De esta manera a travs de este lenguaje se definen colores, posiciones, fuentes, etc. JavaScript: es un lenguaje lineal de interpretacin en el navegador del cliente sin compilacin. Su sintaxis es parecida a la de Java o C pero no es orientado a objetos.

Para finalizar podemos hablar de pginas totalmente dinmicas cuando se utilizan lenguajes de programacin que se interpretan en el servidor aunque se muestren en el navegador del cliente. A travs de las pginas dinmicas el usuario puede interactuar con la pgina y obtener una respuesta, por ejemplo son pginas de bsqueda como google, las pginas de compra, subasta, etc. El usuario pide una informacin, el servidor traduce esa peticin, realiza las instrucciones necesarias y ofrece una respuesta en el navegador. Los lenguajes de interpretacin ms utilizados son: ASP: Son las siglas de (Active Server Pages) es la tecnologa desarrollada por Microsoft para la creacin de pginas dinmicas del servidor. PHP: Son la siglas de Hipertext Preprocesor. Es un lenguaje de programacin del lado del servidor gratuito e independiente de plataforma, rpido, con una gran librera de funciones y mucha documentacin.

Formacin sin barreras

Pg. 11/14

Adobe Dreamweaver CS5 bsico

Unidad Didctica N 1

Ya conocemos Internet, lo necesario para conectarse, los servicios que nos ofrece y los lenguajes de programacin ms utilizados. Es el momento de ver que elementos podemos insertar en las pginas. El elemento fundamental es el texto. Este se inserta directamente en la pgina web a travs de Html y podemos modificar su apariencia tanto con etiquetas HTML como a travs de cdigo CSS. El siguiente elemento que todos tenemos en mente es la imagen. Las imgenes insertadas en las pginas web son de tipo mapa de bits. Los tipos de archivos que se deben utilizar por su nitidez y poco peso son: *.jpg, *.gif y *.png.

De los formatos de imagen pasamos a los formatos de audio ms utilizados en la web como. AIFF: siglas de Audio Interchange File Format. Formato de audio desarrollado por Apple para Mac. WAV: siglas de WAVEform audio file format. Formato desarrollado por Microsoft e IBM propio para los PC. MP3: es un formato de audio comprimido que aunque tiene perdidas su peso es muy pequeo y por eso se utiliza tanto en web.

A nuestra pgina web tambin le podemos insertar videos en los siguientes formatos: AVI, MOV, MPEG, WMP, etc. Para la visualizacin de estos videos se necesitan aplicaciones (plugins) como Windows Media Player, QuickTime, Real Player, etc.

Formacin sin barreras

Pg. 12/14

Adobe Dreamweaver CS5 bsico

Unidad Didctica N 1

Hay que destacar dentro de los formatos de video, el formato de video de Flash denominado FLV. Este formato se visualiza con el plugin de Flash. Para finalizar en una pgina web tambin podemos insertar objetos realizados con Aplicaciones Adobe. Por ejemplo elementos realizados en Adobe flash cuya principal diferencia con un video, imagen animada, etc. es la posibilidad de realizar acciones. Desde vincular a otras pginas hasta crear formularios que funcionen correctamente a travs de su lenguaje de programacin ActionScript. De hecho nos podemos encontrar pginas completas realizadas en este sistema. La extensin que se utiliza en flash es swf. Para visualizar este tipo de objetos se necesita Adoble Flash Player.

Otro tipo de documentos que vemos continuamente insertados o vinculados a las pginas web son archivos *.pdf. Este tipo de formato se utiliza para la transferencia de documentos dentro de internet. Podemos decir que es el formato de procesador de texto que se utiliza en internet. De esta manera el usuario puede guardar el documento, imprimirlo, rellenarlo, visualizarlo, etc. Para poder ver este tipo de documentos se necesita la aplicacin Adobe Acrobat.

Formacin sin barreras

Pg. 13/14

Adobe Dreamweaver CS5 bsico

Unidad Didctica N 1

Tras conocer de manera global todo lo necesario para hacer nuestra web falta decir que los programas que nos ayudan a crear la pgina web en los diferentes lenguajes de programacin e incluyen todos los elementos que nosotros deseemos dentro de nuestras pginas web se denominan editores. Podemos encontrar editores libres como: Kompozer y Mozilla Composer.

Y editores de empresa como Dreamweaver y FrontPage.

Nuestro curso se va a centrar en el editor ms utilizado a nivel profesional llamado Adobe Dreamweaver CS5. Con este editor vamos a poder maquetar pginas web con Html, insertar imgenes, videos, etc.

EJERCICIO PRCTICO DE REPASO. Ejercicio prctico de repaso de la Unidad didctica 01 (Disponible en la Seccin Trabajos).

Formacin sin barreras

Pg. 14/14