Desarrollo de aplicaciones web: 2020

miércoles, 15 de julio de 2020

▓▓▓▓▓▓▓▒▒▒▒▓▓▓▓▓▓▓
▓▓▓▓▓▓▒▒▓▓▒▒▓▓▓▓▓▓
▓▓▓▓▓▒▒▓▓▓▓▒▒▓▓▓▓▓
▓▓▓▓▒▒▓▓▓▓▓▓▒▒▓▓▓▓
▓▓▓▒▒▓▓▓▓▓▓▓▓▒▒▓▓▓
▓▓▒▒▓▓▓▓▓▓▓▓▓▓▒▒▓▓
▓▒▒▓▓▓▓▓▒▒▓▓▓▓▓▒▒▓
▓▒▒▓▓▓▓▓▒▒▓▓▓▓▓▒▒▓
▓▒▒▓▓▓▓▓▒▒▓▓▓▓▓▒▒▓
▓▒▒▓▓▓▓▓▒▒▓▓▓▓▓▒▒▓
▓▒▒▓▓▓▓▓▒▒▓▓▓▓▓▒▒▓
▓▒▒▓▓▓▓▓▒▒▓▓▓▓▓▒▒▓
▓▒▒▓▓▓▓▓▒▒▓▓▓▓▓▒▒▓
▓▒▒▓▓▓▓▓▒▒▓▓▓▓▓▒▒▓
▓▒▒▓▓▓▓▓▒▒▓▓▓▓▓▒▒▓
▓▓▒▒▓▓▓▓▓▒▒▓▓▓▓▒▓▓
▓▓▓▒▒▓▓▓▓▓▒▒▓▓▒▓▓▓
▓▓▓▓▒▒▓▓▓▓▓▒▒▓▓▓▓▓
▓▓▓▓▓▒▒▓▓▓▓▓▒▒▓▓▓▓
▓▓▓▒▓▓▒▒▓▓▓▓▓▒▒▓▓▓
▓▓▒▓▓▓▓▒▒▓▓▓▓▓▒▒▓▓
▓▒▒▓▓▓▓▓▒▒▓▓▓▓▓▒▒▓
▓▒▒▓▓▓▓▓▒▒▓▓▓▓▓▒▒▓
▓▒▒▓▓▓▓▓▒▒▓▓▓▓▓▒▒▓
▓▒▒▓▓▓▓▓▒▒▓▓▓▓▓▒▒▓
▓▒▒▓▓▓▓▓▒▒▓▓▓▓▓▒▒▓
▓▒▒▓▓▓▓▓▒▒▓▓▓▓▓▒▒▓
▓▒▒▓▓▓▓▓▒▒▓▓▓▓▓▒▒▓
▓▒▒▓▓▓▓▓▒▒▓▓▓▓▓▒▒▓
▓▒▒▓▓▓▓▓▒▒▓▓▓▓▓▒▒▓
▓▓▒▒▓▓▓▓▓▓▓▓▓▓▒▒▓▓
▓▓▓▒▒▓▓▓▓▓▓▓▓▒▒▓▓▓
▓▓▓▓▒▒▓▓▓▓▓▓▒▒▓▓▓▓
▓▓▓▓▓▒▒▓▓▓▓▒▒▓▓▓▓▓
▓▓▓▓▓▓▒▒▓▓▒▒▓▓▓▓▓▓
▓▓▓▓▓▓▓▒▒▒▒▓▓▓▓▓▓▓

martes, 17 de marzo de 2020

Ejemplo 1.21.5. Archivo de conexión para altas y modificación de especialidad

