Tarea 3 - 5. Ya merito

Bueno... despues de un rato de no postear en este blog, hoy lo retomamos... mil disculpas si alguien lo ha leido, y se le hizo que me tarde, pero he tenido un chorro de trabajo... y no habia tenido tiempo... pero espero hoy adelantarle bastante... El primer tema que debemos tratar, ya se habia tratado en un post anterior, así que solo lo vamos a recordar...

Procesamiento en el cliente vs procesamiento en el servidor

Como mencionamos en el post anterior, la diferencia básica entre estos dos tipos de procesamientos, además de el lugar donde se efectua, va a ser el performance que se obtenga... el cual tambien tiene otros costos. En el caso del procesamiento en el cliente, el performance es mucho más alto, sin embargo, no es adecuado para todo tipo de aplicaciones y/o necesidades, ademas de que será muy dependiente del Navegador que este instalado en el cliente. En el caso del procesamiento en el servidor, el performance será un poco más bajo, aunque con la tecnología existente en nuestros días, esto puede llegar a no ser significativo. Por ejemplo, con tecnologías como .NET, la desventaja de performance del procesamiento en el servidor, puede no ser tan amplia.

Bueno, no me voy a extender mucho en este tema... si les interesa verlo a mas detalle, chequense el post que menciono al principio de este mensaje.

El siguiente tema que debemos tratar es...

Formularios HTML

Bueno... en palabras sencillas, un Formulario HTML es la herramienta que se utiliza en HTML para recolectar información por parte del usuario de nuestro sitio. Recuerdan esos sitios donde pueden poner su nombre, dirección, teléfono, etc. y que al final tienen dos botones, uno para mandar la información (submit) y otro para cancelar? pues esos son los formularios HTML. En realidad, no es tan simple, ya que tienen un buen de diferentes elementos que se pueden utilizar para recolectar información, seleccionar alguna opción, etc. Así que, antes de meternos en cuestiones de código HTML, etc. primero vamos a listar y definir cada uno de estos elementos:

• Text Box (Caja de Texto).- Un text box es utilizado para teclear información en el, y luce de la siguiente forma:

• Check Box.- Es un control que sirve para escoger una o mas opciones dentro de una lista. Al estar seleccionado se "checa". Este es un ejemplo de una lista de Check Boxes:

Opcion 1
Opcion 2
Opcion 3

• Radio Button.- Permite escoger SOLO UNA opción dentro de una lista de opciones. Una lista de Radio Buttons luciria de la siguiente manera:

Opción A

Opción B

Opción C

Opción D

• Drop Down List (Lista Desplegable).- Despliega una lista de opciones al hacer click sobre el objeto, permitiendo seleccionar una de las opciones. Luce de la siguiente forma:

Primera OpcionSegunda OpcionTercera OpcionCuarta Opcion

• List Box (Lista Desplegada).- Las opciones ya estan desplegadas en la lista, por lo tanto, ocupa un mayor espacio. Así se veria:

Primera OpciónSegunda OpciónTercera OpciónCuarta Opción

• Scrolling Text (Area de Texto).- En este caso, el texto que se va a teclear puede tener varias lineas, no solamente una. Este es un ejemplo:

Aquí se puede Escribir

• Command Buttons (Botones).- Existen normalmente solo dos botones en cada forma, uno para mandar la información (Submit) y otro para cancelar (Reset). Así es como se ven estos botones:

Ok... estos son los elementos utilizados en una forma... primero que nada, queria que los conocieran... ahora vamos a platicar un poco de como se usan... porque se supone que ya explique para que sirven... Además nos vamos a meter un poco con sus propiedades, y con el HTML que se usa para ellos.

Lo primero, es decir que la forma en si, aunque no se ve físicamente en la página web, es el "contenedor" de todos los demas controles. Esta definida por los tags

<form>
...
</form>

Dentro de estos tags deben ir todos los demás elementos de la forma, como text boxes, listas, botones, etc.
Perfecto... ahora vamos a repasar cada uno de los elementos que explicamos al principio... como este no es un curso de HTML, va a ser "por encimita"... solo voy a mencionar los tags que se utilizan, y algunas de las propiedades. Bueno, antes que nada, es importante mencionar que existe un tag que engloba a cuatro tipoS de objetos (Text Box, Check Box, Radio Button y Command Button)... suena complicado, pero no es asi... el tag al que me refiero es <INPUT> y lo que determina que tipo de control se despliega, es el atributo TYPE. Dependiendo del valor de este atributo, será el tipo de control desplegado. Yo se que suena medio complicado, pero no es así... al final de la explicación de todos los objetos, voy a poner un código HTML utilizando todos los objetos, y despues como se vería en pantalla, para que lo puedan comparar.
En el caso del Drop Down List, y del List Box, también se utiliza el mismo tag <SELECT> y la diferencia entre ellos dos será el valor del atributo SIZE, al cual se le debe asignar el valor 1 si se desea un Drop Down, y cualquier valor mayor que 1 si se desea un List Box.
En el caso del Scrolling Text, se utiliza el tag <TEXTAREAgt; utilizando los atritbutos ROWS y COLS para definir el número de renglones y columnas que tendrá, respectivamente. Ok, estos son los diferentes objetos que se pueden utilizar en una forma...
Bueno, como les comentaba, este no es un curso de HTML... existen un buen de atributos de cada objeto (y mas objetos, también, como por ejemplo, tablas) que se pueden usar... ya dependerá del interés de cada quien el ponerse a buscar y estudiarlos... lo que si les puedo decir es que existen dos atributos bien importantes, y que los tienen casi todos los objetos: NAME y VALUE... por lo pronto recuerdenlos, porque más adelante verán porque son importantes.
Ahora les voy a poner el ejemplo del código HTML de una forma, con varios de estos elementos, para que lo puedan analizar... además, debajo del código pondre como se verá la forma en la página.

