Desarrollo de aplicaciones web: febrero 2020

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>

<CENTER>AMI el niño de las estrellas </CENTER>

<HR ALIGN= "center" SIZE= "10" WIDTH= "50%" COLOR= "Purple" NOSHADE>
Autor: Enrique Barrios
Advertencia
(Dirigida solamente a los adultos)
No siga leyendo, no le va a gustar: lo que viene es maravilloso 
Dedicatoria
Dedicado a los niños
de cualquier edad
y de cualquier pueblo
de esta redonda y hermosa patria
esos futuros herederos y constructores
de una nueva tierra
sin divisiones entre hermanos.

<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>

<CENTER>AMI el niño de las estrellas</CENTER>

<HR ALIGN= "center" SIZE= "10" WIDTH= "80%" COLOR= "Purple" NOSHADE>
Autor: Enrique Barrios

<A NAME= "parte1"></A>
PARTE PRIMERA 

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

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

<A NAME= "cap1"></A>
Capítulo 1 Primer encuentro
Comenzó una tarde del verano pasado en un balneario de la costa donde vamos con mi abuelita casi todos los años.
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.
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.
Fragmento
<A HREF= "#parte 1"><IMG SRC = "img\flechaMoradaArriba.png" WIDTH= "30" HEIGHT = "40"></A>

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

<A NAME= "cap3"></A>
Capítulo 3 No te preocupes
 -¿Qué signo es ese que llevas en el pecho?- Pregunté.
 -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... 
-¿Viajas a la velocidad de la luz?
Mi pregunta le pareció cómica.
-Si viajara "tan lento" me habría hecho viejo antes de poder llegar hasta aquí.
Fragmento
<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>

<CENTER>Especialidad: Programación</CENTER>

<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>

<CENTER> Estaciones del año</CENTER>

<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>

<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>

<CENTER> Valores</CENTER>

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

<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>

</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>

<CENTER>Signos zodiacales</CENTER>

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

<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>

</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>

Prueba de imagen en una página web
<IMG SRC= "sentaodepana.jpg" ALT = "Lo siento" WIDTH= "100"
HEIGHT = "80" ALIGN= "middle">

</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>

<CENTER> Línea sin sombra</CENTER>

<HR ALIGN= "cenler" SIZE= "10" WIDTH= "50%">

<CENTER>Línea con sombra</CENTER>

<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>
¡Bienvenidos al fantástico mundo 
del diseño de páginas web! 
¡Iniciemos juntos esta nueva aventura!
</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.