Escuela Superior de Ingenier´ıa Mec´anica y El´ectrica Ingenier´ıa en Comunicaciones y Electr´onica
Desarrollo de Aplicaciones Web para los Sistemas de Selecci´ on de T´ opicos y Materias optativas, Gesti´ on de
Calidad y Aplicaci´ on de la Prueba VARK del Departamento de Ingenier´ıa en Control y
Automatizaci´ on.
T E S I S
QUE PARA OBTENER EL TITULO DE
INGENIERO EN COMUNICACIONES Y ELECTR ´ONICA P R E S E N T A
Islas Ju´arez Yair Eber
Asesor interno: Dr. Juan Jos´e Mu˜noz Cesar Asesor externo:
M´exico D. F. Noviembre 2011
Resumen
En esta tesis se presenta la implementaci´on de sistemas inform´aticos por medio de aplicaciones web en los sistemas de informaci´on del departamento acad´emico de la car- rera de Ingenier´ıa en Control y Automatizaci´on (ICA) tales como el sistema de selecci´on de t´opicos y materias optativas, Sistema de Gesti´on de Calidad y Sistema de aplicaci´on de la prueba VARK. Todas las aplicaciones web brindan la ventaja de ser accesibles des- de cualquier computadora con acceso a internet esto es una gran ventaja ya que no se requiere que las personas que participan en los sistemas de informaci´on est´en presentes en alguna ubicaci´on espec´ıfica para realizar la tarea que tienen asignada.
La aplicaci´on web para el sistema de selecci´on de t´opicos y materias optativas donde que busca reducir el error humano en la recolecci´on de informaci´on de los estudiantes y de las materias que desean cursar adem´as de brindarles con esta aplicaci´on un proceso imparcial, fidedigno y seguro del cual se carec´ıa debido al m´etodo arcaico utilizado hasta la fecha.
En lo que respecta a la aplicaci´on web para el sistema de gesti´on de calidad del depar- tamento de ICA , esta permite implementar un sistema inform´atico que ayuda a tener organizado de manera digital los 5 procesos que tiene el departamento y de esta manera responder de una manera mas r´apida ante cualquier contratiempo con la presentaci´on de los documentos que acreditan las actividades de los responsables en cada uno de estos procedimientos.
Por ultimo la aplicaci´on web para llevar acabo la prueba VARK en los estudiantes de la carrera de ICA consigue reducir el error humano a la hora de realizar las estad´ısticas de las respuestas de los alumnos ya que todo esta informaci´on ser´a almacenada en una base de datos para su posterior an´alisis para tomar la decisi´on de modificar la planeaci´on did´actica, otro beneficio que aporta esta aplicaci´on es la de entregar a los alumnos un resultado mas fidedigno de su estilo de aprendizaje ya que la aplicaci´on tiene el algoritmo para analizar sus respuestas.
iii
´ Indice General
Resumen III
´Indice de General V
´Indice de Figuras IX
´Indice de Tablas XIII
Objetivo XV
Justificaci´on XVII
Introduccion XIX
1. Estado del arte 1
1.1. Antecedentes de las Aplicaciones Web . . . 1
1.1.1. Arquitectura Web . . . 1
1.1.2. Modelo Cliente-Servidor . . . 2
1.2. Lenguajes del lado del Servidor . . . 2
1.3. Aplicaciones web para procesos administrativos . . . 4
1.3.1. Aplicaciones web para el sistema de selecci´on de t´opicos y materias optativas . . . 5
1.3.2. Aplicaciones web para el sistema de gesti´on de calidad . . . 5
1.3.3. Aplicaciones web para aplicar la prueba VARK . . . 6
2. Marco Te´orico 9 2.1. HTML . . . 9
2.1.1. Etiquetas y atributos html . . . 10 v
2.1.2. Formularios . . . 14
2.1.3. Tablas . . . 18
2.2. CSS, Hojas de estilo . . . 20
2.2.1. Sintaxis CSS . . . 21
2.2.2. Atributos de las hojas de estilo . . . 21
2.3. PHP . . . 25
2.3.1. Variables en PHP . . . 26
2.4. MySQL . . . 27
2.4.1. Crear una base de datos . . . 27
2.4.2. Crear una tabla . . . 28
2.4.3. Insertar, Borrar, Actualizar, Seleccionar registros de las Tablas . . . 29
2.4.4. PHP y MySQL . . . 29
2.5. FTP . . . 31
2.5.1. Servidor FTP . . . 31
2.5.2. Cliente FTP . . . 31
2.5.3. Filezila . . . 32
2.6. Diagramas y Herramientas para el desarrollo de aplicaciones . . . 32
2.6.1. Diagrama Entidad-Relaci´on . . . 32
2.6.2. Diccionario de Datos . . . 33
2.6.3. Diagrama de Casos de Uso . . . 33
2.6.4. Diagrama de Secuencia . . . 34
3. Desarrollo 37 3.1. Sistema Selecci´on de t´opicos y materias optativas . . . 37
3.1.1. Planteamiento del problema . . . 37
3.1.2. Soluci´on . . . 38
3.1.3. Diagrama Entidad-Relaci´on . . . 38
3.1.4. Diccionario de datos . . . 40
3.1.5. Diagrama de Casos de Uso . . . 40
3.1.6. Diagrama de Secuencia . . . 40
3.1.7. Funcionamiento . . . 43
3.2. Sistema de Gesti´on de Calidad . . . 60
3.2.1. Planteamiento del problema . . . 60
3.2.2. Soluci´on . . . 60
´INDICE GENERAL vii
3.2.3. Diagrama Entidad-Relaci´on . . . 61
3.2.4. Diccionario de datos . . . 61
3.2.5. Diagrama de Casos de Uso . . . 62
3.2.6. Diagrama de Secuencia . . . 62
3.2.7. Funcionamiento . . . 65
3.3. Prueba VARK . . . 85
3.3.1. Planteamiento del problema . . . 85
3.3.2. Soluci´on . . . 85
3.3.3. Diagrama de Entidad-Relaci´on . . . 85
3.3.4. Diccionario de datos . . . 86
3.3.5. Diagrama de caso de uso . . . 86
3.3.6. Diagrama de secuencia . . . 86
3.3.7. Funcionamiento . . . 90
4. Pruebas y Resultados 99 4.1. Sistema de Selecci´on de T´opicos y Materias Optativas . . . 99
4.2. Sistema de Gesti´on de Calidad . . . 100
4.3. Prueba VARK . . . 101
Conclusiones 103
Recomendaciones para Trabajos Futuros 105
Referencias 107
Ap´endice 107
A. C´odigos de la aplicaci´on del sistema de selecci´on 109 B. C´odigos de la aplicaci´on del Sistema de Gesti´on de Calidad 121
C. C´odigos de la aplicaci´on de la Prueba VARK 137
D. Procedimientos 145
´ Indice de Figuras
1.1. Arquitectura Web. . . 2
1.2. Modelo Cliente-Servidor. . . 3
2.1. ejemplo html . . . 10
2.2. captura de pantalla . . . 10
2.3. Codigo de un fomulario en HTML . . . 17
2.4. Formulario en HTML . . . 18
2.5. Codigo de una Tabla en HTML . . . 20
2.6. Tabla en HTML . . . 20
2.7. Atributos CSS en c´odigo HTML . . . 25
2.8. Estilos CSS en el explorador . . . 25
2.9. Administrador de base de datos . . . 28
2.10. Crear una tabla . . . 28
2.11. Campos de la tabla . . . 29
2.12. Ambiente visual de la base de datos . . . 30
2.13. Sintaxis de las 4 funciciones principales SQL . . . 30
2.14. Diagrama Entidad Relaci´on . . . 32
2.15. Diccionario de datos . . . 33
2.16. Diagrama de Casos de Uso . . . 34
2.17. Diagrama de Secuencia . . . 35
3.1. Diagrama Entidad Relaci´on la aplicacion web . . . 39
3.2. Diagrama de Casos de Uso de la aplicaci´on web . . . 41
3.3. Diagrama de Secuencia de la aplicaci´on web . . . 42
3.4. Men´u principal . . . 43
3.5. Formulario . . . 44 ix
3.6. Confirmaci´on de los datos . . . 45
3.7. Registro insertado correctamente . . . 51
3.8. Correo enviado por el sistema . . . 52
3.9. Confirma identidad . . . 52
3.10. Panel para hacer las elecciones . . . 54
3.11. Confirmar elecciones . . . 56
3.12. Las opciones se han guardado en el sistema . . . 58
3.13. Correo con las opciones seleccionadas . . . 59
3.14. Diagrama Entidad-Relaci´on de la aplicac´ıon web . . . 61
3.15. Diagrama de Casos de Uso de la aplicaci´on web . . . 63
3.16. Diagrama de Secuencia de la aplicaci´on web . . . 64
3.17. Men´u principal . . . 66
3.18. Tabla del procedimiento de Evaluaci´on del aprendizaje . . . 66
3.19. Identificaci´on del responsable de la actividad . . . 69
3.20. Panel para subir los archivos . . . 72
3.21. El archivo esta almacenado en el servidor . . . 77
3.22. Panel de identificaci´on para acceder a los documentos . . . 78
3.23. Men´u para visualizar los documentos de los procesos . . . 80
3.24. Tabla donde se puede visualizar cada archivo . . . 84
3.25. Archivo en formato PDF . . . 84
3.26. Diagrama de Entidad-Relaci´on de la aplicacion web . . . 86
3.27. Diagrama de caso de uso de la aplicacion web . . . 88
3.28. Diagrama de secuencia de la aplicacion web . . . 89
3.29. Panel para el registro de los alumnos . . . 90
3.30. Cuestionario de la prueba VARK . . . 93
3.31. Resultado del alumno luego de terminar la prueba . . . 96
A.1. index.php . . . 109
A.2. inscripcion de alumnos.php . . . 110
A.3. mostrar info.php . . . 111
A.4. insertar.php 1/2 . . . 112
A.5. insertar.php 2/2 . . . 113
A.6. identificacion.php . . . 114
A.7. opciones del proceso.php 1/2 . . . 115
´INDICE DE FIGURAS xi
A.8. opciones del proceso.php 2/2 . . . 116
A.9. mostrar opciones.php 1/2 . . . 117
A.10.mostrar opciones.php 2/2 . . . 118
A.11.guardar selecciones.php . . . 119
B.1. index.php . . . 122
B.2. evaluaci´on del aprendizaje.php 1/3 . . . 123
B.3. evaluaci´on del aprendizaje.php 2/3 . . . 124
B.4. evaluaci´on del aprendizaje.php 3/3 . . . 125
B.5. identificacion.php . . . 126
B.6. seleccionar archivo.php 1/2 . . . 127
B.7. seleccionar archivo.php 2/2 . . . 128
B.8. guardar archivo.php 1/2 . . . 129
B.9. guardar archivo.php 2/2 . . . 130
B.10.identificacion seguimiento.php . . . 131
B.11.menu tablas.php 1/2 . . . 132
B.12.menu tablas.php 2/2 . . . 133
B.13.listar archivos.php 1/2 . . . 134
B.14.listar archivos.php 2/2 . . . 135
C.1. index.php . . . 138
C.2. cuestionario.php 1/3 . . . 139
C.3. cuestionario.php 2/3 . . . 140
C.4. cuestionario.php 3/3 . . . 141
C.5. resultado.php 1/3 . . . 142
C.6. resultado.php 2/3 . . . 143
C.7. resultado.php 3/3 . . . 144
D.1. Evaluaci´on del aprendizaje escolar . . . 146
D.2. Planeaci´on Did´actica . . . 147
D.3. Pr´acticas y funcionamiento de talleres y laboratorios . . . 148
D.4. Dise˜no y Redise˜no de Programas Acad´emicos . . . 149
D.5. Acreditaci´on de Programas Acad´emicos . . . 150
´ Indice de Tablas
2.1. Etiquetas y atributos html . . . 11
2.2. Etiquetas y atributos html . . . 12
2.3. Etiquetas y atributos html . . . 13
2.4. Atributos CSS . . . 22
2.5. Atributos CSS . . . 23
2.6. Atributos CSS . . . 24
3.1. Diccionario de datos de la aplicaci´on web . . . 40
3.2. Diccionario de datos de la aplicaci´on web . . . 62
3.3. Diccionario de datos de la aplicacion web . . . 87
xiii
Objetivo
Implementar Sistemas Inform´aticos por medio del desarrollo de aplicaciones web en los sistemas de informaci´on del departamento de Ingenier´ıa en Control y Automati- zaci´on(ICA)en los cuales hay una gran participaci´on de personal y de alumnos tales como el Sistema de Selecci´on de t´opicos y Materias Optativas, Sistema de Gesti´on de Calidad y Sistema de Aplicaci´on de la Prueba VARK.
Derivado del objetivo general se plantean los siguientes objetivos espec´ıficos:
Conseguir que los alumnos tengan un sistema imparcial, fidedigno y seguro para poder seleccionar el t´opico selecto y la materia optativa de su preferencia.
Reducir el tiempo que invierten los alumnos en seleccionar el t´opico y la materia optativa de su preferencia as´ı como en realizar la prueba VARK.
Reducir el error humano en los sistemas de informaci´on planteados en el objetivo principal.
Reducir el trabajo al personal que realiza tareas en cada uno de los sistemas de informaci´on planteados en el objetivo principal.
Evaluar el desempe˜no de las aplicaciones web en cada uno de los sistemas in- form´aticos.
xv
Justificaci´ on
La justificaci´on de este trabajo recae en la necesidad de implementar sistemas in- form´aticos en los sistemas de informaci´on del departamento mencionados en el objetivo, ya que con esta implementaci´on se conseguir´a reducir el error humano presente en las actividades de los sistemas, se beneficiara a quienes est´an involucrados en estas activi- dades ya que reducir´a el trabajo que se realizaba de manera manual y brindara una mayor certeza en su funcionamiento a los sistemas de informaci´on.
xvii
Introduccion
El departamento de ICA tiene entre sus muchos sistemas de informaci´on el sistema de selecci´on de t´opicos y materias optativas, el Sistema de Gesti´on de calidad y el Sis- tema de Aplicaci´on de la prueba VARK y como bien se sabe en todo sistema donde este presente la intervenci´on del hombre esta presente el error humano, es por ello que con la implementaci´on de un sistema inform´atico en cada uno de estos sistemas por medio de aplicaciones web se busca reducir este error humano.
En estos sistemas la participaci´on de una considerable cantidad de personas hace aun mayor la necesidad de reducir el error debido a que es demasiada la cantidad de informa- ci´on que se maneja y que es susceptible a errores.
El error humano esta relacionado al trabajo repetitivo de las personas en determinada actividad ya que al ser demasiado el trabajo y tan repetitivo las personas se fatigan y tienden a cometer errores, es por ello que se puede reducir el error si estas actividades las realiza una maquina de una manera mas r´apida, repetitiva y sin fatigarse y con ello se reduce la cantidad de trabajo de las personas que est´an involucradas en estas actividades.
Todo sistema de informaci´on es capaz de implementar un sistema inform´atico pero para ello requiere de los elementos de hardware y software que identifican al sistema inform´atico y permiten que trabaje, para el caso de los sistemas de informaci´on en los que se desea implementar los sistemas inform´aticos el hardware es la computadora y el software son las aplicaciones web que realizaran el tratamiento de la informaci´on del sistema.
El modelo Cliente-Servidor brinda todas las posibilidades para cumplir con los objetivos que cada unos de los sistemas tiene y por esta raz´on se decidi´o trabajar en aplicaciones web para implementar los sistemas inform´aticos.
El primer Sistema de Informaci´on sobre el cual se piensa trabajar es el sistema de se- lecci´on de t´opicos y materias optativas, en este sistema los alumnos env´ıan un correo electr´onico al profesor del t´opico y de la materia que desean cursar y un correo al sub- director acad´emico, ellos les respond´ıan este acept´andolos en el curso o rechaz´andolos
xix
para despu´es inscribirlos de manera definitiva en control escolar. Entre los problemas m´as recurrentes esta el hecho de que hay alumnos que env´ıan el correo a mas de un profesor y en algunos casos los profesores los aceptan pero esto no es posible ya que solo pueden tomar un t´opico y una materia optativa con esto le quitan la posibilidad a otros alumnos de quedar inscritos en ese t´opico donde est´an ocupando un lugar, esto tambi´en genera un problema para aquellos que solo eligieron un t´opico y el profesor rechaza su solicitud por que ya no hay mas lugares, en estos casos los alumnos solo tienen la opci´on de tomar la materia de desarrollo prospectivo, para evitar todos estos problemas es necesario imple- mentar un sistema inform´atico que elimine estos casos que se dan tan seguido y que solo generan problemas para la inscripci´on de los alumnos.
El siguiente sistema en el cual se trabajara es el sistema de gesti´on de calidad el cual consiste en 5 procedimientos que debe cumplir el departamento de ICA los cuales son:
La evaluaci´on del Aprendizaje Escolar, Planeaci´on Did´actica, Pr´acticas y Funcionamiento de Talleres y Laboratorios, Dise˜no y Redise˜no de Programas Acad´emicos y Acreditaci´on de Programas Acad´emicos. Cada uno de estos procedimientos consiste en una serie de actividades bien definidas y en un responsable que debe realizar una o varias de estas actividades, estos procedimientos tienen una secuencia que es necesaria para que todas las actividades se lleven a acabo de una manera ordenada, cada actividad requiere de un documento que sirva como evidencia de que se ha llevado acabo esta actividad por el responsable de la misma. El trabajo del jefe del departamento es tener todos los doc- umentos que avalen que cada responsable ha realizado sus actividades o las actividades que le correspond´ıan dentro de cada procedimiento esto con el fin de presentarlas durante la auditoria para evaluar el estado del sistema de gesti´on de calidad del departamento sin embargo el tener todos estos documentos de una manera ordenada para presentarse en el momento de la auditoria resulta una tarea dif´ıcil ya que no todos los responsables entregan estos documentos en tiempo y forma, adem´as de que tener almacenados los documentos de manera f´ısica en una carpeta resulta algo ineficiente en el momento de la auditoria, es por ello que se propone implementar un sistema inform´atico que permita una supervisi´on de las evidencias en cada uno de los procedimientos adem´as de que les permita a los responsables resguardar de manera electr´onica el documento de sus actividades para que de esta manera el jefe del departamento tenga acceso a todos ellos para cuando se le pida que los muestre durante la auditoria al departamento.
Por ultimo el Sistema de Aplicaci´on de la Prueba VARK el cual consiste en la aplicaci´on de una prueba que busca conocer el estilo de aprendizaje de los alumnos de la carrera
xxi de ingenier´ıa en control y automatizaci´on, la prueba consta de 14 preguntas de opci´on m´ultiple enumerada de la a ala d que luego de que el alumno las ha contestado es posible determinar su estilo de aprendizaje dependiendo del numero de incisos de determinada letra, de esta manera el alumno puede conocer cual es su predilecci´on a un estilo de apren- dizaje, esta informaci´on es muy importante para el departamento de ICA para poder hacer la planeaci´on did´actica de los cursos. Este sistema no es la excepci´on al error humano ya que luego de que los profesores realizan la encuesta a los alumnos ellos mismos son los que contabilizan sus respuestas y escriben el estilo de aprendizaje seg´un las instrucciones de sus profesores para que luego el profesor recoja las encuestas y proceda a sacar la estad´ıstica de estas sin embargo este es un trabajo tedioso que puede provocar el error en los datos por parte del profesor, es por esta raz´on que se desarrollara la aplicaci´on web para implementar el sistema inform´atico en este sistema de informaci´on para que la tarea de almacenar la informaci´on de las encuestas que contestaron los alumnos y sus estilos de aprendizaje queden almacenados en una base de datos para su posterior an´alisis.
Se busca desarrollar estos tres sistemas inform´aticos por medio de aplicaciones web basadas en los lenguajes PHP(Hypertext Pre-processor), HTML(Hypertext Markup Language), CSS(Cascading Style Sheets) y SQL(structured query language), en primer lugar se planea utilizar el lenguaje PHP por que es un lenguaje de programaci´on gratuito adem´as de que existe una amplia documentaci´on sobre su uso en su pagina oficial www.php.net, el lenguaje HTML es el lenguaje en el que est´an basadas todas las paginas web y su uso es fundamental para la estructura de la presentaci´on de la aplicaci´on, CSS ofrece la posi- bilidad de desarrollar el dise˜no de la aplicaci´on web para que sea mas agradable para el usuario y el lenguaje SQL es el lenguaje por excelencia para las consultas en las bases de datos en muchos gestores de bases de datos como el phpMyAdmin que ser´a el que se usara para la integraci´on de las bases de datos de las aplicaciones web.
Cap´ıtulo 1
Estado del arte
1.1. Antecedentes de las Aplicaciones Web
Como bien comenta MENDOZA (2005)con el auge de la worl wide web mejor conocida como internet en la decada de los 90’s mas personas tubieron acceso a esta y por esta razon demandaron mas aplicaciones para poder interactuar con los demas usuarios de la red, una de las aplicaciones mas popular y que existe desde los inicios de misma internet por eso de 1960 es el correo electronico que consiste en el simple hecho de redactar, enviar y recibir correo electr´onico.
En internet se puede encontrar diferente tipo de informaci´on, como noticias, art´ıculos de computaci´on, historia, etc. La informaci´on contenida no puede ser solo texto, tambi´en se puede encontrar desde videos, m´usica, juegos y otras cosas. Esto hace que la informaci´on este a nuestro alcance gracias a las computadoras conectadas a la red mundial.
El dise˜no del World-Wide Web sigue el modelo Cliente-Servidor. En esta parte se tiene la divisi´on del trabajo en el que las tareas se reparten entre un n´umero de clientes que efect´uan peticiones de servicios de acuerdo con un protocolo, y un conjunto de servidores que atienden a dichas peticiones.
1.1.1. Arquitectura Web
El funcionamiento de la arquitectura Web se observa cuando el usuario de un navegador escribe un URL o bien cuando hace clic en una de las ligas o enlaces de manera oportuna.
Originando una petici´on a un servidor mediante el protocolo HTTP y al recibir la petici´on el servidor Web, ´este realiza una b´usqueda en su sistema de carpetas, una vez encontrada
1
la p´agina solicitada el servidor la env´ıa para ser visualizada en el navegador del usuario quien lo solicit´o, la estructura de la arquitectura Web se puede observar en la Figura 1.1.
Figura 1.1: Arquitectura Web.
1.1.2. Modelo Cliente-Servidor
El sistema cliente-servidor es utilizado en la mayor parte en las conexiones realizadas por dos o m´as computadoras, realizando as´ı, una comunicaci´on entre ellas, adem´as, el modelo es utilizado en algunos protocolos como es en el caso del TCP/IP, que necesitan utilizar el esquema b´asico como se describe en la figura 1.2. El esquema b´asico entre un cliente y un servidor es el siguiente: el cliente establece una conexi´on con el servidor a trav´es de un puerto especificado entonces el cliente env´ıa una petici´on al servidor, el servidor procesa la solicitud y despu´es ´el env´ıa la respuesta al cliente, este proceso se repite hasta concluir la comunicaci´on, una vez finalizada la comunicaci´on se cierra la conexi´on de ambas partes.
1.2. Lenguajes del lado del Servidor
Seg´un Alvarez (2008) existe una multitud de lenguajes concebidos para Internet. Cada uno de ellos explota m´as a fondo ciertas caracter´ısticas que lo hacen m´as o menos ´utiles
1.2. LENGUAJES DEL LADO DEL SERVIDOR 3
Figura 1.2: Modelo Cliente-Servidor.
para desarrollar distintas aplicaciones.
La versatilidad de un lenguaje est´a ´ıntimamente relacionada con su complejidad. Un lenguaje complicado en su aprendizaje permite en general el realizar un espectro de tar- eas m´as amplio y m´as profundamente. Es por ello que a la hora de elegir el lenguaje que se desea utilizar se tiene que saber claramente qu´e es lo que se quiere hacer y si el lenguaje en cuesti´on lo permite o no.
En el dominio de la red, los lenguajes de lado servidor m´as ampliamente utilizados para el desarrollo de p´aginas din´amicas son el ASP, PHP y PERL.
El ASP (Active Server Pages) es un lenguaje derivado del Visual Basic desarrollado por Microsoft. Evidentemente su empleo se realiza sobre plataformas funcionando bajo sis- tema Windows NT.
El PHP podr´ıa ser considerado como el lenguaje an´alogo al ASP utilizado en plataformas Unix y Linux.
Estos dos lenguajes resultan bastante ´utiles para la explotaci´on de bases de datos y su aprendizaje resulta accesible para una persona profana de la programaci´on. Cualquiera de ellos resultar´ıa la opci´on ideal a la hora de hacer evolucionar un sitio web realizado en HTML.
Por otra parte, el PERL es un lenguaje m´as r´apido y potente que requiere obviamente
un aprendizaje m´as largo y resulta m´as reservado para personas ya familiarizadas con la verdadera programaci´on.
1.3. Aplicaciones web para procesos administrativos
Hoy en d´ıa las aplicaciones web se han popularizado para llevar acabo los procesos administrativos de diversas Instituciones entre ellas est´an las Dependencias gubernamen- tales, Bancos, Empresas, etc. Todo esto es gracias a que el modelo Cliente-Servidor del que se hablo anteriormente posibilita que los usuarios puedan llevar acabo determinados procesos y tareas desde sus hogares o lugares de trabajo siendo que antes se necesitaba ir a las dependencias para llevarlas a cabo y perder el tiempo en filas y con la posibilidad siempre del error humano. Toda aplicaci´on web requiere de los pasos que se pueden ver en la figura 1.2 en cuyo caso se puede decir que todas las aplicaciones trabajan de la misma manera pero no todas env´ıan la misma informaci´on y por ende no todas devuelven la misma informaci´on con lo que se puede afirmar que aunque existan aplicaciones web que realizan determinadas tareas no por ello servir´an para todos los casos siempre, un ejemplo es la inscripci´on de alumnos a su escuela, en general se sabe que las instituciones requieren de determinados datos como pueden ser el nombre completo y de alg´un numero o matricula que los identifique con eso podr´ıa bastar pero esa es muy poca informaci´on entonces se necesita mas informaci´on e incluso informaci´on que depender´a en gran medi- da de la instituci´on educativa como puede ser el formato de la matricula, el horario del alumno y muchos otros datos mas; Lo mismo pasa en el caso de los bancos, para poder brindarles a sus clientes alg´un servicio v´ıa web requiere de determinada informaci´on la cual podr´ıa ser su numero de cuenta y el nombre del cliente, esa informaci´on es general y todos los bancos la solicitar´ıan pero los n´umeros de cuenta en lo que respecta a los for- matos cambian de instituci´on a instituci´on adem´as de algunos datos mas que los bancos les podr´ıan pedir a sus clientes. Con esto se puede afirmar que aunque existan ya muchas aplicaciones web que hacen determinadas tareas como seria la inscripci´on de alumnos a sus escuelas no significa que esta le sirva a todas las escuelas ya que cada instituci´on tiene sus necesidades y las aplicaciones deben adaptarse a estas.
1.3. APLICACIONES WEB PARA PROCESOS ADMINISTRATIVOS 5
1.3.1. Aplicaciones web para el sistema de selecci´ on de t´ opicos y materias optativas
Como se puede ver en el trabajo de MENDOZA (2005), las aplicaciones web para llevar acabo procesos de inscripci´on en algunas instituciones educativas no es nada nuevo incluso el IPN tiene el SAES el cual le sirve a todas las escuelas del instituto para llevar acabo la inscripci´on de los alumnos, b´asicamente para el desarrollo de una aplicaci´on que ayude en el proceso de selecci´on de t´opicos y materias optativas del departamento de ICA es necesario basarse en un sistema de inscripci´on y en otra aplicaci´on que es muy conocida en la red la cual es un foro; Los foros son una de las aplicaciones en la web que se ha desarrollado en los ´ultimos a˜nos gracias a la popularidad de esta, al igual que los sistemas de inscripci´on no son nada nuevo y su funcionamiento es muy conocido por nosotros, ser´a importante decir que no se busca emular todas las funciones de un foro si no solo la parte de registro de usuarios ya que es muy practica para conseguir el objetivo en la selecci´on de t´opicos y materias optativas, en resumidas cuentas una aplicaci´on hecha a la medida de las necesidad del departamento de ICA no existe y por ende no se ha puesto en marcha para satisfacer esta necesidad tan urgente en una de las tareas administrativas del departamento, el simple hecho de recurrir a diversas funciones de otras aplicaciones quiere decir que el atacar este problema requiere mas que un an´alisis en la programaci´on, un an´alisis en el procedimiento para que se lleve acabo de la mejor manera y es por eso que se recurre a funciones de aplicaciones ya existentes ya que el verdadero trabajo recae en una buena planeaci´on a la hora de llevar acabo la tarea de la selecci´on de t´opicos y materias optativas.
1.3.2. Aplicaciones web para el sistema de gesti´ on de calidad
Es posible encontrar muchas aplicaciones en la web referentes al almacenamiento de archivos en servidores e incluso se conocen algunas empresas que proporcionan estos servicios como lo son Megaupload, Rapidshare, Upload e incluso los servicios de correo electr´onico brindan la posibilidad de almacenar archivos con una excelente seguridad sin embargo estas aplicaciones solo sirven para almacenar archivos y no necesariamente para compartirlos o incluso no se pude tener una cuenta en la cual subir varios archivos y clasificarlos de una manera meticulosa.
Se pueden encontrar trabajos como el que presenta Garc´ıa (2008) que tratan el problema de los sistemas de almacenamiento en la web de una manera escalable y que son capaces
de compartir la informaci´on entre varios usuarios, este tipo de aplicaciones son de gran ayuda para las instituciones educativas del pa´ıs para compartir su informaci´on ya que la cantidad de informaci´on que se almacena no esta limitada a la capacidad de un solo servidor.
En lo que respecta a una aplicaci´on web dise˜nada a la medida para convertir el sistema de informaci´on que es el sistema de gesti´on de calidad a un sistema inform´atico no es posible encontrarlo ya que las tareas de este sistema son muy especificas y requieren de crear una aplicaci´on que las realice al pie de la letra, es posible encontrar en la documentaci´on de php algunos scripts para subir archivos a un servidor y almacenarlos que es una de las tareas que se necesitan realizar para la cuesti´on de resguardar los documentos de los procedimientos, sin embargo es necesario desarrollar el algoritmo para que este resguardo sea de una manera ordenada y se lleve a cabo como esta marcado en cada uno de los procedimientos, de otra manera no servir´ıa subir los archivos de una manera desordenada.
La seguridad de los archivos es fundamental ya que estos son documentos de las actividades que se realizan en el departamento de ICA y no es necesario que sean accesibles a todas las personas que entran a la aplicaci´on, para ello tambi´en es posible encontrar en la documentaci´on de php informaci´on sobre como darle acceso a determinados usuarios a cierta informaci´on.
1.3.3. Aplicaciones web para aplicar la prueba VARK
COLORADO (2003) reporta que la prueba VARK fue desarrollada por el inspector de escuelas secundarias Neil Fleming en colaboraci´on con Colleen Mills en 1998 esta prueba consiste en 13 preguntas de opci´on m´ultiple que busca identificar las predilecciones de los estudiantes en cuanto al aprendizaje. No se habla de fortalezas sino de preferencias.
Cuando el estudiante es avisado de sus preferencias, puede organizar o traducir los ma- teriales de estudio necesarios para su aprendizaje. Esta prueba lleva aplic´andose casi por 14 a˜nos en algunos centros escolares con la finalidad de conocer las predilecciones de los estudiantes en cuanto a su aprendizaje y en estos a˜nos se ha buscado por medio de las nuevas tecnolog´ıas optimizar y permitir a mas estudiantes conocer esta prueba.
En la web se pueden encontrar aplicaciones que permiten realizar el cuestionario de la prueba VARK para que los estudiantes pueden conocer el estilo o los estilos de apren- dizaje de su predilecci´on los cuales pueden ser Visual, Auditivo, de Lectura y escritura o Kinest´esico, sin embargo la mayor´ıa de estas aplicaciones solo entregan un resultado
1.3. APLICACIONES WEB PARA PROCESOS ADMINISTRATIVOS 7 de los estilos de aprendizaje del alumno y no reportan las respuestas de cada una de las preguntas del alumno e incluso hay algunas aplicaciones que aunque respaldan esta informaci´on en sus bases de datos, esta no es accesible a cualquier persona y no se puede hacer el an´alisis de estos resultados para darle un seguimiento a los estilos de aprendizaje de los alumnos.
Esta aplicaci´on puede ser desarrollada en cualquier lenguaje de programaci´on ya que su algoritmo solo consiste en la suma de las respuestas que da el alumno, entre los traba- jos realizados se encuentra el de COLORADO (2003) sobre esta prueba realizado en un men´u interactivo para los estudiantes desarrollado en el programa Macromedia director el cual despu´es de realizar las preguntas le entrega el resultado al alumno acerca de sus estilos de aprendizaje. Con las aplicaciones anteriormente explicadas se puede ver 2 tipos de aplicaciones desarrolladas para este tipo de pruebas, la primera es la aplicaci´on web que permite todas las ventajas que ofrece el modelo Cliente-Servidor y la segunda las aplicaciones para usuarios finales que son las aplicaciones que se ejecutan en una com- putadora no importando que no tengan acceso a la web; En el primer caso existe la ventaja de realizar la prueba desde cualquier computadora con acceso a la web lo que permite hacer la prueba en cualquier lugar y a cualquier hora, la base de datos es accesible de igual modo desde cualquier lugar y a cualquier hora, mas sin en cabio la segunda nos limita a que la computadora que tiene la aplicaci´on esta en un lugar fijo y no en todo momento esta funcionando adem´as que la base de datos tambi´en es solo accesible desde esta computadora mientras este funcionando.
Cap´ıtulo 2
Marco Te´ orico
2.1. HTML
Rub´en˜Alvarez (2010) comenta que HTML es el lenguaje con el que se escriben las p´aginas web. Las p´aginas web pueden ser vistas por el usuario mediante un tipo de apli- caci´on llamada navegador. Se puede decir por lo tanto que el HTML es el lenguaje usado por los navegadores para mostrar las paginas webs al usuario, siendo hoy en d´ıa la interface mas extendida en la red. Este lenguaje nos permite usar texto, im´agenes, m´usica y videos adem´as de hacer referencia a otras p´aginas usando los enlaces de hipertexto. B´asicamente la sintaxis del lenguaje HTML se puede resumir con un elemento base llamado etiqueta el cual presenta 2 partes una etiqueta de apertura de la forma <etiqueta>y una etiqueta de cierre de la forma <\etiqueta>, todo lo que este entre estas 2 etiquetas sufrir´a los efectos de dicha etiqueta, esto se puede ver mas claro con el siguiente ejemplo:
<b>esto aparecer´a en negritas<\b>
El efecto en el explorador ser´a el siguiente:
esto aparecer´a en negritas
La etiqueta <b><\b>pone en negritas el texto que esta en medio de esta, de igual forma existen mas etiquetas para diversos prop´ositos ya sea texto, imagen o video.
Con el siguiente ejemplo de Rub´en˜Alvarez (2010) en la figura 2.1 quedara mas claro como se programa en el lenguaje HTML, el resultado se puede ver en la figura 2.2.
9
Figura 2.1: ejemplo html
Figura 2.2: captura de pantalla
2.1.1. Etiquetas y atributos html
En la tabla 2.1,2.2 y 2.3 se muestran todas las etiquetas que existen en HTML as´ı como sus atributos y se da una explicaci´on de cada unas de las etiquetas y de los atributos.
2.1. HTML 11
Tabla 2.1: Etiquetas y atributos html
Etiqueta Cierre Atributo Explicaci´on
<!– > <– > A˜nadir un comentario no visible.
<a > </a > Establece un v´ınculo.
href Direcci´on del v´ınculo.
name Establece un ancla.
target Establece el destino del v´ınculo: blank, self, top, parent
<b > </b > Texto en negrita.
<blockquote > </blockquote > Sangrado.
<body > </body > Parte visible en pantalla del documento.
alink Modifica el color del v´ınculo cuando est´a activado.
background Para colocar una imagen de fondo.
bgcolor Para establecer un color de fondo.
link Modifica el color del v´ınculo antes de estar activado.
vlink Modifica el color del v´ınculo cuando ya ha sido visitado.
<br > </br > Salto de l´ınea.
<caption > </caption > Establece el t´ıtulo de una tabla.
<center > </center > Centra en horizontal.
<dd > La definici´on del t´ermino. Dentro de <dl >
<dl > </dl > Listado de t´erminos y sus definiciones.
<dt > </dt > T´ermino para ser definido. Dentro de <dl >
<font > </font > Fuente.
size Tama˜no de la fuente.
color Color
face Tipo de letra.
<form > </form > Formulario
action =“mailto:la direcci´on de correo ” method =“post ”
enctype =“text/plain”
Tabla 2.2: Etiquetas y atributos html
<frame > </frame > Marco.
name Nombre que se le da para referirse despu´es a ´el.
src Establece qu´e documento se va a cargar inicialmente en el marco.
frameborder Indica si habr´a o no borde entre los marcos.
noresize Si se escribe, el navegante
no puede redimensionar los marcos.
scrolling Establece si habr´a o no barra de scrolling.
<frameset > </frameset > Estructura de los marcos.
cols N´umero de columnas.
rows N´umero de filas.
<h1 > </h1 > Encabezado de primer orden.
Hay otros 5: <h2 ><h3 ><h4 ><h5 ><h6 >
<head > </head > Cabecera del documento.
<hr > L´ınea de separaci´on horizontal.
align Alineaci´on de la l´ınea.
noshade Sin efecto tridimensional.
size Grosor de la l´ınea.
width Anchura de la l´ınea.
<html > </html > Apertura y cierre del c´odigo.
<i > </i > Letra cursiva.
<iframe > </iframe > Marco en l´ınea. Carga en un marco otra p´agina.
name Nombre que se le da al espacio para posteriores referencias.
src Establece qu´e documento se carga inicialmente.
frameborder Establece si habr´a o no borde de separaci´on.
<image > Inserta una imagen.
alt Texto alternativo a la imagen.
border Establece si va a tener borde o no, cuando sirva de v´ınculo.
height Altura de la imagen.
width Ancho de la imagen.
src Establece qu´e imagen se va a insertar.
2.1. HTML 13
Tabla 2.3: Etiquetas y atributos html
<li > Componente de una lista. Dentro de <ul >o de <ol >
<ol > </ol > Lista numerada de objetos.
<p > </p > P´arrafo nuevo.
<sub > </sub > Sub´ındice.
<sup > </sup > Super´ındice.
<table > </table > Tabla.
align Alinea la tabla: center, right, left bgcolor Establece el color de fondo
de la tabla.
border Establece un borde a la tabla cellpadding Separaci´on entre el borde de
la tabla y el contenido.
cellspacing Separaci´on entre las celdas.
width Establece el ancho de la tabla.
<td > </td > Celda de una tabla.
align Establece la alineaci´on del texto dentro de la celda: left, center, right.
bgcolor Establece el color de fondo para la celda.
colspan Extiende la celda sobre varias columnas.
height Establece la altura de la celda.
rowspan Extiende la celda sobre varias filas.
valign Establece la alineaci´on vertical:
top, middle, bottom.
width Establece el ancho de la celda.
<th > </th > Titular de la columna de una tabla.
Dentro de <tr >
<title > </tile > Establece el nombre del documento.
Dentro de <head >
<tr > </tr > Fila de una tabla.
<u > </u > Subrayado.
<ul > </ul > Lista no numerada de objetos.
2.1.2. Formularios
Los Formularios como comenta Rub´en˜Alvarez (2010) son esas cajas y botones que se pueden encontrar en cualquier p´agina web, con estos formularios se puede recabar infor- maci´on de parte de los usuarios la cual ser´a procesada por el lengua php para poder ser almacenada en la base de datos.
Los formularios est´an definido por la siguiente etiqueta<form></form>la cual tiene al- gunos atributos como action la cual define el tipo de acci´on que realizara el formulario de las cuales solo tiene 2 posibilidades:
ser enviada a un correo electr´onico
ser enviada a otro programa para procesar su contenido
Algunos elementos de un formulario son:
Texto corto
Las cajas de texto son colocadas por medio de la etiqueta <input>. Dentro de esta eti- queta hemos de especificar el valor de dos atributos: type y name. La etiqueta es de la siguiente forma:
<input type=”text”name=”nombre”>
El nombre del elemento del formulario es de gran importancia para poder identificarlo en el programa de procesamiento o en el email que se puede recibir. Por otra parte, es importante indicar el atributo type, ya que, como se vera, existen otras modalidades de formulario que usan esta misma etiqueta.
Texto oculto
Es posible esconder el texto escrito por medio asteriscos de manera a aportar una cierta confidencialidad. Este tipo de campos son an´alogos a los de texto con una sola diferencia:
se remplaza el atributo type=”text”por type=”password”:
<input type=”password”name=”nombre”>
Estos campos son ideales para la introducci´on de datos confidenciales, principalmente c´odigos de acceso.
Texto largo
Si se desea poner a la disposici´on del usuario un campo de texto donde pueda escribir
2.1. HTML 15 c´omodamente sobre un espacio compuesto de varias l´ıneas, se invoca una nueva etiqueta:
<textarea >y su cierre correspondiente.
Este tipo de campos son pr´acticos cuando el contenido a enviar no es un nombre telefono o cualquier otro dato breve, sino mas bien, un comentario, opini´on, etc. Dentro de la etiqueta textarea deberemos indicar, como para el caso visto anteriormente, el atributo name para asociar el contenido a un nombre que ser´a asemejado a una variable en los programas de proceso. Adem´as, se puede definir las dimensiones del campo a partir de los atributos siguientes:
rows
Define el n´umero de l´ıneas del campo de texto.
cols
Define el n´umero de columnas del campo de texto.
La etiqueta queda por tanto de esta forma:
<textarea name=¸comentariorows=”10¸cols=”40”></textarea >
Listas de opciones
Las listas de opciones son ese tipo de men´us desplegables que permiten elegir una (o varias) de las m´ultiples opciones que nos proponen. Para construirlas se emplea una eti- queta con su respectivo cierre: <select >
Como para los casos ya vistos, dentro de esta etiqueta se define su nombre por medio del atributo name. Cada opci´on ser´a incluida en una l´ınea precedida de la etiqueta <option
>.
Es posible ver, a partir de estas directivas, la forma mas t´ıpica y sencilla de esta etiqueta:
<select name=”estacion”>
<option >Primavera </option >
<option >Verano </option >
<option >Oto˜no </option >
<option >Invierno</option >
</select >
Botones de radio
Existe otra alternativa para plantear una elecci´on, en este caso, obligamos al internauta a elegir ´unicamente una de las opciones que se le proponen.
La etiqueta empleada en este caso es <input>en la cual tendremos el atributo type ha
de tomar el valor radio. Veamos un ejemplo:
<input type=”radio”name=”estacion”value=”1”>Primavera
<input type=”radio”name=”estacion”value=”2”>Verano
<input type=”radio”name=”estacion”value=”3”>Oto˜no
<input type=”radio”name=”estacion”value=”4”>Invierno
Cajas de validaci´on
Este tipo de elementos pueden ser activados o desactivados por el visitante por un simple clic sobre la caja en cuesti´on. La sintaxis utilizada es muy similar a las vistas anterior- mente:
<input type=”checkbox”name=”paella”>Me gusta la paella
La ´unica diferencia fundamental es el valor adoptado por el atributo type. El tipo de infor- maci´on que llegara al correo (o al programa) ser´a del tipo: paella=on (u off dependiendo si ha sido activada o no).
Bot´on de env´ıo
Para dar por finalizado el proceso de relleno del formulario y hacerlo llegar a su gestor, el navegante ha de validarlo por medio de un bot´on previsto a tal efecto. La construcci´on de dicho bot´on no reviste ninguna dificultad una vez familiarizados con las etiquetas input ya vistas:
<input type=”submit”value=”Enviar”>
Bot´on de borrado
Este bot´on perite borrar el formulario por completo en el caso de que el usuario desee rehacerlo desde el principio. Su estructura sint´actica es an´aloga a la anterior:
<input type=”reset”value=”Borrar”>
Datos ocultos
En algunos casos, aparte de los propios datos enviados por el usuario, puede resultar pr´actico enviar datos definidos por nosotros mismos que ayuden al programa en su proce- samiento del formulario. Este tipo de datos, que no se muestran en la pagina pero si pueden ser detectados solicitando el c´odigo fuente, no son frecuentemente utilizados por paginas construidas en HTML, son mas bien usados por paginas que emplean tecnolog´ıas de servidor. He aqu´ı un ejemplo:
2.1. HTML 17
<input type=hidden name=”sitio”value=www.desarrolloweb.com >
En la figura 2.3 se muestra un ejemplo de Rub´en˜Alvarez (2010), para programar un formulario en lenguaje HTMLy en la figura 2.4 se ve el resultado de este c´odigo y como se vera en el explorador.
Figura 2.3: Codigo de un fomulario en HTML
Figura 2.4: Formulario en HTML
2.1.3. Tablas
Rub´en˜Alvarez (2010) dice que una tabla es un conjunto de celdas organizadas dentro de las cuales se puede alojar distintos contenidos. Las tablas son definidas por las etiquetas
<table >y </table >.
Las tablas son descritas por l´ıneas de izquierda a derecha. Cada una de estas l´ıneas es definida por otra etiqueta y su cierre: <tr >y </tr >.
Asimismo, dentro de cada l´ınea, habr´a diferentes celdas. Cada una de estas celdas es definida por otro par de etiquetas: <td >y </td >. Dentro de estas etiquetas es donde se coloca el contenido.
Atributos para filas o celdas
Algunos de los atributos que se pueden modificar en una fila son los siguientes:
align: Justifica el texto de la celda del mismo modo que si fuese el de un p´arrafo.
2.1. HTML 19 valign: Podemos elegir si queremos que el texto aparezca arriba (top), en el centro (mid- dle) o abajo (bottom) de la celda.
bgcolor: Da color a la celda o l´ınea elegida.
bordercolor: Define el color del borde.
Atributos ´unicamente para celdas
background: Nos permite colocar un fondo para la celda a partir de un enlace a una imagen.
height: Define la altura de la celda en pixeles o porcentaje.
bfseries width: Define la anchura de la celda en pixeles o porcentaje.
colspan: Expande una celda horizontalmente.
rowspan: Expande una celda verticalmente.
Atributos para una tabla
align: Alinea horizontalmente la tabla con respecto a su entorno.
background: Nos permite colocar un fondo para la tabla a partir de un enlace a una imagen.
bgcolor: Da color de fondo a la tabla.
border: Define el n´umero de pixeles del borde principal.
bordercolor: Define el color del borde.
cellpadding: Define, en pixels, el espacio entre los bordes de la celda y el contenido de la misma.
cellspacing: Define el espacio entre los bordes (en pixeles).
height: Define la altura de la tabla en pixeles o porcentaje.
width: Define la anchura de la tabla en pixeles o porcentaje.
Se muestra un ejemplo de Rub´en˜Alvarez (2010) en la figura 2.5, el resultado de este c´odigo en el explorador se observa en la figura 2.6.
Figura 2.5: Codigo de una Tabla en HTML
Figura 2.6: Tabla en HTML
2.2. CSS, Hojas de estilo
Alvarez (2010) comenta que CSS(Cascading Style Sheets) fue desarrollado para poder separar el contenido HTML de su forma. El modo de funcionamiento de las CSS consiste en definir, mediante una sintaxis especial, la forma de presentaci´on que le aplicaremos a:
2.2. CSS, HOJAS DE ESTILO 21 Un web entero, de modo que se puede definir la forma de todo el web de una sola vez.
Un documento HTML o p´agina, se puede definir la forma, en un peque˜no trozo de c´odigo en la cabecera, a toda la p´agina.
Una porci´on del documento, aplicando estilos visibles en un trozo de la p´agina.
Una etiqueta en concreto, llegando incluso a poder definir varios estilos diferentes para una sola etiqueta.
Para definir estilos en secciones reducidas de una p´agina se utiliza la etiqueta <span
>. Con su atributo style indicamos en sintaxis CSS las caracter´ısticas de estilos como se muestra en la sintaxis:
<SPAN style=¸color:green”>en color verde </SPAN >.
Este fragmento de c´odigo nos mostrara en el explorador el texto en color verde.
2.2.1. Sintaxis CSS
Para definir un estilo se utilizan atributos como font-size,text-decoration, etc, seguidos de dos puntos y el valor que le deseemos asignar. Podemos definir un estilo a base de definir muchos atributos separados por punto y coma.
Ejemplo:
font-size: 10pt; text-decoration: underline; color: black;
Para definir el estilo de una etiqueta se escribe la etiqueta seguida de la lista de atributos encerrados entre llaves.
Ejemplo:
H1{text-align: center; color:black}
2.2.2. Atributos de las hojas de estilo
En la tabla 2.4, 2.5 y 2.6 se muestran los atributos CSS y sus caracter´ısticas a modo de resumen de forma clara y precisa, en la figura 2.7 se observa estos atributos insertados en un codigo HTML y el resultado que mostrara el explorador se puede ver en la figura 2.8.
Tabla 2.4: Atributos CSS
Nombre del atributo Posibles valores Ejemplos
FUENTES - FONT
color valor RGB o nombre de color color: #009900; color: red;
Sirve para indicar el color del texto. Lo admiten casi todas las etiqetas de HTML.
No todos los nombres de colores son admitidos en el estandar, es aconsejable entonces utilizar el valor RGB.
font-size xx-small, x-small,small, medium, font-size:12pt;font-size: x-large;
large, x-large,xxlarge
Sirve para indicar el tama˜no de las fuentes de manera m´as r´ıgida y con mayor exactitud.
font-family serif,sans-serif,cursive,fantasy, font-size:12pt;font-size: x-large;
monospace Todas las fuentes habituales
Con este atributo se indica la familia de tipografia del texto.
Tambi´en se pueden definir con tipograf´ıas normales, como ocurre en html
font-weight normal,bold,bolder,lighter, font-weight:bold;font-weight: 200;
100,200,300,400 500,600 700,800,900
Sirve para definir la anchura de los caracteres.
Normal y 400 son el mismo valor, as´ı como bold y 700.
font-style normal,italic,oblique font-style:normal;font-style: italic;
Es el estilo de la fuente, que puede ser normal, it´alica u obl´ıcua.
P ´ARRAFOS - TEXT
line-height normal y unidades CSS line-height: 12px;line-height: normal;
El alto de una l´ınea,y por tanto, el espaciado entre l´ıneas. Es una de esas caracter´ısticas que no se podian mofificar utilizando HTML.
text-decoration none,underline,overline,linethrough text-decoration: none;
linethrough text-decoration: underline;
Para establecer la decoraci´on de un texto, es decir, si est´a subrayado, sobrerayado o tachado.
text-align left,right,center,justify text-align: right;text-align: center;
Sirve para indicar la alineaci´on del texto.
text-indent Unidades CSS text-indent: 10px;text-indent: 2in;
Un atributo que sirve para hacer sangrado o m´argenes en las p´aginas.
2.2. CSS, HOJAS DE ESTILO 23
Tabla 2.5: Atributos CSS
text-transform capitalize,uppercase,lowercase,none text-transform: none;
text-transform: capitalize;
Nos permite transformar el texto, haciendo que tenga la primera letra en may´usculas de todas las palabrs, todo en may´usculas o min´usculas.
FONDO - BACKGROUND
Background-color Un color, con sunombre background-color: green;
o su valor RGB background-color: #000055;
Sirve para indicar el color de fondo de un elemento de la p´agina.
Background-image El nombre de la imagen con su background-image: url camino relativo o absoluto (m´armol.gif) ;
Colocamos con este atributo una imagen de fondo en cualquier elemento de la p´agina.
BOX - CAJA
Margin-left Unidades CSS margin-left: 1cm;margin-left: 0,5in;
Indicamos con este atributo el tama˜no del margen a la izquierda
Margin-right Unidades CSS margin-right: 5 %;margin-right: 1in;
Se utiliza para definir el tama˜no del margen a la derecha
Margin-top Unidades CSS margin-top: 0px;margin-top: 10px;
Indicamos con este atributo el tama˜no del margen arriba de la p´agina
Margin-bottom Unidades CSS margin-bottom: 0pt;margin-top: 1px;
Con el se indica el tama˜no del margen en la parte de abajo de la p´agina
Padding-left Unidades CSS padding-left: 0.5in;padding-left: 1px;
Indica el espacio insertado, por la izquierda, entre el borde del elemento- continente y el contenido de este.
Padding-right Unidades CSS padding-right: 0.5cm;
padding-right: 1pt;
Indica el espacio insertado, en este caso por la derecha, entre el borde del elemento-continente y el contenido de este.
Padding-top Unidades CSS padding-top: 10pt;padding-top: 5px;
Indica el espacio insertado, por arriba, entre el borde del elemento-continente y el contenido de este.
Tabla 2.6: Atributos CSS
Padding-bottom Unidades CSS padding-right: 0.5cm;padding-right: 1pt;
Indica el espacio insertado, en este caso por abajo, entre el borde del elemento- continente y el contenido de este.
Border-color color RGB y nombre border-color: red;
de color border-color: #ffccff;
Para indicar el color del borde del elemento de la p´agina al que se lo aplicamos.
Border-style none,dotted,solid,double, border-style: solid;
groove,ridge,inset,outset border-style: double;
El estilo del borde, los valores significan: none=ningun borde, dotted=punteado (no parece funcionar), solid=solido, double=doble borde, y desde groove hasta
outset son bordes con varios efectos 3D.
border-width Unidades CSS border-width: 10px;
border-width: 0.5in;
El tama˜no del borde del elemento al que lo aplicamos.
float none,left,right float: right;
Sirve para alinear un elemento a la izquierda o la derecha haciendo que el texto se agrupe alrededor de dicho elemento.
clear none,left,right clear: right;
Si este elemento tiene a su altura imagenes u otros elementos alineados a la derecha o la izquierda, con el atributo clear hacemos que se coloque en un lugar
donde ya no tenga esos elementos a el lado que indiquemos.
2.3. PHP 25
Figura 2.7: Atributos CSS en c´odigo HTML
Figura 2.8: Estilos CSS en el explorador
2.3. PHP
Como comenta Manuel Palomo˜Duarte (2006), el lenguaje PHP (cuyo nombre es acr´onimo de PHP: Hipertext Preprocessor) es un lenguaje interpretado con una sintaxis similar a la de C++ o JAVA. Aunque el lenguaje se puede usar para realizar cualquier tipo de programa, es en la generaci´on din´amica de p´aginas web donde ha alcanzado su m´axi- ma popularidad. En concreto, suele incluirse incrustado en p´aginas HTML (o XHTML),
siendo el servidor web el encargado de ejecutarlo.
Algunas de las caracter´ısticas de su enorme popularidad son:
Es un lenguaje libre. Puede descargarse de http://www.php.net.
Est´a disponible para muchos sistemas (GNU/Linux, Windows, UNIX, etc).
Tiene una extensa documentaci´on oficial en varios idiomas (disponible libremente en http://www.php.net).
Existen multitud de extensiones: para conectar con bases de datos, para manejo de sockets, para generar documentos PDF, para generar din´amicamente p´aginas en Flash, etc
Al ejecutarse en el servidor, los programas PHP lo pueden usar todo tipo de m´aquinas con todo tipo de sistemas operativos.
En caso de que un cliente falle (por error hardware, virus, etc) se puede seguir us- ando el sistema desde otro cualquiera que tenga un navegador web con conexi´on al servidor.
Para incluir c´odigo PHP basta con precederlo de la etiqueta <?php, y cerrarlo con
?>. Si el servidor web est´a correctamente configurado, detectar´a c´odigo PHP y, en vez de proporcionarle el contenido de la p´agina directamente al cliente (lo que significar´ıa que recibir´ıa el c´odigo fuente del programa), ejecuta el programa y devuelve su resultado al navegador.
2.3.1. Variables en PHP
Los nombres de variables en PHP comienzan por un car´acter y van seguidos de n´umeros y caracteres sin espacios. Para hacer referencia a una variable debemos anteponer a su nombre el s´ımbolo del d´olar ($). Los tipos b´asicos son:
Entero: n´umero entero con signo Flotante: n´umero decimal con signo Booleano: vale true o false
2.4. MYSQL 27 Cadena de caracteres: cadena de caracteres delimitada por comillas. Las comillas simples interpretan el texto literalmente, mientras que las dobles sustituyen las variables.
No es necesario declarar las variables, simplemente el int´erprete averiguar´a el tipo de dato que almacenar´a y se declarar´a autom´aticamente. Si es necesaria una conversi´on de tipos, al igual que en C, se puede anteponer el tipo al que se desea promocionar entre par´entesis.
2.4. MySQL
MySQL es un motor de base de datos muy usado por los programadores en php, MySQL soporta el lenguaje SQL y la conexi´on de varios usuarios para administrar y ges- tionar las bases de datos se utiliza una aplicaci´on muy difundida llamada phpMyAdmin, lo que se puede realizar con esta aplicaci´on es: crear bases de datos, crear tablas, insertar datos en tablas, realizar consultas, borrar datos de tablas, borrar tablas, borrar bases de datos, etc.
2.4.1. Crear una base de datos
Para crear una base de datos se entra al administrador de bases de datos que es como el que se muestra en la figura 2.9 y se llenan los campos los cuales son el nombre de la base de datos, el nombre de usuario que podr´a acceder a la base de datos y el password para este usuario, para este ejemplo el nombre de la base de datos ser´a Topicos, el usuario ser´a Wet89 y el password ser´a ght345;Por definici´on una base de datos es un conjunto de tablas, ahora que esta creada la base de datos se puede acceder a ella pero estar´a en blanco por que no contiene ninguna tabla, la creaci´on de una tabla se detallara en la siguiente secci´on.
Figura 2.9: Administrador de base de datos
2.4.2. Crear una tabla
Cuando se accede a la base de datos que se ha creado para crear tablas ya sea el caso para crear una tabla por primera vez o para a˜nadir mas tablas solo se debe dar el nombre de la tabla y los campos que esta contendr´a para el ejemplo que se esta realizando la tabla se llamara alumnos y contendr´a 11 campos, se puede ver el ejemplo en la figura 2.10, al oprimir el bot´on de continuar se definen los campos de la tabla en el panel que se ve en la figura 2.11, para entender como definir los campos y sus tipos de datos tomaremos la teor´ıa de Gilfillan (2003) una vez que tenemos los campos completos se oprime el bot´on de grabar para guardar la tabla.
Figura 2.10: Crear una tabla
2.4. MYSQL 29
2.4.3. Insertar, Borrar, Actualizar, Seleccionar registros de las Tablas
Todas estas funciones se pueden encontrar en el panel que se ve en la figura 2.12, se observa que el ambiente visual de phpMyAdmin es muy amigable para que se puedan llevar a cabo todas las funciones dentro de la base de datos sin embargo este ambiente visual solo permite manejar la base de datos e interactuar con ella de una manera aislada y lo que se busca es obtener informaci´on por medio de las aplicaciones web para almacenarla en esta para ello se necesita un lenguaje de internet como lo es php que adem´as permite usar el lenguaje SQL para poder hacer estas funciones de manera que la aplicaci´on web interact´ue con la base de datos, se hablara un poco mas acerca de estas funciones de php en la siguiente secci´on.
2.4.4. PHP y MySQL
Lo primero que se necesita hacer para poder tener acceso a la base de datos es hacer una conexi´on con esta, en la figura 2.13 mostramos la sintaxis de esta y las 4 funciones principales para hacer consultas a las bases de datos, toda la documentaci´on de estas funciones la podemos encontrar en www.php.net .
Figura 2.11: Campos de la tabla
Figura 2.12: Ambiente visual de la base de datos
Figura 2.13: Sintaxis de las 4 funciciones principales SQL
2.5. FTP 31
2.5. FTP
Como bien nos explica Garc´ıa (2008) FTP es un protocolo de red para la transferencia de archivos entre sistemas conectados a una red TCP (Transmission Control Protocol), basado en la arquitectura cliente-servidor. Desde un equipo cliente se puede conectar a un servidor para descargar archivos desde ´el o para enviarle archivos, independientemente del sistema operativo utilizado en cada equipo.
2.5.1. Servidor FTP
Un servidor FTP es un programa especial que se ejecuta en un equipo servidor normal- mente conectado a Internet. Su funci´on es permitir el intercambio de datos entre diferentes cliente-servidor.
Por lo general, los programas servidores FTP no suelen encontrarse en las computadoras personales, por lo que un usuario normalmente utilizar´a el FTP para conectarse remota- mente a uno y as´ı intercambiar informaci´on con ´el.
Las aplicaciones m´as comunes de los servidores FTP suelen ser el alojamiento web, en el que sus clientes utilizan el servicio para subir sus p´aginas web y sus archivos correspon- dientes.
2.5.2. Cliente FTP
Cuando un navegador no est´a equipado con la funci´on FTP, o si se quiere cargar archivos en una computadora remota, se necesitar´a utilizar un programa cliente FTP. Un cliente FTP es un programa que se instala en la computadora del usuario, y que emplea el protocolo FTP para conectarse a un servidor FTP y transferir archivos, ya sea para descargarlos o para subirlos.
Para utilizar un cliente FTP, se necesita conocer el nombre del archivo, la computadora en que reside (servidor, en el caso de descarga de archivos), la computadora a la que se quiere transferir el archivo (en caso de querer subirlo nosotros al servidor), y la carpeta en la que se encuentra.
2.5.3. Filezila
Filezila es el cliente FTP por excelencia para la transferencia de archivos a servidores web, tiene un ambiente visual muy amigable y f´acil de entender, con este programa pode- mos acceder a un servidor con la direcci´on url, el nombre de usuario y el password y podemos hacer las modificaciones a las carpetas y dar permisos para acceder a determi- nadas carpetas en caso de ser necesario para las aplicaciones web que se alojaran en el servidor.
2.6. Diagramas y Herramientas para el desarrollo de aplicaciones
2.6.1. Diagrama Entidad-Relaci´ on
Denominado por sus siglas como: E-R; Medrano (2011) comenta que este modelo representa a la realidad a trav´es de un esquema gr´afico empleando los terminolog´ıa de entidades, que son objetos que existen y son los elementos principales que se identifican en el problema a resolver y se distinguen de otros por sus caracter´ısticas particulares denominadas atributos, el enlace que rige la uni´on de las entidades esta representada por la relaci´on del modelo. Un rect´angulo representa a las entidades; una elipse a los atributos de las entidades, y una etiqueta dentro de un rombo indica la relaci´on que existe entre las entidades, destacando con l´ıneas las uniones de estas. En la figura 2.14 se muestra un ejemplo de este diagrama.
Figura 2.14: Diagrama Entidad Relaci´on
2.6. DIAGRAMAS Y HERRAMIENTAS PARA EL DESARROLLO DE APLICACIONES33
2.6.2. Diccionario de Datos
Seg´un Wikipedia (2011) Un diccionario de datos es un conjunto de metadatos que contiene las caracter´ısticas l´ogicas y puntuales de los datos que se van a utilizar en el sistema que se programa, incluyendo nombre, descripci´on, alias, contenido y organizaci´on.
Identifica los procesos donde se emplean los datos y los sitios donde se necesita el acceso inmediato a la informaci´on, se desarrolla durante el an´alisis de flujo de datos y auxilia a los analistas que participan en la determinaci´on de los requerimientos del sistema, su contenido tambi´en se emplea durante el dise˜no. En un diccionario de datos se encuentra la lista de todos los elementos que forman parte del flujo de datos de todo el sistema.
Los elementos mas importantes son flujos de datos, almacenes de datos y procesos. El diccionario de datos guarda los detalles y descripci´on de todos estos elementos. En la figura 2.15 se puede ver un ejemplo del diccionario de datos.
Figura 2.15: Diccionario de datos
2.6.3. Diagrama de Casos de Uso
Como explica Tello (2008) los diagramas de casos de uso documentan el compor- tamiento de un sistema desde el punto de vista del usuario. Por lo tanto los casos de uso determinan los requisitos funcionales del sistema, es decir, representan las funciones que un sistema puede ejecutar. Su ventaja principal es la facilidad para interpretarlos, lo
que hace que sean especialmente ´utiles en la comunicaci´on con el cliente. Se muestra un ejemplo en la figura 2.16.
Figura 2.16: Diagrama de Casos de Uso
2.6.4. Diagrama de Secuencia
Tello (2008) afirma que en un diagrama de secuencia se indicar´an los m´odulos o clases que forman parte del programa y las llamadas que se hacen en cada uno de ellos para realizar una tarea determinada.
Se realizan diagramas de secuencia para definir acciones que se pueden realizar en la apli- caci´on en cuesti´on, en pocos palabras este diagrama indica las acciones que la aplicaci´on ira tomando dependiendo del algoritmo de funcionamiento, un ejemplo de este diagrama se puede ver en la figura 2.17.
2.6. DIAGRAMAS Y HERRAMIENTAS PARA EL DESARROLLO DE APLICACIONES35
Figura 2.17: Diagrama de Secuencia
Estos 4 diagramas son herramientas en el desarrollo de aplicaciones de software no importando el lenguaje o el sistema operativo sobre el que se trabaje ya que son para que el desarrollador comience a desarrollar su algoritmo y le sea mas f´acil encontrar una soluci´on al problema que desea resolver.
Cap´ıtulo 3 Desarrollo
3.1. Sistema Selecci´ on de t´ opicos y materias optati- vas
3.1.1. Planteamiento del problema
El proceso por el cual los alumnos de la ESIME ZACATENCO eligen alguno de los t´opicos selectos de ingenier´ıa que la escuela ofrece es demasiado arcaico ya que luego de la exposici´on en la cual se dan a conocer los diferentes t´opicos con los que cuenta la escuela cada uno de los encargados de estos definen como seleccionar a los alumnos que cursaran estos t´opicos, esto resulta en un m´etodo usualmente parcial y muy cansado en caso de que el t´opico tenga una gran demanda adem´as que en muchas ocasiones por la desinformaci´on de los alumnos en la cuesti´on de como seleccionar uno de estos t´opicos dejan pasar esta oportunidad que brinda la escuela esto es muy evidente cuando se sabe que los t´opicos pueden ser tomados por alumnos de cualquier especialidad de la escuela pero muchas veces solo lo toman los alumnos de la especialidad de la cual es el t´opico con lo cual se cae nuevamente en el problema de la parcialidad en este proceso de selecci´on.
En lo relacionado a la selecci´on de materias optativas el proceso consist´ıa en que los alum- nos anotaran en orden de preferencia las materias y en funci´on de esto el departamento acad´emico los inscrib´ıa en estas siempre y cuando el n´umero de alumnos no superara la demanda establecida, este proceso resulta algo lento y siempre existe la posibilidad del error humano al momento de recopilar la informaci´on.
37
