Desarrollo de La Aplicacion Movil

UNIVERSIDAD TECNICA ESTATAL DE QUEVEDO
UNIDAD DE ESTUDIOS A DISTANCIAS

MODALIDAD SEMIPRESENCIAL
FACULTAD CIENCIAS DE LA INGENIERIA
PROYECTO INTEGRADOR DE SABERES
INGENIERA EN SISTEMAS
PARALELO X
TEMA:
DESARROLLO DE LA APLICACION MOVL INSTITUCIONAL DE LA UTEQ

SECCION: NOTAS SICAU
AUTORES
Cedeo Gonzlez Vicente Javier
Tandazo Sornoza Lino Fabin
Pastua Guanotua Jorge Santiago
TUTOR DE PROYECTO
Lcdo. Juan Carlos Ortega Acosta
QUEVEDO LOS ROS - ECUADOR
2016
INDICE
I. RESUMEN EJECUTIVO...............................................................................4
II. INTRODUCCION...........................................................................................6
III. PROBLEMATIZACION...............................................................................8
3.1. DIAGNOSTICO DEL PROBLEMA....................................................9
3.2. FORMULACION DEL PROBLEMA..................................................9
3.3. SISTEMATIZACIN DEL PROBLEMA............................................9
IV. JUSTIFICACIN.......................................................................................10
V. OBJETIVOS................................................................................................12
5.1. OBJETIVO GENERAL..........................................................................13
5.2. OBJETIVOS ESPECIFICOS.................................................................13
VI. HIPOTESIS...............................................................................................14
VII. FUNDAMENTACIN TEORICA...............................................................16
7.1. WEB SERVICES...................................................................................17
7.1.1 Ventajas de los servicios web.........................................................19
7.1.2 Inconvenientes de los servicios Web.............................................19
7.1.3 Razones para crear servicios Web.................................................20
7.2. PHP.......................................................................................................21
7.2.1. Caractersticas de PHP.................................................................22
7.2.2. Inconvenientes..................................................................................23
7.3. HTML.....................................................................................................24
7.3.1. Elementos..........................................................................................26
7.3.2. Cdigos HTML bsicos.....................................................................28
7.3.3. Entidades HTML................................................................................30
7.4. MY SQL.................................................................................................31
7.4.1. Caractersticas MySQL.....................................................................33
7.5. PHONEGAP..........................................................................................35
7.6. JQUERY MOBILE.................................................................................36
7.6.1. Caractersticas de JQueryMobile......................................................37
7.6.2. Como comenzar con JQueryMobile..................................................37
1
7.6.3. Estructura de las pginas..................................................................37
7.6.4. Enlaces internos y sitio con varias pginas......................................38
7.6.5. Conclusin.........................................................................................40
7.7. JSON (JavaScript Object Notation).......................................................40
7.7.1. JSON Nombre/Par de Valores..........................................................41
7.7.2. Valores Json......................................................................................42
7.7.3. Objetos JSON....................................................................................42
7.7.4. Arrays JSON......................................................................................43
7.8. WAMPSERVER.....................................................................................46
7.8.1. Caractersticas...................................................................................46
7.8.2. Utilidad...............................................................................................46
7.8.3. Herramientas para el diseo y desarrollo de paginas web...............46
7.8.4. Funcionalidades de WampServer.....................................................47
VIII. METODOLOGIA DE LA INVESTIGACIN...............................................48
8.1. TIPOS DE INVESTIGACIN................................................................49
8.2. METODO DE INVESTIGACIN...........................................................49
8.3. MATERIALES Y EQUIPOS...................................................................49
IX. RESULTADOS..........................................................................................50
9.1. CREACIN DE LA BASE DE DATOS: NOTAS EN MY SQL...............51
9.1.1.Creacin de la Tabla tbmatriculas....................................................51
9.1.2.Creacin de la Tabla tbalumnos......................................................52
9.1.3.Creacin de la Tabla tbcarrera.........................................................53
9.1.4. Creacin de la Tabla tbmaterias.....................................................54
9.1.5.Creacin de la Tabla tbnotas...........................................................55
9.2. CODIGO DE PROGRAMACION...........................................................56
9.2.1.CODIGO INDEX.................................................................................56
2
9.2.2.CODIGO CONFIG..............................................................................62
9.2.3.CODIGO LOGIN.................................................................................62
9.2.4.CODIGO NOMBRE............................................................................63
9.2.5.CODIGO NOTAS................................................................................64
X. CONCLUSIONES........................................................................................69
XI. RECOMENDACIONES.............................................................................71
XII. REFERENCIA BIBLIOGRAFICA..............................................................73
XIII. ANEXOS...................................................................................................75
3
I. RESUMEN EJECUTIVO
El presente proyecto se ha elaborado con la finalidad de crear la aplicacin

WEB, de la pgina de la Universidad Tcnica Estatal de Quevedo para el
4
Sistema de Telefona Mvil ANDROID, utilizando el Lenguaje de Programacin
HTML, PHP, que permita la manipulacin de informacin de una Base de Datos
MySQL ya que son lenguajes de programacin de amplio uso.
La programacin WEB es un modo de trabajo, que nos permite centrarnos en

solucionar el problema que se tiene en el diario convivir informtico y laboral, la
cual nos ayuda a obtener la informacin de manera veraz y verstil gracias a
una gran herramienta que es el Internet.
La aplicacin est desarrollada para la gran demanda de telfono con

tecnologa Android la cual nos facilita el acceso a la pgina Web de la U.T.E.Q
y de esa manera poder visualizar nuestras notas del SICAU, con una esttica
para dispositivos mviles.
5
II. INTRODUCCION
Como estudiantes del Sptimo Semestre de Ingeniera en Sistemas paralelo

X de la Unidad de Estudios a Distancia de la Universidad Tcnica Estatal de
6
Quevedo, con la finalidad de concluir el Semestre y pasar al siguiente
tenemos que elaborar un proyecto Integrador.
Por lo cual hemos desarrollado parte de la aplicacin para complementar la

Pagina WEB de la UTEQ, en el Lenguaje de Programacin HTML y PHP, que
permita la manipulacin de informacin de una Base de Datos creada en
MySQL.
Para ello buscamos e investigamos de entre muchos lenguajes de

programacin existentes y escogimos HTML, PHP por ser un lenguaje que se
adapta al desarrollo de Paginas Web y el Sistema Gestor de Base de Datos
MySQL ya que se acopla a nuestro entorno de Programacin.
En el trabajo buscamos despertar el inters del lector, mediante este contexto

que nos mostrara los conceptos bsicos, las funcionalidades y herramientas
ms comunes de los Lenguaje de Programacin HTML, PHP y las utilidades
que nos brinda el Sistema Gestor de Base de Datos MySQL.
El presente proyecto tiene como objetivo desarrollar una Aplicacin para

Dispositivos Androide, mediante la cual podamos interactuar con la pgina
WEB de la Universidad en la manipulacin de datos, que nos permita ingresar,
consultar, la informacin de la notas de los estudiantes, con un ingreso de
seguridad mediante un Login y guardando nuestros datos en una Base de
Datos de MySQL.
7
III. PROBLEMATIZACION
8
3.1. DIAGNOSTICO DEL PROBLEMA
Existen diversos tipos de lenguajes de programacin que nos brindan una

amplia gama de oportunidades para el desarrollo y modificacin de
aplicaciones entre estas tenemos el lenguaje HTML, PHP que nos brinda un
aspecto visual y manejo muy amigable para con el usuario, el proyecto se
realiz en base la necesidad de querer fomentar nuevas opciones de obtencin
de informacin para nuestros usuarios, para lo cual se realiza investigacin de
HTML, PHP y formatos JSON, para que vuestra aplicacin tenga un mejor
aspecto visual.
3.2. FORMULACION DEL PROBLEMA
CUL SERIA EL MEJOR LENGUAJE DE PROGRAMACION PARA LA

CREACION DE NUESTRA APLICACION?
QUE APLICACION PODRIAMOS CREAR?
DE QUE MANERA AYUDARIA UN SISTEMA GESTOR DE BASE DE

DATOS?
3.3. SISTEMATIZACIN DEL PROBLEMA
Qu lenguaje de programacin WEB Utilizara para la Creacin de una

aplicacin enlazada a una Base de Datos?
HTML, PHP
El lenguaje de programacin es acto para resolver nuestro problema?
9
Si con HTML, PHP podemos crear nuestra aplicacin ya que nos brinda
las herramientas necesarias y nos permite el enlace al Sistema Gestor
Base de Datos MySQL.
IV. JUSTIFICACIN
10
El presente proyecto se justifica por la importancia de su contenido en el mbito
de la carrera de Sistemas, ya que como estudiantes, debemos adoptar
capacidades y potencias para alcanzar mximas destrezas en el desarrollo de
aplicaciones y que ms, si no empezando por mejorar los servicios de nuestra
Universidad mediante la Aplicacin de su Pagina WEB para Dispositivos
Androide, que con el tiempo las podemos ir haciendo ms complejas, a llegar al
punto de crear una Aplicacin WEB que se ajuste a nuestras necesidades y
sacar beneficio de ella.
La programacin WEB en la Actualidad es cada vez ms compleja al lmite de

