¿Qué necesitamos conocer para crear un sitio o aplicación web?

¿Qué necesitamos conocer para crear un sitio o aplicación web?

Bueno, comencemos con HTML. Básicamente HTML nos proporciona la estructura para todo lo que necesitamos. Este es un conjunto de etiquetas que nos permite crear controles como una caja de texto, estructura en forma tabular o secciones que contendrán otras etiquetas. 

Es posible crear un sitio web solamente con HTML, sin necesidad de usar ningún lenguaje de programación. Sin embargo, esto nos limita a tener contenido estático, es decir, toda la información que nuestro sitio visualiza no es obtenida de ninguna fuente como una base de datos u otra, ni existe la posibilidad de que alguien consulte información basado en algún criterio de búsqueda. Como fue construida, así se visualizará.

Para solucionar este problema, existen los lenguajes de programación. Aunque no nos compete entrar en detalles en este tema todavía, es bueno conocer un poco de ellos por el momento. Existen varias alternativas de lenguajes de programación: Java, C# y Visual Basic Net (Visual Studio), PHP, Ruby, etc. Todos son lenguajes que se ejecutan en el servidor. ¿Qué significa esto? Bueno, simplemente que el código programado en estos lenguajes solamente puede ser entendido y ejecutado en la máquina servidor que hospeda el sitio web. Dentro de este servidor existe software especial que lee el código y lo procesa. Mucha de la magia para proporcionar contenido dinámico al usuario ocurre aquí. Esto consiste en la posibilidad de hacer consultas y obtener información específica sobre algo.

Ahora, ya sabiendo un poco sobre los lenguajes de programación que se ejecutan del lado del servidor, es lógico hacernos la siguiente pregunta: ¿Las etiquetas HTML son ejecutadas y procesadas en el servidor? Pues no, más bien éstas son procesadas por el navegador, es decir en nuestras máquinas. El software del lado del servidor ignora éstas etiquetas y no las procesa, enviándolas como fueron escritas a nuestro navegador. El navegador las lee y realiza todo el proceso sobre ellas. Cabe destacar que si usted ve el código fuente generado en la página (por ejemplo, en Firefox damos clic derecho sobre la página y seleccionamos Ver código fuente de la página) solamente veremos código HTML y otras cosas más que analizaremos más adelante, pero no está por ningún lado el código del lado del servidor. ¿Qué pasó? Bien, sencillamente el servidor lo procesó y (si lo requería) generó HTML y otras cosas que el navegador pueda entender. El navegador no entiende el código del lenguaje del lado del servidor!!!!! Interesante no.

Lo siguiente a ver es el Javascript. ¿Qué es Javascript? Bueno, es un lenguaje de programación del lado del cliente. ¿Del lado del cliente? Si, éste lenguaje es procesado por el navegador, al igual que el HTML, con la diferencia que HTML no es un lenguaje de programación. HTML es un lenguaje de marcado o de marcas, es decir, proporciona etiquetas o marcas que contienen información acerca de la estructura de la página. Ambos, HTML y Javascript, solo necesitan que un navegador esté instalado y el procesará todo.

Ahora, ¿qué podemos hacer con Javascript? Con Javascript tenemos acceso a cualquier etiqueta que exista en la estructura de la página. Por ejemplo, todos los controles de formulario los tenemos disponibles. De esta manera, podríamos validar los datos que un usuario proporciona a través de dichos controles y mostrar un mensaje de validación según sea el caso. Además, se podría cambiar los valores predeterminados para los atributos de cada etiqueta. Esto lo veremos más adelante.

Etiquetas y controles HTML y HTML 5

Es importante resaltar que HTML ha evolucionado a lo que actualmente se conoce como HTML 5. Este incorpora nuevas etiquetas que son necesarias en un mundo moderno lleno de dispositivos móviles con diferentes resoluciones de pantallas y con nuevas capacidades.

HTML 5 todavía está desarrollándose y no se ha establecido un completo estándar para todos los navegadores, por lo que algunas etiquetas pueden que funcionen en algunos y en otros no. Sin embargo, HTML 5 es la tendencia y los navegadores famosos ya procesan muchas de sus etiquetas.

Una estructura básica de un documento HTML sería el siguiente:

<!DOCTYPE html>
<html>

<head></head>
<body>
</body>

</html>

Todo documento HTML 5 comienza con la etiqueta <!DOCTYPE html>. Esto nos da la posibilidad de usar etiquetas HTML 5 en nuestras páginas.

El resto de etiquetas están conformadas con una etiqueta de apertura y una de cierre: 

Etiqueta de apertura: <nombre_etiqueta>

Etiqueta de cierre: </nombre_etiqueta>

La diferencia está en que la etiqueta de cierre tiene una / al inicio. Sin embargo, es posible cerrar una etiqueta en su apertura, poniendo la / al final:

<nombre_etiqueta />

Todo va en dependencia de lo que la etiqueta permite y como la queremos estructurar.

<html></html> Esta etiqueta contendrá a las demás etiquetas y determina el contenedor global para todo el documento HTML.

<head></head> Define la cabecera del documento HTML. Esta cabecera suele contener información sobre el documento que no se muestra directamente al usuario como, por ejemplo, el título de la ventana del navegador, enlaces a archivos de hojas de estilos o de javascript, etc.

<body></body> Define el contenido principal o cuerpo del documento. Esta es la parte del documento HTML que se muestra en el navegador. Dentro de esta etiqueta pueden definirse propiedades comunes a toda la página, como color de fondo y márgenes, etc.

