Sergio Dominguez Lopez Documentacion
13
1 PROGRAMACION WEB PRACTICAS Ingeniería en sistemas computacionales Presenta: Domínguez López sergio IXTAPALUCA, ESTADO DE MEXICO, JUNIO DE 2015 Practica 1: Página Web TECNOLÓGICO DE ESTUDIOS SUPERIORES DE IXTAPALUCA ORGANISMO PÚBLICO DESCENTRALIZADO DEL ESTADO DE MÉXICO
-
Upload
luis-bueno -
Category
Documents
-
view
220 -
download
3
description
paginas web es un libro escrito con un propósito definido: guiarpaso por paso a maestros y estudiantes sobre cómo realizar investigaciones sociales.Se trata de un libro que puede usarse en cursos básicos, intermedios y avanzados enmaterias y seminarios de investigación o metodología. Contiene aplicaciones y ejemplosque lo hacen útil para cualquier ciencia social.Además es un texto completo que trata tanto el enfoque experimental como el noexperimental, el cuantitativo y el cualitativo. Abarca desde la concepción de la idea deinvestigación y el desarrollo del marco teórico hasta la formulación de hipótesis, laelección del diseño de investigación, la elaboración del instrumento de recolección delos datos y del reporte de investigación. Incluye un capítulo sobre el análisis estadístico yotro sobre muestreo.El libro se encuentra diseñado y escrito de manera didáctica. Al inicio de cadacapítulo se enuncian los objetivos de aprendizaje y un cuadro sobre el paso del procesode investigación al cual corresponde el capítulo; y al final se destacan los conceptosbásicos revisados, un resumen, ejercicios, bibliografía sugerida y un ejemplo. Losapartados se titulan a manera de preguntas y se incluyen múltiples ejemplos y diagramaspara facilitar la comprensión de conceptos.A los maestros el libro les sirve como una guía completa para sus cursos deinvestigación, encontrando en un solo texto todos los temas referentes al proceso deinvestigación. A los alumnos el libro les es útil para realizar trabajos de investigación ytesis, además que puede aclararles sus dudas sobre diferentes aspectos de la metodologíade la investigación. Es una obra sencilla de leer y actualizada, pues está pensada deacuerdo con la manera en que hoy día se realiza la investigación, utilizandocomputadoras.Psicólogos, comunicólogos, sociólogos, administradores, educadores, pedagogos,antropólogos y estudiantes de carreras sociales encontrarán en este libro un texto quefacilita el aprendizaje de cómo efectuar una investigación. Cabe mencionar que seincluyen ejemplos aplicables a diferentes ciencias sociales y administrativas.
Transcript of Sergio Dominguez Lopez Documentacion
1
PROGRAMACION WEB
PRACTICAS
Ingeniería en sistemas computacionales
Presenta:
Domínguez López sergio
IXTAPALUCA, ESTADO DE MEXICO, JUNIO DE 2015
Practica 1: Página Web
TECNOLÓGICO DE ESTUDIOS SUPERIORES DE IXTAPALUCA
ORGANISMO PÚBLICO DESCENTRALIZADO DEL ESTADO DE MÉXICO
2
El objetivo de esta actividad es practicar con los principales elementos de HTML
para elaborar la página web del alumno. En concreto, se trabajará con las etiquetas
relacionadas con la estructuración del documento (secciones, listas...), las tablas y los
enlaces. Para practicar diferentes ejemplos.
La página Web deberá incluir una fotografía del alumno y estará dividida en al menos
3 secciones, tratando cada sección de un aspecto de la información que se quiere
presentar (hobbies, formación, contactos...). Asimismo se estudiara cómo enlazar la
información del documento con documentos relacionados (v.g expediente académico,
sitios web específicos...) ya sean enlaces a URLs externas, a documentos locales
adicionales al currículum, o a secciones de una misma página. Se deberá probar la
visualización del currículum en al menos dos navegadores diferentes.
Por tanto, se pide: Un archivo mipagina.html que contenga la página personal. Este
archivo deberá ser escrito con un editor de textos, sin la ayuda de herramientas de edición.
Comentarios HTML dentro del documento que justifiquen la organización, el contenido y
la presentación del mismo. Estos comentarios se situarán justo encima de la etiqueta
HTML que se desea comentar.
Un comentario HTML al principio del cuerpo del documento, que especifique los
navegadores que se han probado y las diferencias encontradas.
Podrán incluirse archivos HTML enlazados desde la página personal, en el
caso en que el acceso a dichos documentos no sea directo (v.g porque el acceso
al documento requiera autenticación), o hayan sido generados por el alumno.
Código
<!doctype html>
<html>
<head>
<title>mipagina</title>
</head>
<body>
<center>
<h1><b>Curriculum Vitae</b></h1>
<img src="DSC_0248.jpg" width="250" height="200">
</center>
<br>
<h2><b>Formacion Academica</b></h2>
<br>Escuela Preparatoria Oficial 122°
<br>Fecha de finalización: 7 de Julio de 2008
<br>•Certificado de término de los estudios medio superior.
<br>
<br>Tecnológico de Estudios Superiores de Ixtapaluca
<br>Septiembre de 2011 – Enero de 2016.
<br>Cursando actualmente el octavo semestre de la carrera de ingeniería en sistemas
computacionales.
<br>
3
Impresiones de pantalla
Practica 2: Comportamiento dinámico
El objetivo de esta actividad es practicar con los elementos más comunes del lenguaje para
implementar comportamiento dinámico básico en el documento: modificaciones al documento y
enlaces dinámicos. Para implementar esta actividad se requiere conocer los siguientes elementos
de JavaScript objetos predefinidos (Windows, Date, Array…), Objetos DOM y eventos definidos
en un objeto.
Se desea modificar la página web creada durante la Práctica 1 (“mi primera página
Web”) con las siguientes características:
Mostrará la fecha y hora actual en la esquina superior derecha.
Permitirá al usuario cambiar el color de fondo y del texto, así como el de los enlaces.
Mostrará al usuario una tabla con 3 columnas y un número cualquiera (arbitrariamente
largo) de filas, y le permitirá decidir qué columnas desea visualizar. Además, el color
de fondo de las filas se irá alternando entre gris y azul
Valorará la correcta implementación de las características deseadas.
No se considerarán aspectos de usabilidad en la evaluación, ya que esta actividad es
introductoria.
Por tanto, se pide:
Un archivo .HTML que contenga la página solicitada, incluyendo los scripts necesarios. Este
archivo deberá ser escrito con un editor de textos, sin la ayuda de herramientas de edición
4
Código <!doctype html>
<html>
<head>
<title>mipagina</title>
<div align="right"><script type="text/javascript">
function startTime(){
today=new Date();
h=today.getHours();
m=today.getMinutes();
s=today.getSeconds();
m=checkTime(m);
s=checkTime(s);
document.getElementById('reloj').innerHTML=h+":"+m+":"+s;
t=setTimeout('startTime()',500);}
function checkTime(i)
{if (i<10) {i="0" + i;}return i;}
window.onload=function(){startTime();}
</script>
<div id="reloj" style="font-size:20px;"></div>
</div>
<div style="float:right;">
<script type="text/javascript">
//<![CDATA[
var today = new Date();
var m = today.getMonth() + 1;
var mes = (m < 10) ? '0' + m : m;
document.write('Fecha: '+today.getDate(),'/' +mes,'/'+today.getYear());
//]]>
</script>
</head>
<body>
<center>
<h1><b>Curriculum Vitae</b></h1>
<img src="DSC_0248.jpg" width="250" height="200"></center>
Impresiones de pantalla
5
Practica 3: Pequeña tienda electrónica
El objetivo de esta actividad es practicar la persistencia y las sesiones mediante
ficheros y paso de parámetros entre páginas
También se programará mínimamente la lógica de una sencilla aplicación de pedidos.
Se desea realizar una interfaz web para realizar pedidos al almacén de una tienda
electrónica. La página de bienvenida solicita al usuario su nombre para identificarle a lo
largo del proceso, y lleva directamente a la página de pedidos. El script welcome.php
implementará esta página.
La página de pedidos permite al usuario seleccionar un sólo producto del catálogo, indicar
la cantidad a pedir, y añadirlo al carrito de la compra. El usuario podrá añadir tantos
productos como desee. El proceso de selección de productos del catálogo se
implementará en una página mediante el archivo pedidos.php.
Código
<!doctype html>
<head>
<title>Practica 3</title>
</head>
<BODY background="Sio.png">
<h2>Indique su pedido</h2>
<form action="Practica 3.php" method="post">
<p>Seleccione un menú:
<select name="producto">
<option value="none" selected="selected">---- Opcion --- </option>
<option value="dominos">Pizza</option>
<option value="mcdonald">Hamburgesa</option>
<option value="sopa">Maruchan</option>
</select></p>
<p>Seleccione una bebida:
<select name="bebida">
<option value="none" selected="selected">---- seleccione bebida ---</option>
<option value="cola">Cola</option>
<option value="naranja">Naranja</option>
<option value="limon">Agua de Orchatan</option>
<option value="te">Tepache</option>
</select></p>
<p>Seleccione tamaño:<br>
<input type="radio" name="size" value="L" checked>Normal<br>
<input type="radio" name="size" value="XL">Grande<br>
</p>
6
<p>Seleccione Ingrediente Extra:<br>
<input type="checkbox" name="opcionK" value="1">Ketchup<br>
<input type="checkbox" name="opcionS" value="2">Salsa Valentina</br>
</p>
<p>Indique su Direccion<br>
<textarea name="textolargo" cols=50 rows=9></textarea> </p>
<p>Indique numero telefonico:
<textarea name="textolargo" cols=20 rows=1></textarea> </p>
Impresiones de pantalla
Practica 4: un formulario con estilo
El objetivo de esta actividad es la comprensión y el manejo a nivel básico de las
hojas de estilos: su creación en archivos diferentes del documento HTML y la inclusión y
utilización dentro de dicho documento.
Es importante realizar algunos pasos del tutorial propuesto en, básicamente las secciones “CSS
Introduction”, “CSS Systax” y “CSS How To”. Para este aprendizaje básico, se creará una interfaz
Web a las siguientes directrices:
El formulario estará estructurado en siete secciones diferentes.
La primera con los datos personales del usuario.
La segunda con el número de huéspedes.
La tercera con los servicios disponibles en la habitación.
La cuarta para la elección del tipo de habitación.
La quinta con el tipo de pensión.
La sexta para comentarios o sugerencias.
7
La séptima con el correo de contacto y la casilla de aceptación de la política de privacidad.
Se valorará la simplicidad y eficiencia en la definición de los estilos, es decir, emplear el
mínimo número de reglas y que éstas contengan el menor número de declaraciones.
Por tanto, se pide:
Uno o más archivos de estilos actividad1_*.css, con los estilos, preferiblemente
agrupados según la página que los utiliza.
Crear la carpeta A1 y situar en ella los ficheros de la homepage y del formulario con
sus correspondientes estilos.
Código
<!DOCTYPE html>
<html lang="es">
<head>
<style>body {
background-color: #d0e4fe; }
h1 {
color: orange;
text-align: center;}
p {
font-family: "Times New Roman";
font-size: 20px; }
</style>
<meta charset="utf-8">
<title>Practicas 4</title>
<link rel="stylesheet" media="screen" href="styles.css" >
</head>
<body>
<h1>Datos Personales</h1>
<center>
<form class="contact_form" action="#" method="post">
<ul>
<li>
<h2>Mis Datos</h2>
</li>
<li>
<label for="name">Nombredel usuario</label>
<input type="text" placeholder="Johan Ricardo" required />
8
Impresiones de pantalla
Practica 5: Evaluación del diseño y accesibilidad de
la homepage
El objetivo de esta actividad es practicar la evaluación del diseño de páginas de
inicio (homepage), detectando los principales aciertos y errores
Se evaluará el diseño de las mismas, dando lugar a dos productos: Análisis comparativo:
este análisis compara ambas homepages entre sí, de acuerdo con los criterios de
usabilidad para la homepage propuestos en clase de teoría.
Análisis comparativo será un único archivo PDF en el que se incluirán los comentarios
pertinentes, que se referirán a ambas homepages en todo momento.
Se verifica. Para el análisis de accesibilidad, se valorará la estructuración del archivo
y la corrección, claridad y concisión de las explicaciones.
Por tanto, se pide:
Los archivos comparativa.pdf y accesibilidad.{pdf|html}.
Ejercicio
Seguridad y hosting del
dominio
Servidor IP
213.134.43.166
Hostname
ih-vm-uc3m-web-
bal.c.mad.interhost.com
2
Proveedor del hosting
Desconocido
Geolocalización (servidor)
Spain
Sin información
Framework contenidos
Sin información
Servidores DNS
saruman.uc3m.es - sun.rediris.es
Seguridad y hosting del
dominio
Servidor IP
213.134.43.166
Hostname
ih-vm-uc3m-web-
bal.c.mad.interhost.com
Proveedor del hosting
Desconocido
Geolocalización (servidor)
Spain
Sin información
Framework contenidos
Sin información
Servidores DNS
vorteX.uc3m.es -
saruman.uc3m.es
Practica 6: primera aplicación en Swing
El objetivo de esta actividad es practicar con NetBeans la realización de una
sencilla IGU de tipo WIMP.
Utilizando el entorno de programación NetBeans, crear una aplicación de
interfaz gráfica que contenga un botón de manera que, cuando el usuario pulse en
ese botón, se añadirá un nuevo botón a la ventana. Este nuevo botón tendrá un
color diferente respecto al color por defecto y su nombre será el mismo del color.
Los colores los decide la aplicación de manera aleatoria. Por ejemplo, si
pulsamos 7 veces tendremos algo parecido a:
Cualquiera de los botones generados debe ser capaz a su vez de generar un nuevo
botón, con su mismo color. Ayuda: utilizar un FlowLayout y mirar cómo genera
NetBeans el código para crear el primer Jbutton.
2
Práctica 7. Buscaminas en Java
El objetivo de esta actividad es diseñar e implementar la jerarquía de agregación de
componentes en Swing, mediante el desarrollo de una aplicación de interfaz gráfica
sencilla.
La aplicación que desarrollaremos será el Buscaminas, y para hacerlo, imitaremos
la versión de este juego que puede encontrarse en los sistemas operativos
Windows. La apariencia de esta aplicación es la siguiente: Interfaces de Usuario.
Como ayuda para empezar, puede compilarse y ejecutarse el proyecto
NetBeans que acompaña a la práctica (A1_Buscaminas_Swing.zip), que
construye un esqueleto (incompleto) de la interfaz principal del Buscaminas.
En él puede verse que sólo existe un contenedor de alto nivel, Jframe, cuyos
contenidos se organizan de acuerdo con el gestor de posición GridLayout. Los
contenidos se añaden a partir de un array bidimensional de Jbutton, previamente
creado, la existencia de este array no implica que los botones sean añadidos
automáticamente al contenedor.
La funcionalidad requerida es la siguiente:
El panel superior también contendrá un icono facial que al pulsarlo permite
comenzar una nueva partida.
Se deberán contabilizar las bombas en el entorno de una casilla marcada,
indicando dicha cantidad en el número.
Si en el entorno de una casilla marcada no hay bombas, comienza un proceso
de deshabilitación de casillas, que va delimitando concéntricamente el perímetro de
la zona donde no hay bombas.
3
Practica 8. Reloj en el Buscaminas con .NET
El objetivo de esta actividad es practicar con los temporizadores
para realizar tareas periódicas de modificación de la interfaz.
En esta actividad se trabajara con temporizadores para añadir al
programa del Buscaminas en C# de la práctica 7 el reloj que indica el
tiempo transcurrido
Se valorará la correcta implementación del temporizador para no
manipular inadecuadamente la interfaz. Asimismo se considerará
que la interfaz responda adecuadamente en presencia del reloj.
Por tanto, se pide:Una carpeta actividad18.zip conteniendo el proyecto
VS.NET
completo.
4
Práctica 9. Temas adicionales de interfaces WIMP (Window-Icon-
Menu-Pointer)
Objetivos
Los objetivos de esta clase de práctica son los siguientes:
Conocer aspectos de accesibilidad en interfaces WIMP.
Conocer la programación de interacciones de tipo "drag & drop".
Practicar con los elementos básicos de la programación gráfica.
Actividad 1. Animal, Vegetal, Mineral (C#)
El objetivo de esta actividad es practicar la programación de la
interacción “arrastrar y soltar” mediante las librerías Windows Forms de
.NET [1].
Para ello, se realizará un sencillo juego “Animal, Vegetal, Mineral”, en el
que el usuario deberá clasificar los elementos de un listado de acuerdo
si son un animal, un vegetal o un mineral, tal y como se indica en el
siguiente prototipo:
La clasificación se realizará mediante drag&drop, de forma que el
jugador deberá mover los elementos del listado de la izquierda a uno de
los listados de la derecha.
El juego permitirá mover un elemento:
Del listado izquierdo a un listado del lado derecho de cualquier listado
del lado derecho a cualquier otro listado del lado derecho de cualquier
listado del lado derecho al listado del lado izquierdo.
5
Practicas 10
Se pretende diseñar la interfaz de un Terminal de Punto de Venta (TPV)
que se instalará en los puestos de las cajeras de un gran hipermercado.
La aplicación tendrá un conjunto de productos con su precio
almacenados.
La aplicación debe permitir realizar el paso por caja de los clientes con
la mayor eficiencia posible para las cajeras. Esto implica el ir pasando
los productos por el lector de código de barras (permitiendo teclear el
código si el lector no consigue leerlo), generar el ticket de compra.
También se debe poder eliminar un producto de los ya leídos (por
ejemplo, en el caso de que al cliente no le llegue el dinero). Y se
permitirá el pago por tarjeta o en efectivo. En este último caso, la
aplicación dejará introducir el dinero entregado por el cliente, y calculará
la vuelta que debe devolver la cajera.
En la siguiente imagen se propone una posible maqueta para el TPV.
Se debe tener en cuenta que los terminales que utilizan son en escala
de grises, de resolución 640x480, y no tienen ratón, sólo teclado.
Notas para la resolución:
La lista de productos y precios puede implementarse como un array con
los valores fijados por programa.