<?php
include "conectar.php";
$vCveEsp=$_POST['cveEspecialidad'];
$vNomEsp=$_POST['nomEspecialidad1;
$vNomArea=$_POST['nombreArea'];
$vBoton=S_POST['boton'];
$resConectar=conecta();
$sqlArea="SELECT cveArea FROM AREA
WHERE nomArea='SvNomArea';";
$sqlCveArea=mysql_query($sqlArea.$resConectar);
$resulCveArea= mysql_fetch_array($sqlCveArea);
$vCveArea=$resulCveArea["cveArea");
if ($vBoton=="Guardar"){
$sqlAltaEsp="INSERT INTO ESPECIALIDAD VALUES('$vCveEsp','$vNomEsp','$vCveArea');";
$guarda=mysql_query($sqlAltaEsp,$resConectar);
if (!$guarda){
echo "<SCRIPT LANGUAGE='Javascript' TYPE='text/Javascript'>
alert('Ocurrió un error. Posible clave repetida')
Javascript:history.back(1)
</SCRIPT>";
}
else{
echo "<SCRIPT LANGUAGE= 'Javascript' TYPE='text/Javascript'>
alert('Especialidad registrada')
window.location='../index.html'
</SCRIPT>";
}
else{
$sqlModEsp="UPDATE ESPECIALIDAD
SET nomEsp='$vNomEsp',cveArea='$vCveArea'
WHERE cveEsp='$vCveEsp';";
$modifica r=mysql_query($sqlModEsp,$resConectar);
if (!$modificar){
echo "<SCRIPT LANGUAGE='Javascript' TYPE='text/ Javascript'>
alert('Ocurrió un error: No se guardó el registro')
Javascript: history.back(1)
</SCRIPT>";
}
else{
echo "<SCRIPT LANGUAGE='Javascript' TYPE='text/Javascript'>
alert('Especialidad modificada')
window.location='consulta Especialidad.php'
</SCRIPT>";
}
}

jueves, 12 de marzo de 2020

Ejemplo 1.21.4. Creación del formulario

<HTML XMLNS="http://www.w3.org/1999/xhtml">
<HEAD>
<META HTTP-EQUIV="content-Type" CONTENT ="text/html;
CHARSET =utf-8"/>
<TITLE>Formulario de Altas de Especialidades</TITLE>
<LINK HREF="../estilos/estiloEspecialidad.css"
REL="stylesheet" TYPE="text/css" />
</HEAD>
<BODY>
<FORM ID="form 1" NAME="form 1" METHOD="post"
ACTION="actBase.php">
<P CLASS="titulo">ALtas de Especialidades</P>
<BR/><BR/>
<LABEL FOR="clave">CLave:</LABEL>
<INPUT NAME="cveEspecialidad" TYPE="text"
ID="claveEspecialidad" SIZE="100px"
MAXLENGTH="6"/><BR/>
<LABEL FOR="nombre">Nombre:</LABEL>
<INPUT NAME="nomEspecialidad" TYPE="text"
ID="nombreEspecialidad" SIZE="100"
MAXLENGTH="25"/><BR/>
<LABEL FOR="area">Área:</LABEL>
<SELECT NAME="nombreArea" ID="nombreArea">
<7php
include "conectar.php";
$resConectar=conecta();
$sqlAreas="SELECT * FROM AREA";
$tablaArea = mysql_query($sqlAreas);
$numfilasAreas = mysql_num_rows($tablaArea);
for {$i=O; $i<$numfilasAreas; $i++){
$filaArea = mysql_fetch_array($tablaArea);
echo'<OPTION>'.$filaArea['nomArea'].' </OPTION>';
}
?>
</SELECT><BR/><BR/>
<INPUT TYPE="submit" NAME="boton"
ID="botonGuardar" VALUE="Guardar" />
<INPUT TYPE="reset" NAME="botonNuevo"
ID="botonNuevo" VALUE="Nuevo" /><BR/>
</FORM>
<IMG SRC=".../imagEscuela/regresar.gif"
WIDTH="60" HEIGHT ="40" ONCLICK="history.back()"/>
</BODY>
</HTML>

Ejemplo 1.21.3. Index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
<link href="Estilo/estiloEspecialidad.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>

<body>
<div align="center">
<p><img src="ImagEscuela/CBTIS 121 Fachada Principal.jpeg" width="1000" height="400" alt="._.XD" /></p>
</div>
<p align="center"><span class="Estilo1">Especialidades</span></p>
<p align="left">Altas | Consulta</p>
<p align="left">Ejemplos de sitios web dinámicos</p>
<p align="left">Acceso a la gestión de las especialidades en el CBTis 121.</p>
<p align="left">Podrá realizar:</p>
<ol>
<li> Dar de alta una nueva especialidad.</li>
<li> Consultar las especialidades.</li>
<li> Modificar algún dato de las especialidades guardadas .</li>
<li>Elimina alguna especialidad. </li>
</ol>
<p>Todo esto con sólo a una base de datos de prueba instalada de manera local </p>
</body>
</html>

Visto desde el navegador:

Ejemplo 1.21.2. Archivo de conexión

<?php
function conecta(){
//Conexión a la base de datos
$vServidor="localhost";
$vUsuarioBD="root";
$vContraseniaBD="";
$vBD="escuela";
$errorServ="No se puede conectar con el servidor";
$errorBD="No se puede seleccionar la base de datos";
//conexión al servidor local
$conexion = mysql_connect (SvServidor, SvUsuarioBD,
$vContraseniaBD) or die ($errorServ);
//seleccionar la base de datos
mysql_select_db ($vBD) or die ($errorBD);
//retorno de la conexión
return ($conexion);
}
?>

Ejemplo 1.21.1. Diseño de una hoja de estilo.

body{
margin-left: 10px;
margin-top: 20px;
margin-right: 10px;
margin-bottom: 5px;
}
input{
display:blok;
width: 150px;
float: left;
margin-bottom: 10px;
}
label{
display:blok;
text-align:right;
width: 120px;
float: left;
padding-right: 10px;
}
#recordar{
width:1em;
}
br{
clear:left;
}
#enviar{
width:50px;
margin-left:140px
.titulo {
font-family: Cambria, "HoeflerText": "Times New Roman", serif;
font-size: 20px;
line-height: 30px;
background-color: #FFFF66;
color: #FF0000;
text-align: center;
font-style: normal;
}

Ejemplo 1.21. Tabla 1.21. Atributos empleados en la hoja de estilo para el diseño de formularios

miércoles, 11 de marzo de 2020

Ejemplo 1.20. Creación de un script

DROP DATABASE IF EXISTS ESCUELA;
CREATE DATABASE ESCUELA;
USE ESCUELA;
CREATE TABLE AREA(
cveArea CHAR(1) PRIMARY KEY NOT NULL,
nomArea VARCHAR(25) NOT NULL
);
CREATE TABLE ESPECIALIDAD(
cveEsp CHAR(6) PRIMARY KEY NOT NULL,
nomEsp VARCHAR(25) NOT NULL,
cveArea CHAR(1) NOT NULL,
FOREIGN KEY (cveArea) REFERENCES AREA (cveArea)
ON UPDATE CASCADE
);
INSERT INTO AREA VALUES('E'; 'ECONOMICO-ADMINISTRATIVA');
INSERT INTO AREA VALUES('F'; 'FISICO-MATEMATICA');

Tabla 1.20. Diccionario de datos de la tabla ESPECIALIDAD

Tabla 1.19. Diccionario de datos de la tabla AREA

Tabla 1.18. Comandos del DML

Tabla 1.17. Comandos del DDL

martes, 10 de marzo de 2020

Ejemplo 1.19. Hoja de estilo

Código de estilo (CSS):

body{

margin-left: 10px;

margin-top: 20px;

margin-right: 10px;

margin-bottom: 5px;

background-color: #EDD9FC;

}

color: #7B18A7;

}