encontrar multitud de lenguajes de Programacin, e incluso diversas maneras
de crear pginas WEB, es por ello que da a da debemos mejorar nuestras
capacidades y aptitudes en programacin.
Es muy til en la vida diaria porque nos permite hacer ms cmodo nuestro
sistema de vida, ya que por medio de infinitud de programas podemos
conectarnos, enlazarnos, y ahorrarnos tiempo en multidinarias tareas.
Y que ms que seguir la Programacin WEB, que es la onda en la actualidad,

es por ello que hemos escogido los Lenguaje de Programacin HTML,PHP, que
son programas que nos brinda variedad de herramienta, para crear
aplicaciones que potencien las caractersticas de un programa comn.
11
V. OBJETIVOS
12
5.1. OBJETIVO GENERAL
Desarrollar parte de la Aplicacin WEB de la Universidad Tcnica
Estatal de Quevedo
5.2. OBJETIVOS ESPECIFICOS
Investigar, las ventajas que ofrece el Lenguaje de Programacin HTML y
PHP
Desarrollar una aplicacin en el lenguaje de programacin HTML, PHP
Enlazar la aplicacin a una Base de Datos creada en MySQL
13
VI. HIPOTESIS
14
El diseo del texto didctico para el rea de sistemas basada en el
procedimiento lgico sistemtico permitir a los estudiantes de la carrera y
pblico en general obtener los conocimientos necesarios para la creacin de
esta aplicacin y obtener un aprendizaje eficaz en el manejo del lenguaje de
programacin HTML y PHP, y la Utilizacin del Sistema Gestor Base de Datos
MySQL.
15
VII. FUNDAMENTACIN TEORICA
16
17
7.1. WEB SERVICES
Un servicio web (en ingls, Web Service o Web services) es una

tecnologa que utiliza un conjunto de protocolos y estndares que sirven
para intercambiar datos entre aplicaciones. Distintas aplicaciones de
software desarrolladas en lenguajes de programacin diferentes, y
ejecutadas sobre cualquier plataforma, pueden utilizar los servicios web
para intercambiar datos en redes de ordenadores como Internet. La
interoperabilidad se consigue mediante la adopcin de estndares
abiertos. Las organizaciones OASIS y W3C son los comits
responsables de la arquitectura y reglamentacin de los servicios Web.
Para mejorar la interoperabilidad entre distintas implementaciones de
servicios Web se ha creado el organismo WS-I, encargado de desarrollar
diversos perfiles para definir de manera ms exhaustiva estos
estndares. Es una mquina que atiende las peticiones de los clientes
web y les enva los recursos solicitados.
Ilustracin 1.- Servidor WEB
18
Un web service es un conjunto de protocolos y estndares que
sirven para intercambiar datos entre aplicaciones. Distintas aplicaciones
de software desarrolladas en lenguajes de programacin diferentes, y
ejecutadas sobre cualquier plataforma, pueden utilizar los servicios web
para intercambiar datos en redes de ordenadores como internet.
De una manera ms clara se podra decir que un web service es

una funcin que diferentes servicios o equipos utilizan; es decir, solo se
envan parmetros al servidor (lugar donde est alojado el web service)
y ste responder la peticin. Entre algunas que se manejan de utilizar
servicios webs en las aplicaciones destacan las siguientes:
Aportan interoperabilidad entre aplicaciones de software

independientemente de sus propiedades o de las plataformas sobre las
que se instalen.
Los servicios Web fomentan los estndares y protocolos

basados en texto, que hacen ms fcil acceder a su contenido y
entender su funcionamiento.
Al apoyarse en HTTP, los servicios Web pueden aprovecharse

de los sistemas de seguridad firewall sin necesidad de cambiar las
reglas de filtrado.
Permiten que servicios y software de diferentes compaas

ubicadas en diferentes lugares geogrficos puedan ser combinados
fcilmente para proveer servicios integrados.
Permiten la interoperabilidad entre plataformas de distintos

fabricantes por medio de protocolos estndar y abiertos. Las
especificaciones son gestionadas por una organizacin abierta, la W3C,
por tanto no hay secretismos por intereses particulares de fabricantes
concretos y se garantiza la plena interoperabilidad entre aplicaciones.
19
7.1.1 Ventajas de los servicios web
Aportan interoperabilidad entre aplicaciones de software

independientemente de sus propiedades o de las plataformas sobre las
que se instalen.
Los servicios Web fomentan los estndares y protocolos basados

en texto, que hacen ms fcil acceder a su contenido y entender su
funcionamiento.
Permiten que servicios y software de diferentes compaas

ubicadas en diferentes lugares geogrficos puedan ser combinados
fcilmente para proveer servicios integrados.
7.1.2 Inconvenientes de los servicios Web
Para realizar transacciones no pueden compararse en su grado

de desarrollo con los estndares abiertos de computacin distribuida
como CORBA (Common Object Request Broker Architecture).
Su rendimiento es bajo si se compara con otros modelos de

computacin distribuida, tales como RMI (Remote Method Invocation),
CORBA o DCOM (Distributed Component Object Model). Es uno de los
inconvenientes derivados de adoptar un formato basado en texto. Y es
que entre los objetivos de XML no se encuentra la concisin ni la eficacia
de procesamiento.
Al apoyarse en HTTP, pueden esquivar medidas de seguridad

basadas en firewall cuyas reglas tratan de bloquear o auditar la
comunicacin entre programas a ambos lados de la barrera
20
7.1.3 Razones para crear servicios Web
La principal razn para usar servicios Web es que se pueden

utilizar con HTTP sobre TCP (Transmission Control Protocol) en el
puerto 80. Dado que las organizaciones protegen sus redes mediante
firewalls -que filtran y bloquean gran parte del trfico de Internet-, cierran
casi todos los puertos TCP salvo el 80, que es, precisamente, el que
usan los navegadores.
Los servicios Web utilizan este puerto, por la simple razn de que
no resultan bloqueados. Es importante sealar que los servicios web se
pueden utilizar sobre cualquier protocolo, sin embargo, TCP es el ms
comn.
Otra razn es que, antes de que existiera SOAP, no haba buenas

interfaces para acceder a las funcionalidades de otros ordenadores en
red. Las que haba eran ad hoc y poco conocidas, tales como EDI
(Electronic Data Interchange), RPC (Remote Procedure Call), u otras
APIs.
Una tercera razn por la que los servicios Web son muy prcticos
es que pueden aportar gran independencia entre la aplicacin que usa el
servicio Web y el propio servicio. De esta forma, los cambios a lo largo
del tiempo en uno no deben afectar al otro. Esta flexibilidad ser cada
vez ms importante, dado que la tendencia a construir grandes
aplicaciones a partir de componentes distribuidos ms pequeos es
cada da ms utilizada.
21
7.2. PHP
PHP es un lenguaje de programacin de uso general de cdigo

del lado del servidor originalmente diseado para el desarrollo web de
contenido dinmico. Fue uno de los primeros lenguajes de programacin
del lado del servidor que se podan incorporar directamente en el
documento HTML en lugar de llamar a un archivo externo que procese
los datos. El cdigo es interpretado por un servidor web con un mdulo
de procesador de PHP que genera la pgina web resultante. PHP ha
evolucionado por lo que ahora incluye tambin una interfaz de lnea de
comandos que puede ser usada en aplicaciones grficas
independientes. Puede ser usado en la mayora de los servidores web al
igual que en casi todos los sistemas operativos y plataformas sin ningn
costo.
PHP se considera uno de los lenguajes ms flexibles, potentes y

de alto rendimiento conocidos hasta el da de hoy, lo que ha atrado el
inters de mltiples sitios con gran demanda de trfico, como Facebook,
para optar por el mismo como tecnologa de servidor.
Fue creado originalmente por Rasmus Lerdorf en 1995.

Actualmente el lenguaje sigue siendo desarrollado con nuevas funciones
por el grupo PHP. Este lenguaje forma parte del software libre publicado
bajo la licencia PHP, que es incompatible con la Licencia Pblica
General de GNU debido a las restricciones del uso del trmino PHP.
22
7.2.1. Caractersticas de PHP
Orientado al desarrollo de aplicaciones web dinmicas con acceso

a informacin almacenada en una base de datos.
Es considerado un lenguaje fcil de aprender, ya que en su

desarrollo se simplificaron distintas especificaciones, como es el caso de
la definicin de las variables primitivas, ejemplo que se hace evidente en
el uso de php arrays.
El cdigo fuente escrito en PHP es invisible al navegador web y al

cliente, ya que es el servidor el que se encarga de ejecutar el cdigo y
enviar su resultado HTML al navegador.
Capacidad de conexin con la mayora de los motores de base de

