Desarrolla Aplicaciones Web

INTRODUCCIÓN A LAS APLICACIONES WEBEl concepto de la aplicación web no es nuevo. De hecho, uno de los primer lenguaje de programación para el desarrollo de aplicaciones web es el "Perl". Fue inventado por Larry Wall en 1987 antes de que internet se convirtiera en accesible para el público en general. Pero fue en 1995 cuando el programador Rasmus Lerdorf puso a disposición el lenguaje PHP con lo que todo el desarrollo de aplicaciones web realmente despegó. Hoy en día, incluso muchas de estas aplicaciones se han desarrollado en PHP, como Google, Facebook y Wikipedia.¿Que es una aplicación web?Desde la perspectiva de un usuario, puede ser difícil percibir la diferencia entre un sitio web y una aplicación web. Según el Diccionario Oxford en línea, nos enteramos que una aplicación es "un programa o conjunto de programas para ayudar al usuario de un ordenador para procesar una tarea específica". Una aplicación web es básicamente una manera de facilitar el logro de una tarea específica ... en la Web, a diferencia de un sitio web estático que es más bien una herramienta, no menos importante, para la comunicación. El término más decisivo de esta definición es "tarea específica". La aplicación web por lo tanto permite al usuario interactuar directamente contigo y tus datos, todo en forma personalizada, para llevar a cabo esa tarea específica! IMPORTANCIA DE LAS APLICACIONES WEBEnla actualidad las aplicaciones web son muy importantes ya que nos presentaposibilidades ilimitadas a estar dispersas por la red. Hoy en día nos facilita nuestra vida con aplicaciones como loscorreos,foros,chats, blogs entre otros que permiten a las personas estarmucho mas comunicadas e interrelaciones que en épocas anteriores. La web se reinventa día a día, lo que hace untiempo era considerado imposible, hoy en día algo de lo mas normal, puestoque con el pasar del tiempo hemos ido innovando y seguiremos así, lograndoinvenciones aun mas prometedoras. Las aplicaciones web se volverán cada día mascomunes hasta el punto que ser tornaran en algo esencial para la vidadiaria, permitiendo al ser humano estar mas interconectado que nunca.

CARACTERÍSTICAS DE LAS APLICACIONES WEB Compatibilidad Mutiplataforma una misma versión de la aplicación puede correr sin problemas en múltiples plataformas como Windows, Linux, Mac, etc. Actualización las aplicaciones web siempre se mantienen actualizadas y no requieren que el usuario deba descargar actualizaciones y realizar tareas de instalación. Acceso inmediato y desde cualquier lugar: las aplicaciones basadas en tec Compatibilidad multiplataforma una misma versión de la aplicación puede correr sin problemas en múltiples plataformas como Windows, Linux, Mac, etc. Actualización las aplicaciones web siempre se mantienen actualizadas y no requieren que el usuario deba descargar actualizaciones y realizar tareas de instalación. Acceso inmediato y desde cualquier lugar: las aplicaciones basadas en tecnologías web no necesitan ser descargadas, instaladas y configuradas. Además pueden ser accedidas desde cualquier computadora conectada a la red desde donde se accede a la aplicación. Menos requerimientos de hardware Este tipo de aplicación no consume (o consume muy poco) espacio en disco y también es mínimo el consumo de memoria RAM en comparación con los programas instalados localmente. Tampoco es necesario disponer de computadoras con poderosos procesadores ya que la mayor parte del trabajo se realiza en el servidor en donde reside la aplicación. Menos Bugs (errores) son menos propensas a crear problemas técnicos debido a problemas de software y conflictos de hardware. Otra razón es que con aplicaciones basadas en web todos utilizan la misma versión, y los bugs (errores) pueden ser corregidos tan pronto como son descubiertos beneficiando inmediatamente a todos los usuarios de la aplicación. Seguridad en los datos Los datos se alojan en servidores con sistemas de almacenamiento altamente fiables y se ven libres de problemas que comúnmente sufren los ordenadores de usuarios comunes como virus y/o fallas de disco duro.nologías web no necesitan ser descargadas, instaladas y configuradas. Además pueden ser accedidas desde cualquier computadora conectada a la red desde donde se accede a la aplicación. Menos requerimientos de hardware Este tipo de aplicación no consume (o consume muy poco) espacio en disco y también es mínimo el consumo de memoria RAM en comparación con los programas instalados localmente. Tampoco es necesario disponer de computadoras con poderosos procesadores ya que la mayor parte del trabajo se realiza en el servidor en donde reside la aplicación. Menos Bugs (errores) son menos propensas a crear problemas técnicos debido a problemas de software y conflictos de hardware. Otra razón es que con aplicaciones basadas en web todos utilizan la misma versión, y los bugs (errores) pueden ser corregidos tan pronto como son descubiertos beneficiando inmediatamente a todos los usuarios de la aplicación. Seguridad en los datos Los datos se alojan en servidores con sistemas de almacenamiento altamente fiables y se ven libres de problemas que comúnmente sufren los ordenadores de usuarios comunes como virus y/o fallas de disco duro.

