Practica 27

Colegio Nacional de Educación Profesional Técnica

 

Lic. "Jesus Reyes Heroles"

 

Nombre del Alumno: José Guadalupe Martínez Cruz

Módulo: Diseño y Elaboración de Páginas Web

 Grupo: INFO-604.

Práctica Nº 27: 
Consulta de registros de la base de datos empleando un criterio de selección

Propósito de la Práctica:

Realizar consultas a la base de datos empleando un criterio de selección para presentar información en las páginas web.

Introducción

En esta practica se utiliza la base de datos agenda, a la cual se le crea la misma tabla de la practica 25, a la tabla generada se le introducen datos para que después sean mostrados en una página web.
Insercción de datos

al entrar a sistema gestor de base de datos phpMyAdmin, se selecciona la base de datos agenda a la cual se crea la tabla con la consulta de la practica 25. A la tabla se le insertan 4 registros a cada campo:

El código de la consulta de inserción es:

INSERT INTO tbl_agenda(nombre, correo, tlf_fijo, tlf_movil) 
VALUES ("José Mtz","rpmypx@gmail.com","2222222222","0123456789"),
('Perla Mtz', 'perlita.cruzz@hotmail.com', '505050505', '1234567856'),
('Eliza Cruz', 'eli@hotmail.com', '83838383','7831010101'),
('Geovanny Mtz.', 'geovanny@hotmail.com',  '83999383','7831234567');

Estos son registro mostrados en el sistema gestor de Base de datos

Script de la consulta de selección

Explicación de Script
En está práctica se ocupa la base de datos agenda a la cual ya se tiene un archivo que permite la conexión con esta. Con include 'dirección y nombre del archivo.php'; se puede hacer utilizar todo que se contenga en un archivo, en este caso al archivo de conexión que las practica anterior, y se incluye de este modo <?php include '26.php';?>.
En el body de archivo se empieza a crear lo necesario para mostrar correctamente los registro de la tabla tbl_agenda.
Primero se comprueba si la conexión está establecida con la varible $bd que se declaró en la conexión, y de este modo evitar mostrar errores no deseados.
mysql_query('consulta',$variableDconexión); con esta función se hace una consulta, la cual para mostrar todos lo registros de la tabla agenda es SELECT * FROM tbl_agenda  y se coloca la variable que guarda la coneción "$con". La valores obtenidos en la consulta se guardan en $select.