<form>
<div align="center"><center><table border="1" width="100%">
<tr>
<td><p align="center"><font size="4"><strong>Datos
Personales:</strong></font></p>
<table border="0">
<tr>
<td valign="top"><strong>Nombre:</strong></td>
<td><input type="text" size="25"
name="Nombre"></td>
</tr>
<tr>
<td valign="top"><strong>Apellido:</strong></td>
<td><input type="text" size="25"
name="Apellido"></td>
</tr>
<tr>
<td valign="top"><strong>Edad:</strong></td>
<td><select name="edad" size="1">
<option>12-18</option>
<option>19-25</option>
<option>25-35</option>
<option>35-50</option>
<option selected>Seleccione una Edad:</option>
</select></td>
</tr>
<tr>
<td valign="top"><strong>Profesión:</strong></td>
<td><input type="text" size="25"
name="profesion"></td>
</tr>
<tr>
<td valign="top"><strong>No. de hijos:</strong></td>
<td><select name="hijos" multiple size="4">
<option>0</option>
<option>1-3</option>
<option>3-6</option>
<option>> 6</option>
</select></td>
</tr>
<tr>
<td valign="top"><strong>Edo. Civil:</strong></td>
<td><input type="radio" checked
name="EdoCivil" value="V1">Soltero<p><input
type="radio" name="EdoCivil" value="V2">Casado</p>
<p><input type="radio" name="EdoCivil"
value="V3">Viudo</p>
<p><input type="radio" name="EdoCivil"
value="V4">Divorciado</p>
</td>
</tr>
<tr>
<td valign="top"><strong>Fecha de Nacimiento:</strong></td>
<td><select name="dia" size="1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select><select name="mes" size="1">
<option>Enero</option>
<option>Febrero</option>
<option>Marzo</option>
<option>Abril</option>
<option>Mayo</option>
<option>Junio</option>
<option>Julio</option>
<option>Agosto</option>
<option>Septiembre</option>
<option>Octubre</option>
<option>Noviembre</option>
<option>Diciembre</option>
</select><input type="text" size="6"
name="ano" value="19"></td>
</tr>
<tr>
<td valign="top"><strong>Idiomas:</strong></td>
<td><input type="checkbox" checked
name="espanol" value="ON">Español<p><input
type="checkbox" name="ingles" value="ON">Inglés</p>
<p><input type="checkbox" name="italiano"
value="ON">Italiano</p>
<p><input type="checkbox" name="aleman"
value="ON">Alemán</p>
</td>
</tr>
<tr>
<td valign="top"><strong>Experiencia
Profesional:</strong></td>
<td><textarea name="Experiencia" rows="8"
cols="25">Escriba aquí su experiencia profesional</textarea></td>
</tr>
<tr>
<td><input type="submit" name="B1"
value="Submit"><input type="reset" name="B2"
value="Reset"></td>
<td> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</center></div>
</form>

Y así se veria en la página:

Datos Personales: Nombre: Apellido: Edad: 12-1819-2525-3535-50Seleccione una Edad: Profesión: No. de hijos: 01-33-6> 6 Edo. Civil: Soltero Casado Viudo Divorciado Fecha de Nacimiento: 12345678910111213141516171819202122232425262728293031EneroFebreroMarzoAbrilMayoJunioJulioAgostoSeptiembreOctubreNoviembreDiciembre Idiomas: Español Inglés Italiano Alemán Experiencia Profesional: Escriba aquí su experiencia profesional

Con esto terminamos la explicación de lo que es una forma, y sus elementos... lo único que nos falta es definir... para que demonios sirve una forma???
Ah verdad... que dijeron, este guey nos tiro un choro enorme, y no nos dice para que sirve todo este desma... bueno... les explicaré el porque... primero que nada, porque es un punto dentro de nuestros temas que se tratará mas adelante... y segundo, porque primero era necesario entender que demonios es una forma...
Una vez dada esta explicación, dejenme les digo que el uso principal que se le da a una forma, es el de recolectar datos... Por ejemplo, digamos que quieres registrar a un nuevo usuario de tu sitio... para esto, necesitas información como el Nombre, Dirección, ID de Usuario, Password... y tal vez estado civil (Casado o Feliz... digo, Soltero), Preferencias, etc... toda esta información puede ser recopilada utiizando una forma, con los diferentes objetos que ya se explicaron anteriormente. Una vez que se tienen, estos datos pueden ser procesados de diferentes formas... por medio de un script en ASP, por ejemplo y agregados a una base de datos, etc. Como??? eso lo veremos más adelante... solo les digo que en ese caso, son muy importantes los atributos NAME y VALUE...

Finalmente, solo quiero comentarles que parte de esta información la saque de este sitio, y de este otro... existen muchos mas, pero estos dos son los que mas me gustaron. De hecho, les recomiendo que les den una leida, para que les queden más claros los conceptos.