Juan Manuel 4 de marzo de 2008 a las 17.14
   Imprimir artículo
elWebmaster.com

Taller de Adobe Dreamweaver: Panel Insert, pestaña Forms


Adobe Dreamweaver¡Hola! ¿Cómo andan? ¿Preparados para otra clase de Dreamweaver? En esta clase, la numero 6, vamos a ver máaaas herramientas del panel Insert.

Y sí… son muchas herramientas, pero a no aflojarle, que esta es la parte más 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 sonarán a chino mandarín.

Hoy nos toca revisar las herramientas de la pestaña “Forms”, y si podemos llegar a ver la pestaña “Data”, mejor, así sacamos esto mas rapido, y ustedes que siguen el curso tienen más para estudiar durante la semana (me imagino que estarán probando las cosas que vemos en cada taller no? jeje).

Panel Insert (insertar), tercera parte.

Pestaña Forms:

Forms de Adobe Dreamweaver

  • form de Adobe DreamweaverForm: ¿A que no saben para que sirve esta herramienta? ¡Correcto! para insertar un formulario. Podemos usarla tanto en modo de diseño como en modo código.
    Los formularios nos sirven para que los usuarios puedan cargar datos, y así nosotros recibirlos desde nuestra página.
    Cuando un formulario es enviado, envía todos los elementos del formulario con él.
  • text-field de Adobe DreamweaverTextField: 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 envía, enviará con él todos los textfields también.
    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 página.
  • hidden-field de Adobe DreamweaverHidden Field: Un Hidden Field es un TextField, sólo 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 información que necesitemos, un ejemplo fácil, qué navegador esta usando (en realidad es mas útil que eso pero ya lo veremos).
  • text-area de Adobe DreamweaverText-Area: Un Textarea es un campo muy parecido a un textfield, sólo que es más grande, y tiene no solo una fila sino que puede tener varias.
    Sirve para contener textos grandes y también nos ofrece barras de scroll para poder setearle un tamaño, y si el texto excede el tamaño del Text-Area, poder navegarlo con las barras.
  • checkbox de Adobe DreamweaverCheckbox: Un checkbox nos permite poner una cajita de checkeo (como las que aparecen al lado de “acepta los términos y condiciones…” estas sirven para que el usuario seleccione una o mas, entre varias opciones.
  • radio-button de Adobe DreamweaverRadiobutton: es igual que un checkbox, sólo que permite elegir uno y solo uno entre varios radiobuttons. Además, clickeando uno seleccionado, no se deselecciona (como pasa con los checkbox), aunque sí lo hace cuando clickeamos otro radiobutton del grupo.
  • radiogroup de Adobe DreamweaverRadiogroup: es un atajo que nos brinda Dw para poder poner varios radiobuttons que pertenezcan a un mismo grupo, y además nos pone cada radiobutton entre las etiquetas “label” que nos permiten dar una identificación a cada uno.
  • listmenu de Adobe DreamweaverList-menu: Nos permite poner un menú desplegable de selección 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 de Adobe DreamweaverJump-menu: es como un list-menu, solo que sus opciones nos permiten llevar a quien las elija a otra página, u otro archivo.
    Por ejemplo, podemos tener una lista de opciones de varias páginas, y que cuando el usuario clickee una en el menú, lo lleve directamente.
  • image field de Adobe DreamweaverImage-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 botón de “enviar” pero con la diferencia que podemos ponerle la imagen que nosotros queramos.
  • file field de Adobe DreamweaverFile-field: Inserta una casilla con el botón de “examinar…” para que el usuario pueda buscar y enviar un archivo a nuestro sitio.
  • button de Adobe DreamweaverButton: nos permite insertar un botón, que va a tener varias funcionalidades que podremos elegir. Por ejemplo, enviar el formulario o borrar los campos del mismo entre otras cosas.
  • label de Adobe DreamweaverLabel: sirve para poner una descripción a un campo, a modo de ejemplo:
    ¿Acepta los términos? Aquel texto es un Label de la checkbox.
  • fieldset de Adobe DreamweaverFieldset: 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”.
  • Adobe DreamweaverSpry validation textfield: esta opción nos permite agregar un campo de texto (textfield) que además 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.
  • Adobe DreamweaverSpry validation textarea: Esta opción nos permite crear un textarea con validación. Al igual que el anterior si el textarea no cumple con los requisitos de validación, al intentar enviar el formulario nos dará error.
  • Adobe DreamweaverSpry validation checkbox: y seguimos con validaciones. Es igual a un checkbox común, pero verifica por ejemplo, si tenemos varios checkbox en un grupo y queremos que al menos uno este seleccionado (entre otras cosas).
  • Adobe DreamweaverSpry 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.

Conclusión

Bueno, espero que no estén muy cansados de ver tantas herramientas (yo si :p ) y no se preocupen (o preocúpense) ¡¡porque vienen muchas más!!

La clase que viene espero que ya estemos terminando con el panel Insert y ya dar comienzo a la creación de nuestra primera página.

Vayan practicando las cosas que vimos, mirando como funcionan y sus opciones.

No se queden solo con lo que vemos acá y nada mas, véanlo en vivo y en directo desde el Dw, así pueden entender todo lo que hace el programa, y si se animan, véanlo en modo código así se van familiarizando con el HTML.

¡Saludos!
Hasta la próxima.

<< CLASE ANTERIOR  

CLASE SIGUIENTE >>


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (17)

  1. Alex_sprrow dice:

    No si esta chido el curso, pero agilisenle, es decir mas rapidito no?
    Me podrian decir que dw estan usando para las ilustraciones, porque no se parese al mio, dw cs3

  2. alexei dice:

    que me disculpe Alex_sprrow por no coincidir con su criterio de acelerar el curso, en lo demas tiene razon, las clases son muy buenas y vuelvo a defender a los que como yo estamos empezando ahora, la calidad va de la mano con la minuciosidad y la calma con la cual estan exponiendo los contenidos.
    Veremos cuando todos estemos a un nivel de conocimientos semejante, gracias.

  3. Thor dice:

    Hola Alex.

    Con respecto a la velocidad, talvez la clase próxima aceleremos un poquito con esta sección del taller.

    Con respecto a las imágenes, son todas de Adobe Dreamweaver CS3, explícitamente, la versión incluida en el paquete Adobe Design Premium CS3

    Saludos!
    Thor

  4. alexei dice:

    no etoy de acuerdo con Alex_sprrow en lo de acelerar el curso y de eso se ha hablado otras veces, las clases si estan geniales, gracias

  5. Alejandro Calderón dice:

    Saludos gente linda de ElWebmaster.com!
    Gracias por este taller, ya me puse al día, gracias por lo ameno que hacern el aprender a hacer sitios web. Sigan adelante!!!

  6. Wikiam dice:

    epale que mas que pasa con la clase numero 7 de dreamweaver

  7. Juan Manuel dice:

    ¡Hola, Wikiam! las clases de los talleres se publican una vez por semana, la semana que viene ya estará disponible la clase.
    ¡Saludos!

  8. Alex_sparrow dice:

    Hola a todos…

    Gracias por tu respuesta thor y creo que tienes razón, parece tediosa en razón de que solo se estan viendo las herramientas. Pero lo bueno viene cuando se empieze a desarrollar el sitio de practica. Mientras tanto yo ya saque mi sitio de linea. En el index, solo muestro un grafico en una pagina que logre hacer en DW a lo bestia..jeje. Gracias y sigan adelante, yo estare atento del curso. Saludos a todos desde mexico… Si alguien quiere agregarme en MSN me gustaria para estar en contacto y charlar:

    webmaster2310@hotmail.com

  9. leo dice:

    tomate tu tiempo el tutorial esta muy bien hecho, solo que no dejes de hacerlo detallado y entendible y sobre todo avanzado como para que nosotros podamos ser unos expertos !!!!

  10. Paola dice:

    Hola, me parece muy bueno el curso, sobre todo la matodologia, pero mi inquietud es la siguiente: yo tengo instalado el Dw 8 en español y por lo que estoy viendo hay cosas diferentes, por ejemplo hay cosas que yo no tengo en las pestañas y quiero saber si eso me va a impedir seguir el curso, o por ahi estan en otro lado, no?, si es asi diganme donde
    Gracias

  11. Thor dice:

    Hola Paola.

    No hay problema, la version de Dw no te va a impedir seguir el Taller, sera cuestion que te las rebusques tratando de encontrar las opciones correspondientes.
    Ademas no te olvides que tambien enseñamos HTML, por lo que si alguna opcion directamente no esta disponible en tu Dw, podras hacer en modo codigo lo que quieras.

    ¡Saludos!

  12. Paola dice:

    Gracias Thor!! Espero seguir el curso hasta el final, eso si,siempre va a haber una preguntita mia dando vueltas por ahi, ja, ja.
    Saludos

  13. Rigoberto dice:

    Bueno, tren go una duda en los formularios, como puedo validar varios checkbox y que me diga tienes que validar como minimo uno,

  14. Ronald dice:

    Me parece muy bueno que se tomen tiempo para cada herramienta, pues en verdad nunca las entendi muy bien, soy nuevo manejando el DREAMW pero me he leido desde el principio, espero poder hacer la pagna y poder poner algo no tan cuadrado como he aprendido hasta ahora, Gracias continuen asi, yo sigo leyendo.

  15. pamela dice:

    hola quisiera que me digan como ingreso un almanaque en un formulario de dreanwever en el cual los visitantes puedan indicar un fecha determinada (ej. fecha de nacimiento) gracias

  16. nidia dice:

    por favor tengo un inconveniente no puedo hacer que un menu que cree con la opcion spry se vea encima de una imagen el submenu, automaticamente se va atras de esta imagen.

    si alquien sabe por favor ayudemen.
    garcias de antemano

  17. Manuel dice:

    Hola, tengo problemas para poder realizar un menu de opciones, y creo que la opcion de Jump-menu, es la correcta, pero no se ver como añadir a las opciones un vinculo para que me muestre la pagina a la que quiero que se dirija. Estaria muy agradecido si pudiera solucionar mi problema.

    Un saludo, Manuel

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder