Diseño Web y Multimedia (COEPA)

martes, 15 de febrero de 2011

Dreamwaver CS5 (I)

logo COEPA Dreamwaver es un editor de páginas web creado por la empresa Adobe que permite la creación de sitios web tanto tecleando código html como de forma visual, con lo que también es un editor WYSIWYG. La versión con la que hemos trabajado en el curso es la CS5, y Dreamwaver no es un software libre.

A rasgos generales, lo mejor de Dreamwaver es la posibilidad de crear plantillas para un sitio web, de forma que si necesitamos hacer algún cambio en un sitio web a medio desarrollar, con solo modificar la plantilla y guardar los cambios, Dreamwaver modifica automáticamente todas las páginas de nuestro sitio web creadas anteriormente, en lugar de tener que ir aplicando los cambios manualmente en cada una de las páginas. Esto se hace creando una Página de plantilla desde la pantalla inicial de Dreamweaver, en Crear nuevo, Más..., Página de plantilla, y es posible tener varias plantillas para un mismo sitio web.

Al crear un nuevo sitio web, debemos indicar a Dreamwaver en que carpeta de nuestro disco duro vamos a alojar sus ficheros, creando así un "Sitio de Dreamwaver". Podemos administrar varios sitios web en el panel "Archivos" de la parte inferior derecha. Después creamos la Página de plantilla para nuestro sitio y, añadiendo los elementos html necesarios, se guarda la plantilla.

En la plantilla se deben definir las zonas editables que serán las partes del contenido de las distintas páginas de nuestro sitio web, las cuales se irán completando posteriormente, y las zonas no editables de la plantilla quedarán "protegidas" para que no se puedan modificar por error; estas partes "protegidas" de la plantilla serán donde se están las capas div de las cabeceras y/o columnas de la estructura de dicha plantilla de nuestro sitio, cuyas características serán definidas en la hoja de estilo css.

Enlazo aquí este otro "Curso de Creación Web" que parece estar orientado a Dreamwaver, pues describe las áreas de trabajo del programa, barras, paneles, y ofrece ejercicios y demás.

martes, 17 de agosto de 2010

Formularios: para enviar archivos, atributo 'file'

logo COEPA Es para el típico botón Examinar que aparece en algunas webs, desde el cual se abre una ventana del explorador de archivos con la que buscar un archivo que queremos enviar a una web.

Para que se aplique correctamente, en la etiqueta <form> hay que incluir el atributo y el valor 'enctype="multipart/form-data"':

<form enctype="multipart/form-data" method="post" action="http://..../validar.php">
<input type="file" name="fichero" />
</form>

Formularios: conjunto de campos, etiqueta 'fieldset' y 'legend'

logo COEPA Se usan dentro de un formulario para agrupar campos de entrada de datos relacionados, entre las etiquetas '<fieldset>' y '</fieldset>' se definen los campos de entrada. Justo después de la etiqueta de apertura '<fieldset>' y usa la etiqueta '<legend>Texto que identifica el 'fieldset'</legend>' para identificar los datos del 'fieldset'.

Posteriormente, seguiremos usando la etiqueta <label> para identificar cada uno de los campos de entrada:

<form method="post" action="http://..../validar.php">
<fieldset>
<legend>Datos personales</legend>
<label for="v-nombre">Nombre: </label>
<input type="text" name="v-nombre" /><br />

<label for="v-apellidos">Apellidos: </label>
<input type="text" name="v-apellidos" /><br />

<label for="v-email">Email: </label>
<input type="text" name="v-email" /><br />

<label for="pass">Contraseña: </label>
<input type="password" name="pass" /><br />
</fieldset><br />
<input type="submit" name="enviar" value="Enviar" /> <input type="reset" name="borrar" value="Borrar todo" /><br />
</form>

Y los campos de entrada dentro del 'fieldset' se mostrarán como se puede ver a continuación:

Se pueden poner varios 'fieldset' dentro de un mismo formulario para así ir agrupando dentro de cada uno campos de entrada del mismo tipo: datos personales, aficiones, etc

Otro ejemplo con varios 'fieldset':

