Programación web: 2014

miércoles, 19 de noviembre de 2014

Semana del 10 - 14 de Noviembre

Durante esta semana añadimos al prototipo la acción de que guarde en la base de datos lo ingresado en los formularios. Al realizar esta modificación nos dimos cuenta que teníamos ciertas cosas extras en los formularios que estaba diferente en la base de datos, las cuales modificamos para que cuadre el prototipo con la misma base de datos en donde se almacenará lo ingresado en este.

domingo, 16 de noviembre de 2014

Video del avance del prototipo

En el siguiente link encontrarán el video del avance de la semana del 3 al 7 de Noviembre.

https://www.youtube.com/watch?v=aSMoQQkvM-I&list=UU_Er3LDb2JQFvD2TZW2neiQ

domingo, 9 de noviembre de 2014

Semana del 3 - 7 de Noviembre

Durante esta semana realizamos dos modificaciones a nuestro prototipo.

1.- La primera modificación fue que le agregamos la conexión a la base de datos y ya podemos acceder a una cuenta de un estudiante que este registrado en nuestra base de datos.

2.- También le agregamos lo que es la parte del historial. Esta parte muestra las solicitudes que ha realizado el estudiante que entró a su cuenta.

Al igual el profesor nos dio unos ejemplos de como conectar los formularios a nuestra base de datos. y quedó de la siguiente manera el ejemplo que nos dio.

domingo, 2 de noviembre de 2014

Video de header.php y footer.php

A continuación les dejo el link del video de los avances de esta semana.

https://www.youtube.com/watch?v=0o5T3b_10SQ

Semana del 27 al 31 de Octubre

Durante esta semana comenzamos con la unidad 5. De la cual nos tocó exponer el tema 5.2 Elementos de programación (Arreglos y Funciones). A continuación les dejo los links de los ejemplos que expusimos en la clase.

Ejemplos de Array Ejemplos de Funciones

También entregamos avances de nuestro prototipo, lo que le agregamos fueron el header.php y el footer.php, estos dos archivos contienen los encabezados y los pies de página de todo el prototipo, esto es para que no haya código repetido en el prototipo y así nadamas mandar a llamarlo con la palabra include.

miércoles, 29 de octubre de 2014

Video de Validación en el prototipo

A continuación el link para ver el video de las validaciones que le asignamos a nuestro prototipo.

https://www.youtube.com/watch?v=0NpexikbxsE

Semana del 20 - 24 de Octubre

Durante esta semana realizamos las exposiciones de la unidad 4. Al equipo Puma nos asignaron el tema 4.3 Manipulación de objetos (Validación de formularios). A continuación les dejaremos unas fotos de nuestra exposición, al igual que los ejemplos que utilizamos para explicar nuestro tema.

Validación de campo de texto obligatorio

<!DOCTYPE html>

<head>

//busca caracteres que no sean espacio en blanco en una cadena