a:visited {

color: #D6A6FA;

}

a:hover {

color: #FAEFA6;

}

table {

border-collapse:collapse;

border:2px solid violet;

table-layout:fixed;

width: 100%

}

td {

padding:5px;

border:1px solid violet;

}

th {

color:white;

background-color:violet;

padding:5px;

}

tr{

height:45px;

}

titulo {

font-family: Cambria, "Hoefler Text"; "Times New Roman": serif;

font-size: 20px;

line-height: 30px;

background-color: #7B18A7;

color: #FFFF66;

text-align: center;

font-style: normal;

}

.subtitulo1 {

font-family: "Lucida Grande"; "Lucida Sans Unicode"; Verdana;

font-size: 17px;

line-height: 20px;

fonr-weight: bold;

color: #7B18A7;

font-style: normal;

text-align: center;

}

.normal {

font-family: Cambria, "Hoefler Text"; "Liberation Serif'; Times;

font-size: 14px;

line-height: 20px;

font-weight: bold;

color: #7B18A7;

font-style: normal;

text-align: justify;

}

.derecha {

font-family: Cambria, "HoeflerText'; "Liberation Serif'; Times;

font-size: 14px;

line-height: 20px;

font-weight: bold;

color: #7B18A7;

font-style: normal;

text-align: right;

}

.estilo24 {

font-size: 24pt;

color: #FE7747;

}

.estiloPieTabla {

font-size: 8pt;

color: #FE7747;

text-align: center;

}

La tabla se muestra así:

jueves, 5 de marzo de 2020

Ejemplo 1.18. Insertar videos, en Dreamweaver