¿Qué es HTML?Definiéndolo de forma sencilla, "HTML es el lenguaje que se utiliza para crear las páginas web a las que se accede mediante internet". Más concretamente, HTML es el lenguaje con el que se "escriben" la mayoría de páginas web.Los diseñadores utilizan el lenguaje HTML para crear páginas web, los programas que se emplean generan páginas escritas en HTML y los navegadores que utilizamos (por ejemplo Google Chrome, Opera o Mozilla Firefox) muestran las páginas web después de leer e interpretar su contenido HTML.El origen de HTML se remonta a 1980, cuando el físico Tim Berners-Lee, investigador del CERN (Organización Europea para la Investigación Nuclear) propuso un nuevo sistema de “hipertexto” para compartir documentos.

Características del lenguaje HTML Pero empecemos ya con lo que nos interesa. ¿Cómo se hace una página Web? Cuando los diseñadores del WWW se hicieron esta pregunta decidieron que se debían cumplir, entre otras, las siguientes características: El Web tenía que ser distribuido: La información repartida en páginas no muy grandes enlazadas entre sí. El Web tenía que ser hipertexto y debía ser fácil navegar por él. Tenía que ser compatible con todo tipo de ordenadores (PCs, Macintosh, estaciones de trabajo...) y con todo tipo de sistemas operativos (Windows, MS-DOS, UNIX, MAC-OS,...). Debía ser dinámico: el proceso de cambiar y actualizar la información debía ser ágil y rápido.

Etiquetas (o tags) HTMLUn lenguaje de etiquetas es un conjunto de palabras o caracteres que se colocan junto al texto de un documento para especificar una propiedad del mismo.Toda etiqueta se identifica porque estáencerrada entre los signos menor que y mayor que (< >), y algunas tienenatributos que pueden tomar algún valor.Cada etiqueta tiene un significado:<b> significa negrita, <p> significa párrafo, <a> definirá unenlace...¿Cómo se aplican las etiquetas?En general las etiquetas se aplicaránde dos formas especiales:1.- Se abren y se cierran, encerrandoentre ellas un contenido. Por ejemplo: <b>Esto sería un texto ennegrita</b> que se vería en su navegador web como Esto sería un texto ennegrita.2.- No pueden abrirse y cerrarse, como<hr /> que se vería en el navegador web como una línea horizontal.Existen otras etiquetas que no tienensu correspondiente de cierre, como <img /> para las imágenes, o <br/> para los saltos de línea; las veremos más adelante. Esto ocurre porque unsalto de línea o una imagen no empiezan y acaban más adelante sino que sólotienen presencia en un lugar puntual.Cada elemento de un documento HTMLconsta de una etiqueta de comienzo, un bloque de texto y una etiqueta de fincon el siguiente formato:<etiqueta> bloque de texto</etiqueta>Así que la página web, vista con uneditor de texto, contiene una mezcla de texto normal y una serie de códigos.Por ejemplo, un párrafo se encierraentre las etiquetas o tags <p> y </p>.