Podemos ver un ejemplo en la página de w3schools:

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro

Usaremos esta página (w3schools), porque nos permite ejecutar código HTML en el editor que proporcionan, entonces nos saldrá más fácil probar los ejemplos.

Ahora, vamos a ver los formularios y controles en HTML y HTML 5. 

Etiqueta FORM

<form></form>

Esta etiqueta crea un formulario HTML, el cual es usado para enviar datos al servidor, es decir, todo lo que el usuario digitó en los controles que contiene el formulario se pueden enviar al servidor. 

Un formulario HTML puede contener controles de entrada como cajas de texto, combos, listas, botones y más.

Etiqueta INPUT

El más importante elemento en un formulario es la etiqueta input. Este puede variar de diferentes maneras, dependiendo del atributo type. Un atributo en una etiqueta se define en su etiqueta de apertura y su valor puede variar tanto la presentación como la funcionalidad de la etiqueta que lo contiene. En este caso el atributo type indicará el control que se mostrará en la página.

Campo de Texto

<form>
Nombre: <input id="txtNombre" type="text" />
</form>

Esto crea una caja de texto en nuestra página. La etiqueta form no es visible.

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input

Campo de Contraseña

<form>
Password: <input id="txtContrasena" type="password" />
</form>

Esto crea un campo para contraseña. Lo que se digite estará enmascarado con asteriscos o círculos. 

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_inputpassword

Botón Submit

<form name="input" action="demo_form_action.asp" method="get">
<input id="btnEntrar" type="submit" value="Entrar" />
</form>

Esto crea un botón submit, el cual es el encargado de ejecutar la acción de enviar los datos al servidor y es usado junto con el formulario. Los datos son enviados a la página indicada en el atributo action del formulario. El otro atributo method indica la manera cómo serán enviados los datos. Sus valores posibles son get y post.

El valor "get" indica que los datos enviados se adjuntarán en la barra de direcciones del cliente, al final de la url (dirección de la página) correspondiente y después de un signo de interrogación de cierre. Si se envía más de un dato, éstos irán separados por el símbolo &.

Un ejemplo de un formulario enviado por el method="get" sería el siguiente: http://www.test.com?nombre1=valor1&nombre2=valor2

Todo valor digitado será visible en la barra de direcciones del navegador.

El valor "post" indica que el método de envío no se hará a través de la url, sino formando parte del cuerpo de la petición y no será visible para nadie.

Etiquetas y controles HTML y HTML 5 (2da Parte)

Radio Buttons

<input type="radio"> define un radio button. Los radio buttons permiten al usuario seleccionar solamente una opción.

<form>
<input id="genero_masc"  type="radio" value="masculino">Masculino<br>
<input id="genero_fem"  type="radio" value="femenino">Femenino
</form>

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_radio

Checkboxes

<input type="checkbox"> define un checkbox. Checkboxes le permite a un usuario seleccionar una o más opciones, o ninguna opción.

<form>
<input id="vehiculo_moto"  type="checkbox" value="Moto">Yo tengo una moto<br/>
<input id="vehiculo_carro" type="checkbox" value="Carrro">Yo tengo un carro
</form>

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_checkbox

TextArea

TextArea nos permite crear una caja de texto multilínea. Un ejemplo sencillo para usar un TextArea es cuando se le pide a un usuario ingresar su dirección, el cual requiere que la cantidad de texto ingresado sea extenso.

<form>

<textarea id="txtDireccion" rows="10" cols="30">

Aquí se puede ingresar un texto largo

</textarea>

</form>

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_textarea

Select

Select crea una lista de valores en combo.

<form>

<select id="carros">

<option value="volvo">Volvo</option>

<option value="mercedesbenz">Mercedes Benz</option>

<option value="BMW">BMW</option>

<option value="audi">Audi</option>

</select>

</form>

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_select2

Botones

Un botón, a diferencia de un botón de submit, no envía datos al servidor.

<form>

<input type="button" value="Hola mundo!">

</form>

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_button


HTML 5 Input

HTML 5 tiene nuevos controles input para formularios. Estas nuevas características son un mejor control de entrada y validaciones. Como se dijo al inicio, algunos de estos controles son soportados por unos navegadores y por otros no, por tal motivo antes de probarlos verifique en que navegador son soportados para realizar pruebas. En la página de w3schools podemos ver cuáles son soportados en los diferentes navegadores:

http://www.w3schools.com/html/html5_form_input_types.asp

Input Type: color

El tipo color es usado para seleccionar un color desde una paleta de colores.

<form>

  Seleccione su color favorito: <input id="favcolor" type="color" />

</form>

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_type_color

Input Type: date

El tipo date permite al usuario seleccionar una fecha.

<form>

  Cumpleaños: <input id="cumple" type="date" />

</form>

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_type_date

Input Type: time

El tipo time permite al usuario seleccionar una hora.

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_type_time

Input Type: datetime-local

El tipo datetime-local permite al usuario seleccionar una fecha y hora.

<form>

  Fecha Hora Cita: <input id="fhcita" type="datetime-local" />

</form>

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_type_datetime

Input Type: email

El tipo email crea un campo de texto que debe contener una dirección de correo electrónico.

<form>

  E-mail: <input id="email" type="email" />

</form>

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_type_email

Input Type: number

El tipo number crea un campo de texto que debe contener un número. Se puede establecer que números son aceptados.

<form>

  Cantidad (entre 1 y 5): <input id="quantity" type="number" min="1" max="5">

</form>

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_type_number