Se selecciona la siguiente opción:

Al elegir el archivo, el video se añade a la página. Fin.

Ejemplo 1.17. Inserción de archivos multimedia

La página muestra el archivo de video o de sonido, y se reproduce desde ahí.

miércoles, 4 de marzo de 2020

Ejemplo 1.16. Hipervínculos en Dreamweaver

Primera página:

La sección marcada es el enlace de la imagen.

Al dar clic en esa parte, la página de "Lenguas indígenas" se abre:

Ejemplo 1.15. Propiedades de las tablas, en Dreamweaver

Tabla creada en Dreamweaver:

Ejemplo 1.14. Tablas en Dreamweaver

Tabla creada desde Dreamweaver:

Ejemplo 1.13. Propiedades de la página.

Pestaña de atributos:

Página, vista desde Dreamweaver:

Ejemplo 1.11. Propiedades de las herramientas, en Dreamweaver

Desde Dreamweaver:

martes, 3 de marzo de 2020

Ejemplo 1.12. Cambio de propiedades del texto, en Dreamweaver

<! doctype html>
<html>
<head>
<meta charset= "utf-8">
<title>Artesanía oaxaqueña</title>
<style type= "text/css">
body, td, th {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
font-style: obligue;
font-weight: bold;
font-size: 14 px;
color: #078E17;
}
body{
background-color: #9595FF;
background-image: url(ardilla.jpg);
background-repeat: no-repeat;
}
</style>
</head>
<body> <font color="#3300FF">
<h1 align="center">País: México</h1>
<h2 align="center"><br>
Estado: Oaxaca</h2>
<h3 align="center"><br>
Artesanía a presentar:ALEBRIJES</h3>
<h4><br>
Significado:</h4>
<p align="justify">Figura de madera de copal, tallada y pintada a mano con colores vivos, que representa generalmente un animal imagina rio, ángeles o nahuales, aunque también está plasmado
en la figura el espíritu innovador e irreal del alma oaxaqueña mediante la imaginación del creador.</p>
<p align="right"><br>
Localización: San Martín Tilcajete y San Antonio Arrazola. </p> </font>
</body>
</html>

Desde Dreamweaver:

miércoles, 26 de febrero de 2020

Pantalla principal de Dreamweaver

martes, 18 de febrero de 2020

Ejemplo 1.11. Ejemplo de vínculos 2

<HTML>
<HEAD>
<TITLE> Ejemplo de vínculos 2</TITLE>
</HEAD>
<BODY>
<FONT SIZE= "4" FACE= "Consolas" COLOR= "Blue">
<CENTER>AMI el niño de las estrellas </CENTER>
</FONT>
<HR ALIGN= "center" SIZE= "10" WIDTH= "50%" COLOR= "Purple" NOSHADE>
<P ALIGN= "center">Autor: Enrique Barrios</P>
<P ALIGN= "center">Advertencia</P>
<P ALIGN= "center">(Dirigida solamente a los adultos)</P>
<P ALIGN= "center">No siga leyendo, no le va a gustar: lo que viene es maravilloso</P> <BR>
<P ALIGN= "center">Dedicatoria</P>
<P ALIGN= "left">Dedicado a los niños</P>
<P ALIGN= "left">de cualquier edad</P>
<P ALIGN= "left">y de cualquier pueblo</P>
<P ALIGN= "left">de esta redonda y hermosa patria</P>
<P ALIGN= "left">esos futuros herederos y constructores</P>
<P ALIGN= "left">de una nueva tierra</P>
<P ALIGN= "left">sin divisiones entre hermanos.</P>

<IMG SRC= "img\flecha.verde.png" WIDTH= "50" HEIGHT = "40" ONCLICK= "history.back()">
</BODY>
</HTML>

Desde el navegador:

Ejemplo 1.10. Ejemplo de vínculos 1

<HTML>
<HEAD>
<TITLE>Ejemplo de vínculos 1</TITLE>
</HEAD>
<BODY>
<FONT SIZE="4" FACE= "Arial" COLOR= "Blue">
<CENTER>AMI el niño de las estrellas</CENTER>
</FONT>
<HR ALIGN= "center" SIZE= "10" WIDTH= "80%" COLOR= "Purple" NOSHADE>
<P ALIGN= "center">Autor: Enrique Barrios</P>

<A NAME= "parte1"></A>
<P ALIGN= "center">PARTE PRIMERA </P>