Formularios: área de texto 'textarea'

logo COEPA Se usa para definir un área de texto dentro de un formulario, la etiqueta para definir un campo de texto es '<textarea>Texto de ejemplo</textarea>', y su uso es como se muestra a continuación:

<form method="post" action="http://..../validar.php">
<textarea name="nombre_variable" >Texto de ejemplo</textarea>
</form>

Y se mostrará lo siguiente:

Algunos atributos para <textarea>:

'cols="numero-de-columnas"': se usa para especificar el número de columnas que queremos que tenga el área de texto.
<form method="post" action="http://..../validar.php">
<textarea name="nombre_variable" cols="50">Texto de ejemplo</textarea>
</form>

Y se mostrará lo siguiente:

Texto de ejemplo
'rows="numero-de-filas"': para especificar el número de filas del área de texto.
<form method="post" action="http://..../validar.php">
<textarea name="nombre_variable" rows="5" cols="15">Texto de ejemplo</textarea>
</form>

Y se mostrará lo siguiente:

Texto de ejemplo
'readonly="readonly"': este atributo se usa para mostrar texto, y el usuario del sitio web no puede modificarlo.
<form method="post" action="http://..../validar.php">
<textarea name="nombre_variable" readonly="readonly" rows="5" cols="15">Texto de ejemplo: campo de solo lectura</textarea>
</form>

Y se mostrará lo siguiente:

Texto de ejemplo: campo de solo lectura

Formularios: Campos de selección, etiquetas 'select' y 'option', atributos 'selected' y 'multiple'

logo COEPA Los campos de selección son los típicos campos de un formulario en los que hay que escoger opciones de las que aparecen en una lista desplegable:

Etiqueta '<select name="nombre-variable" >': es para abrir un campo de selección. Dentro de este campo de selección irá una etiqueta <option value="valor-de-variable" >texto de la opción a elegir</option> para cada uno de las opciones del 'select', y después se cierra la etiqueta '</select>'. Al igual que los otros campos de formulario vistos, el campo 'select' debe ir entre las etiquetas de apertura y cierre de formulario 'form':
Aquí se puede usar el atributo selected="selected" para elegir una opción por defecto, del mismo modo que se hacia antes con checked="checked" en los campos del tipo 'checkbox' y 'radio'.

<form method="post" action="http://..../validar.php">
<label for="pais">Selecciona tu país </label>
<select name="pais">
<option value="Italia">Italia</option>
<option value="Alemania">Alemania</option>
<option value="Portugal">Portugal</option>
<option selected="selected" value="España">España</option>
</select>
</form>

Y el código anterior aparecerá así:

Selecciona tu país

En este campo también es típico poner una opción vacía, y en este caso no se usa el atributo 'selected':

<form method="post" action="http://..../validar.php">
<label for="pais">Selecciona tu país </label>
<select name="pais">
<option value=""></option>
<option value="Italia">Italia</option>
<option value="Alemania">Alemania</option>
<option value="Portugal">Portugal</option>
<option selected="selected" value="España">España</option>
</select>
</form>

Y el código:

Selecciona tu país
Atributo 'multiple="multiple"' para la etiqueta '<select ... >': con este atributo, manteniendo pulsada la tecla Ctrl (CONTROL) del teclado, se pueden seleccionar más de una opción:
Aquí se puede usar el atributo selected="selected" para elegir más de una opción por defecto.

<form method="post" action="http://..../validar.php">
<label for="pais">Selecciona países en los que has estado </label>
<select name="pais" multiple="multiple" >
<option value="Italia">Italia</option>
<option value="Alemania">Alemania</option>
<option value="Portugal">Portugal</option>
<option selected="selected" value="España">España</option>
<option value="México">México</option>
<option value="India">India</option>
<option value="China">China</option>
<option selected="selected" value="Japón">Japón</option>
<option value="Argentina">Argentina</option>
</select>
</form>

Ahora se puede seleccionar más de una opción -manteniendo pulsada la tecla CONTROL (Ctrl) del teclado- y el código aparecerá así:

Selecciona países en los que has estado

Formularios: 'checkbox', 'radio', 'hidden', 'submit', 'button', 'reset'

