LENGUAJES DE PROGRAMACIÓN WEB (PHP1, HTML52) LENGUAJES DE PROGRAMACIÓN WEB (PHP, HTML5) Sesión No. 4 Nombre: Estructura y disposición Objetivo: Conocer sobre la relevancias de la estructura y disposición dentro de los lenguajes de programación. Contextualización ¿Qué es la estructura? La estructura es la base de los documentos o de cualquier elemento digital o no digital, por lo que si se cuenta con un buen diseño, los componentes tendrán un orden mejor realizado permitiendo que la utilización de éstos sea mejor vista, con un mejor orden y presentación. Las estructuras se utilizan en gran parte de los medios, arquitectura, diseño, animación, escritura, etc. En un documento de HTML representa la forma en que éste está construido. La estructura esta representada por las etiquetas que forman al documento. La estructura nos ayuda a implenetar los elementos del lenguaje de manera correcta. Permitiendo que el documento sea intrepretado sin problemas por cualquier navegador. ¿Qué es la disposición? Usualmente la disposición trata de tener el contenido, las aplicaciones o los medios hábiles y en funcionamiento para quien pudiese requerirlo, es decir, al tenerse disponible facilita el acceso al medio en el cual se pueda aplicar. En términos de aplicaciones Web, la disposición es la posibilidad de acceso o uso, de una aplicación en cualquier momento, sin que el servicio que ésta presta se vea interrumpido. También significa que partes o contenidos de la aplicación estarán públicos o privados. 1 LENGUAJES DE PROGRAMACIÓN WEB (PHP, HTML5) Introducción al Tema ¿Para que funciona una estructura? La función que puede jugar la estructura en un formulario, es la de el orden que establezca en el mismo, es decir qué parámetros se ubicarán en las posiciones iniciales, medias y finales. Las estructuras de igual forma determinan el orden de los párrafos que se visualizan en un página, es importante conocer el número de líneas por párrafo, el interlineado entre cada texto y los tipos de letra que son mejores para la lectura, el análisis y varias circunstancias más. La estructura esta definida por las etiquetas, los atributos y los elementos. Por ejemplo: <!Document type> Es la declaración inicial del documento <html> <title>Hola Mundo</title> <body> <a href=”misitio.com” target=”_blank”>Mi Sitio</a> </body> </html> Estas son las etiquetas mínimas del documento En la etiqueta <a> podemos encontrar los atributos href y target. El texto “Mi Sitio” es cosiderado un elemento del documento. ¿Para qué funcionan los formularios? Un formulario funciona como un medio de ingreso de información requerida en un sitio, este puede ser aplicado de manera física o virtual. Comúnmente la información que se solicita en un formulario es para conocer la edad, localidad, 2 LENGUAJES DE PROGRAMACIÓN WEB (PHP, HTML5) lugar de nacimiento, año en que se aplica, entre otra opciones más. Es importante conocer las opciones que se pueden ingresar a un formulario y la forma correcta de estructurar el mismo para que no quede sin identificar dentro de un website. 3 LENGUAJES DE PROGRAMACIÓN WEB (PHP, HTML5) Explicación Estructura y disposición La estructura de un documento se presenta como un manual o una guía, en la que se muestra la forma en que se puede ver de mejor forma el contenido, la manera en que presentara una armonía visual en la que los individuos que la utilicen no presentaran fatiga en la vista ni dificultad de lectura o comprensión de los contenidos pues la estructura permite que esto funcione correctamente. Cuando se trata de disposición, es importante saber mediante la estructura de los elementos con los que se cuenta y que se lograrán o no ser públicos. Es decir no siempre los elementos que se crean para un sitio o institución ya sea de manera física o digital están a disposición de todos los visitantes, pues algunos presentan la estructura de soporte principal, si esta es modificada por personas que no conocen el medio pueden crear errores que cuestan tiempo, dinero o calidad de servicio, por lo que no siempre se deja que cualquier elemento ajeno ingrese a todo lo primordial de esto y disponga de la totalidad en el lugar. 4 LENGUAJES DE PROGRAMACIÓN WEB (PHP, HTML5) Estructura y disposición son los componentes que definen a los elementos dentro y fuera de un sitio, es decir, son la base del correcto funcionamiento y jerarquización de elementos en su importancia, cuando la estructura no presenta una disponibilidad se dificultan las cosas pues limita los elementos con los cuales se puede trabajar y desarrollar contenidos o medios. Formularios Los formularios son útiles herramientas que se utilizan dentro de internet y funcionan como fuente de obtención de información sobre personas, instituciones, intereses personales, etc. Los formularios se definen mediante instrucciones HTML, un ejemplo para crear un formulario mediante etiquetas se muestra en el siguiente código; 5 LENGUAJES DE PROGRAMACIÓN WEB (PHP, HTML5) <form action=”mailto:ejemplo@dominio.com” method=post> <table align=”center” border=”0″> <td align=”left” width=”100″>nombre: </td> <td align=”center” width=”150″><input name=”nombre” maxlength=”25″ type=”text” value=”"> </td> <tr> <td align=”left” width=”100″>email: </td> <td align=”center” width=”150″><input name=”mail” maxlength=”25″ type=”text” value=”"> </td> <tr> <td align=”left” width=”100″>motivo: </td> <td align=”center” width=”150″><input name=”motivo” maxlength=”25″ type=”text” value=”"> </td> <tr> <td align=”left” width=”100″> mensaje: </td> <td><textarea name=”mensaje” rows=3 cols=20> </textarea> </td> <tr><td widht=”100″></td> <td align=”right” width=”150″><input name=”boton” type=”submit” value=”enviar”> </td> </table> En el código anterior se aprecia un pequeño formulario en el que no se toman en cuenta las etiquetas de inicio de documento ni de inicio de cuerpo del mismo, por lo que solo es un breve análisis de la estructura principal de un formulario, este puede ser tan grande como se desee y contener las opciones con selección de botones, con formato de checklist, cuadros de texto para opciones de respuesta libre, o una lista de opciones en las cuales podemos encontrar; números o textos. 6 LENGUAJES DE PROGRAMACIÓN WEB (PHP, HTML5) Es importante definir correctamente las direcciones o rutas en las cuales se guardara la información de los formularios pues si no se hace bien, puede crear errores en el funcionamiento de los mismos, no permitiendo que la información se almacene y los datos dentro de los formularios no se actualice ni se ingrese concretamente. Es importante que los envíos de formularios tengan una buena conexión con el servidor al que pertenece el sitio para que de esta forma los complementos de código se ejecuten correctamente, por ejemplo algunos de los más utilizados son en lenguaje PHP, Java o JavaScript, para presentar un dinamismo optimo que interese al usuario sin retrasar la información ni dejar el funcionamiento de lado. Cuando se trata de un sitio más especializado en el que se necesite mayor seguridad en lo datos, como los sitios de instituciones bancarias se utilizan medios de programación como SAP, ABAP e incluso sistema de explotación de datos basados en BI como MicroStrategy©. 7 LENGUAJES DE PROGRAMACIÓN WEB (PHP, HTML5) Conclusión Los sistemas de recolección de información pueden ser basados en formularios, pues son una forma efectiva de llegar a la gente debido al alto número de usuarios que resuelven estos y ayudan a concretar lo que se requiere para una investigación, ya sea para la mejora de un servicio, para conocer las preferencias de las personas o para un estudio de mercado en específico, los formularios son importantes para cumplir algunas metas. Las estructuras son importantes y la disponibilidad también pues se define como la base del medio, si no se cuenta con una buena estructura la disponibilidad puede cambiar y hacer que lo estipulado en algún tratado o medio de diseño anterior no quede bien realizado. Es importante tener una idea clara antes de realizar cualquier elemento o terminar el desarrollo de un proyecto ya iniciado. 8 LENGUAJES DE PROGRAMACIÓN WEB (PHP, HTML5) Para aprender más • Hudson C. y Leadbetter T., (2012). HTML5 Developer´s Cookbook. U.S. Pearson Education. • Williams L. (2012). Learning HTML5 Game Programming. U.S. Pearson Education • Amundsen M. (2012). Hypermedia APIs with HTML5 and Node. U.S. O´REILLY • Crowther R. (2013). Hello! HTML5 and CSS3. U.S. Manning Publications • Brending. Estructura general de un documento HTML. http://brd.unid.edu.mx/estructura-general-de-un-documento-html-2/ • Educarex. Estructura. Unidades del contenido. http://brd.unid.edu.mx/estructura-unidades-del-contenido/ 9 LENGUAJES DE PROGRAMACIÓN WEB (PHP, HTML5) Actividad de Aprendizaje Objetivo: Realizar un formulario web para aplicar los conocimientos sobre la estructura y la disposición. Instrucciones: Con la finalidad de reforzar los conocimientos adquiridos a lo largo de esta sesión, ahora tendrás que realizar una actividad en la cual a través de un cuadro sinóptico expliques los formularios web y sus elementos. Puedes realizarlo en cualquier programa, al final tendrás que guardarlo como imagen en formato JPG para subirlo a la plataforma de la asignatura. Además te pido que diseñes, programens y agregues un formulario Web a tu minisitio creado en las sesiones pasadas. Te aconsejo que primero análisis que datos quieres capturar. Usa cualquier elemento de etiqueta de input que gustes. Se tomará encuenta la creatividad en el uso del elementos de formulario. En esta actividad se tomará en cuenta lo siguiente: Tus datos generales 3 puntos Referencias bibliográficas 7 puntos Ortografía y redacción 10 puntos Título 2 puntos Resumen 10 puntos Representación gráfica 18 puntos Desarrollo Web (Fromulario) 50 puntos 10 LENGUAJES DE PROGRAMACIÓN WEB (PHP, HTML5) Bibliografía • Alvarez R. Formularios con el lenguaje HTML. Consultado el 9 de mayo de 2013, en: http://www.desarrolloweb.com/articulos/647.php • Brending. Estructura general de un documento HTML. Consultado el 9 de mayo de 2013, en: http://www.brendingdesigners.com.ar/html_01.html • Educarex. Estructura. Unidades del contenido. Consultado el 9 de mayo de 2013, en: http://recursos.educarex.es/escuela2.0/Lengua_Castellana/el_texto/ba ses/bases_estructura.htm • WebExperto (2013). Todo sobre formularios en html. Consultado el 9 de mayo de 2013, en: http://www.webexperto.com/articulos/html/todo-sobreformularios-en-html-117/ 11