<P ALIGN= "left"><A HREF= "pag13.html"> Advertencia y Dedicatoria </A></P>

<P ALIGN= "left"><A HREF="http://www.ebarrios.com/web/acerca_de_EB.htm" TARGET= "_blank">Acerca del autor</A></P>
<!-Ejemplo de enlace a un correo electrónico-->
<P ALIGN= "left"><A HREF= "mailto:beliajg@hotmail.com">Contáctame</A></P>
<P ALIGN= "center">PARTE PRIMERA</P>

<A NAME= "cap1"></A>
<P ALIGN= "center">Capítulo 1 Primer encuentro</P>
<P ALIGN= "justify">Comenzó una tarde del verano pasado en un balneario de la costa donde vamos con mi abuelita casi todos los años.</P>
<P ALIGN= "justify">Esa vez conseguimos una casita de madera. Tenía muchos pinos y boldos en el patio, y por el frente, un antejardín lleno de flores. Se encontraba cerca del mar, en un sendero que lleva hacia la playa.</P>
<P ALIGN= "justify">Quedaba poca gente, porque la temporada iba a terminar. A mi abuelita le gusta salir de vacaciones los primeros días de marzo, dice que es más tranquilo y más barato.</P>
<P ALIGN= "right">Fragmento</P>
<A HREF= "#parte 1"><IMG SRC = "img\flechaMoradaArriba.png" WIDTH= "30" HEIGHT = "40"></A>

<A NAME= "cap2"></A>
<P ALIGN= "center">Capítulo 2 Pedrito volador</P>
<P ALIGN= "justify"> -Ven a quedarte a mi casa- le ofrecí, porque ya era tarde.</P>
<P ALIGN= "justify">-No incluyamos adultos en nuestra amistad- dijo, arrugando la nariz entre sonrisas.</P>
<P ALIGN= "justify">-Pero tengo que irme... </ P>
<P ALIGN= "justify">-Tu abuelita duerme profundamente, no te echará de menos si conversamos un rato.</P>
<P ALIGN= "justify">Otra vez me causó sorpresa y admiración. ¿Cómo sabía acerca de mí mi abuelita?... Recordé que era un extraterrestre.</P>
<P ALIGN= "right">Fragmento</P>
<A HREF= "#parte1"><IMG SRC = "img\flechaMorada.Arriba.png" WIDTH="30" HEIGHT ="40"></A>

<A NAME= "cap3"></A>
<P ALIGN= "center">Capítulo 3 No te preocupes</P>
<P ALIGN= "justify"> -¿Qué signo es ese que llevas en el pecho?- Pregunté.</P>
<P ALIGN= "justify"> -Es el emblema de mi trabajo- respondió, mientras señalaba hacia lo alto, -¿sabes?, aquí "cerquita", en un planeta de Sirio, hay unas playas color violeta... son espléndidas. Si vieras lo que es un atardecer con esos dos soles gigantes... </P>
<P ALIGN= "justify">-¿Viajas a la velocidad de la luz?</P>
<P ALIGN= "justify">Mi pregunta le pareció cómica.</P>
<P ALIGN= "justify">-Si viajara "tan lento" me habría hecho viejo antes de poder llegar hasta aquí.</P>
<P ALIGN= "right">Fragmento</P>
<A HREF= "#parte1"><IMG SRC = "img\flechaMorada.Arriba.png" WIDTH= "30" HEIGHT ="40"></A>
</BODY>
</HTML>

Desde el navegador:

lunes, 17 de febrero de 2020

Tabla 1.15. Ejemplos de tipos de enlaces.

Tabla 1.14. Atributos empleados en los hipervínculos.

Tabla 1.13. Etiqueta para definir hipervínculos

Ejemplo 1.9. Tabla con celdas combinadas.