ESTRUCTURATodo documento HTML deberá estardelimitado por las etiquetas <html> y </html>.Además deberá definirse:1.- Encabezado (<head></head>): contendrá información de caracter informativo y no se mostraráen el navegador). Entre otros:Título (<title> </title>)Palabras clave para los buscadoresReferencias a archivos externos2.- Cuerpo (<body></body>): será donde colocaremos nuestro texto e imágenes delimitados asu vez por otras etiquetas (como las que hemos visto anteriormente).El resultado será, pues, un documento que seguirá la siguiente estructura (recordar respetar la cimentación del texto: permitirá una mejor comprensión del código y un óptimo mantenimiento posterior.

"Primer archivo HTML" Una vez vistas las características que debe cumplir un fichero HTML y la estructura que debe seguir, ya podemos proceder a crear nuestro primer archivo HTML.Realizaremos los siguientes pasos:1.- Abrir el bloc de notas: Inicio -Todos los programas - Accesorios - Bloc de Notas2.- Escribir todas las etiquetasnecesarias y obligatorias que debe contener todo fichero HTML. Es muyimportante anidar los tags para que el código sea legible y siga una estructuraordenada. Lo ideal es, para cada nivel de indentación, un nivel de tabulación.El resultado de nuestro ficherodebería quedar de la siguiente forma:<html> <head> <title>Bienvenidos alcurso de diseño</title> </head> <body> Esta es mi primera páginaen HTML </body></html>3.- Guardar el archivo en formato HTML(Archivo - Guardar como...). Bastará con seleccionar dónde almacenar el ficheroy guardarlo con el nombre primer-ejemplo.html.4.- Acceder a la ruta donde se haalmacenado el fichero y abrirlo con el navegador.

FORMATO DE TEXTO EN HTML...PARRAFOS Y SALTOS DE LINEA: Párrafos (<p> y </p>) y saltos de línea (<br />) Cada párrafo va definido entre las etiquetas <p> y </p>. Para insertar un salto de línea, lo haremos con la etiqueta simple <br />. La diferencia entre ambos es que br hace un cambio de línea mientras que p inserta una línea en blanco.ENCABEZADOS:Las cabeceras fueron creadas para representar con tamaño adecuado los títulos y/o subtítulos de una página. Estos encabezados o cabeceras representan mediante una H (de cabecera - header en inglés) más un número del uno al seis dependiendo de la importancia dentro de nuestro contenido. Las cabeceras son, pues, las siguientes: <h1>, <h2>, <h3>, <h4>, <h5> y <h6>, siendo 1 la cabecera más relevante y 6 la que menos.FORMATO DE TEXTO (Negrita, Cursiva, Subrayado, Tachado):Las etiquetas básicas para dar estilos negrita, cursiva, subrayado y tachado estandarizado a nuestros textos. Lamentablemente el estilo de fuente aplicado mediante HTML quedó obsoleto luego de la aparición de CSS, siendo reemplazado por las siguientes propiedades: <b> </b>, reemplazado por la propiedad CSS font-weight:bold (negrita); <i> </i>, reemplazado por la propiedad CSS font-style:italic (itálica o cursiva); <u> </u>, reemplazado por la propiedad CSS text-decoration:underline (subrayado); <s> </s>, reemplazado por la propiedad CSS text-decoration:line-through (tachado);COLORES Y TIPO DE FUENTE:La etiqueta <font> <font> es una etiqueta obsoleta reemplazada por las hojas de estilo. Es común encontrarnos páginas cuyo código aún las incluyen. No es erróneo, pero su uso implicará no cumplir los estándares. Dicha etiqueta incluye atributos como "face" (para especificar el tipo de fuente), "size" (para el tamaño) o color.<font face="arial" size="12px" color="#0088AA">TEXTO CON FORMATO</font>Los colores basicos son: #FF0000 - Rojo #00FF00 - Verde #0000FF - Azul Otros colores son: #FFFFFF - Blanco #000000 - Negro

IMÁGENES EN HTML...INSERTAR UNA IMAGENPara insertar una imagen en HTML se hará mediante la etiqueta <img /> (image). Esta etiqueta no posee su cierre correspondiente. Obligatoriamente deberemos especificar el atributo src (source), cuyo valor será la ubicación del archivo de imagen: <img src="ruta-de-la-imagen" /> La imagen podrá estar ubicada en nuestro servidor o alojada en uno externo. Para indicar la ruta lo haremos de la misma forma que se definió en los enlaces. TAMAÑO: HTML insertará por defecto la imagen en su tamaño original. Sin embargo, podrá especificarse mediante los atributos width y height una anchura y una altura. Podremos cambiar el tamaño de la imagen sin distorsionarla especificando únicamente un atributo (width o height). En caso que quiera distorsionarse deberá definirse una altura o una anchura. Los valores para estos atributos pueden especificarse en pixeles o en porcentaje. Cuando el tamaño se expresa en porcentaje, el resultado variará dependiendo del navegador: Ejemplo 1: <img src="ruta-de-la-imagen" width="200px" /> Ejemplo 2: <img src="ruta-de-la-imagen" width="50%" /> Ejemplo 3: <img src="ruta-de-la-imagen" width="200px" height="50px" />BORDES Y ALINEACIÓN:BORDES A las imágenes también se les puede agregar un borde mediante el atributo "BORDER" y especificando el grosor en píxeles. Por defecto el valor para este atributo es 0, por lo que si no se dice lo contrario no se mostrará ningún tipo de borde. Ejemplo 1: <img src="ruta-de-la-imagen" border="3px" />ALINEACIÓN DE IMÁGENES Para alinear las imágenes se empleará el atributo ALIGN (como en el caso de los párrafos). <img src="ruta-de-la-imagen" align="center" />

FORMULARIOS EN HTML...El objetivo de HTML consiste en estructurar los contenidos de una página web. Sin embargo, también pone a disposición una serie de elementos para crear aplicaciones que interactúen con aplicaciones más potentes. Los formularios se definen con la etiquetas <form> y </form>. Dentro de estos tags incluiremos todos los elementos necesarios (botones, cuadros de texto, listas desplegables).http://www.tutorialhtml.net/manualHTML/formulario1.gif El tag <FORM>: Atributos Los atributos asociados a esta etiqueta son los que se definen a continuación: action = "url": indica la URL de la aplicación del servidor que se encarga de procesar los datos introducidos por los usuarios. Esta aplicación también se encarga de generar la respuesta que muestra el navegador. Ej: <form action="procesa-datos.php">. Este atributo será obligatorio. method = "POST o GET" - Método HTTP empleado al enviar el formulario. En caso de utilizar el método GET los valores del formulario se agregarán a la URL definida en el atributo action. Ej.: procesa-datos.php?nombre=cecot. enctype = "application/x-www-form-urlencoded o multipart/form-data" - Tipo de codificación empleada al enviar el formulario al servidor (sólo se indica de forma explícita en los formularios que permiten adjuntar archivos). Por defecto el valor es application/x-www-form-urlencoded. En caso de querer enviar archivos adjuntos utilizaríamos <form enctype="multipart/form-data">. accept = "tipo_de_contenido" - Define una lista separada por comas de tipos de contenido que el script manejará correctamente. Se utiliza para filtrar archivos a enviar en el lado cliente (por ejemplo, solo permitir la subida de archivos de imagen comprimidos, como JPG y GIF). Ej: <form accept="image/gif, image/jpg">.METHOD="POST" O METHOD="GET". ¿CUÁL ES MEJOR? Al margen de otras diferencias técnicas, el método POST permite el envío de mucha más información que el método GET. En general, el método GET admite como máximo el envío de unos 500 bytes de información. La otra gran limitación del método GET es que no permite el envío de archivos adjuntos con el formulario. Además, los datos enviados mediante GET se ven en la barra de direcciones del navegador (se añaden al final de la URL de la página), mientras que los datos enviados mediante POST no se pueden ver tan fácilmente.http://www.tutorialhtml.net/manualHTML/formularios/formulario-curriculum.gif

TABLAS EN HTML...http://www.tutorialhtml.net/manualHTML/elementos-de-una-tabla.gif Para definir una tabla deberán utilizarse y combinarse 3 etiquetas: <table>, <tr> (table row) y <td> (table data cell). Como recomendación , es aconsejable analizar en primer lugar las filas de que estará compuesta y a continuación las columnas. El motivo es que HTML procesa primero las filas y por eso las etiquetas <tr> aparecen antes que las etiquetas <td>. EL TAG <TABLE> La etiqueta <table> define una tabla. En conjunto con las otras dos etiquetas (<tr> y <td>) determinaránn el número de celdas en sus filas y/o columnas. LOS TAGS <TR> Y <TD> Esta etiqueta definirá una fila dentro de la tabla. Además, deberá contener al tag <td>, cuya función será la de definir una celda dentro de la fila. <td> se emplea para definir cada una de las celdas que forman las filas de una tabla. <tr> se emplea para definir cada fila de las tablas de datos. En el caso que se quisiera crear una tabla de 3 filas y 4 columnas, visualmente quedaría de la siguiente forma.http://www.tutorialhtml.net/manualHTML/tabla-html.gif