Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Dream Weaver

    Enviado por

    Rolo Alfaro
    18 visualizações13 páginas

    Título original

    DreamWeaver

    Direitos autorais

    © Attribution Non-Commercial (BY-NC)

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    18 visualizações13 páginas

    Dream Weaver

    Enviado por

    Rolo Alfaro

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 13

    Bienvenidos otra vez! Ya estamos en la segunda clase de Dreamweaver / HTML.

    En esta clase veremos ms en profundidad qu es el lenguaje HTML y cmo se articula con Dreamweaver. Adems conoceremos qu aspectos trabaja este programa a la hora de crear un sitio web. Otro punto a tratar son los estndares web y cmo son interpretados por los navegadores. Manos a la obra!

    Qu es Dreamweaver?
    Bueno, calculo que a esta altura la mayora de los que estarn siguiendo este curso sabrn qu es Dreamweaver pero, como no queremos dejar a nadie afuera, vamos a presentar el programa. Dw es un editor de pginas web que tiene, entre otras, la caracterstica de poder crear las pginas web en modo visual. Las pginas se editan en HTML que en s, es texto, y para visualizar los cambios o para ver bien en donde estamos parados y qu estamos tocando, debemos hacer un refresh de la pgina en nuestro navegador para obtener una previsualizacin. Dw permite mediante su modo visual, no solamente tener lo que estamos viendo actualizado constantemente, sino que tambin nos permite, mediante sus herramientas, crear el cdigo HTML de manera visual. A modo de ejemplo, ya que esto lo abordaremos ms tarde, podemos dibujar un encuadre, o crear un texto, aplicar colores, etc. sin escribir nada de cdigo, utilizndolo como un programa grfico o como si se tratara de un procesador de texto. Por este modo de crear pginas se dice que Dw es un editor WYSIWYG, porque lo que vamos viendo mientras creamos la pgina, es lo que saldr en el navegador. Dw se encargar de pasar todo lo que hagamos a cdigo HTML para que sea interpretado. Vale aclarar que Dw no es el nico programa que sirve para la creacin de pginas web.

    Qu es HTML?
    El HTML es un lenguaje de marcado que nos permite preparar documentos web insertando en l, texto e imgenes en una serie de marcas (tags) que controlan los diferentes aspectos de la presentacin y comportamiento de sus elementos. Los tags de HTML se escriben entre signos mayor y menor ( <ejemplo>) y ya vienen predefinidos de acuerdo con la versin utilizada del lenguaje (nosotros usaremos XHTML 1.0). Por ejemplo para el cuerpo de una pgina web se utiliza el tag <body> (bastante deducible :P).

    Todas las etiquetas de un documento XHTML deben ser cerradas. Qu es cerrar una etiqueta? Es definir su campo de accin. Cuando nosotros ponemos una etiqueta como por ejemplo la que tomamos anteriormente, <body>, estamos marcando el comienzo del cuerpo de una pgina web, pero tambin debemos indicar el final, y esto es lo que hace una etiqueta de cierre. En este caso la etiqueta sera </body>, como ven lleva una barra adelante. Luego cuando abordemos el lenguaje veremos ms cuestiones de sintaxis, por ahora dejemos esto ac.

    Porqu el curso es de Dw/HTML?


    Dijimos que el Dw transformaba todo lo que hacamos en modo visual, a HTML; entonces, Para qu en el curso se incluye HTML? Bueno, en primer punto, el saber HTML ya nos desliga de usar s o s el Dw y por lo tanto permite que el curso sirva para gente que utilice diferentes programas. Adems de esto, no es muy lindo presentar problemas a esta altura del curso, pero Dw no siempre har las cosas como queremos, y vamos a necesitar meter mano en el cdigo para poder acomodarlas a nuestro gusto. Mas all de esto, otros motivos no menos importantes son, por ejemplo, saber lo que estamos haciendo y, adems, a futuro cuando tengamos que agregar cosas externas, nuestro HTML se volver mas abstracto (con menos informacin sobre su presentacin) y necesitaremos tener idea de por qu las cosas estn armadas de tal o cual manera. Pensemos que este curso va a arrancar por lo bajo, a nivel principiante, sin ningn requerimiento para poder entenderlo ni aprenderlo, pero tambin en su tramo final estaremos usando tanto Dw como HTML a nivel avanzado, y sin lugar a dudas para esta altura ya tendremos que manejar ambas cosas; por lo menos esta es la intencin del curso.

    HTML y W3C
    El lenguaje HTML se rige bajo ciertos estndares que permiten a los creadores de webs saber la manera correcta de maquetar sus pginas asegurndose (o casi) , que sern vistasde forma correcta en prcticamente cualquier navegador actual. Tambin permite a los creadores de navegadores web, conocer estos estndares y as prepararlos para estar siempre actualizados y sacar provecho de las ventajas de las nuevas tecnologas que van surgiendo. Establece una relacin simbitica entre los diseadores y las empresas de software para realizar siempre productos estandarizados y actuales. Estos estndares los determina la W3C que es una organizacin que esta dirigida por Tim Berners-Lee, el creador de varias tecnologas web como URL, HTTP y el mismo HTML.

    Conclusin

    Hemos llegado al final de nuestra segunda clase, en la que aprendimos las nociones bsicas de los objetos de estudio del curso. Ya podramos decir que estamos preparados para abordar el uso del Dreamweaver y empezar a crear paso a paso nuestro propio sitio web.

    Taller de Adobe Dreamweaver: Ingresando al programa


    TALLERES, DREAMWEAVER, TUTORIAL DREAMWEAVER, CURSO DREAMWEAVER, TALLER DREAMWEAVER, DREAMWEAVER CLASE 3

    Hola! Bienvenidos a la clase nmero 3 de nuestro curso de Dreamweaver/HTML. Hoy vamos a echarle un vistazo general al programa para familiarizarnos con la interfase y para que ustedes puedan ir investigando en el transcurso de la semana. Si bien se supone que muchos an no poseen los conocimientos necesarios para crear una pgina web completa es bueno ir metindose sin miedo en cadamen para tener una idea de para qu sirve cada elemento.

    Conociendo Adobe Dreamweaver


    1- Barra de men:

    File (Archivo): Es el primer tem de la barra de men. En l encontramos opciones que les sern familiares en su mayora ya que se encuentran en varios programas de escritorio (Word, Excel, etc). Tenemos aqu la opcin, New(nuevo), Abrir(open), Save(guardar),Close(cerrar), y otras no tan comunes, pero que veremos como acceder a ellas desde diferentes lugares que explicaremos en futuras clases. Edit(Edicin): En este men, contamos con las ya conocidas, Copy(copiar), Paste(pegar), Select All(seleccionar todo), etc. Adems de las opciones comunes ya tenemos otras que explicaremos con un poco ms de detalle a medida que las vayamos utilizando durante el curso. View(Ver): Este men tiene opciones muy importantes para utilizar a la hora de hacer un sitio web. Podemos realizar Zoom in/out, activar reglas (rulers), poner

    una cuadrcula (grid), o acomodar guas para poder alinear los elementos que tenemos (en modo visual). Tambien desde aqu podemos abrir otros paneles tanto del modo visual como delmodo cdigo, que nos servirn para ajustar preferencias de visualizacin entre otras cosas. Estas herramientas las van a utilizar mucho y les van a ir encontrando su utilidad a medida que trabajen con el programa, echen una mirada al men para recordar las opciones y luego a la hora de usarlas ya sabrn donde estn. No se preocupen si no entienden alguna herramienta, o el programa no les permite utilizarla; cuando estemos ms avanzados en el curso haremos alguna clase-taller para uso de herramientas y comodidad a la hora de usar el programa. Insert (insertar): Aqu podremos encontrar varios tipos de objetos para poner en nuestra pgina, como tablas, imgenes, links, etc. No vamos a hablar mucho sobre este men ahora porque Dw tiene una barra de acceso rpido para insertar objetos, y explicaremos las opciones de la misma ms adelante, por lo tanto sera explicar dos veces lo mismo. Modify (modificar): Es el men indicado para editar cualquier cosa que tengamos dentro de nuestra pgina. Desde aqu podremos cambiarle el tamao a algunas cosas de nuestra pagina,alinearlas, agregarles links, o eventos (Qu son? Lo veremos mas adelante, jeje). Text (texto): En este men encontraremos todas las opciones para modificar texto como si de unprocesador de texto se tratara. Podremos alinearlo, cambiar la fuente, tamao, color y algunas otras cosas que las veremos cuando comencemos nuestra primera pgina (Vamos, que no falta tanto!!). Commands: La verdad que a este men no le encontr demasiado uso. Si bien tiene algunas cosas (como la de limpiar el cdigo por ejemplo), como este curso va de la mano conHTML no veo la necesidad de estas herramientas, aunque pueden investigarlas cuando ya estemos avanzados en nuestra pgina. Sin embargo creo que hacer bien una pgina, tambin consiste en ir armndola prolijamente, y no darle un repaso al final para acomodarlo ms o menos y que siempre nos falte algo por emprolijar. Site (sitio): Este men es el que nos permite definir nuestro sitio a la hora de empezar a trabajar con Dw. Tambin tiene algunas opciones para hacernos la vida

    fcil a la hora de trabajar directamente sobre un servidor. Ms adelante cuando creemos y configuremos nuestro primer sitio, veremos las opciones detalladamente. Window (ventana): Este men tiene todas las herramientas referidas a nuestro espacio de trabajo. Podemos ocultar o mostrar otros menes, paneles, ventanas y ordenar nuestros espacios a gusto. Help (ayuda): Aqu encontraremos la ayuda que nos ofrece Adobe para utilizar el programa. Si bien tiene cosas interesantes, yo en mi experiencia personal, nunca us la ayuda, no slo de este programa sino de ninguno. Muchas veces porque se pasan de bsicas o se vuelven para expertos. Los casos restantes, se tornan intiles (:p). Conozco gente que la ha usado para aprender incluso el uso del programa. Yo prefiero un tutorial como los que se dan en elWebmaster.com ;) hechos por gente que aprendi como uno lo esta haciendo, y que ya se top con los problemas que nos topamos nosotros a la hora de usarlo. Conclusin Llegamos al final de esta clase, como siempre los espero la semana que viene para seguir aprendiendo sobre la creacin de pginas web. Traten de ir familiarizndose con el programa, utilcenlo aunque no sepan hacer una pagina en s. Es muy importante conocer el entorno de trabajo para no volvernos locos el da que se nos ocurra hacer algo y no sepamos donde estn las cosas. Buenas, buenas! Hoy vamos a presentar la cuarta clase del curso de Dw. La clase pasada vimos la barra de men con todas sus herramientas (algunas quedaron pendientes para mas adelante por su complejidad). Esta semana, vamos a ver los paneles de herramientas que, adems de tener muchas opciones que todava no conocemos, tiene accesos directos a varias de las cosas que ya vimos la clase pasada en la barra de men, pero de manera ms fcil y dinmica.

    Panel Insert (insertar)


    El panel de insertar nos provee de la gran mayora de las herramientas de diseo a la hora de realizar nuestra web. Ahora vamos a ir mostrando cada una y diciendo para que sirven. No se preocupen por los detalles porque mas adelante iremos usando cada una por separado mostrando el uso de todas sus opciones, y su manejo en HTML. Recuerden que estamos en la fase de presentacin del programa. Pestaa Common:

    Aqu tenemos una vista del panel con sus pestaas y sus herramientas.

    Hyperlink: Mediante esta herramienta, podemos crear un enlace, por ejemplo, a un sitio externo (otra pgina), a una parte de nuestra pgina. Email-link: Con esta herramienta podemos crear un link a una direccin de email. Cuando un usuario haga clic, directamente le abrir su programa de mailing predeterminado (Outlook, Thunderbird, etc.), con la direccin que hayamos puesto nosotros en el link, listo para mandar el email. Named Anchor: Esta herramienta nos permite crear un punto de ancla para luego reconocerlo. O sea, nos permite marcar nuestra pagina, para luego poner links que vayan a esas marcas. Table: Nos permite crear una tabla con divisiones de columnas, filas, tamaos, y espaciados. Insert Div Tag: Nos permite crear el elemento Div, que es uno de los mas usados dentro del diseo web actual. Con el podemos crear cuadros en los que pondremos contenido, para luego ubicarlos donde a nosotros nos parezca. Images: Nos permite insertar imgenes, entre otras cosas (que veremos mas adelante). Media: Nos permite insertar animaciones Flash, y otros objetos multimedia. Date: Nos permite ingresar la hora actual en diferentes formatos (bastante intil por cierto).

    Server Side Include: Permite incluir un archivo de cdigo por fuera de la pagina actual (ya lo veremos tambin mas adelante, cuando lo vayamos usando). Comment: Sirve para ingresar un comentario dentro de nuestra pgina, que nos sirva de referencia a nosotros, pero que no afecte a la visualizacin (es una gua para los desarrolladores, pero el usuario que vea la pagina, no lo ver). Head: Con esta herramienta podemos incluir diferentes cosas en la cabecera de la pgina. La cabecera es la parte de la pgina que no se ver y en la que incluimos especificaciones como, por ejemplo, el ttulo de la pgina. Script: Nos permite ingresar cdigo de programacin dentro de una pgina, como por ejemplo Javascript. Templates: Esta herramienta sirve para crear un template a partir de una pgina que estemos haciendo, y marcarle regiones editables. En s, es para crear una base de pgina, sin contenido, para luego usarla con varios contenidos diferentes, si eso queremos.

    Tag Chooser: Sirve para seleccionar etiquetas HTML (o de otro lenguaje) e insertarlas directamente en nuestra pgina. No le veo otra utilidad que la de poder insertar una etiqueta, la cual nos hayamos olvidado el nombre. Innecesario, pero est :p . Conclusin Esta parte del taller es bastante larga, porque son demasiadas las herramientas a mostrar y la verdad que como este curso es para todos los niveles no quiero dejar nada afuera. Los que vengan siguiendo el curso semana a semana y no sean principiantes, tal vez se aburran un poco, aunque pueden repasar; y los que sean principiantes y no hayan encontrado nada anteriormente que puedan entender Pues ac esta la panacea del dummy webmaster!!! La semana que viene seguiremos con la exploracin de los paneles de herramientas, y luego empezaremos con nuestro sitio.

    Taller de Adobe Dreamweaver: Panel Insert, pestaa Layout


    TALLERES, DREAMWEAVER, TUTORIAL DREAMWEAVER, CURSO DREAMWEAVER, TALLER DREAMWEAVER, DREAMWEAVER CLASE 5

    Y aqu estamos de nuevo! Volvemos con todo en nuestra clase 5. La clase pasada vimos la primer parte del panel insertar, la pestaa common. Hoy nos toca seguir con las dems pestaas, y ver hasta dnde llegamos. Me gustara que los que siguen o leen el curso enven sus preguntas o comentarios; las dudas que tengan. No se queden con las ganas, el curso est hecho para ustedes, y si no aprenden, de nada sirve el curso entonces. Entre todos podremos aprender y ensear. Panel Insert (insertar), segunda parte. Pestaa Layout:

    Mode: Nos permite poner el modo de visualizacin del panel de layout. Insert Div Tag: Nos permite crear el elemento Div, que es uno de los ms usados dentro del diseo web actual. Estos son cuadros en los que pondremos contenido, para luego ubicarlos donde a nosotros nos parezca. Esta opcin ya la vimos en la pestaa common, en la que tambin se encuentra. Draw AP Div: Nos crea un elemento Div en el lugar en el que nosotros lo dibujemos a mano alzada. Se usa en modo visual como si se tratara de una herramienta rectngulo de un programa de edicin grafica. A veces no da el resultado deseado, as que conviene usar esta herramienta con cuidado. Spry men bar: Nos crea una barra de men desplegable, en la que al pasar por un elemento del men, se despliega otro con ms opciones. La verdad no es la manera en la que yo la hara pero puede sacarnos de un apuro. Ms adelante veremos como hacer este tipo de menes, pero ms lindos :p .

    Spry tabbed panels: Esta herramienta es parecida a la anterior, pero en vez de crearnos un men desplegable, nos crea una barra de pestaas. Spry accordion: Otro de los regalitos de Dreamweaver para decorar festivamente nuestra pagina (ya me enoj con tanta cosita inservible). Esta herramienta nos agrega un men en forma de acorden, que cuando clickeamos cada una de las pestaas, el men se desplega hacia abajo abriendo un lugar en donde podemos agregar contenido. Es difcil de explicar su utilizacin, por ah lo ms prctico sera que lo prueben una vez que aprendamos a crear una pgina. Spry collapsible panel: Esta es la que ms me gusto de todas las spry. Nos crea una pestaa que cuando la cliqueamos, se nos abre una caja lentamente hacia abajo, en la que podemos poner contenido. Es una especie de spry accordion pero de un solo botn. Table: Nos permite crear una tabla con divisiones de columnas, filas, tamaos, y espaciados. Esta herramienta tambin se encuentra en la pestaa common que vimos y explicamos la clase pasada. Insert row abobe: Esta herramienta nos deja insertar una fila debajo de la fila en la que estemos parados actualmente. Siempre dentro de una tabla por supuesto. Insert row below: Al contrario de la anterior, esta herramienta nos deja incluir una fila por encima de donde estemos parados actualmente en la tabla. Insert column left: Agrega una columna a la izquierda de donde estemos parados en nuestra tabla. Insert column right: Agrega una columna a la derecha de donde estemos parados actualmente en nuestra tabla. Frames: Nos permite crear frames, que son divisiones de nuestra pgina en la podremos cargar otras pginas diferentes. Iframe: A primera vista son parecidos a los frames ya que crean una divisin en nuestra pgina donde podemos cargar una segunda, aunque tienen

    diferencias muy importantes. Ya veremos a ambos ms adelante y sus ventajas y desventajas. Conclusin Bueno, por ahora dejemos la clase aqu. Como vern las opciones de Dw son muchas, y todava nos quedan muchas ms. Esperemos terminar pronto de verlas a todas as ya podemos crear nuestra primer pgina, empezar a ponerlas en accin, y comentar un poco ms a fondo cada una.

    Taller de Adobe Dreamweaver: Panel Insert, pestaa Forms


    TALLERES, DREAMWEAVER, TUTORIAL DREAMWEAVER, CURSO DREAMWEAVER, TALLER DREAMWEAVER, DREAMWEAVER CLASE 6

    Hola! Cmo andan? Preparados para otra clase de Dreamweaver? En esta clase, la numero 6, vamos a ver maaas herramientas del panel Insert. Y s son muchas herramientas, pero a no aflojarle, que esta es la parte ms pesada pero es importante un reconocimiento de la interfase para ya ir sabiendo por lo menos los nombres y qu son cada una de las herramientas, as cuando las expliquemos a fondo con sus usos, no nos sonarn a chino mandarn. Hoy nos toca revisar las herramientas de la pestaa Forms, y si podemos llegar a ver la pestaa Data, mejor, as sacamos esto mas rapido, y ustedes que siguen el curso tienen ms para estudiar durante la semana (me imagino que estarn probando las cosas que vemos en cada taller no? jeje).

    Panel Insert (insertar), tercera parte.


    Pestaa Forms:

    Form: A que no saben para que sirve esta herramienta? Correcto! para insertar un formulario. Podemos usarla tanto en modo de diseo como en modo cdigo. Los formularios nos sirven para que los usuarios puedan cargar datos, y as nosotros recibirlos desde nuestra pgina.

    Cuando un formulario es enviado, enva todos los elementos del formulario con l.

    TextField: Un textfield es un elemento de formulario, es el lugar donde se puede escribir texto, para que luego sea enviado por nuestro formulario. Este elemento va dentro de un formulario, y cuando este se enva, enviar con l todos los textfields tambin. Un ejemplo de un TF para que tengan una idea es el lugar donde ponen su nombre o su nickname, cuando se registran en una pgina. Hidden Field: Un Hidden Field es un TextField, slo que tiene una propiedad que lo hace oculto, as el usuario no lo puede ver, ni cargarle datos. Sirven para nosotros, los administradores de sitios web, para poder precargarle informacin que necesitemos, un ejemplo fcil, qu navegador esta usando (en realidad es mas til que eso pero ya lo veremos). Text-Area: Un Textarea es un campo muy parecido a un textfield, slo que es ms grande, y tiene no solo una fila sino que puede tener varias. Sirve para contener textos grandes y tambin nos ofrece barras de scroll para poder setearle un tamao, y si el texto excede el tamao del Text-Area, poder navegarlo con las barras. Checkbox: Un checkbox nos permite poner una cajita de checkeo (como las que aparecen al lado de acepta los trminos y condiciones estas sirven para que el usuario seleccione una o mas, entre varias opciones. Radiobutton: es igual que un checkbox, slo que permite elegir uno y solo uno entre varios radiobuttons. Adems, clickeando uno seleccionado, no se deselecciona (como pasa con los checkbox), aunque s lo hace cuando clickeamos otro radiobutton del grupo. Radiogroup: es un atajo que nos brinda Dw para poder poner varios radiobuttons que pertenezcan a un mismo grupo, y adems nos pone cada radiobutton entre las etiquetas label que nos permiten dar una identificacin a cada uno. List-menu: Nos permite poner un men desplegable de seleccin para que el usuario pueda elegir entre una de las opciones que le pongamos. Se usan mucho en los registros para seleccionar la fecha de nacimiento. Jump-menu: es como un list-menu, solo que sus opciones nos permiten llevar a quien las elija a otra pgina, u otro archivo.

    Por ejemplo, podemos tener una lista de opciones de varias pginas, y que cuando el usuario clickee una en el men, lo lleve directamente.

    Image-field: Es un campo en el que podremos poner una imagen, y que al clickearlo enviara el formulario con lo que tengamos cargado. En s, sirve como botn de enviar pero con la diferencia que podemos ponerle la imagen que nosotros queramos. File-field: Inserta una casilla con el botn de examinar para que el usuario pueda buscar y enviar un archivo a nuestro sitio. Button: nos permite insertar un botn, que va a tener varias funcionalidades que podremos elegir. Por ejemplo, enviar el formulario o borrar los campos del mismo entre otras cosas. Label: sirve para poner una descripcin a un campo, a modo de ejemplo: Acepta los trminos? Aquel texto es un Label de la checkbox. Fieldset: La herramienta fieldset nos permite agrupar campos de un formulario. Podemos crear un Fieldset y dentro poner los text-fields de datos del usuario, crear otro fieldset y poner los checkbox de preferencias, otro textfield y poner el boton de enviar formulario o borrar formulario. Spry validation textfield: esta opcin nos permite agregar un campo de texto (textfield) que adems de permitir que el usuario ingrese datos, podemos seleccionar que tipo de datos debe contener el campo y, si el usuario ingresa otra cosa, cuando intente enviar el formulario, le saldr un cartel de error. Esto sirve por ejemplo si queremos que el usuario ingrese un email en nuestro campo, que ponga realmente un email y no cualquier cosa. Spry validation textarea: Esta opcin nos permite crear un textarea con validacin. Al igual que el anterior si el textarea no cumple con los requisitos de validacin, al intentar enviar el formulario nos dar error. Spry validation checkbox: y seguimos con validaciones. Es igual a un checkbox comn, pero verifica por ejemplo, si tenemos varios checkbox en un grupo y queremos que al menos uno este seleccionado (entre otras cosas).

    Spry validation select: al igual que el list-menu que vimos anteriormente este es igual con la diferencia que valida que el usuario haya elegido al menos una de las opciones del selector. Conclusin Bueno, espero que no estn muy cansados de ver tantas herramientas (yo si :p ) y no se preocupen (o preocpense) porque vienen muchas ms!! La clase que viene espero que ya estemos terminando con el panel Insert y ya dar comienzo a la creacin de nuestra primera pgina. Vayan practicando las cosas que vimos, mirando como funcionan y sus opciones. No se queden solo con lo que vemos ac y nada mas, vanlo en vivo y en directo desde el Dw, as pueden entender todo lo que hace el programa, y si se animan, vanlo en modo cdigo as se van familiarizando con el HTML.

    Você também pode gostar