datos que se utilizan en la actualidad, destaca su conectividad con
MySQL y PostgreSQL.
Capacidad de expandir su potencial utilizando mdulos (llamados

ext's o extensiones).
Posee una amplia documentacin en su sitio web oficial, entre la

cual se destaca que todas las funciones del sistema estn explicadas y
ejemplificadas en un nico archivo de ayuda.
Es libre, por lo que se presenta como una alternativa de fcil

acceso para todos.
Permite aplicar tcnicas de programacin orientada a objetos.
23
No requiere definicin de tipos de variables aunque sus variables
se pueden evaluar tambin por el tipo que estn manejando en tiempo
de ejecucin.
Tiene manejo de excepciones (desde PHP5).
Si bien PHP no obliga a quien lo usa a seguir una determinada

metodologa a la hora de programar, aun hacindolo, el programador
puede aplicar en su trabajo cualquier tcnica de programacin o de
desarrollo que le permita escribir cdigo ordenado, estructurado y
manejable. Un ejemplo de esto son los desarrollos que en PHP se han
hecho del patrn de diseo Modelo Vista Controlador (MVC), que
permiten separar el tratamiento y acceso a los datos, la lgica de control
y la interfaz de usuario en tres componentes independientes.
Debido a su flexibilidad ha tenido una gran acogida como lenguaje

base para las aplicaciones WEB de manejo de contenido, y es su uso
principal.
7.2.2. Inconvenientes
Como es un lenguaje que se interpreta en ejecucin, para

ciertos usos puede resultar un inconveniente que el cdigo fuente no
pueda ser ocultado. La ofuscacin es una tcnica que puede dificultar la
lectura del cdigo pero no necesariamente impide que el cdigo sea
examinado.
Debido a que es un lenguaje interpretado, un script en PHP

suele funcionar considerablemente ms lento que su equivalente en un
lenguaje de bajo nivel, sin embargo este inconveniente se puede
minimizar con tcnicas de cach tanto en archivos como en memoria.
24
En las versiones previas a la 7, las variables no son tipificadas,
lo cual dificulta a los diferentes IDEs ofrecer asistencias para el tipificado
del cdigo, aunque esto no es realmente un inconveniente del lenguaje
en s. Esto es solventado por algunos IDEs aadiendo un comentario
con el tipo a la declaracin de la variable.
7.3. HTML
HTML, sigla en ingls de HyperText Markup Language (lenguaje

de marcas de hipertexto), hace referencia al lenguaje de marcado para
la elaboracin de pginas web. Es un estndar que sirve de referencia
del software que conecta con la elaboracin de pginas web en sus
diferentes versiones, define una estructura bsica y un cdigo
(denominado cdigo HTML) para la definicin de contenido de una
pgina web, como texto, imgenes, videos, juegos, entre otros. Es un
estndar a cargo del World Wide Web Consortium (W3C) o Consorcio
WWW, organizacin dedicada a la estandarizacin de casi todas las
tecnologas ligadas a la web, sobre todo en lo referente a su escritura e
interpretacin. Se considera el lenguaje web ms importante siendo su
invencin crucial en la aparicin, desarrollo y expansin de la World
Wide Web (WWW). Es el estndar que se ha impuesto en la
visualizacin de pginas web y es el que todos los navegadores actuales
han adoptado.
25
El lenguaje HTML basa su filosofa de desarrollo en la
diferenciacin. Para aadir un elemento externo a la pgina (imagen,
vdeo, script, entre otros.), este no se incrusta directamente en el cdigo
de la pgina, sino que se hace una referencia a la ubicacin de dicho
elemento mediante texto. De este modo, la pgina web contiene
solamente texto mientras que recae en el navegador web (interpretador
del cdigo) la tarea de unir todos los elementos y visualizar la pgina
final. Al ser un estndar, HTML busca ser un lenguaje que permita que
cualquier pgina web escrita en una determinada versin, pueda ser
interpretada de la misma forma (estndar) por cualquier navegador web
actualizado.
26
Sin embargo, a lo largo de sus diferentes versiones, se han
incorporado y suprimido diversas caractersticas, con el fin de hacerlo
ms eficiente y facilitar el desarrollo de pginas web compatibles con
distintos navegadores y plataformas (PC de escritorio, porttiles,
telfonos inteligentes, tabletas, vipers etc. No obstante, para interpretar
correctamente una nueva versin de HTML, los desarrolladores de
navegadores web deben incorporar estos cambios y el usuario debe ser
capaz de usar la nueva versin del navegador con los cambios
incorporados. Normalmente los cambios son aplicados mediante
parches de actualizacin automtica (Firefox, Chrome) u ofreciendo una
nueva versin del navegador con todos los cambios incorporados, en un
sitio web de descarga oficial (Internet Explorer). Por lo que un navegador
desactualizado no ser capaz de interpretar correctamente una pgina
web escrita en una versin de HTML superior a la que pueda interpretar,
lo que obliga muchas veces a los desarrolladores a aplicar tcnicas y
cambios que permitan corregir problemas de visualizacin e incluso de
interpretacin de cdigo HTML. As mismo, las pginas escritas en una
versin anterior de HTML deberan ser actualizadas o reescritas, lo que
no siempre se cumple. Es por ello que ciertos navegadores todava
mantienen la capacidad de interpretar pginas web de versiones HTML
anteriores. Por estas razones, todava existen diferencias entre distintos
navegadores y versiones al interpretar una misma pgina web.
27
7.3.1. Elementos
Los elementos son la estructura bsica de HTML. Los elementos

tienen dos propiedades bsicas: atributos y contenido. Cada atributo y
contenido tiene ciertas restricciones para que se considere vlido al
documento HTML. Un elemento generalmente tiene una etiqueta de
inicio (por ejemplo, <nombre-de-elemento>) y una etiqueta de cierre (por
ejemplo, </nombre-de-elemento>). Los atributos del elemento estn
contenidos en la etiqueta de inicio y el contenido est ubicado entre las
dos etiquetas (por ejemplo, <nombre-de-elemento
atributo="valor">Contenido</nombre-de-elemento>). Algunos elementos,
tales como <br>, no tienen contenido ni llevan una etiqueta de cierre.
Debajo se listan varios tipos de elementos de marcado usados en HTML.
El marcado estructural describe el propsito del texto. Por

ejemplo, <h2>Golf</h2> establece Golf como un encabezamiento de
segundo nivel, el cual se mostrara en un navegador de una manera
similar al ttulo Marcado HTML al principio de esta seccin. El
marcado estructural no define cmo se ver el elemento, pero la mayora
de los navegadores web han estandarizado el formato de los elementos.
Puede aplicarse un formato especfico al texto por medio de hojas de
estilo en cascada.
El marcado presentacional describe la apariencia del texto, sin

importar su funcin. Por ejemplo, <b>negrita</b> indica que los
navegadores web visuales deben mostrar el texto en negrita, pero no
indica qu deben hacer los navegadores web que muestran el contenido
de otra manera (por ejemplo, los que leen el texto en voz alta).
28
En el caso de <b>negrita</b> e <i>itlica</i>, existen elementos
que se ven de la misma manera pero tienen una naturaleza ms
semntica: <strong>nfasis fuerte</strong> y <em>nfasis</em>. Es
fcil ver cmo un lector de pantalla debera interpretar estos dos
elementos. Sin embargo, son equivalentes a sus correspondientes
elementos presentacionales: un lector de pantalla no debera decir ms
fuerte el nombre de un libro, aunque el nombre resalte en itlicas en una
pantalla. La mayora del marcado presentacional ha sido desechada con
HTML 4.0, en favor de hojas de estilo en cascada.
El marcado hipertextual se utiliza para enlazar partes del

documento con otros documentos o con otras partes del mismo
documento. Para crear un enlace es necesario utilizar la etiqueta de
ancla <a> junto con el atributo href, que establecer la direccin URL a
la que apunta el enlace. Por ejemplo, un enlace que muestre el texto de
la direccin y vaya hacia nuestra Wikipedia podra ser de la forma <a
href=http://www.wikipedia.org>http://www.wikipedia.org</a>. Tambin
se pueden crear enlaces sobre otros objetos, tales como imgenes <a
href=enlace><img src=imagen /></a>.
29
7.3.2. Cdigos HTML bsicos
<html>: define el inicio del documento HTML, le indica al

navegador que lo que viene a continuacin debe ser interpretado como
cdigo HTML. Esto es as de facto, ya que en teora lo que define el tipo
de documento es el DOCTYPE, que significa la palabra justo tras
DOCTYPE el tag de raz.
<script>: incrusta un script en una web, o llama a uno mediante

src="url del script". Se recomienda incluir el tipo MIME en el atributo
type, en el caso de JavaScript text/javascript.
<head>: define la cabecera del documento HTML; esta

cabecera suele contener informacin sobre el documento que no se
muestra directamente al usuario como, por ejemplo, el ttulo de la
ventana del navegador. Dentro de la cabecera <head> es posible
encontrar:
<title>: define el ttulo de la pgina. Por lo general, el ttulo

aparece en la barra de ttulo encima de la ventana.
<link>: para vincular el sitio a hojas de estilo o iconos. Por

ejemplo:<link rel="stylesheet" href="/style.css" type="text/css">.
<style>: para colocar el estilo interno de la pgina; ya sea

usando CSS u otros lenguajes similares. No es necesario colocarlo si se
va a vincular a un archivo externo usando la etiqueta <link>.
<meta>: para metadatos como la autora o la licencia, incluso

para indicar parmetros http (mediante http-equiv="") cuando no se
pueden modificar por no estar disponible la configuracin o por
dificultades con server-side scripting.
30
<body>: define el contenido principal o cuerpo del documento.
Esta es la parte del documento html que se muestra en el navegador;
dentro de esta etiqueta pueden definirse propiedades comunes a toda la
pgina, como color de fondo y mrgenes. Dentro del cuerpo <body> es
posible encontrar numerosas etiquetas. A continuacin se indican
algunas a modo de ejemplo:
<h1> a <h6>: encabezados o ttulos del documento con

diferente relevancia.
<table>: define una tabla.
<tr>: fila de una tabla.
<td>: celda de una tabla (debe estar dentro de una fila).
<div>: divisin de la pgina. Se recomienda, junto con css,

en vez de <table> cuando se desea alinear contenido.
<img>: imagen. Requiere del atributo src, que indica la ruta

en la que se encuentra la imagen. Por ejemplo: <img
src="./imgenes/mifoto.jpg" />. Es conveniente, por accesibilidad, poner
un atributo alt="texto alternativo".
<li><ol><ul>: etiquetas para listas.
<b>: texto en negrita (etiqueta desaprobada. Se recomienda

usar la etiqueta <strong>).
<i>: texto en cursiva (etiqueta desaprobada. Se recomienda

usar la etiqueta <em>).
<s>: texto tachado (etiqueta desaprobada. Se recomienda

usar la etiqueta <del>).
31
<u>: Antes texto subrayado. A partir de HTML 5 define
porciones de texto diferenciadas o destacadas del resto, para indicar
correcciones por ejemplo (etiqueta desaprobada en HTML 4.01 y
redefinida en HTML 5).15 16
La mayora de etiquetas deben cerrarse como se abren, pero con

una barra (/) tal como se muestra en los siguientes ejemplos:
<table><tr><td>Contenido de una celda</td></tr></table>.
<script>Cdigo de un script integrado en la pgina</script>
7.3.3. Entidades HTML
Los caracteres especiales como signo de puntuacin, letras con

tilde o diresis o smbolos de escritura del lenguaje se deben convertir
en entidad HTML para mostrarse en un navegador. La siguiente es una
lista de caracteres espaoles y su correspondiente entidad HTML:
Carcter Entidad HTML Carcter Entidad HTML

á Á
é É
í Í
ó Ó
ú Ú
ü Ü
ñ Ñ
¡ ¿
32
7.4. MY SQL
MySQL es un sistema de gestin de bases de datos relacional

desarrollado bajo licencia dual GPL/Licencia comercial por Oracle
Corporation y est considerada como la base datos open source ms
popular del mundo, y una de las ms populares en general junto a
Oracle y Microsoft SQL Server, sobre todo para entornos de desarrollo
web.
MySQL fue inicialmente desarrollado por MySQL AB (empresa

fundada por David Axmark, Allan Larsson y Michael Widenius). MySQL
A.B. fue adquirida por Sun Microsystems en 2008, y sta a su vez fue
comprada por Oracle Corporation en 2010, la cual ya era duea desde
2005 de Innobase Oy, empresa finlandesa desarrolladora del motor
InnoDB para MySQL.
33
Al contrario de proyectos como Apache, donde el software es
desarrollado por una comunidad pblica y los derechos de autor del
cdigo estn en poder del autor individual, MySQL es patrocinado por
una empresa privada, que posee el copyright de la mayor parte del
cdigo. Esto es lo que posibilita el esquema de doble licenciamiento
anteriormente mencionado. La base de datos se distribuye en varias
versiones, una Community, distribuida bajo la Licencia pblica general
de GNU, versin 2, y varias versiones Enterprise, para aquellas
empresas que quieran incorporarlo en productos privativos. Las
versiones Enterprise incluyen productos o servicios addicionales tales
como herramientas de monitorizacin y soporte oficial. En 2009 se cre
un fork denominado MariaDB por algunos desarrolladores (incluido
algunos desarrolladores originales de MySQL) descontentos con el
modelo de desarrollo y el hecho de que una misma empresa controle a
la vez los productos MySQL y Oracle Database.
Est desarrollado en su mayor parte en ANSI C y C++ .

Tradicionalmente se considera uno de los cuatro componentes de la pila
de desarrollo LAMP y WAMP.
MySQL es usado por muchos sitios web grandes y populares,

como Wikipedia, Google (aunque no para bsquedas), Facebook,
Twitter, Flickr, y YouTube.
34
MySQL se ejecuta en prcticamente todas las plataformas,
incluyendo Linux, UNIX y Windows. A pesar de que se puede utilizar en
una amplia gama de aplicaciones, MySQL se asocia ms con las
aplicaciones basadas en la web y la publicacin en lnea y es un
componente importante de una pila empresarial de cdigo abierto
llamado LAMP. LAMP es una plataforma de desarrollo web que utiliza
Linux como sistema operativo, Apache como servidor web, MySQL como
sistema de gestin de base de datos relacional y PHP como lenguaje de
programacin orientado a objetos (a veces, Perl o Python se utiliza en
lugar de PHP).
7.4.1. Caractersticas MySQL
Inicialmente, MySQL careca de elementos considerados

esenciales en las bases de datos relacionales, tales como integridad
referencial y transacciones. A pesar de ello, atrajo a los desarrolladores
de pginas web con contenido dinmico, justamente por su simplicidad.
Poco a poco los elementos de los que careca MySQL estn

siendo incorporados tanto por desarrollos internos, como por
desarrolladores de software libre. Entre las caractersticas disponibles en
las ltimas versiones se puede destacar:
Amplio subconjunto del lenguaje SQL. Algunas extensiones son

incluidas igualmente.
Disponibilidad en gran cantidad de plataformas y sistemas.
Posibilidad de seleccin de mecanismos de almacenamiento

que ofrecen diferentes velocidades de operacin, soporte fsico,
capacidad, distribucin geogrfica, transacciones...
Transacciones y claves forneas.
35
Conectividad segura.
Replicacin.
Bsqueda e indexacin de campos de texto.
MySQL es un sistema de administracin de bases de datos. Una

base de datos es una coleccin estructurada de tablas que contienen
datos. Esta puede ser desde una simple lista de compras a una galera
de pinturas o el vasto volumen de informacin en una red corporativa.
Para agregar, acceder a y procesar datos guardados en un computador,
usted necesita un administrador como MySQL Server. Dado que los
computadores son muy buenos manejando grandes cantidades de
informacin, los administradores de bases de datos juegan un papel
central en computacin, como aplicaciones independientes o como parte
de otras aplicaciones.
MySQL es un sistema de administracin relacional de bases de

datos. Una base de datos relacional archiva datos en tablas separadas
en vez de colocar todos los datos en un gran archivo. Esto permite
velocidad y flexibilidad. Las tablas estn conectadas por relaciones
definidas que hacen posible combinar datos de diferentes tablas sobre
pedido.
MySQL es software de fuente abierta. Fuente abierta significa que

es posible para cualquier persona usarlo y modificarlo. Cualquier
persona puede bajar el cdigo fuente de MySQL y usarlo sin pagar.
Cualquier interesado puede estudiar el cdigo fuente y ajustarlo a sus
necesidades. MySQL usa el GPL (GNU General Public License) para
definir qu puede hacer y qu no puede hacer con el software en
diferentes situaciones. Si usted no se ajusta al GPL o requiere introducir
cdigo MySQL en aplicaciones comerciales, usted puede comprar una
versin comercial licenciada.
36
7.5. PHONEGAP
PhoneGap es un framework para el desarrollo de aplicaciones

mviles producido por Nitobi, y comprado posteriormente por Adobe
Systems.3 4 Principalmente, PhoneGap permite a los programadores
desarrollar aplicaciones para dispositivos mviles utilizando
herramientas genricas tales como JavaScript, HTML5 y CSS3. Las
aplicaciones resultantes son hbridas, es decir que no son realmente
aplicaciones nativas al dispositivo (ya que el renderizado se realiza
mediante vistas web y no con interfaces grficas especficas de cada
sistema), pero no se tratan tampoco de aplicaciones web (teniendo en
cuenta que son aplicaciones que son empaquetadas para poder ser
desplegadas en el dispositivo incluso trabajando con el API del sistema
nativo).
En la tercera versin de PhoneGap se incorpora el uso de una

interfaz de comandos a travs de consola, una nueva arquitectura de
complementos descentralizados y la posibilidad de utilizar un cdigo web
unificado para crear mltiples proyectos.
PhoneGap maneja API que permiten tener acceso a elementos

como el acelermetro, la cmara, los contactos en el dispositivo, la red,
el almacenamiento, las notificaciones, etc. Estas API se conectan al
sistema operativo usando el cdigo nativo del sistema husped a travs
de una Interfaz de funciones forneas en Javascript.
PhoneGap permite el desarrollo ya sea ejecutando las

aplicaciones en nuestro navegador web, sin tener que utilizar un
simulador dedicado a esta tarea, y brinda la posibilidad de soportar
funciones sobre frameworks como Sencha Touch o JQuery Mobile.
37
PhoneGap es una distribucin de Apache Cordova.5 La aplicacin
se llam en un principio "PhoneGap", y posteriormente "Apache
Callback". Ambos sistemas tienen funciones casi idnticas, la diferencia
principal entre Apache Cordova y Phonegap es que el segundo tiene
acceso a servicios de compilacin en la nube proporcionados por Adobe
Creative Cloud.
Apache Cordova es un software de cdigo abierto y tanto este

como PhoneGap pueden ser utilizados libremente en cualquier
aplicacin sin necesidad de atribucin o licencias de ningn tipo.
7.6. JQUERY MOBILE
JQueryMobile es un Framework javaScript para el desarrollo

rpido y fcil de sitios webs optimizados para telfonos mviles. Con
este framework, aceleramos la velocidad de desarrollo de aplicaciones,
encapsulando muchas tareas comunes ue se realizan cuando usamos el
lenguaje JavaScript. Agrega una capa ms a JQuery e intenta suplir
algunas necesidades que los programadores de dispositivos mviles
padecen.
En el pasado, un desarrollador tena que programar segn para

qu dispositivo concreto, lo que alargaba los tiempos de desarrollo y
mantenimiento de los sitios webs. Ahora con JQueryMobile, evitamos
conocer la lgica especfica de cada dispositivo y nos centramos en la
programacin para un solo fin, el navegador de un telfono mvil.
38
JQueryMobile, es un framework bastante jven, desde el 13 de
Agosto de 2010, aunque promete bastante como framework de
desarrollo para web para mviles.
7.6.1. Caractersticas de JQueryMobile
Themes personalizados: El framework permite el uso de themes

ya creados y da la posibilidad de crear nuevos themes y trabajar con
ellos.
Tamao reducido: Toda la librera comprimida pesa menos de

12K.
Facilidad de uso: Destaca la facilidad para el desarrollo de

interfaces de usuario de dispositivos mviles.
Mltiples plataformas: IOS, Android, Blackberry, Palm WebOS,

Symbian, Windows Mobile, etc.
Soporte HTML5: Como su nombre indica, soporta las nuevas

etiquetas HTML5.
7.6.2. Como comenzar con JQueryMobile
Para comenzar, como cualquier framework, tenemos que insertar

en la cabecera de nuestro html unos ficheros:
JS de JQuery (base) jquery-1.5.1.min.js

JS de JQuery Mobile jquery.mobile-1.0a3.min.js
Hoja de estilos (CSS) de Jquery Mobile jquery.mobile-
1.0a3.css
7.6.3. Estructura de las pginas
39
Con JQueryMobile, hay que destacar un cambio en referencia al
desarrollo web. En el desarrollo normal de pginas webs, asociamos a
cada contenido en una pgina distinta, pero en este framework no es as
y se usa todo en la misma pgina. Para diferenciar entre pginas
distintas, se usa el atributo data-*.
De esta forma podemos tener dentro del mismo fichero, varias

pginas y lo que conseguimos es ms rapidez a la carga de la web.
Un ejemplo de una estructura bsica podra ser:
<!DOCTYPE html>
<html>
<head>
<title>JQueryMobile: Introduccin al desarrollo web para
mviles</title>
<script src=jquery-1.5.1.min.js></script>
<script src=jquery.mobile-1.0a3.min.js></script>
<link rel=stylesheet href=jquery.mobile-1.0a3.min.css />
</head>
<body>
<div data-role=page>
<div data-role=header>
<h1>Mi empresa</h1>
</div>
<div data-role=content>
<p>Contenido</p>
</div>
<div data-role=footer>
<h4>Copyright</h4>
</div>
</div>
</body>
</html>
Como podemos ver, disponemos de una pgina y dentro diferenciamos entre el

header, el content y el footer.
40
7.6.4. Enlaces internos y sitio con varias pginas
Tal y como hemos visto en el punto anterior, podemos tener varias

pginas por lo que el cdigo quedara as:
< !DOCTYPE html>
<html>
<head>
<title>JQueryMobile: Introduccin al desarrollo web para
mviles</title>
<script src=jquery-1.5.1.min.js></script>
<script src=jquery.mobile-1.0a3.min.js></script>
<link rel=stylesheet href=jquery.mobile-1.0a3.min.css />
</head>
<body>
<div data-role=page id=principal>
<h1>Mi empresa</h1>
</div>
<p>Contenido</p>
<p><a href=#principal>Inicio</a></p>
<p><a href=#productos>Productos</a></p>
<p><a href=#contacto>Contacto</a></p>
</div>
<h4>Copyright</h4>
</div>
</div>
<div data-role=page id=productos>
<h1>Mi empresa</h1>
</div>
<p>Contenido</p>
</div>
<h4>Copyright</h4>
</div>
</div>
<div data-role=page id=contacto>
<h1>Mi empresa</h1>
</div>
41
<p>Formulario de contacto</p>
</div>
<h4>Copyright</h4>
</div>
</div>
</body>
</html>
42
En este segundo ejemplo ya tenemos pginas para poder
navegar en la aplicacin. Como vemos, es una pgina sencilla de hacer
y el resultado es bastante bueno. Una cosa a destacar es que cuando
hacemos un enlace a una pagina de nuestro propio sitio, el mismo
framework lo reconoce y aade el botn de volver atrs sin tener que
disearlo.
7.6.5. Conclusin
Viendo este tipo de frameworks y lo que agilizan el trabajo de

desarrollo, es preferible usar un framework para adaptar nuestra pgina
web a un dispositivo mvil. JQueryMobile, con el poco tiempo que tiene
de desarrollo, es uno de los frameworks que ms se estn usando por
su facilidad de desarrollo y su gran resultado.
7.7. JSON (JavaScript Object Notation)
JSON (JavaScript Object Notation) es un formato para el

intercambios de datos, bsicamente JSON describe los datos con una
sintaxis dedicada que se usa para identificar y gestionar los datos. JSON
naci como una alternativa a XML, el fcil uso en javascript ha
generado un gran numero de seguidores de esta alternativa. Una de las
mayores ventajas que tiene el uso de JSON es que puede ser ledo por
cualquier lenguaje de programacin. Por lo tanto, puede ser usado
para el intercambio de informacin entre distintas tecnologas.
Veamos un sencillo ejemplo de JSON:
Imaginemos que tenemos una frutera y que queremos obtener el

nombre y la cantidad de fruta y verdura que tenemos. En un principio
vamos a suponer que tenemos lo siguiente:
Fruta:
43
10 manzanas
20 Peras
30 Naranjas
Verduras
80 lechugas
15 tomates
50 pepinos
Para empezar, nos tenemos que familiarizar con la sintaxis de

Json:
7.7.1. JSON Nombre/Par de Valores
Para asignar a un nombre un valor debemos usar los dos puntos

: este separador es el equivalente al igual (=) de cualquier lenguaje.
"Nombre" : "Geeky Theory"
1 "Nombre" : "Geeky Theory"
44
7.7.2. Valores Json
Los tipos de valores que podemos encontrar en Json son los

siguientes:
Un nmero (entero o float)

Un string (entre comillas simples)
Un booleano (true o false)
Un array (entre corchetes [] )
Un objeto (entre llaves {})
Null
7.7.3. Objetos JSON
Los objetos JSON se identifican entre llaves, un objeto puede ser

en nuestro caso una fruta o una verdura.
{ "NombreFruta":"Manzana" , "C
1 { "NombreFruta":"Manzana" , "Cantidad":20 }
45
7.7.4. Arrays JSON
En un Json puedes incluir arrays, para ellos el contenido del array

debe ir entre corchetes []:
{
"Frutas": [
{ "NombreFruta":"Manzana" , "c
{ "NombreFruta":"Pera" , "cantid
Una vez explicado el funcionamiento de la sintaxis JSON, vamos

a aplicar nuestro ejemplo de la frutera.
{"Fruteria":
[
{"Fruta":
[
1 {"Fruteria":
2 [
3 {"Fruta":
4 [
5 {"Nombre":"Manzana","Cantidad":10},
6 {"Nombre":"Pera","Cantidad":20},
7 {"Nombre":"Naranja","Cantidad":30}
8 ]
9 },
10 {"Verdura":
11 [
46
12 {"Nombre":"Lechuga","Cantidad":80},
13 {"Nombre":"Tomate","Cantidad":15},
14 {"Nombre":"Pepino","Cantidad":50}
15 ]
16 }
17 ]
18 }
Como podemos observar, hemos creado un objeto llamado

frutera y, dentro de ese objeto hemos almacenado un array de dos
elementos. El primer elemento del array contiene un objeto llamado
fruta y el segundo elemento del array contiene otro objeto llamado
verdura. Estos objetos a su vez contienen un array cuyo contenido es
el nombre y la cantidad de cada fruta o verdura.
Imaginemos que nos gustara saber la cantidad de manzanas que

tenemos. El path de este array sera el siguiente:
Path: json['Fruteria'][0]['Fruta'][0]
1 Path: json['Fruteria'][0]['Fruta'][0]['Cantidad']
47
Observamos que la cantidad de manzanas se almacena dentro
del primer elemento del array que contiene el objeto Frutera, y a su vez
dentro del primer elemento del array que contiene el objeto Fruta.
Todo esto parece un poco confuso, pero una vez que se domina
veremos que tenemos ante nosotros una gran herramienta de
desarrollo.
Existen herramientas online que ayudan a visualizar mejor un

JSON. Una de las mejores herramientas que he visto es la pgina JSON
Viewer Si introducimos nuestro ejemplo observamos lo siguiente:
48
7.8. WAMPSERVER
WampServer es un entorno de desarrollo web para Windows con

el que podrs crear aplicaciones web con Apache, PHP y bases de datos
MySQL database. Tambin incluye PHPMyAdmin y SQLiteManager para
manejar tus bases de datos.
7.8.1. Caractersticas
Provee a los desarrolladores con los cuatro elementos necesarios

para un servidor web: un Sistema Operativo (Windows), un manejador
de base de datos (MySQL), un software para servidor web (Apache) y un
software de programacin script Web (PHP (generalmente), Python o
PERL), debiendo su nombre a dichas herramientas. Lo mejor de todo es
que WAMP5 es completamente gratuito. WAMP incluye, adems de las
ltimas versiones de Apache, PHP y MySQL, versiones anteriores de las
mismas, para el caso de que se quiera testear en un entorno de
desarrollo particular.
7.8.2. Utilidad
El uso de WAMP permite servir pginas HTML a Internet, adems

de poder gestionar datos en ellas, al mismo tiempo WAMP, proporciona
lenguajes de programacin para desarrollar aplicaciones Web.
7.8.3. Herramientas para el diseo y desarrollo de

paginas web
1. Del lado del servidor:
Windows, como sistema operativo;

Apache, como servidor web;
49
MySQL, como gestor de bases de datos;
PHP (generalmente), Perl, o Python, como lenguajes de
programacin.
2.Del lado del Cliente :

Navegador de Internet
7.8.4. Funcionalidades de WampServer
WampServer tiene funcionalidades que lo hacen muy completo y

fcil de usar. Con un click izquierdo sobre el icono de WampServer,
usted ser capaz de:
Gestionar sus servicios de Apache y MySQL,

Cambiar de lnea / fuera de lnea (dar acceso a todos o
slo local)
Instalar y cambiar de Apache, MySQL y PHP emisiones
Gestin de la configuracin de sus servidores
Acceder a sus registros
Acceder a sus archivos de configuracin
Crear alias
Con un clic derecho:
WampServer cambiar el idioma del men

Acceder a la pgina principal.
50
VIII. METODOLOGIA DE LA
INVESTIGACIN
51
8.1. TIPOS DE INVESTIGACIN
Investigacin bibliogrfica
El proceso de bsqueda de informacin en documentos para determinar cul

es el conocimiento existente en un rea particular.
8.2. METODO DE INVESTIGACIN
Analtico sinttico se utiliz este mtodo para proceder a analizar y

sintetizar los procesos necesarios para el desarrollo de nuestra pequea
aplicacin dentro de los Lenguajes de programacin HTML,PHP.
Fuentes Bibliogrficas
Libros
Revistas
Artculos en internet
8.3. MATERIALES Y EQUIPOS.
Librera y papelera (Cuaderno, Lpiz, Borrador, Sacapuntas,

Resaltador, Esferos, Hojas A4)
Computadoras
Laptops
Impresora
Softwares: PhoneGap, Json, NetBeans, MySQL
52
IX. RESULTADOS
53
9.1. CREACIN DE LA BASE DE DATOS: NOTAS EN MY
SQL
9.1.1.Creacin de la Tabla tbmatriculas
Descripcin: Contiene la informacin de la matrcula del estudiante como es:

ID del estudiante, la Carrera, el Semestre, el Paralelo a escoger
-- phpMyAdmin SQL Dump

-- version 4.1.14
-- http://www.phpmyadmin.net
--
-- Servidor: 127.0.0.1
-- Tiempo de generacin: 18-09-2016 a las 02:23:33
-- Versin del servidor: 5.6.17
-- Versin de PHP: 5.5.12
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";

SET time_zone = "+00:00";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;

/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;
-- Base de datos: `notas`

--
-- --------------------------------------------------------
--
-- Estructura de tabla para la tabla `tbmatricula`
CREATE TABLE IF NOT EXISTS `tbmatricula` (

ÌD` int(11) NOT NULL AUTO_INCREMENT,
ÌD_Alumno` int(11) NOT NULL,
`Periodo_Academico` varchar(7) COLLATE utf8_spanish2_ci NOT NULL,
ÌD_Carrera` int(11) NOT NULL,
`Semestre` int(11) NOT NULL,
`Paralelo` varchar(4) COLLATE utf8_spanish2_ci NOT NULL,
PRIMARY KEY (ÌD`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_spanish2_ci
AUTO_INCREMENT=5 ;
-- Volcado de datos para la tabla `tbmatricula`

--
INSERT INTO `tbmatricula` (ÌD`, ÌD_Alumno`, `Periodo_Academico`,

ÌD_Carrera`, `Semestre`, `Paralelo`) VALUES
(1, 2, '2016-20', 1, 1, 'X'),
(2, 2, '2017-20', 2, 2, 'X'),
(3, 3, '2016-20', 3, 3, 'W'),
(4, 4, '2016-20', 4, 4, 'W');
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
54
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
9.1.2.Creacin de la Tabla tbalumnos
Descripcin: Contiene la informacin de los alumnos como es la cedula para

filtrar la informacin y los nombres.

-- version 4.1.14
--
-- Servidor: 127.0.0.1


--
--
-- --------------------------------------------------------
--
-- Estructura de tabla para la tabla `tbalumnos`
--
CREATE TABLE IF NOT EXISTS `tbalumnos` (

ÌD_Alumnos` int(11) NOT NULL AUTO_INCREMENT,
`Cedula` varchar(10) COLLATE utf8_spanish2_ci NOT NULL,
`Nombres_Alumnos` varchar(50) COLLATE utf8_spanish2_ci NOT NULL,
PRIMARY KEY (ÌD_Alumnos`)
AUTO_INCREMENT=5 ;
--
-- Volcado de datos para la tabla `tbalumnos`
--
INSERT INTO `tbalumnos` (ÌD_Alumnos`, `Cedula`, `Nombres_Alumnos`)

VALUES
(1, '0908589081', 'PASTUA GUANOTUA JORGE SANTIAGO'),
(2, '0981203817', 'TANDAZO SORNOZA LINO FABIÁN'),
(3, '1717425057', 'MENA MORALES VERONICA HERMELINDA'),
(4, '0507430407', 'OSCAR BLADIMIR PASTUA GUANOTUA');
55
9.1.3.Creacin de la Tabla tbcarrera
Descripcin: Contiene la informacin de las carreras que ofrece una facultad

selecta.

-- version 4.1.14
--
-- Servidor: 127.0.0.1


--
--
-- --------------------------------------------------------
--
-- Estructura de tabla para la tabla `tbcarrera`
--
CREATE TABLE IF NOT EXISTS `tbcarrera` (

ÌD_Carrera` int(11) NOT NULL AUTO_INCREMENT,
`Nombre_Carrera` varchar(50) COLLATE utf8_spanish2_ci NOT NULL,
`Facultad` varchar(5) COLLATE utf8_spanish2_ci NOT NULL,
PRIMARY KEY (ÌD_Carrera`)
AUTO_INCREMENT=5 ;
--
-- Volcado de datos para la tabla `tbcarrera`
--
INSERT INTO `tbcarrera` (ÌD_Carrera`, `Nombre_Carrera`, `Facultad`)

VALUES
(1, 'SISTEMAS', 'UED'),
(2, 'INGENIERA COMERCIAL ', 'UED'),
(3, 'TELEMTICA ', 'PRESE'),
56
(4, 'AGRONOMA', 'PRESE');

9.1.4. Creacin de la Tabla tbmaterias
Descripcin: Contiene la lista de las materias que ofrece una carrera selecta.

-- version 4.1.14
--
-- Servidor: 127.0.0.1


--
--
-- --------------------------------------------------------
--
-- Estructura de tabla para la tabla `tbmaterias`
--
CREATE TABLE IF NOT EXISTS `tbmaterias` (

ÌD_Materia` int(11) NOT NULL AUTO_INCREMENT,
`Nombre_Materia` varchar(50) COLLATE utf8_spanish2_ci NOT NULL,
ÌD_Carrera` int(11) NOT NULL,
PRIMARY KEY (ÌD_Materia`)
AUTO_INCREMENT=5 ;
--
-- Volcado de datos para la tabla `tbmaterias`
--
INSERT INTO `tbmaterias` (ÌD_Materia`, `Nombre_Materia`,

ÌD_Carrera`) VALUES
(1, 'ELECTRNICA DIGITAL', 1),
(2, 'INGLES', 2),
(3, 'INTRODUCCIN A LA PROGRAMACIN', 3),
(4, 'DESARROLLO DE SOFTWARE', 4);
57
9.1.5.Creacin de la Tabla tbnotas
Descripcin: Contiene el registro almacenado de las notas de cada estudiante

filtrndose la informacin por un Primary Key .

-- version 4.1.14
--
-- Servidor: 127.0.0.1


--
-- --------------------------------------------------------
-- Estructura de tabla para la tabla `tbnotas`

--
CREATE TABLE IF NOT EXISTS `tbnotas` (

ÌD_Notas` int(11) NOT NULL AUTO_INCREMENT,
ÌD_Materia` int(11) NOT NULL,
ÌD_Matricula` int(11) NOT NULL,
`C1` int(4) NOT NULL,
`C2` int(4) NOT NULL,
ÈXAMEN_FINAL` int(4) NOT NULL,
`SUPLETORIO` int(4) NOT NULL,
PRIMARY KEY (ÌD_Notas`)
AUTO_INCREMENT=5 ;
--
-- Volcado de datos para la tabla `tbnotas`
--
INSERT INTO `tbnotas` (ÌD_Notas`, ÌD_Materia`, ÌD_Matricula`, `C1`,

`C2`, ÈXAMEN_FINAL`, `SUPLETORIO`) VALUES
58
(1, 1, 1, 5, 10, 10, 0),
(2, 2, 2, 7, 7, 7, 0),
(3, 3, 3, 7, 3, 3, 0),
(4, 4, 4, 8, 9, 9, 0);

9.2. CODIGO DE PROGRAMACION
9.2.1.CODIGO INDEX
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html";
charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />

<meta name="viewport" content="width=device-width,
height=device-height, user-scalable=no, initial-scale=1,
maximum-scale=1, minimum-scale=1, target-densitydpi=device-
dpi" />
<link href="css/themes/2/bookit.min.css" rel="stylesheet" />


<link href="css/themes/2/jquery.mobile.icons.min.css"
rel="stylesheet" />
<link href="lib/jqm/1.4.5/jquery.mobile.structure-
1.4.5.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/app.css" />
<title>Sicau</title>
</head>
<body>
<div data-role="page" id="page-signin">

<div data-role="header" data-theme="a" data-
position="fixed">
<a href="#page-index" data-icon="home" data-
iconpos="notext" data-transition="slide" data-
direction="reverse">jajaja</a>
59
<h1>@SICAU</h1>
</div>
<div role="main" class="ui-content">
<h6>Por favor identifquese para acceder al sistema!
</h6>
<script src="librerias/jquery-
1.10.2.min.js"></script>
<script>
$(document).ready(function(){
$('#btnLogin').click(function(){
var usu = $("#Usuario").val();

var pass = $("#Clave").val();
$.ajax({
type: "GET",
url: "consultas/Login.php",
data: "Usuario="+usu+"&Clave="+pass,
success: function(json){
if (json==1){
document.location.href="/Jorge/index.php?
cedula='"+usu+"'#notas";
}else{
$.mobile.changePage('#pageError', 'pop', true, true);
}
}
});
});
});
</script>
<div id="ctn-err" class="bi-invisible"></div>
<div data-role="fieldcontain" class="ui-hide-
label">
<label for="txt-user-address">USUARIO </label>
<input type="text" id="Usuario"
placeholder="USUARIO">
</div>
<div data-role="fieldcontain" class="ui-hide-
label">
<label for="txt-user-address">CLAVE </label>
<input type="password" id="Clave"
placeholder="CLAVE">
</div>
<input type="button" value="INGRESAR"

id="btnLogin">



</div>
</div>
</div>

<section id="pageError" data-role="dialog">
<header data-role="header">
<h1>Error</h1>
</header>
<article data-role="content">
<p>Usuario o contrasea no valida</p>
<a href="#" data-role="button" data-
rel="back">Aceptar</a>
</article>
</section>


<div data-role="page" id="Home">

<div data-role="header">
<h1>@SICAU</h1>
<div data-role="navbar">
<ul>
<li><a href="#Home" class="ui-btn-active ui-btn
ui-btn-inline ui-corner-all ui-shadow" data-icon="home">Acerca
de</a></li>
<li><a href="#noticias" data-
icon="eye">Noticias</a></li>
<li><a href="#notas" data-icon="search">Notas -
Internte</a></li>
<li><a href="#page-signin" data-icon="power"
>Salir</a></li>
</ul>
</div>
</div>

<div data-role="main" class="ui-content">
<div data-role="collapsible" data-
collapsed="false">
<h1> VISIN 2020</h1>
<p>La Universidad Tcnica Estatal de Quevedo
ocupa
los primeros lugares entre las instituciones
de
61
Educacin Superior ecuatorianas por su
calidad acadmica,
investigativa y de servicios que contribuyen
al Buen Vivir.
</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h1> MISIN</h1>
<p>
Formar profesionales y acadmicos con visin
cientfica
y humanista capaces de desarrollar
investigaciones, crear
tecnologas, mantener y difundir nuestros
saberes y culturas ancestrales,
para la construccin de soluciones a los
problemas de la regin y el pas.
</p>
</div>
<a href="#page-signin" data-transition="slide" data-

icon="back" class="ui-btn ui-icon-back ui-btn-icon-left" >
Regresar </a>
</div>
</div>
<div data-role="page" id="noticias">

<h1>Noticias - Sicau</h1>
<ul>
<li><a href="#Home" data-icon="home">Acerca
de</a></li>
<li><a href="#noticias" data-icon="eye"
class="ui-btn-active ui-btn ui-btn-inline ui-corner-all ui-
shadow">Noticias</a></li>
<li><a href="#notas" data-
icon="search">Notas</a></li>
>Salir</a></li>
</ul>
</div>
</div>
<div data-role="main" class="ui-content">

<h5></h5>
<div data-role="collapsible" data-inset="true">
<h4>Nueva fecha para el inicio de clases en
la UTEQ..</h4>
<p id="detalle_noticia">
62
Las clases para los estudiantes de la
modalidad semipresencial iniciarn el 7 de mayo, mientras que
para quienes desarrollan sus actividades acadmicas en la
modalidad presencial
las actividades iniciarn a partir del 9
de mayo del presente ao.
</p>
</div>
<div data-role="collapsible" data-inset="true">
<h4>UTEQ particip en el encuentro
Universidad-Empresa organizado por Senescyt...</h4>
<p id="detalle_noticia2">
La Secretara de Educacin Superior,
Ciencia, Tecnologa e Innovacin desarroll en Quevedo el
encuentro Universidad-Empresa con la temtica Articulacin
academia sector productivo en el que se formaron mesas de
dilogo con el objetivo de identificar las problemticas del
sector empresarial,
causas, consecuencias y posibles
soluciones en el sector productivo agrcola.
</p>
</div>
</div>
<a href="#Home" data-transition="slide" data-

icon="back" class="ui-btn ui-icon-back ui-btn-icon-left" >
Regresar </a>

<div data-role="footer">
</div>
</div>
<?php require ('consultas/Notas.php');
require ('consultas/Nombre.php');
$cedu=$_REQUEST['cedula']; ?>

<div data-role="page" id="notas">
<h1>Notas - Sicau</h1>
<p><?php nombre($cedu);?></p>
<ul>
<li><a href="#Home" data-
icon="home">Acerca</a></li>
<li><a href="#noticias" data-
icon="eye">Noticias</a></li>
<li><a href="#notas" data-icon="search"
class="ui-btn-active ui-btn ui-btn-inline ui-corner-all ui-
shadow" data-icon="home">Notas</a></li>
>Salir</a></li>
63
</ul>
</div>
</div>
<?php
for ($a=1; $a<=10; $a++){
echo " <div data-role='collapsible-set'
data-theme='a' data-content-theme='d'>";
echo " <div data-role='collapsible' data-
collapsed='true'>";
echo " <h3>SEMESTRE $a</h3>";
echo " <table data-role='table' class='ui-
responsive'>";
echo " <thead>";
echo " <tr>";
echo " <th>MATERIA</th>";
echo " <th>NOTA 1</th>";
echo " <th>NOTA 2</th>";
echo " <th>EXAMEN</th>";
echo " <th>NOTA F.</th>";
echo " <th>SUPLETORIO</th>";
echo " <th>ESTADO</th>";
echo " </tr></thead><tbody><tr>";
if ($cedu!="")
{
notas($cedu,$a);
}
echo "</tr></tbody></table></div>";
}
?>
<a href="index.php" data-transition="slide" data-

direction="reverse"> Regresar </a>

<div data-role="footer">
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>

<script src="lib/fastclick/fastclick.min.js"></script>
<script src="lib/jquery/2.1.1/jquery-2.1.1.min.js"></script>
<script src="js/api-messages.js"></script>
<script src="js/settings.js"></script>
<script src="js/signup-controller.js"></script>
<script src="js/session.js"></script>
64
<script src="js/signin-controller.js"></script>
<script src="js/bookings-controller.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script src="lib/jqm/1.4.5/jquery.mobile-
1.4.5.min.js"></script>
</body>
</html>
9.2.2.CODIGO CONFIG
<?php
/* Base de datos de configuracin de las variables */
$DB_HOST="localhost";
$DB_USER="root";
$DB_PASSWORD="";
$DB_DATABASE="notas";
?>
9.2.3.CODIGO LOGIN
<?php include 'config.php';
$user = $_REQUEST['Usuario'];
$pass = $_REQUEST['Clave'];
$link =NEW PDO ("mysql:host=$DB_HOST; dbname=$DB_DATABASE",

$DB_USER,$DB_PASSWORD);
$res=$link->query("SELECT * FROM tbalumnos WHERE

Cedula='{$user}' AND Cedula='{$pass}'");
$datos=array();
foreach ($res as $row){
$datos[]=$row;
}
if (count($datos)>0){
echo true;
// echo json_encode($datos);
}else{
echo false;
echo "error de conexion";
}
//para cerrar conexion
$link=null;
65
?>
9.2.4.CODIGO NOMBRE
<?php
function nombre($cedula){
$link = @mysql_connect("localhost", "root","")
or die ("Error al conectar a la base de datos.");
@mysql_select_db("notas", $link)
$query = "select * from tbalumnos where Cedula=$cedula";
$result = mysql_query($query);
while($row = mysql_fetch_array($result))
{
echo $row["Nombres_Alumnos"];
}
mysql_free_result($result);
mysql_close($link);
}
66
9.2.5.CODIGO NOTAS
<?php
function notas($cedula, $semestre){
$link = @mysql_connect("localhost", "root","")
@mysql_select_db("notas", $link)
$query = "select * from tbalumnos A, tbmatricula M , tbmaterias
MT, tbnotas N where M.ID_Alumno=A.ID_Alumnos and
M.ID_Carrera=MT.ID_Carrera and N.ID_Materia=MT.ID_Materia and
N.ID_Matricula=M.ID and A.Cedula=$cedula and
M.Semestre=$semestre";
$result = mysql_query($query);
while($row = mysql_fetch_array($result))
{
echo "<td>". $row["Nombre_Materia"] . "</td>";
echo "<td>". $row["C1"] . "</td>";
echo "<td>". $row["C2"] . "</td>";
echo "<td>". $row["EXAMEN_FINAL"] . "</td>";
$total=($row["C1"]+ $row["C2"]+ $row["EXAMEN_FINAL"])/'3';
echo "<td>". $preg=round($total,'2') . "</td>";
echo "<td>". $row["SUPLETORIO"] . "</td>";
if ($preg <'7' && $row["SUPLETORIO"] <'7'){
echo "<td> REPROBADO</td><tr>";
}else
{
echo "<td>APROBADO</td><tr>";
}
}
mysql_free_result($result);
mysql_close($link);
}
67
?>
1.-Ingreso a la Aplicacin Movil Notas SICAU.
68
2.- Entorno de la Aplicacin.
69
3.- Entorno de la Aplicacin.
70
4.- Resultado de las Notas.
71
72
X. CONCLUSIONES
73
Se realizaron pruebas del sistema informtico, para comprobar que
cumpla con las necesidades y requerimientos sealados en la etapa de
anlisis y funcione correctamente.
La Aplicacin WEB de la UTEQ fue implementada con el fin de disminuir

los tiempos de cada tarea aumentando la productividad gracias al
sistema y con un manejo de la informacin correcto.
Se enlazo el sistema informtico a una Base de Datos en MySQL para el

mejor manejo de la informacin almacenada.
74
XI. RECOMENDACIONES
75
Recomendamos revisar el texto para obtener una idea clara de los
conceptos fundamentales del lenguaje de programacin HTML, PHP.
Se recomienda que se examine y se analice a fondo nuestra aplicacin

para tener clara idea de la logstica y codificacin que se requiere.
Es recomendable llevar un control de informacin ms seguro utilizando

un archivo externo creado en una base de datos detallada en un
software de preferencia o como en nuestro proyecto con MySQL.
76
XII. REFERENCIA BIBLIOGRAFICA
77
https://es.wikipedia.org/wiki/Servicio_web
http://culturacion.com/que-es-y-para-que-sirve-un-web-service/
https://geekytheory.com/json-i-que-es-y-para-que-sirve-json/
https://librosweb.es/libro/php_3/
https://es.wikipedia.org/wiki/HTML
https://dcrazed.com/free-responsive-html5-css3-templates/
https://html5up.net/
78
XIII. ANEXOS
79
INICIO DE LA APP ENTORNO DE LA APP
R
ENTORNO SECCION: NOTICIAS ESULTADO DE NUESTRA APP
80

Desarrollo de La Aplicacion Movil

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Desarrollo de La Aplicacion Movil

Загружено:

Авторское право:

Доступные форматы

UNIVERSIDAD TECNICA ESTATAL DE QUEVEDO

UNIDAD DE ESTUDIOS A DISTANCIAS

PROYECTO INTEGRADOR DE SABERES

DESARROLLO DE LA APLICACION MOVL INSTITUCIONAL DE LA UTEQ

QUEVEDO LOS ROS - ECUADOR

3.2. FORMULACION DEL PROBLEMA..................................................9

3.3. SISTEMATIZACIN DEL PROBLEMA............................................9

5.1. OBJETIVO GENERAL..........................................................................13

5.2. OBJETIVOS ESPECIFICOS.................................................................13

VII. FUNDAMENTACIN TEORICA...............................................................16

7.1. WEB SERVICES...................................................................................17

7.1.1 Ventajas de los servicios web.........................................................19

7.1.2 Inconvenientes de los servicios Web.............................................19

7.1.3 Razones para crear servicios Web.................................................20

7.2.1. Caractersticas de PHP.................................................................22

7.3.2. Cdigos HTML bsicos.....................................................................28

7.3.3. Entidades HTML................................................................................30

7.4.1. Caractersticas MySQL.....................................................................33

7.6. JQUERY MOBILE.................................................................................36

7.6.1. Caractersticas de JQueryMobile......................................................37

7.6.2. Como comenzar con JQueryMobile..................................................37

7.6.4. Enlaces internos y sitio con varias pginas......................................38

7.7. JSON (JavaScript Object Notation).......................................................40

7.7.1. JSON Nombre/Par de Valores..........................................................41

7.7.2. Valores Json......................................................................................42

7.7.3. Objetos JSON....................................................................................42

7.7.4. Arrays JSON......................................................................................43

7.8.3. Herramientas para el diseo y desarrollo de paginas web...............46

7.8.4. Funcionalidades de WampServer.....................................................47

VIII. METODOLOGIA DE LA INVESTIGACIN...............................................48

8.1. TIPOS DE INVESTIGACIN................................................................49

8.2. METODO DE INVESTIGACIN...........................................................49

8.3. MATERIALES Y EQUIPOS...................................................................49

9.1. CREACIN DE LA BASE DE DATOS: NOTAS EN MY SQL...............51

9.1.1.Creacin de la Tabla tbmatriculas....................................................51

9.1.2.Creacin de la Tabla tbalumnos......................................................52

9.1.3.Creacin de la Tabla tbcarrera.........................................................53

9.1.4. Creacin de la Tabla tbmaterias.....................................................54

9.1.5.Creacin de la Tabla tbnotas...........................................................55

9.2. CODIGO DE PROGRAMACION...........................................................56

XII. REFERENCIA BIBLIOGRAFICA..............................................................73

El presente proyecto se ha elaborado con la finalidad de crear la aplicacin

La programacin WEB es un modo de trabajo, que nos permite centrarnos en

La aplicacin est desarrollada para la gran demanda de telfono con

Como estudiantes del Sptimo Semestre de Ingeniera en Sistemas paralelo

Por lo cual hemos desarrollado parte de la aplicacin para complementar la

Para ello buscamos e investigamos de entre muchos lenguajes de

En el trabajo buscamos despertar el inters del lector, mediante este contexto

El presente proyecto tiene como objetivo desarrollar una Aplicacin para

Existen diversos tipos de lenguajes de programacin que nos brindan una

3.2. FORMULACION DEL PROBLEMA

CUL SERIA EL MEJOR LENGUAJE DE PROGRAMACION PARA LA

QUE APLICACION PODRIAMOS CREAR?

DE QUE MANERA AYUDARIA UN SISTEMA GESTOR DE BASE DE

3.3. SISTEMATIZACIN DEL PROBLEMA

Qu lenguaje de programacin WEB Utilizara para la Creacin de una

El lenguaje de programacin es acto para resolver nuestro problema?

La programacin WEB en la Actualidad es cada vez ms compleja al lmite de

Y que ms que seguir la Programacin WEB, que es la onda en la actualidad,

Desarrollar parte de la Aplicacin WEB de la Universidad Tcnica

5.2. OBJETIVOS ESPECIFICOS

Investigar, las ventajas que ofrece el Lenguaje de Programacin HTML y

Un servicio web (en ingls, Web Service o Web services) es una

Ilustracin 1.- Servidor WEB