<HTML>
<HEAD>
<TITLE> Ejemplo de tabla con celdas combinadas</TITLE>
</HEAD>
<BODY>
<FONT SIZE="4" FACE= "Courier" COLOR= "Blue">
<CENTER>Especialidad: Programación</CENTER>
</FONT>
<HR ALIGN= "center" SIZE= "10" WIDTH= "50%" COLOR= "Teal" NOSHADE>
<TABLE WIDTH= "80%" ALIGN= "center" BORDER= "2" BORDERCOLOR= "Blue" >
<CAPTION ALIGN= "bottom"> Asignaturas y submódulos </CAPTION>
<TR BGCOLOR= "Blue"> <TD COLSPAN="3" ALIGN= "center">Semestre 4</TD> </TR>
<TR> <TD ROWSPAN= "5">Componente de formación básica</TD> </TR>
<TR> <TD>Cálculo</TD> <TD>4 hrs.</TD> </TR>
<TR> <TD>Inglés IV</TD> <TD>3 hrs.</TD> </TR>
<TR> <TD>Física 1</TD> <TD>4 hrs.</TD> </TR>
<TR> <TD>Ecología</TD> <TD>4 hrs.</TD> </TR>
<TR> <TD ROWSPAN= "3">Componente de formación profesional</TD> <ITR>
<TR> <TD>Desarrolla aplicaciones web</TD> <TD>9 hrs.
</TD> </TR>
</TABLE>
</BODY>
</HTML>

Desde el navegador:

jueves, 13 de febrero de 2020

Ejemplo 1.8. Tabla clásica.

<HTML>
<HEAD>
<TITLE>Ejemplo de tabla clásica</TITLE>
</HEAD>
<BODY>
<FONT SIZE="4" FACE= "Arial" COLOR= "Blue">
<CENTER> Estaciones del año</CENTER>
</FONT>
<HR ALIGN= "center" SIZE= "10" WIDTH= "80%" COLOR= "Aqua" NOSHADE>
<TABLE WIDTH= "80%" ALIGN= "center" BORDER= "2" BORDERCOLOR= "blue" >
<CAPTION ALIGN= "top">Datos astronómicos</CAPTION>
<TR BGCOLOR= "pink">
<TH>Estación</TH>
<TH>Hemisferio norte</TH>
<TH>Hemisferio sur</TH>
</TR>
<TR>
<TD>Primavera</TD>
<TD>Del 21 de marzo hasta el 20 de junio</TD>
<TD>Del 21 de septiembre hasta el 20 de diciembre</TD>
</TR>
<TR>
<TD> Verano</TD>
<TD>Del 21 de junio hasta el 20 de septiembre</TD>
<TD>Del 21 de diciembre hasta el 20 de marzo</TD>
</TR>
<TR>
<TD>Otoño</TD>
<TD>Del 21 de septiembre hasta el 20 de diciembre</TD>
<TD>Del 21 de marzo hasta el 20 de junio</TD>
</TR>
<TR>
<TD>lnvierno</TD>
<TD>Del 21 de diciembre hasta el 20 de marzo</TD>
<TD>Del 21 de junio hasta el 20 de septiembre</TD>
</TR>
</TABLE>
<BODY>
</HTML>

Desde el navegador:

Tabla 1.12. Atributos empleados en las etiquetas para el diseño de tablas

Tabla 1.11. Etiquetas para el diseño de tablas

Ejemplo 1.7. Lista de definiciones.

<HTML>

<HEAD>

<TITLE>

Ejemplo de lista de definición

</TITLE>

</HEAD>

<BODY>

<CENTER>Lista de definiciones</CENTER>

</FONT>

<HR ALIGN= "center" SIZE= "10" WIDTH= "50%" COLOR="Aqua"

NOSHADE>

<FONT SIZE= "4" FACE= "Consolas" COLOR= "Blue"

<DL>

<DT>Cyberspace (ciberespacio)</DT>

<DD>

El término fue acuñado por William Gibson en su novela Neuromancer, para referirse a una red futurista de computadoras que las personas pueden utilizar conectando sus cerebros a éstas.

</DD>

</DL>

<DL>

<DT>Virtual reality (realidad virtual) </DT>

<DD>

Realidad simulada que proyecta al usuario en un espacio 3-D (tridimensional) generado por computador.

</DD>

</DL>

<DL>

<DT>Data glove (guante de datos)</DT>

<DD>

Guante utilizado para informar la posición de la mano y dedos de un usuario con respecto a un computador.

</DD>

</DL>

</BODY>

</HTML>

Desde el navegador:

Ejemplo 1.6. Lista no ordenada: VALORES.