function vacio(q) {

for ( i = 0; i < q.length; i++ ) {

if ( q.charAt(i) != " " ) {

return true

}

return false

}

//valida que el campo no este vacio y no tenga solo espacios en blanco

function valida(F) {

if( vacio(F.campo.value) == false ) {

alert("Introduzca un cadena de texto.")

return false

} else {

alert("OK")

//cambiar la linea siguiente por return true para que ejecute la accion del formulario

return false

}

</script>

</head>

<body>

<h1 class="text-center"><strong>Validación texto obligatorio</strong></h1>

</div>

<label class="col-lg-2 control-label">Introduzca cadena de texto:</label>

</div>

<button type="submit" name="validar" value="validar" class="btn btn-primary">Validar</button>

</div>

</form>

</div>

</body>

</html>

Validación de correo electrónico

<!DOCTYPE html>

<head>

function mostrar_informacion(txt){

//expresion regular

var b=/^[^@\s]+@[^@\.\s]+(\.[^@\.\s]+)+$/

//comentar la siguiente linea si no se desea que aparezca el alert()

alert("Email " + (b.test(txt)?"":"no ") + "válido.")

//devuelve verdadero si validacion OK, y falso en caso contrario

return b.test(txt)

}

/* function validacion() {

valor = document.getElementById("campo").value;

if( !(/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)/.test(valor)) ) {

return false;

}

}*/

</script>

</head>

<body>

<h1 class="text-center"><strong>Validación de correo electrónico</strong></h1>

</div>

<label class="col-lg-2 control-label">Introduzca correo electronico:</label>

</div>

<button type="submit" name="enviar" value="validar" class="btn btn-primary">Validar</button>

</div>

</form>

</div>

</body>

</html>

Validación del select

<!DOCTYPE html>

<head>

function valida_envia(){

//valido el interés

if (document.fvalida.interes.selectedIndex==0){

alert("Debe seleccionar un interés.")

document.fvalida.interes.focus()

return 0;

}

//el formulario se envia

alert("Muchas gracias por enviar el formulario");

document.fvalida.submit();

}

</script>

</head>

<body>

<h1 class="text-center"><strong>Validación del select</strong></h1>

</div>

<label class="col-lg-2 control-label" for="selectbasic">Interés</label>

<option value="Elegir">Elegir

<option value="Comercial">Deportes

<option value="Clientes">Música

<option value="Proveedores">Manualidades

</select>

</div>

<button type="submit" name="enviar" value="Enviar" class="btn btn-primary" onclick="valida_envia()">Enviar</button>

</div>

</form>

</div>

</body>

</html>

Validación del número telefónico

<!DOCTYPE html>

<head>

function validacion3(formulario) {

var er_tel = /^\d{3}-\d{3}-\d{4}$/ ///^\d{10}$/ ej.9999999999

///^\d{3}-\d{3}-\d{4}$/ ej.900-900-9000

///^$\d{3}$\s\d{7}$/ ej.(900) 9009000

//comprueba campo telefono

if(!er_tel.test(formulario.tel.value)) {

alert('Introduzca un telefono valido')

return false

}

alert('El telefono es correcto.')

return false //cambiar por return true para ejecutar la accion del formulario

}

</script>

</head>

<body>

<h1 class="text-center"><strong>Validación de numero telefonico</strong></h1>

</div>

<label class="col-lg-2 control-label">Introduzca número telefónico:</label>

</div>

<button type="submit" name="boton_envio" value="validar" class="btn btn-primary" >Validar</button>

</div>

</form>

</div>

</body>

</html>

Validar longitud

<!DOCTYPE html>

<head>

function validacion3(formulario) {

var er_control = /^\d{8}$/ ///No. de control 8 digitos

//comprueba campo telefono

if(!er_control.test(formulario.control.value)) {

alert('Introduzca un número de control valido')

return false

}

alert('El número de control es correcto.')

return false //cambiar por return true para ejecutar la accion del formulario

}

</script>

</head>

<body>

<h1 class="text-center"><strong>Validación de numero de control</strong></h1>

</div>

<label class="col-lg-2 control-label">Introduzca número de control:</label>

</div>

<button type="submit" name="boton_envio" value="validar" class="btn btn-primary" >Validar</button>

</div>

</form>

</div>

</body>

</html>

domingo, 19 de octubre de 2014

Avances del diseño del prototipo

A continuación les dejo el link del video de como cambió nuestro proyecto con las modificaciones que le hicimos con la herramienta de bootstrap.

https://www.youtube.com/watch?v=1OaWBYgJERU

Semana del 13 - 17 de Octubre

Durante esta semana realizamos las exposiciones de la unidad 3. Al equipo Puma nos tocó realizar la exposición del tema 3.5. Modelo de caja. En este tema explicamos en clase con un ejemplo y código de lo que se trata el modelo de caja en la programación web, lo cual nos ayudará a entender mejor su función.

En estas imagenes nuestro compañero Jose Guadalupe nos muestra con la herramienta Dreamweaver como se muestran las cajas con cada etiqueta que se utiliza.

Nuestro compañero Javier nos muestra una imagen en donde nos explica las partes que utilizan CSS en el moodelo de caja.

Una servidora les muestra en las imágenes como se modifica el CSS para que nuestra página se muestre de la siguiente manera.

domingo, 12 de octubre de 2014

Video de la implementación de Bootstrap a nuestro prototipo

A continuación un video con los avances de nuestro prototipo. Ya utilizando la herramienta Bootstrap.

https://www.youtube.com/watch?v=0p4NRMC2r-4

Semana del 6 - 10 del Octubre

Durante esta semana realizamos ciertas modificaciones a nuestro prototipo por peticiones del maestro, al igual que avanzamos incluyendo la herramienta Bootstrap para darle un mejor diseño a nuestro proyecto.

Tambien comenzaron las exposiciones de la unidad 3 aunque nuestro equipo tendrá que exponer el lunes de la siguiente semana. Al igual que tendremos más avances en cuanto al diseño de nuestro prototipo.

Video del Prototipo

A continuación les dejo el link del video de como diseñamos nuestra página con solo utilizar lenguaje HTML puro. Al igual lo copiamos a una carpeta dentro del XAMPP para poder abrirlos desde el navegador.

https://www.youtube.com/watch?v=C_-88CztGV4

domingo, 5 de octubre de 2014

Semana del 29 de Septiembre al 3 de Octubre

Esta semana realizamos los primeros diseños de nuestros prototipos, ya conforme fuimos agregando mas cosas el profesor nos fue haciendo algunas observaciones para que mejorara nuestro diseño. Aquí les muestro algunas capturas de pantalla.

sábado, 27 de septiembre de 2014

Video de la creación de formularios

Aquí presento el video de esta semana, el cual trata sobre el tema que expusimos en esta semana, la creación de formularios. Para ver el video dar clic en el siguiente enlace.

https://www.youtube.com/watch?v=SdvUhIA9Nlw

viernes, 26 de septiembre de 2014

Semana del 22 - 26 de Septiembre

Durante esta semana entregamos avances de lo que es nuestro diseño de como pensamos que podría quedar nuestra página web de acuerdo a las tablas y a las funciones que tiene que hacer el proyecto de reunir todas las aplicaciones de solicitudes en una misma. Al igual comenzaron y terminaron las exposiciones de los temas de la unidad 2, los cuales son:

2.1.Introducción.

2.2.Representación de documentos.

2.3.Tipos de datos básicos.

2.4. Estructura global de un documento.

2.5.Elementos básicos:texto, vínculos, listas, objetos, imágenes y aplicaciones.

2.6.Estructura y disposición.

2.7.Formularios.

Donde nuestro equipo el cual es el equipo Puma le había tocado exponer el tema de Tipos de datos básicos y el profesor decidió que no expusiéramos ese tema y que nos uniéramos con el equipo Microweb y les apoyáramos con la exposición del tema Formularios. Realizamos la presentación el día viernes 26 de Septiembre y también expusimos un ejemplo de un formulario sencillo en el que el maestro le anexó una etiqueta para la fecha.

Y así concluimos las actividades de esta semana.

Exposición del tema 2.7 Formularios

A continuación una muestra de nuestra exposición del tema 2.7 Formularios, con la participación del equipo Microweb y Puma.

2.7. Formularios

También utilizando el software Notepad++ realizamos un ejemplo de un formulario básico al cual el maestro realizó unos anexos como lo era la etiqueta <input type="date" id="fecha" name="fecha" maxlength="8"/>

Al ejecutar el archivo html en nuestro navegador se muestra de la siguiente manera.

jueves, 25 de septiembre de 2014

2.7.Formularios

Documento que explica el tema 2.7 del temario de la materia Programación Web, el cual lleva el nombre de Formularios.

Ver documento 2.7. Formularios

domingo, 21 de septiembre de 2014

Modificación de la base de datos

Aquí les dejo un video de las modificaciones que realizamos en nuestra base de datos la semana del 17 - 19 de Septiembre en la clase de Programación Web.

Ver el video.

Semana del 17 - 19 de Septiembre

Durante esta corta semana realizamos ciertas modificaciones a nuestra base de datos al agregar las tablas nuevas de nuestro proyecto, y al haber agregado nuevas tablas también hicimos nuevas vistas que hicieran referencia a dichas tablas. Aquí les muestro unas imágenes de nuestras modificaciones.

Al igual al realizar las vistas nuevas teníamos un detalle al mostrar los datos. En las tablas que requeríamos mostrar los nombres completos de los estudiantes teníamos que hacer una modificación para que no aparecieran los datos los cuales son Nombre, Paterno y Materno en columnas separadas sino que estuvieran como si los hubiéramos ingresado en una sola columna. A continuación les mostrare como quedó esa modificación.

domingo, 14 de septiembre de 2014

Semana del 8 - 12 de Septiembre

Durante esta semana el profesor nos indicó que teníamos que realizar unas modificaciones a nuestras bases de datos ya que nos dijo que hay que hacer como proyecto una sola aplicación web en donde incluyéramos todas las aplicaciones de solicitudes que se encuentran en la página de centro de servicios del ITVH. Las cuales son las siguientes:

Respecto a ese proyecto nosotros decidimos realizar tablas individuales de acuerdo a cada una de las aplicaciones para unirlas todas con vistas y relacionarlas con las tablas que ya teníamos elaboradas.

Al igual en esta semana realizamos la evaluación teórica de la Unidad 1.

sábado, 6 de septiembre de 2014

Creación de vistas en Navicat Premium

A continuación un video acerca de la creación de las vistas con la herramienta Navicat Premium.

Vistas en Navicat Premium

Semana del 1 - 5 de Septiembre

Durante esta semana en la clase de Programación web realizamos la base de datos que nos pidió el profesor de acuerdo a las tablas que nos dio. Esta base de datos fue diseñada con la herramienta Navicat Premium que ya había mencionado en otra publicación.

También le agregamos datos a las tablas de acuerdo a como el maestro nos pidió. Este proceso fue algo laborioso ya que teníamos que estar al tanto de cada uno de los datos que requería cada tabla.

Ya con las tablas llenas de datos realizamos vistas. Las cuales consisten en relacionar las tablas unas con otras y solo seleccionar los datos que quieres que se muestren en ellas.

Al seleccionar la vista que deseas ver solo necesitas hacer doble clic y la vista se mostrará en una tabla de la siguiente forma.

viernes, 5 de septiembre de 2014

Desarrollo de aplicaciones web

Ensayo de acuerdo al tema desarrollo de aplicaciones web. Ver.

Instalación de XAMPP y Navicat Premium

A continuación les mostraremos el video en el que realizamos la instalación de las herramientas que utilizamos para la creación de nuestra base de datos, las cuales son el xampp y el Navicat Premium.

http://www.youtube.com/watch?v=knLEwW_Der4

sábado, 30 de agosto de 2014

1.3. Tecnologías para el desarrollo de aplicaciones web

Para visualizar las diapositivas dar clic aquí.