Con if(@mysql_num_rows($select)>0) solo se cuentan las filas, si se tienen 0 de estás se muestra el mensaje que no hay registros. Si hay registro se muestran en una tabla,  cada fila incluye los campos necesarios para mostrar los registros, cada registro se muestra con la variable $row['campo'] esto generado al mostrar la consulta de todos los campos.
Para mostrar todos los campos es necesario hacer un ciclo, en este caso ocupe un while, el cual con la función mysql_fetch_array() que funciona introduciendo entre los parentesis la varible de la consulta, y a su vez se guarda en la variable $row. Del siguiente modo se muestran los registros
while($row=@mysql_fetch_array($select)
{"estructura en que se van mostrar los datos, tabla lista, etc."}
Antes del ciclo se imprime la primera parte de la table con los encabezados de las columnas. Después del ciclo while se imprime la parte restante de la tabla.
Al final se libera la memoria cerrando la conexión con:
mysql_close($con);
la cual borra el contenido de la variable que guarda la consulta.
Resultado 

Si no hay registros se muestra el mensaje de ello.

Si hay registros esto se muestran en una tabla.

Nota: En ambas pantalla se logra observar que dice el mensaje "Conexión con la base de datos satisfactoria." el cual es parte del archivo de la practica 26, sino hubiera una conexión correcta se mostraría el mensaje de error correspondiente.

Conclusión

En está practica se utilizó más a fondo las funciones de SQL y php para mostrar correctamente los registros introducidos en una tabla. También se utilizó el incuir un archivo de conexión generado para evitar crear una nueva conexión y variables de la misma. Se evitaron errores comprobando la conexión y contando el número de filas. Al final de una consulta se libera la memoria.

Practica 26

Colegio Nacional de Educación Profesional Técnica

 

Lic. "Jesus Reyes Heroles"

 

Nombre del Alumno: José Guadalupe Martínez Cruz

Módulo: Diseño y Elaboración de Páginas Web

 Grupo: INFO-604.

Práctica Nº 26: 
Conexión de la aplicación con el motor de bases de datos mediante sentencias SQL

Propósito de la Práctica:

Elaborar un script mediante sentencias SQL, que permita realizar la conexión a la base de datos.

Introducción

En esta practica se genera la base de datos llamada agenda. Se crea un script en php y sentecias de SQL que establezca una conexión el servidor y la base de datos agenda.
Generación de la base de datos

Se entra a primero a phpMyAdmin, se crea la base de datos agenda y yo escogí que su  cotejamiento fuera utf-8.

Script con la conexión

Explicación de Script

En declaran las variables que guardarán los datos de la conexión con el servidor y la base de datos, $pass guarda la contraseña del usuario, $user al usuario de servidor, $servidor el nombre del servidor y $nombrebase guarda el nombre de la base de datos.

se hace la conexión con mysql_connect('servidor', usuario, contraseña); genera una conexión sql con servidor, entre comillas simples se coloco la información que debe incluir, en lugar esto en el código se  muestra que se utilizan las variables qeu ya se habían declarado y asignado los datos de la conexiónla varible. La conexión se guarda en $con.
Con or die('texto a mostrar') se muestra un mensaje de error, en este caso se colocó después de mysql_connect() en el cual puede suceder si no se tienen los datos correctos con el servidor o este no está activo o encendido.
mysql_select_db('base de datos'); sirve para seleccionar una base de datos, al igual que las que las anterior regresa un valor de falso o verdadero, esto se guarda en la variable $bd que con el uso de una sentecia if se comprueba si se ha podido conecta con la base de datos o no.
Los arrobas "@" utilizados son para evitar mostrar los errores predeterminados del servidor.
Resultado 

Si no se ha podido establecer la conexión con servidor de sql.

Si por algún motivo no se puede conectar con la base de datos.

Si toda la conexión es satisfactoria.

Conclusión

En está practica se genera un archivo que nos permite tener una conexión con el servidor de base de datos, y también con "una base de datos(BD)". Se puede hacer la comprobación de la conexión con diferentes funciones o con unas simples sentencias de if permitiendo verificar en donde está el error para la corrección del mismo. Las conexiones con servidores de base de  datos son necesarias para obtener datos en cualquier momento y parte de un sitio o aplicación web.

Practica 25

Colegio Nacional de Educación Profesional Técnica

 

Lic. "Jesus Reyes Heroles"

 

Nombre del Alumno: José Guadalupe Martínez Cruz

Módulo: Diseño y Elaboración de Páginas Web

 Grupo: INFO-604.

Práctica Nº 25: 
Crea base de datos y tablas mediante sentencias SQL

Propósito de la Práctica:

Generar bases de datos y tablas mediante sentencias SQL, que almacenarán la información de una aplicación.

Introducción

En está práctica genera una consulta desde el sistema gestor de datos para crear una tabla con 4 diferentes campos mediante sentencia de SQL.
Generación de la tabla

Para generar la tabla se accede al sistemar gestor de base de datos de sql, eneste caso se ocupó phpMyAdmin para generar la tabla.

Primero se accede a la base de datos creada previamente, al acceder a la opción de crear tabla se escriben el nombre, el tipo y longitud de cada campo que la compondrán. Después se da clic en el el botón inferior para crear la tabla tbl_agenda.

Después se observa la tabla que ha sido creada, está se muestra en una tabla la cual da a conocer las opciones que se pueden hacer sobre ella y las propiedades generales de la misma.

.

Se accede a la estructura de la tabla para agregar el campo nombre como llave primaria.

Está es la estructura de la tabla en SQL para que se ejecute de modo manual y nos cree todo lo realizado anteriormente.

CREATE TABLE IF NOT EXISTS `tbl_agenda` (
  `nombre` varchar(35) NOT NULL,
  `correo` varchar(25) NOT NULL,
  `tlf_fijo` varchar(10) NOT NULL,
  `tlf_movil` varchar(10) NOT NULL,
  PRIMARY KEY (`nombre`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

La codificación por default es latin1, la cual se puede cambiar a otras como utf-8.

Conclusión

En está practica se ocupó lo conocido anteriormente en otros módulos, pero con el sistema gestor de datos en servidor web, en este caso phpMyAdmin, que trabaja mediante sentencias en SQL. Generar base de datos y tablas se pueden generar con facilidad en este tipo de gestores de base de datos y se le puede asignar diversos atributos a cada tabla o campo a utilizar.

Practica 22

Colegio Nacional de Educación Profesional Técnica

 

Lic. "Jesus Reyes Heroles"

 

Nombre del Alumno: José Guadalupe Martínez Cruz

Módulo: Diseño y Elaboración de Páginas Web

 Grupo: INFO-604.

Práctica: N° 22.

Introducción

Mediante uso de lenguaje JavaScript y HTML se genera un archivo que capture un número y calcule la raíz cuadrada y cubica de valor introducido, esto mediante el uso de funciones(function) para realizar tales acciones cuando se se sea necerio.


Código HTML

Código Java Script

Explicación del código generado

Primero se pide un número mayor a cero, se comprueba si este es un número positivo. Si es negativo se manda una alerta que diga "Error" y se escribe en el HTML el párrafo "Error, es un número menor a 0".
Si se el valor resulta ser un número o semejante se comprueba si en verdad es un número, sí no lo es se muestra el párrafo "Error, no es número o no escribió algo".
Cuando se valide el número introducido se imprime en el párrafo "Valor proporcionado 'número'. " y este se envía a las funciones cuadra y cubic, el valor se envia a estas colocando la varible en donde se guardó entre los parentesis de la función y esta recibe el valor de la misma forma:
     se envia con  cubic(n) y se recibe en function cubic(n){instrucciones de la función}

Las funciones de JavaScript que se ocupan para cacular los valores deseados son:
         math.sqrt(n) es para raíz cuadrada, se coloca la variable o valor a calcularle la raíz cuadrada.
        math.pow(n, 1/3) que es para en este caso la raíz cuadrada que es n^(1/3) , en está función se coloca el valor o la varible a la cual se le calculará tal potencia y seguido de una coma va la pontecia deseada.

los valores conseguidos se guardan en cuadrado y cubico, respectivamente, después, estos se imprimen el documento HTML con los párrafos "La raíz cuadrada es: 'resultado' " y "La raíz cubica es: 'resultado' ".

Resultado del código

Conclusión

En JiavaScript también se hace el uso de funciones haciendo el proceso más rapido, estás funciones se pueden utilizar en cualquier momento y pueden enviar y/o reciber datos que serán utilizados en el progrma que se generé. JS también incluye funciones propias para diferentes acciones, como las de Math, las cuales son funciones matemáticas que en este caso se ocuparon a pow() y sqrt().

URL de la práctica

http://dewe.mypost.skn2.com/practicas/practica22.html

Practica 21

Colegio Nacional de Educación Profesional Técnica

 

Lic. "Jesus Reyes Heroles"

 

Nombre del Alumno: José Guadalupe Martínez Cruz

Módulo: Diseño y Elaboración de Páginas Web

 Grupo: INFO-604.

Práctica: N° 21.

Introducción

En esta práctica se hace uso de la sentencia while en el lenguaje de programación JavaScript para determinar la descomposición del factorial de un número dado al cargar el documento HTML elaborado.

Código HTML

Código Java Script

Explicación del código generado

La descomposición de un factorial solo se puede hacer con un número “entero” y “positivo”, por lo que se valida el valor capturado para poder hacer las operaciones necesarias:

if(isNaN(n)==false & n%1==0 && n!="" && n>=2)

Para que el valor introducido en la ventana sea valido se comprueba si es un número, si es entero, si no es nulo y si es mayor o igual a “2”.

Si esto no se cumple manda un mensaje de

“N no es válido. Introduce un número entero mayor o igual a 2”.

Si es un número valido este después se imprime en el documento HTML seguido del signo de igual.
Se comprueba sino es “2” para poder buscar otros factores:
if(n%div!=0){div+=1;}
Div tiene un valor inicial de 2, en lo anterior si el resultado de n entre div  es diferente de 0 a div se le suma 1.
Se escribe el valor de div document.write(div); .
Se divide el número(n) con la división(div)  y el exponente(exp) adquiere el valor de 1; después se inicia el ciclo While que seguirá hasta que n sea diferente de 1.
Se comprueba si el residuo de la división de n y div es igual a 0, esto es verdadero entonces
n=n/div;   exp+=1;
Sino while(n%div!=0){div+=1;}  que es mientras el residuo de de  n entre div se diferente de 0 a div se le incrementa en uno. Seguido se muestran los valores de exp(como exponente) y div(después del signo por [ x ]), y exp adquiere un valor de 0.
document.write('^'+exp+' x '+ div); exp=0;
Al final del while principal se coloca el ultimo exponente a la descomposición del factorial:
    document.write('^'+exp+'');

Resultado

Este es el resultado del código generado, en  las imágenes se observan la captura del número, la descomposición de tal número y la última imagen el error que sucede al introducir un valor no valido.

Conclusión

En está practica se hizo uso de la sentencia while en JavaScript permite repetir indeterminadamente una parte de un programa creando un ciclo que se cierre al cumplir una condición, logrando el producto deseado. Para evitar problemas antes de entrar al while se valida el valor capturado con un if y diversas opciones o condiciones a cumplir.

URL de la práctica

http://dewe.mypost.skn2.com/practicas/practica21.html

Practica 20

Colegio Nacional de Educación Profesional Técnica

 

Lic. "Jesus Reyes Heroles"

 

Nombre del Alumno: José Guadalupe Martínez Cruz

Módulo: Diseño y Elaboración de Páginas Web

 Grupo: INFO-604.

Práctica: N° 20.

Introducción

Se crea un archivo HTML básico el cual ejecuta un archivo JavaScript en el cual se captura el valor de un número, a este se le calcula su factorial mostrando toda la operación necesaria para llegar al resultado deseado.

Código HTML

Código Java Script

Explicación del código generado

En el HTML se pone el titulo Sentencia IF, después se ejecuta el JavaScript en el cual se pide y captura un número con la función prompt(‘Texto mostrar’) y el valor introducido en este se guarda en la variable n; se compara si n es menor a 0 y si los es se manda una alerta diciendo “Error” y escribe en el HTML el párrafo “Error, es menor a 0”. Después de lo anterior se compara si se introdujo algún valor o si no se introdujo alguno, if(isNaN(n) || n ==""), y se escribe el mensaje en HTML “Error, no es numero o no escribió algo”. Si el valor introducido es valido se ejecuta la función factorial() en cual se declaran las variables necesarias para conseguir el factorial, variable f que guarda el número del número introducido y guardará el resultado de multiplicar al valor de n que adquiere un valor que es original pero con -1 (n =n -1; que se repite en le for)y mediante un ciclo for se logra esto multiplicando al f por n mientras f también adquiere el valor resultante de la multiplicación(f =n * f;). Seguido se imprime el valor de n. Al final de la función se escribe el valor de fcerrando el párrafo iniciado antes del ciclo for.

Resultado

Este el resultado del código Java Script generado:

Conclusión

En JavaScript se puede Comparar valores de diferentes variables para determinar cual es el mayor de estos y controlar que valores se van a mostrar en pantalla.

URL de la práctica

http://dewe.mypost.skn2.com/practicas/practica20.html

Practica 19

Colegio Nacional de Educación Profesional Técnica

 

Lic. "Jesus Reyes Heroles"

 

Nombre del Alumno: José Guadalupe Martínez Cruz

Módulo: Diseño y Elaboración de Páginas Web

 Grupo: INFO-604.

Práctica: N° 19.

Introducción

Se crea un archivo HTML básico el cual ejecuta un archivo JavaScript en el cual se comparan los valores de tres variables para saber cual es que tiene un número mayor mostrándolo el archivo HTML.

Código 

Código HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">>
<html xmlns="http://www.w3.org/1999/xhtml">>
<head>





</head>
<body>
	

Sentenciaif
<script  type="text/javascript" src="p19/codigo.js"></script>
		

</body>
</html>

Código Java Script

/// Practica 19
	var n1 = 15;
	var n2 = 23;
	var n3 = 9;
		document.write('<p>Los tres números a comparar son: <b>'+n1+'</b>, <b>'+n2+'</b>, <b>'+n3+'</b>,</p>');
			document.write('<p>y el mayor es el <b>');
		if(n1>n2)
			{
			if(n1>n3)
				document.write(''+n1+'');
			else
				document.write(''+n3+'');
			}
		else
			{
				if(n2>n3)
					document.write(''+n2+'');
				else
					document.write(''+n3+'');
			}
		document.write('</b></p>');
			/// Jose Guadalupe*

Explicación del código generado

En el JavaScript se declaran las variables n1, n2 y n3, con los valores15, 23 y 9 respectivamente; se escriben los siguientespárrafos: “Los tres números a comparar son: n1, n2, n3,” “y el mayor es el” El último párrafo no está completo, este se completa después de que se comparan los tres números para determinar el mayor de ellos. En las comparaciones primero ser comparan n1 y n2, si n1 es mayor que n2 este se compara con n3, si n1 es mayor se escribe en el documento el valor de n1, sino se escribe el valor de n3. Si en la primera comparación n2 resulta ser mayor este se compara con n3 y el que sea mayor se escribe en el documento HTML.

Resultado

Este el resultado del código Java Script generado:

Conclusión

En JavaScript se puede Comparar valores de diferentes variables para determinar cual es el mayor de estos y controlar que valores se van a mostrar en pantalla.

URL de la práctica

http://dewe.mypost.skn2.com/practicas/practica19.html

Practica 18

Colegio Nacional de Educación Profesional Técnica

 

Lic. "Jesus Reyes Heroles"

 

Nombre del Alumno: José Guadalupe Martínez Cruz

Módulo: Diseño y Elaboración de Páginas Web

 Grupo: INFO-604.

Práctica: N° 18.

Introducción

Se crea un programa en el cual se pidan dos números con los cuales se realizan diferentes operaciones entre estos, planteadas en la práctica. También evita la utilización de valores nulos o no numéricos.

Código 

Código HTML

<DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//ES">
<html>
<head>





</head>
<body>
Arreglos
<script  type="text/javascript" src="p18/codigo.js"></script>

</body>
</html>

Código Java Script

var x, limite;/// Variables a utilizar
var arreglo = new Array(4);/// se define el largo de arreglo
limite = arreglo.length; ///Guarada  el limite que tendra el for
arreglo = Array("Modelo", "Marca", "CC", "Motor", "Potencia")/// Se almacenan los datos de arreglo
 arreglo1 = new Array( "172", "V6","2.5","ford"  ,"cougar") ///Arreglo invertido
 arreglo2 = new Array("chevy", "chevrolet", "1.6", "V4", "160");/// Otro Arreglo
 arreglo1=arreglo1.reverse(); /// se cambia el orden  arreglo para mostrarla corectamente
///Se muestran los valores de los arreglos
 document.write('<table  cellpadding="2"><tr><th>Matriz0</th>');
for(x=0; x<=limite; x++){
 document.write('<th>'+arreglo[x]+'</th>'); };
document.write('</tr><tr><th>Matriz1</th>');
for(x=0; x<=limite; x++){
document.write('<td>'+arreglo1[x]+'</td>'); };
 document.write('</tr><tr><th>Matriz2</th>');
for(x=0; x<=limite; x++){
 document.write('<td>'+arreglo2[x]+'</td>');};
document.write('</tr></table>');

Explicación del código generado

En el código Java Script se observa que se declaran las variables x y limite, para el for y para calcular el limite del ciclo for respectivamente. Después se define la variable arreglo como un arreglo de 4, a limite se le asigna el valor de la longitud del arreglo anterior con la función length.
Posteriormente se le asignan los valores a la variable arreglo, se declaran y se les asignan valores a otras variables arreglo1y arreglo2. Seguido se cambiar el orden del contenido de la variable arreglo1 ya que a este se le asignaron alrevés, esto se logra con la función reverse().
Finalmente se escriben en documento HTML una tabla con todos los valores de los arreglos dentro de esta, esto se logra con bucles for para poder imprimir casilla por casilla de los arreglos
Todo se imprime después del titulo

Arreglos

en el archivo HTML.

Resultado

Este el resultado del código Java Script generado:

Conclusión

En esta práctica se utilizaron diversas operaciones aritméticas con el valor capturado de dos números. Además de realizar operaciones aritméticas se comparo si los valores eran números(isNaN()), concatenación de dos variable(.concat()), y la conversión de cualquier variable a entero(parseInt()); estas y otras funciones existen para poder hacer diversas acciones con los datos que se tengan y que estos sean los correctos.

URL de la práctica

http://dewe.mypost.skn2.com/practicas/practica18.html

practica 17

Colegio Nacional de Educación Profesional Técnica

 

Lic. "Jesus Reyes Heroles"

 

Nombre del Alumno: José Guadalupe Martínez Cruz

Módulo: Diseño y Elaboración de Páginas Web

 Grupo: INFO-604.

Práctica: N° 17.

Introducción

Se crea un programa en el cual se pidan dos números con los cuales se realizan diferentes operaciones entre estos, planteadas en la práctica. También evita la utilización de valores nulos o no numéricos.

Código 

Código HTML

<html>
<head>

 

 
</head>
<body>
<script  type="text/javascript" src="p17/codigo.js"></script>


</body>
</html>

Código Java Script

var n1 = prompt("Escriba un numero");
var n = prompt("Escriba otro numero");
if(isNaN(n1) || isNaN(n) || n1==" " || n==" ")
 {alert('Error');
 document.write('Error, no es número o no escribió algo

');}
else{
 var n2,resta ,suma, div, con;
 con= n1.concat(n);
 n2=parseInt(n); 
 n1=parseInt(n1);
 suma = n1+n2
 resta = n1-n2
 div = parseInt(n1/n2);
 document.write('Los números son: '+n1+' y '+n2+' 

');
 document.write('Suma: '+suma+' < br/>');
 document.write('Resta: '+resta+< br/>);
 document.write('Multiplicación: '+n1*n2+' < br />');
 document.write('División: '+n1/n2+< br/>);
 document.write('División sin decimales: '+div+<br />);
 document.write('Residuo de la división: '+n1%n2+< br/>);
 document.write('Concatenados: '+con+'  < br/>');
}
/// se colo a "br/" con espacio extra para evitar no ser mostrados.
/***/

Explicación del código generado

En esta práctica se declaran las variables n1 y n, seguido almacenan los valores que se introduzcan en la función prompt("Mensaje/Orden”);
var n1 = prompt("Escriba un numero");
var n = prompt("Escriba otro numero");
Después se verifican con la función isNaN si son números o sino no se dejo uno de ellos con un valor nulo o vacio:
if(isNaN(n1) || isNaN(n) || n1==" " || n==" ")

Si esto resulta verdadero se muestra un mensaje de alerta y se escribe el mensaje “Error, no es número o no escribió algo”.

Sino, se declaran las variables a utilizar.
La variable con toma el valor de concatenar el valor de n1 con n, con= n1.concat(n);.
Con parseInt(); se cambia a entero los valores de n1 y n, el valor de la segunda es guardado en n2. Estos posteriormente se suman, se suman y se dividen (con un parseInt para volver el resultado en entero, parseInt(n1/n2);), guardando los valores resultantes en las variables asignadas para ello.
Finalmente se muestran los valores con document.write();, en el orden de decir cuales son los números, su Suma, su Resta, Su multiplicación y división(estas operaciones se hicieron dentro del document.write();), su división sin decimales(variable div), el residuo de la división(+n1%n2+), y los números concatenados.

Resultado

Este el resultado del código Java Script generado:

Primer número

Segundo número

Operaciones con los dos números capturados

Si no son validos los valores introducidos

Conclusión

En esta práctica se utilizaron diversas operaciones aritméticas con el valor capturado de dos números. Además de realizar operaciones aritméticas se comparo si los valores eran números (isNaN()), concatenación de dos variable(.concat()), y la conversión de cualquier variable a entero(parseInt()); estas y otras funciones existen para poder hacer diversas acciones con los datos que se tengan y que estos sean los correctos.

URL de la práctica

http://dewe.mypost.skn2.com/practicas/practica17.html

practica 16

Colegio Nacional de Educación Profesional Técnica

 

Lic. "Jesus Reyes Heroles"

 

Nombre del Alumno: José Guadalupe Martínez Cruz

Módulo: Diseño y Elaboración de Páginas Web

 Grupo: INFO-604.

Práctica: N° 16.

Introducción

A partir de un código ya dado con Java Script, se modifica para mostrar un mensaje extra y además que todo el código Java Script debe estar en un archivo externo y este siga funcionando en el documento de HTML.

Código 

Este el código HTML utilizado:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//ES">
<html xmlns="http://www.w3.org/1999/xhtml">>
<head>


</head>
<body>
<script type="text/javascript">

var salario_trabajador = 3500;
var impuesto_trabajador = 20;
var salario_real;
salario_real = salario_trabajador-((salario_trabajador/100)*impuesto_trabajador);/*El salario menus los impuestos*/
document.write('

Salario del trabajador sin impuestos es de: '+salario_trabajador+' pesos
');
document.write('

El impuesto es de: '+impuesto_trabajador+' %
');
document.write('

Salario del trabajador con impuestos es de: '+salario_real+' pesos
');

</script>

</body>
</html>

Explicación del código generado

Ahora en esta practica se utiliza Codigo Java Script dentro de las etiquetas <script> y </script>, en el se declaran varias variables las cuales son salario_trabajador que se le asigna un valor de 3500; impuesto_trabajador, con valor igual a 20, y salario_real. En esta última variable se guarda el valor resultante de descontar el impuesto (20%) al salario:
salario_trabajador-((salario_trabajador/100)*impuesto_trabajador);
Esto quiere decir que el valor de la primera variable se le resta el resultado de su valor dividido entre 100 y multiplicado por el valor del impuesto. Salario real = 3500-((3500/100)*20); esto es igual a 2800.
Hechas las operaciones se muestran con document.write se muestran los valores las variables junto a un párrafo descriptivo de lo que son.

Resultado

En el documento HTML se escriben los valores de las variables, cada una en párrafo distinto:

Conclusión

El uso de operaciones aritméticas en Java Script permite la creación de aplicaciones con un mejor potencial de utilizar datos. Además, en JS se pueden mostrar el contenido de las variables en el mismo archivo de la pagina HTML.

URL de la práctica

http://dewe.mypost.skn2.com/practicas/practica16.html

Practica 15

Colegio Nacional de Educación Profesional Técnica

 

Lic. "Jesus Reyes Heroles"

 

Nombre del Alumno: José Guadalupe Martínez Cruz

Módulo: Diseño y Elaboración de Páginas Web

 Grupo: INFO-604.

Práctica: N° 15.

Introducción

A partir de un código ya dado con Java Script, se modifica para mostrar un mensaje extra y además que todo el código Java Script debe estar en un archivo externo y este siga funcionando en el documento de HTML.

Código 

Este el código HTML utilizado:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//ES">
<html xmlns="http://www.w3.org/1999/xhtml">>
<head>




</head>
<body>

</body>
</html>

Este el código JS resultante:

//// Practica 14
meses=new Array("Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio","Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre");
alert(meses[0]);
alert(meses[2]);
alert(meses[3]);
alert(meses[4]);
alert(meses[5]);
alert(meses[6]);
alert(meses[7]);
alert(meses[8]);
alert(meses[9]);
alert(meses[10]);
alert(meses[11]);

Explicación del código generado

En Java Script se crea el objeto meses de tipo array(arreglo), en el cual se guardan los nombres de los meses del año, este queda con una longitud de 12. Para mostrar cada uno de sus valores se coloca entre corchetes “[x]” el número (“x”) de la posición del valor a mostrar, esto va a un lado del nombre del array: meses[x], el numero de posición iniciia desde el cero. En el código se observa que se muestran los valores del arreglo en la función de mensaje alert();.

Resultado

El mensaje establecido por la práctica se muestra de correctamente al cargar la página:

Los valores se muestran uno por uno iniciando por Enero hasta Diciembre, para mostrar el siguiente se da clic en aceptar y así hasta cavar con los Meses.

Conclusión

En Java Script también se pueden utilizar arreglos para almacenar múltiples, y sus valores pueden asignarse simultáneamente, y para mostrar uno de sus valores se coloca el nombre del array y a un lado entre corchetes la posición del valor.

URL de la práctica

http://dewe.mypost.skn2.com/practicas/practica15.html

Practica 14

Colegio Nacional de Educación Profesional Técnica

 

Lic. "Jesus Reyes Heroles"

 

Nombre del Alumno: José Guadalupe Martínez Cruz

Módulo: Diseño y Elaboración de Páginas Web

 Grupo: INFO-604.

Práctica: N° 14.

Introducción

A partir de un código ya dado con Java Script, se modifica para mostrar un mensaje extra y además que todo el código Java Script debe estar en un archivo externo y este siga funcionando en el documento de HTML.

Código 

Se ocupa el código de la practica anterior, solamente se cambia la dirección del archivo código.js

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//ES">
<html xmlns="http://www.w3.org/1999/xhtml">>
<head>


</head>

Esta página contiene el primer script



</body>
</html>

El código Java Script queda así dentro del archivo codigo.js

//// Practica 14
 function mensaje(){
var mensaje = "Hola mundo!\n Que facil es incluir 'comillas simples' y \''comillas dobles\" ";
 alert(mensaje);
 }

Explicación del código generado

En el HTML se muestra que solo se modificó la propiedad src de la primera etiqueta de script <script src="p14/codigo.js" type="text/javascript"></script> El código JS muestra que se declara la variable mensaje en el que se asigna un valor tipo string que es el mensaje que se debe mostrar al cargar la pagina, esta se muestra a través de alert(); colocándola dentro de los paréntesis. En valor de la variable se colocó \n para permite un salto de línea, y \” que permite mostrar las comillas dobles

Resultado

El mensaje establecido por la práctica se muestra de correctamente al cargar la página:

Conclusión

En Java Script se también utilizan variables en las cuales se pueden almacenar diversos valores. Las cadenas se declaran entre comillas dobles, y ellas para poder mostrar un carácter especial se coloca una diagonal invertida antes del carácter a mostrar. Además, las variable pueden mostrar su valor dentro de la función alert();

URL de la práctica

http://dewe.mypost.skn2.com/practicas/practica14.html

Practica 13

Colegio Nacional de Educación Profesional Técnica

 

Lic. "Jesus Reyes Heroles"

 

Nombre del Alumno: José Guadalupe Martínez Cruz

Módulo: Diseño y Elaboración de Páginas Web

 Grupo: INFO-604.

Práctica: N° 13.

Introducción

A partir de un código ya dado con Java Script, se modifica para mostrar un mensaje extra y además que todo el código Java Script debe estar en un archivo externo y este siga funcionando en el documento de HTML.

Código 

Transcrito el código HTML queda de este modo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//ES">
<html xmlns="http://www.w3.org/1999/xhtml">>
<head>



</head>
<body onload="mensaje();">
Esta página contiene el primer script




</body>
</html>

El código Java Script queda así dentro del archivo codigo.js

//// Practica 13
/*Uso de JS*/
 function mensaje(){
alert("Este es un mensaje de alerta !");
alert("Soy el primer script!");
 }

Explicación del código generado

En el primer código va el XHTML, en este se le agrega:

<script type="text/javascript" src="p13/codigo.js"></script>

Remplazando a:

 <script type="text/javascript">

alert("Este es un mensaje de alerta !");

</script>
Se  logra observar que dentro de la primera etiqueta del script va la propiedad type, con ella señalamos que se trata de un condigo en Java Script.

En el primero se le añadió la propiedad src=””, en el cual se llama al archivo de Java Script(.js) escribiendo la ubicación de este; en el archivo que se utiliza en esta practica se colocó el código que estaba encerrado entre las etiquetas <script> y </script> del código HTML original, además en archivo codigo.js se añadió el mensaje  Soy el primer script!.
Estos dos mensajes o alertas están dentro de la función mensaje que se llama al cargar la pagina colocando onload="mensaje();" en la  eiquta body.

Por ultimo, en el código HTML se agrega un párrafo que dice “Su navegador tiene inhabilitado el soporte de JavaScript, por lo que no se muestra correctamente“, y este solo se muestra cuando el JS este desactiva, esto se logra colocándolo dentro de las etiquetas “<noscript>” y “</noscript>”.

Resultado

Se muestran los mensajes al cargar la página y estos desaparecen hasta que se da clic en aceptar:

Conclusión

En el código HTML se pueden incluir diversos Script de Java, el cual es un lenguaje interpretado por los Navegadores Web. Este sirve para conseguir una pagina que sea dinámica con el usuario que visite una pagina o sitio web. Si el navegador tiene el Java Script desactivado se puede el aviso de esto en código HTML.

URL de la práctica

http://dewe.mypost.skn2.com/practicas/practica12.html

Practica 12

Colegio Nacional de Educación Profesional Técnica

 

Lic. "Jesus Reyes Heroles"

 

Nombre del Alumno: José Guadalupe Martínez Cruz

Módulo: Diseño y Elaboración de Páginas Web

 Grupo: INFO-604.

Práctica: N° 12.

Introducción

Se crea una tabla a la cual se le aplica hojas estilos en cascada para conseguir el aspecto que se pide en la hoja de la práctica. Además el uso de identificadores para controlar de una mejor manera el diseño de la tabla.

Código HTML

Se genera el siguiente código en html para crear una tabla (en el cuerpo), y además, con sintaxis css definida entre las etiquetas <style type=”text/css”> y <style> ubicadas en el head.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//ES">
<html>
<head>





</head>
<body>

 
Practica 12

 

  Uso de herramientas para aplicaciones web
 
    

 

 

  
Hipervínculo 01
  
Hipervínculo 02
  
Hipervínculo 03
  
Hipervínculo 04
  
Hipervínculo 05


 

  
Título Del Contenido
  
Subtitulo
 
  
 Escribo algo para rellenar....

  
 Escribo algo para rellenar....

  
 Escribo algo para rellenar....

  
 Escribo algo para rellenar....



 
 aquí puede insertar imágenes, anuncios, noticias, más enlaces, etc...

 
 

  

   Pie de página del sitio web
  


</body>
</html>

Explicación del código generado

Se crea una tabla que tiene 100% de ancho(abarcara todo el ancho de la ventana del navegador), sus bordes son solido y de color negro pero con de ancho, tiene un margen automatico que hace que se centre en la ventana, el espacio de los bordes es de 15 pixeles(px), el color de su letra es de un gris semi-obscuro. Todo esto se define así:
table{   width:100%;     border:0px solid #000; margin:auto; border-spacing: 15px;    color:#707070; }
Toda la tabla consta de 5 celdas, en donde:
La primera celda es formada por “<th>” y “</th>” con el texto que el titulo de la tabla “Uso de herramientas para aplicaciones web”,  esta a su ves tiene la id denominada header, este con “width:100%;” cubrirá todo el espacio disponible; “height:60px;” tendrá una altura de 60px; “border:0; border-bottom:7px solid #000;” su bordes serán de 0 a excepción de inferior que será de 7px y de color negro; “font-size:40px; text-align:left; font-weight:600; background-color:rgb(204,153,30);” con esto ultimo tendrá una letra de tmaño de 40px con alineación a la izquierda y una anchura de las letras de 600, además tener un fondo de color entre naranja y dorado. Por ultimo esta celda de cabecera cubre lo de 3 celdas más con “colspan="4"”, permitiéndole expandirse hasta los dos extremos de la tabla.
La segunda, la tercera y la cuarta celda, son identificadas por las id “iquierda”, “conteiner” y “derecha” respectivamente.
 Izquierda tiene dentro una lista desordenada; a esta celda se le asigna los siguientes atributos:
“width:300px;”, “min-width:200px;” y “height:150px;” determinan que tundra un ancho de 300px, además su ancho mínimo será de 200px y su altura es 150px; “font-size:18px;” “padding-left:25px;” y “background-color:#f0f0f0;” definen que la tabla tiene una fuente de 18px, un margen interior de 25px y un color de fondo gris claro.
Conteiner será de dos filas de altos(rowspan="2"), los estilos para esta celda son un ancho de 900px, un ancho mínimo de 400px, un interlineado de 30px; esta celda contiene un titulo(<h1> y </h1>), un subtitulo(<h2> y </h2> y este a su vez tienen con font-weight:600; un grosor de 600) y cuatro párrafos (<p> y </p>).
Derecha solamente tiene un párrafo, sus estilos definen que tiene 80px de altura, su texto está justificado, su letra es de 17px y fuente “Helvetica”, un color de fondo entre crema y/o beige.
La última celda, id="footer", al igual que header abarca 3 celdas a lo ancho,  tiene escrito el texto   “Pie de página del sitio web”; sus estilos son, los siguientes:
“text-transform:uppercase;” con esto se declara que su texto se verá todo en mayúsculas aunque este escrito en minúsculas, “text-align:center;” su texto estará alineado al centro, y “height:35px;” tiene una altura de 35px.
Los últimos estilos son: #izquierda a, h1, #conteiner p{ color:rgb(33,100,154); text-decoration:none;} y  #izquierda, #footer, #conteiner h1{            font-weight:900;}

Resultado

Todos estilos son necesarios para crear la siguiente tabla:

Tabla resultante

Conclusión

Con las hojas de estilo en cascada se pueden asignar, además de clases, identificadores con los que también se puede controlar un lugar en específico de la página o de un objeto de la misma. Estos junto a las propiedades los elementos dejan una gran gama de diseños posibles que puede mejorar el atractivo visual de un sitio web.

URL de la práctica

http://dewe.mypost.skn2.com/practicas/practica12.html

practica 11

Colegio Nacional de Educación Profesional Técnica

 

Lic. "Jesus Reyes Heroles"

 

Nombre del Alumno: José Guadalupe Martínez Cruz

Módulo: Diseño y Elaboración de Páginas Web

 Grupo: INFO-604.

Práctica: N° 11.

Introducción

Se utiliza el código de la práctica anterior al cual se le aplican nuevos estilos para mejorar la imagen de la página.

Código HTML

La modificación del código de la práctica 10 queda de la siguiente manera:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//ES">
<html>
            <head>
            <title>Practica N. 11</title>
            </head>
            <!---/// Codigo CSS sugerido por la practica ///-->
                        <style type="text/css">
                                   body { color: blue }
                                   body { background-color: #F3F781 }
                                   body { font-family: Georgia, “Times New Roman”, Times, serif }
                                   h1 { Font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif ;}

                                   .navbar{list-style-type: none; padding: 20; margin: 0;  float: left;}                                                      .navbar li{
                                   background: white;
                                   margin: 0.5em 0;
                                   padding: 0.3em;
                                   border-right: 1em solid black;
                                   text-decoration: none;}
                       
                        a:link{ color:blue; }
                                    a:visited{color:blue; }
                        </style>
<body id="arriba">
            <ul class="navbar">
                        <li><a href="#arriba">P&aacute;gina principal</a></li>
                        <li><a href="practica10.html" target="_ablank">Altas</a></li>
                        <li><a href="#arriba">Bajas</a></li>
                        <li><a href="#arriba">Modificaciones</a></li>
                        <li><a href="#arriba">Consultas</a></li>
            </ul>
            <h1>Uso de herramientas aplicaciones web</h1>
            <p>&#161;En este ejemplo haremos uso de hojas de estilo en cascada! </p>
            <p>&#161;Daremos formato al texto y a los enlaces! </p>
            <p> Esta P&aacute;gina no cuenta con im&aacute;genes, pero contiene enlaces, aunque no te lleven a ning&uacute;n sitio&#8230; </p>
            <p> Deber&iacute;a haber m&aacute;s cosas aqu&iacute;, pero es suficiente para lo que necesitamos ejemplificar</p>
</body>
</html>

Explicación del código generado

En el archivo se modificó la lista que estaba en la parte superior de la página:

• Página principal
• Altas
• Bajas
• Modificaciones
• Consultas

A esta lista se le añadió la clase navbar en el inicio de la lista que dando “<ul class="navbar">”; se logra observar que se añadió la propiedad class=””, la cual puede ser colocada en cualquier elemento de un página.
A este selector se le aplicaron los siguientes estilos para cambiar el diseño de la lista:
.navbar{list-style-type: none; padding: 20; margin: 0 auto; float: left;}
La primera propiedad define que la lista no tendrá ningún estilo, es decir, no tendrá alguna figura para las viñetas.
La segunda, que es padding, dará un margen interior de 20px, seguido está el margen de la todo la lista con respecto en donde se localize.
Float es para dejar la lista como flotante, esta estará en izquierdad con float:left;

Seguido se define lo siguiente: .navbar li{ …estilos….}, con esto se seleccionan todos los elementos li  dentro de donde este marcada la clase, en este caso es el elemento ul, en esta se declaran los estilos, primero un fondo blanco(background: white;), seguido el margin de los list ítem (margin: 0.5em 0;), luego la separación del borde a lo contengan(padding: 0.3em;), después el borde derecho será de un 1em y de  color negro(border-right: 1em solid black;), y finalente los caracteres que contenga no podrán estar subrayados(text-decoration: none;).
Ademà en este código se les asigna un color a los enlaces no visitados y visitados con las pseudo-clases que los selecciona, :link para los no visitados y :visited para los ya visitados.
         a:link{ color:blue; }            a:visited{color:blue; }

Resultado

Se observa el cambio que ha pasado la página, lo anteriormente explicado mejora su apariencia y su estructura:

Links sin visitar

Links Visitados

Conclusión

Para la mejora de la apariencia de un sitio o de una página web se pueden utilizar hojas de estilo en cascada (CSS), además de utilizar los selectores por etiqueta se pueden utilizar las clases y pseudo-clases para tener un mayor control de diferentes elementos, definiendo un estilo para los que contengan el atributo class con el nombre de la clase, o generalizando pseudo-clases que controlan a los elementos que sufren alguna acción.

URL de la práctica

http://dewe.mypost.skn2.com/practicas/practica11.html