logo COEPA En esta entrada del blog seguimos con los campos de entrada de formularios en los que el usuario puede escoger entre una o varias opciones:

type="checkbox": es para crear casillas de activación, de las que se pueden escoger, en principio, de ninguna a varias opciones:
<form method="post" action="http://..../validar.php">
Escoge los equipos que te gustan:<br />
<input type="checkbox" name="f-madrid" value="f-madrid" />R Madrid<br />
<input type="checkbox" name="f-barcelona" value="f-barcelona" />FC Barcelona<br />
<input type="checkbox" name="f-bilbao" value="f-bilbao" />ATH Bilbao<br />
</form>

Y el código se mostrará así:

Escoge los equipos que te gustan:
R Madrid
FC Barcelona
ATH Bilbao
- El atributo: 'checked="checked"' se emplea para marcar algunas de las opciones por defecto, el usuario puede desmarcar cualquiera de esas opciones y/o marcar otras:
  <form method="post" action="http://..../validar.php">
  Escoge los equipos que te gustan:<br />
  <input type="checkbox" name="f-madrid" value="f-madrid" checked="checked" />R Madrid<br />
  <input type="checkbox" name="f-barcelona" value="f-barcelona" />FC Barcelona<br />
  <input type="checkbox" name="f-bilbao" value="f-bilbao" checked="checked" />ATH Bilbao<br />
  </form>
  
  Y el código se mostrará así:
  
  Escoge los equipos que te gustan:
  R Madrid
  FC Barcelona
  ATH Bilbao
type="radio": casillas de activación discriminatorias, el código se mostrará así:
Aquí también se puede usar el atributo checked="checked", pero solo en una de las opciones.

<form method="post" action="http://..../validar.php">
Escoge los equipos que te gustan:<br />
<input type="radio" name="equipo" value="madrid" />R Madrid<br />
<input type="radio" name="equipo" value="barcelona" />FC Barcelona<br />
<input type="radio" name="equipo" value="bilbao" checked="checked"/>ATH Bilbao<br />
</form>

Y se mostrará así:

Escoge los equipos que te gustan:
R Madrid
FC Barcelona
ATH Vilbao
type="hidden": campos ocultos, para enviar datos de control, guardar información que el usuario rellenó antes, etc... tiene muchas utilidades para el webmaster:
<form method="post" action="http://..../validar.php">
<input type="hidden" name="nombre_de_variable" value="cualquiera" />
</form>

Y se mostrará así:

No muestra nada, es un campo oculto
type="submit": para el tipico botón ENVIAR:
<form method="post" action="http://..../validar.php">
<input type="submit" name="enviar" value="Enviar" />
</form>

Se mostrará así:
type="button": como submit, pero con el atributo ONCLICK, con el que se especifica la acción a tomar cuando se pulse el botón:
<form method="post" action="http://..../validar.php">
<input type="button" name="nombre2" value="Elección" onclick="ejemplo(ejemplo)" />
</form>

Se mostrará así:
type="reset": otro botón, este borra todos los datos del formulario y lo pone como estaba al principio... casi no se usa actualmente:
<form method="post" action="http://..../validar.php">
<input type="reset" name="nombre-variable" value="Borrar todo" />
</form>

Se mostrará así:
type="image": es para que el navegador muestre una imagen en lugar del típico botón, como se muestra en el ejemplo siguiente, se comporta igual que 'type="submit"':
<form method="post" action="http://..../validar.php">
<input type="image" src="url-imagen.gif" name="enviar" />
</form>

Se mostrará así:

Ejemplo de formulario con varios de los campos vistos

Primero el código HTML

<form method="post" action="http://..../validar.php">
<label for="v-nombre">Nombre: </label>
<input type="text" name="v-nombre" /><br />

<label for="v-apellidos">Apellidos: </label>
<input type="text" name="v-apellidos" /><br />

<label for="v-email">Email: </label>
<input type="text" name="v-email" /><br />

<label for="pass">Contraseña: </label>
<input type="password" name="pass" /><br />