<HTML>
<HEAD>
<TITLE>
Ejemplo de lista no ordenada
</TITLE>
</HEAD>
<BODY>
<FONT SIZE="4" FACE= "Consolas" COLOR= "Blue">
<CENTER> Valores</CENTER>
</FONT>
<HR ALIGN= "center" SIZE= "10" WIDTH= "50%" COLOR="Aqua"
NOSHADE>
<FONT SIZE="4" FACE= "Courier" COLOR= "Blue">
<UL>
<LI TYPE= "circle">Aceptación 74%</LI>
<LI TYPE= "circle">Responsabilidad 20%</LI>
<LI TYPE= "circle">Lealtad 30%</LI>
<LI TYPE= "circle">Altruismo 10%</LI>
<LI TYPE= "circle">Autonomía 25%</LI>
<LI TYPE= "circle">Colaboración 30%</LI>
<LI TYPE= "circle">Fortaleza 5%</LI>
<LI TYPE= "circle">Decencia 10%</LI>
<LI TYPE= "circle">Humildad 15%</LI>
<LI TYPE= "circle">Cooperación 25%</LI>
<LI TYPE= "circle">Integridad 40%</LI>
<LI TYPE= "circle">Paciencia 72%</LI>
<LI TYPE= "circle">Perseverancia 50%</LI>
</UL>
</FONT>
</BODY>
</HTML>

Desde el navegador:

miércoles, 12 de febrero de 2020

Ejemplo 1.5. Listas ordenadas

<HTML>
<HEAD>
<TITLE>
Ejemplo de lista ordenada
</TITLE>
</HEAD>
<BODY>
<FONT SIZE="4" FACE= "Courier" COLOR= "Purple">
<CENTER>Signos zodiacales</CENTER>
</FONT>
<HR ALIGN= "center" SIZE= "10" WIDTH= "50%" COLOR= "Aqua"
NOSHADE>
<FONT SIZE="4" FACE= "Courier" COLOR= "Blue">
<OL>
<LI>Aries</LI>
<LI>Tauro</LI>
<LI>Géminis</LI>
<LI>Cáncer</LI>
<LI>Leo</LI>
<LI>Virgo</LI>
<LI>Libra</LI>
<LI>Escorpión </LI>
<LI>Sagitario</LI>
<LI>Capricornio</LI>
<LI>Acuario</LI>
<LI>Piscis</LI>
</OL>
</FONT>
</BODY>
</HTML>

Desde el navegador:

Tabla 1.10. Atributos empleados en las etiquetas para el diseño de listas

Tabla 1.9. Etiquetas para el diseño de listas.

Tabla 1.8. Atributos de la etiqueta BODY

Ejemplo 1.4. Prueba de imagen en una página web.

<HTML>
<HEAD>
<TITLE>
Ejemplo de imagen en la misma carpeta
</TITLE>
</HEAD>
<BODY>
<P>
Prueba de imagen en una página web
<IMG SRC= "sentaodepana.jpg" ALT = "Lo siento" WIDTH= "100"
HEIGHT = "80" ALIGN= "middle">
</P>
</BODY>
</HTML>

Cuando la imagen está en la misma ubicación que el arvchivo HTML, debe de mostrarse así:

En caso de no estar, la página se verá así:

Tabla 1.7. Atributos de la etiqueta IMG

martes, 11 de febrero de 2020

Ejemplo 1.3. Uso de la etiqueta HR

<HTML>
<HEAD>
<TITLE>
Ejemplo de la etiqueta HR
</TITLE>
</HEAD>
<BODY>
<FONT SIZE="4" FACE= "BAUHAUS 93" COLOR= "Green">
<CENTER> Línea sin sombra</CENTER>
</FONT>
<HR ALIGN= "cenler" SIZE= "10" WIDTH= "50%">
<FONT SIZE="4" FACE= "Courier" COLOR= "Purple">
<CENTER>Línea con sombra</CENTER>
</FONT>
<HR ALIGN= "center" SIZE="5" WIDTH= "30%" COLOR="Aqua"
NOSHADE>
</BODY>
</HTML>

Así se muestra en el navegador:

Tabla 1.6. Atributos de la etiqueta HR

Tabla 1.5. Código de colores imprimibles en la propiedad color de la etiqueta FONT

Tabla 1.4. Atributos de la etiqueta FONT

lunes, 10 de febrero de 2020

Tabla 1.3. Etiquetas para darle estilo al texto.

Tabla 1.2. Etiquetas para la alineación de párrafos

Ejemplo 1.1. Código para diseñar una página web

<HTML>
<HEAD>
<TITLE>
Ejemplo de código HTML
</TITLE>
</HEAD>
<BODY>
<B>¡Bienvenidos al fantástico mundo</B> <BR>
<I>del diseño de páginas web!</I> <BR> <BR>
<U>¡Iniciemos juntos esta nueva aventura!</U>
</BODY>
</HTML>