<hr />
Escoge los equipos que conoces de la lista:<br />
<input type="checkbox" name="f-madrid" value="f-madrid" />R Madrid<br />
<input type="checkbox" name="f-barcelona" value="f-barcelona" />FC Barcelona<br />
<input type="checkbox" name="f-bilbao" value="f-bilbao" />ATH Bilbao<br />
<hr />
Escoge tu favorito de la lista:<br />
<input type="radio" name="equipo" value="madrid" />R Madrid<br />
<input type="radio" name="equipo" value="barcelona" />FC Barcelona<br />
<input type="radio" name="equipo" value="bilbao" />ATH Bilbao<br />
<input type="submit" name="enviar" value="Enviar" /> <input type="reset" name="borrar" value="Borrar todo" /><br /> </form>

Y se visualizará así:

Puedes probar sin miedo, ya que los datos no se envían a ninguna parte...

se pueden aplicar reglas CSS para personalizar el estilo en el que se mostrarán nuestros formularios, así como capas 'div' con un ancho definido (width: 55px;) para alinear los campos del formulario a rellenar...

Formularios: Campos "simples" de entrada de formularios. Etiquetas 'input', 'label' y atributos 'type', 'name', 'value'...

logo COEPA Los campos de entrada de formularios deben ir entre las etiquetas de formulario <form ... /> y </form> vistas en la entrada anterior, cada uno de estos campos se especifican con la etiqueta
<input type="tipo_de_campo_entrada" ... />, y las clases o tipos de campos de entrada 'type' son:

type="text", tipo de datos alfanumerico, a los que se le debe poner el atributo 'name' con el valor del nombre de variable, el cual podemos elegir libremente:
<form method="post" action="http://..../validar.php">
<input type="text" name="nombre_variable" />
</form>

Los nombres de variables no deben empezar por caracteres numéricos ni incluir espacios ni caracteres especiales.

Se mostrará así:

La etiqueta <label> se usa para especificar un texto relacionado con el contenido del campo del formulario a rellenar, y usa el atributo 'for' con valor igual a el nombre de la variable a la que hace referencia. Se aplica de la siguiente forma:

<form method="post" action="http://..../validar.php">
<label for="nombre_variable">Nombre: </label>
<input type="text" name="nombre_variable" />
</form>

El código anterior se mostrará así:

Nombre:

Otros atributos para este campo de formulario son:
- El atributo 'value' debe tener un texto que se mostrará por defecto en el campo del formulario; el cual será sustituido por el que introduzca el usuario:
  <form method="post" action="http://..../validar.php">
  <label for="nombre_variable">Nombre: </label>
  <input type="text" name="nombre_variable" value="Escriba aquí su nombre" />
  </form>
  
  Y el código se mostrará así:
  
  Nombre:
- El atributo 'maxlength' es para especificar la cantidad máxima de caracteres que se pueden introducir en el campo de texto, y se le debe asignar un valor numérico igual al número de caracteres máximo que se podrán introducir:
  <form method="post" action="http://..../validar.php">
  <label for="nombre_variable">Nombre: </label>
  <input type="text" name="nombre_variable" maxlength="3" />
  </form>
  
  Con maxlength="3", en el cuadro siguiente no se podrán introducir más de tres caracteres:
  
  Nombre:
- El atributo 'readonly="readonly"', es para que campo el campo no se pueda modificar, se queda en modo "solo lectura:"
  <form method="post" action="http://..../validar.php">
  <label for="nombre_variable">Nombre: </label>
  <input type="text" name="nombre_variable" readonly="readonly" value="Solo lectura" />
  </form>
  
  Y el cuadro siguiente no se puede escribir nada:
  
  Nombre:
type="password": al igual que type="text", es para introducir texto en un campo, pero este texto no se mostrará en la pantalla, en lugar de los caracteres introducidos se mostrarán circulos o asteriscos:
<form method="post" action="http://..../validar.php">
<label for="contraseña">Contraseña: </label>
<input type="password" name="pass" />
</form>

Y el código se mostrará así:

Contraseña:

Como es de suponer, también se pueden aplicar reglas CSS para personalizar el estilo en el que se mostrarán nuestros formularios...