Así debería mostrarse al abrirse en un navegador:

Ejemplo de código HTML ¡Bienvenidos al fantástico mundo
del diseño de páginas web!

¡Iniciemos juntos esta nueva aventura!

jueves, 6 de febrero de 2020

Tabla 1.1. Etiquetas básicas para el diseño de páginas web

miércoles, 5 de febrero de 2020

Conceptos básicos del desarrollo de aplicaciones web

Internet:

Internet (Internetwork System o Sistema de intercomunicación de redes). Red extensa constituida por una cantidad de redes menores, el banco de datos más grande del mundo, en la cual se puede encontrar información de cualquier tema.

Web, WWW:

Se refiere normalmente a un sistema de documentos interconectados por enlaces de hipertexto disponibles en la red. "La World Wide Web es un sistema de hipertexto de internet que brinda una forma atractiva y sencilla de explorarlo. Para esto existen diferentes navegadores, que conducen hacia los sitios de interés por medio de enlaces.

Página web:

Es un único archivo o documento electrónico que puede contener imágenes, archivos multimedia, texto organizado en párrafos, viñetas o tablas y otros elementos estáticos o dinámicos, escritos en un lenguaje de hipertexto conocido frecuentemente como HTML.

Sitio web:

Es un servidor que contiene páginas web y otros archivos vinculados o relacionados entre sí mediante hipervínculos. Dado que se encuentra en línea las 24 horas al día en internet, es útil como medio informativo permanente e inclusive permite que el usuario pueda interactuar con sus elementos, realizando desde búsquedas, compras, comunicación, hasta juegos.

HTML:

(HyperText Mark-up Language o Lenguaje de marcado de hipertexto). Es el lenguaje con el que se escriben las páginas web. Está considerado como un lenguaje de alto nivel que le indica a los navegadores cómo mostrar el contenido de una página web. Permite escribir texto de forma estructurada, integrado por etiquetas que marcan el inicio y fin de cada elemento de la página.

URL

(Uniform Resource Locator o Localizador uniforme de recursos). Se especifican al explorador para acceder a las páginas web y se encuentran incrustados dentro de las mismas páginas para proveer enlaces de hipertexlo a otras.

HTTP

(HyperText Transfer Protocol 1 Protocolo de transferencia de hipertexto). Está orientado a transacciones en un sistema de petición-respuesta entre un cliente y un servidor. Es el que define la sintaxis que utilizan los elementos de software de la arquitectura web para comunicarse; por lo tanto, es el que se utiliza en las transacciones www. A este prolocolo se le cataloga sin estado, puesto que no guarda ninguna información sobre conexiones anteriores, por tal motivo se utilizan las cookies, es decir, la información que un servidor puede almacenar en el cliente, para tomarla cuando necesite "mantener el estado"; de ahí se trabajan con "sesiones", pero además, deja una apertura en el sistema cliente para poder localizar usuarios, ya que las cookies pueden guardarse en el nodo cliente por tiempo indeterminado. La información que es transmitida por este protocolo recibe el nombre de recurso y se identifica mediante una UHL.

HTTPS

Es una versión de http para la transferencia segura de información, que puede utilizar cualquier método de cifrado siempre que sea entendido tanto por el servidor como por el cliente.

Servidor

Es cualquier programa que ofrece un servicio que se puede obtener en una red; una aplicación que responde a las solicitudes de otros dispositivos (clientes).

Cliente

Un programa ejecutable se convierte en un cliente cuando manda una petición a un servidor y espera una respuesta. Este intenta conectarse a otro programa (generalmente en otra máquina) llamado servidor.

Cliente-servidor

Modelo de interacción en un sistema distribuido en el que un programa en una localidad envía una solicitud a otro programa en otra localidad y espera una respuesta. Se puede observar que el modelo cliente-servidor aplica una lógica sencilla pero eficiente de comunicación, en donde un cliente (de los muchos que pueden existir) es el que inicia un requerimiento a través de una red y el servidor es quien se encarga de "escuchar" las solicitudes de cada cliente y atenderlas; además, se encarga de administrar los recursos disponibles en la red, como acceso a bases de datos, impresoras, unidades de almacenamiento y muchas más, estableciendo tiempos y prioridades de uso.