1. Conocimientos previos a las Aplicaciones Web
ADMINISTRAR REDES Y GESTIONAR LA CONEXIÓN A REDES EXTERNAS
Actividad Nº 6
“Taller conocimientos previos Aplicaciones Web”
JUAN CAMILO PANIAGUA GUTIERREZ
PRISCILLA YEPES CORREA
Programa:
TECNOLOGIA EN GESTION DE REDES DE DATOS
Instructora
Lina Mckoll
SERVICIO NACIONAL DE APRENDIZAJE SENA
CENTROS DE SERVICIOS Y GESTION EMPRESARIAL
MEDELLIN – ANTIOQUIA
2012
1

2. Conocimientos previos a las Aplicaciones Web
Contenido
INTRODUCCION....................................................................................................................3
CUESTIONARIO.....................................................................................................................4
SOLUCION............................................................................................................................6
WEBGRAFÍA ....................................................................................................................... 24
2

3. Conocimientos previos a las Aplicaciones Web
INTRODUCCION
Antes de realizar un desarrollo exquisito de Aplicaciones Web, una persona corriente
debiera de entrarse en el contexto como tal de manera que nosotros lo realizaremos
resolviendo unos interrogantes que crean dudas y preguntas, que aterrizaran en el
tema a cualquier lector interesado en adquirir las bases conceptuales y
procedimentales necesarias para la Instalación, administración y ejecución de
Aplicaciones Web en diferentes plataformas.
3

4. Conocimientos previos a las Aplicaciones Web
CUESTIONARIO
1. Diseñe uno o varios gráficos en los que se muestre todo el proceso de comunicación
usando el modelo OSI, de la interacción cliente-servidor de una petición Web.
Comience desde que el usuario ingresa la URL en el navegador Web y tenga en cuenta
las consultas a los servidores DNS. Suponga dirección IP privada para el cliente (Dentro
de una LAN) y dirección IP pública para el servidor Web. Puede usar Packet Tracer
como ayuda y analizar la PDU de cada capa del modelo OSI.
2. ¿Cuáles son los puertos bien conocidos del modelo TCP/IP?.
3. ¿Cuáles son los puertos registrados del modelo TCP/IP?.
4. Defina HTTP.
5. Dé un ejemplo real de un diálogo HTTP, de muestre con Wireshark u otro software
capturador de tráfico.
6. ¿Cuáles son los códigos de estado HTTP?.
7. ¿Qué son las cookies?.
8. ¿Cuál es la diferencia entre una aplicación en el lado del cliente una aplicación en el
lado del servidor? Dé ejemplos.
9. Explique la diferencia entre una página Web dinámica y una página Web estática.
10. ¿Cuáles son los elementos y atributos de una estructura HTML?.
11. Cree una tabla en la que muestre las etiquetas y atributos correspondientes a los
siguientes elementos de un documento HTML (Dé ejemplos):
o Inicio y final de un o Texto en negrita
documento HTML o Texto en cursiva
o Cabecera de un o Texto subrayado
documento HTML o Formulario y elementos del
o Título de la página Web formulario
o Cuerpo de la página Web o Código de un script
o Tabla o Insertar una imagen
o Fila o Fuentes
o Columna o Salto de línea
o Hipervínculo o Marcos
o División de la página
12. Ingrese al sitio Web que usted creo, obtenga el código fuente de la página Web e
identifique todas las etiquetas del documento HTML.
13. Consulte la tabla de colores RGB con su correspondiente código hexadecimal.
4

5. Conocimientos previos a las Aplicaciones Web
14. ¿Qué son las hojas de estilo (CSS)?.
15. ¿Qué es una aplicación Web? Realice una lista de 20 aplicaciones Web.
16. Explique los siguientes lenguajes de programación y conceptos relacionados con las
aplicaciones Web:
o PHP
o ASP
o Perl
o Python
o CGI
o .NET
o JSP
17. Define WAMP, LAMP y XAMPP.
18. ¿Qué es una base de datos?.
19. ¿Cuáles son las principales características de SQL?.
20. Cuáles son los principales sistemas de gestión de bases de datos (Explique brevemente
cada uno de ellos).
21. Instale un gestor de base de datos MYSQL en Windows y un gestor de base de datos
MYSQL en Linux. Cree una base de datos y diferentes tablas y campos, mediante un
software de administración gráfica y mediante línea de comandos. Use máquinas
virtuales y evidencie el proceso.
22. Realice una lista de comandos para administrar una base de datos MYSQL.
5

6. Conocimientos previos a las Aplicaciones Web
SOLUCION
1. Es una LAN que se dirige hacia una red exterior en el cual, están los servicios de la
página alojada.
En el Servidor se crea una página estática en una red y se instala un PC en una LAN diferente
para crear una topología similar a la realidad, así observar y probar como se vería la
interacción entre cliente y servidor.
Esta es la PDU de la comunicación entre cliente y servidor, solicitando una re spuesta de la
petición del cliente por una Pagina Web.
6

7. Conocimientos previos a las Aplicaciones Web
2. Los puertos bien conocidos son los identificadores de unos protocolos que ya están
definidos, en puertos lógicos permitir la comunicación con estos. Los puertos son en
números y van del 0 al 1023.
Los mas comunes son:
Puertos Protocolos
20 & 21 FTP
22 SSH
23 TELNET
53 DNS
67 DHCP
80 HTTP
3. Puertos registrados van del 1024 al 49151 y estos son de libre utilización.
4. HTTP es un protocolo de Capa de Aplicación, sus siglas traducen “Protocolo de
Transferencia de Hipertextos”.
Este realiza la transferencia de archivos entre navegador web y un servidor web.
Cuando se escribe un URL realiza una petición y establece conexión con el servicio
web del servidor que usa el protocolo HTTP para transmitir los datos del código de la
página y responde la solicitud al usuario.
5. Con la Herramienta Wireshark podemos capturar el tráfico de la red. En la cual
estamos pidiendo la respuesta desde un Sitio Web.
Estamos viendo en trafico de pregunta y respuesta del cliente servidor respectivamente
para logra recibir gráficamente la Página Web
7

8. Conocimientos previos a las Aplicaciones Web
6. Los códigos de estados HTTP son:
Son códigos numéricos que proporcionan información con respecto al estado en que se
encuentra la solicitud http, se clasifican de la siguiente manera:
Código Descripción
1xx (Respuesta Son códigos en espera, es decir le solicitan al cliente que continúe.
Provisional)
2xx (Correcto) Estos códigos son los que informan los éxitos.
3xx (Redirigido) Son códigos los cuales requieren acciones específicas para
completar mi petición. Para el nuevo direccionamiento.
4xx (Error de Los códigos indican que en la petición hay errores al procesar.
solicitud)
5xx (Error del Los códigos informan errores en el servidor, no en la petición.
servidor)
305 (Usar proxy)
400 (Solicitud incorrecta)
407(Autenticación del Router)
7. Las cookies son una pequeña pieza de información enviada por un sitio web, las cuales
son almacenadas en el navegador del usuario, de esta manera el sitio web puede
consultar dicha información para notificar al sitio de la actividad previa del usuario.
8. La diferencia principalmente entre las aplicaciones manejadas desde cliente y servidor,
seria básicamente que en el cliente este interactúe con la aplicación y sus herramientas
y funciones determinadas por el servidor, mientras que en el servidor se encuentra la
configuración y códigos de la aplicación.
9. Página Web
Estática Dinámica
8

9. Conocimientos previos a las Aplicaciones Web
La página Web dinámica nos permite tener una mejor interacción con la pagina ya que
esta puede contener imágenes videos aplicaciones y demás herramientas para la
interacción con el cliente, mientras que la pagina web estática solo nos muestra un
texto o un contenido definido por el administrador de l a pagina web y no le permite al
usuario mayor acción con esta.
10. Los elementos de una estructura básica de HTML en programación son los siguientes
y esta está delimitada por unos atributos que son los que nos posibilitan definir hasta
dónde puede llegar dicho elemento de programación y como se definirá dicho
elemento y donde se estará ubicado.
Por Ejemplo:
<html>
<head><title>Titulo de Atributo</title></head>
<body>
<p bg color=“Blue”> Esto es un ejemplo de atributo y un elemento </p>
</body>
</html>
Elementos.
Atributo.
11. Algunas etiquetas son:
Inicio y final de un documento HTML <HTML></HTML>
Cabecera de un documento HTML <head></head>
Título de la página Web <title></title>
Cuerpo de la página Web <body></body>
Tabla <table border=“#”></table>
Columna <td></td>
Hipervínculo <a href=“ruta”>nombre de vinculo</a>
División de la página
Texto en negrita <b>texto</b>
Texto en cursiva <i> texto </i>
Texto subrayado <U> texto</U>
Formulario y elementos del <form name=“nombre del fomulario”
formulario method=“metodo”> </form>
Código de un script <script language=“lenguaje”> </script>
Insertar una imagen <img src=“Ruta de la imagen”/>
Fuentes <font face= “letra” color= “color” size=
“tamaño”> texto </font>
Salto de línea <br>
Marcos <frame rows= “#”> </frame>
9

10. Conocimientos previos a las Aplicaciones Web
12. Identificando código fuente.
Inicialmente fue un hipervínculo con <a href>; luego se inicio una tabla con el borde 0 dentro
de un formulario; un titulo tipo uno que utiliza varias columnas, con el atributo colspan. Cada
columna (<td>) es creada dentro de una fila (<tr>). Al frente de cada requerimiento de
información hay un cuadro de texto estos se realizan por medio de la etiqueta <input type
=“text”> que significa que habrá una entrada de texto. Luego la selección de género se logra
mediante una entrada tipo radio. Seguido de esta tenemos una casilla de selección que se
logra con la etiqueta <select> a esta se le da nombre y unas opciones para escoger mediante
(<option value>).
la opción inicial tiene una característica que la indica que es la opcion predeterminada, esta
se configura mediante el atributo selected= “selected” dentro de la misma etiqueta. Luego de
repetir unas casillas de texto tenemos entradas tipo botón que pueden llevar a otro lugar y
borrar todos los datos ingresados. Son entradas <input type= con valores de “reset” y
“submit”>.
13. La tabla de colores RGB es:
10

11. Conocimientos previos a las Aplicaciones Web
14. Las hojas de estilo CSS tienen como idea separar la estructura del documento al de su
presentación.
15. Las aplicaciones web son herramienta codificadas en lenguajes posibles para ser
soportada por los navegadores y este software será para disfrute y servicio de los
usuarios, y es ofrecido mediante el servidor web.
Existen varios tales como:
Webmails U2ws
Tiendas en línea Chat roulette
Wikipedia simpy
Wikis social marks
Weblogs Flock
1link.in Yoono
Remindr 30boxes
Friend or Follow Eventicus
Emisoras online campfire
Fav4 lfoder
16. Conceptos de Bases de Datos y lenguajes de Programación:
PHP es un lenguaje de Programación, con el cual se puede crear contenido dinámico que
permite la conexión a bases de datos.
ASP es un lenguaje de programación creado por Microsoft para elaboración de paginas web
dinámicas.
Perl es un lenguaje de programación interpretado por la Shell, proveniente de lenguajes
tales como C, sh. Este es de libre Uso.
Python es uno de los lenguajes de programación que te permite crear un código elegante,
este ahorra un tiempo considerable en el desarrollo de los programas. El intérprete se
puede utilizar en modo interactivo, lo que facilita experimentar con características del
lenguaje.
CGI es una importante tecnología de la red que permite a un cliente transferir datos entre
cliente y servidor y el programa. Es un mecanismo entre el servidor web y una aplicación
externa cuyo nombre de CGLs.
.NET es un proyecto de Microsoft para crear una nueva plataforma de desarrollo de
software. Con el cual desea desarrollar desde el sistema operativo hasta las herramientas
del mercado.
JSP es una tecnología orientada a crear páginas web con programación en java. Podemos
crear aplicaciones web que se ejecute en variados servidores web, de múltiples
plataformas.
11

12. Conocimientos previos a las Aplicaciones Web
17. WAMP - LAMP - XAMPP:
Son acrónimos para los servidores que usan diferentes herramientas asociadas en un mismo
software:
X Plataforma Windows Linux (Sistema Operativo)
Apache Apache Apache (Servidor Web)
Mysql Mysql Mysql (Base de Datos)
Php, Perl, Python Php, Perl Php, Perl (Language)
Todos son de código abierto menos en Windows ya que este tiene estructura de Internet y
XAMPP es para cualquier plataforma.
18. Las bases de Datos son un gran “almacén” de datos relacionados con un significado
implícito organizada de manera eficiente.
19. SQL ES un lenguaje de ordenes con el que es posible acceder a las bases de datos.
Sus características son:
Soporte de Translaciones.
Escalabilidad, estabilidad y seguridad.
Entorno grafico.
20. Sistemas de Gestión de Bases de datos son tales como:
Mysql: Sistema multiusuarios muy utilizado en aplicaciones web, en plataformas
Linux/Windows.
DBASE: Fue el primer sistema de gestión de datos usados ampliamente para
microcomputadoras DBASE nunca pudo superar exitosamente la transición de Microsoft
Windows y termino siendo desplazado por otros productos.
FileMaker: Es una aplicación multiplataforma de Windows y Mac de base de datos relacional
de FileMaker inc. FileMaker integra el motor de la base de datos con interfaz, esto les facilita a
los usuarios manipular la base de datos al arrastrar.
12

13. Conocimientos previos a las Aplicaciones Web
21. Instalación MYSQL en Linux y Windows:
Windows XP
Iniciamos la instalación de Mysql e indicamos siguiente.
Después de indicar siguiente en parámetros anteriores omitidos, sale la pantalla de
Carga de la instalación.
13

14. Conocimientos previos a las Aplicaciones Web
Se indica configurar las opciones generales de Mysql y finalizar.
Inicio Configuración del servidor Mysql y siguiente.
14

15. Conocimientos previos a las Aplicaciones Web
Indicar parámetros del password del root y finalizamos.
AGREGAR BASE DE DATOS MEDIANTE LINEA DE COMANDOS:
Con el comando créate database, creamos nuestra base de datos en este caso ejemplo y la
visualizamos en la lista mediante el comando show databases.
15

16. Conocimientos previos a las Aplicaciones Web
Pasamos a crear la tabla, primero indicamos con el comando use que base de datos vamos a
utilizar en este caso ejemplo, insertamos la tabla y sus parámetros con la sintaxis créate table
(datos) (nombre varchar (15), apellido varchar (15), teléfono varchar (15)); mediante lo
anterior creamos la tabla con el nombre datos y con los parámetros nombre, apellido y
teléfono.
Varchar indica el tipo de carácter que ira en el campo en este caso cualquiera, con un limite de
15.Finalizando se visualiza la tabla con describe datos.
Insertamos información en la tabla mediante la sintaxis INSERT INTO datos (nombre, apellido,
teléfono) VALUES (“camilo”, “Paniagua”, “2364097”); esto ingresa en el campo nombre
camilo, apellido Paniagua, teléfono 2364097 y visualizamos el contenido de la tabla con el
comando select * from datos;.
16

17. Conocimientos previos a las Aplicaciones Web
Linux CentOS
Se instalan los paquetes del servidor Mysql.
Por seguridad nos pide una contraseña para el usuario root, la cual debemos confirmar.
17

18. Conocimientos previos a las Aplicaciones Web
Descargaremos el phpmyadmin que controlara el modo grafico.
Se escoge el servidor que ejecutara el phpmyadmin.
18

19. Conocimientos previos a las Aplicaciones Web
Aceptamos la configuración de las bases de datos para la facilidad de la manipulación.
Indicamos la contraseña que manejara el root.
19

20. Conocimientos previos a las Aplicaciones Web
Se incluye en el archivo apache.conf de la ruta del phpmyadmin para que el servidor la
identifique, se reinicia el apache.
Digitamos en el navegador /local host/phpmyadmin, cambiamos el lenguaje e ingresamos
usuario root y contraseña.
20

21. Conocimientos previos a las Aplicaciones Web
En el espacio donde esta el cursor se escribe el nombre de la nueva base d e datos y las
características de cotejamiento para que haya un optimo funcionamiento, el tipo de
codificación que usamos es la utf8_general_ci que es la del lenguaje español.
Le indicamos crear una tabla dentro de la base de datos ya creada para almacenar la
información (se pueden crear miles de bases de datos).
21

22. Conocimientos previos a las Aplicaciones Web
Esta es la configuración de los atributos de la tabla, se indica el nombre del atributo, tipo de
carácter, longitud y cotejamiento.
22

23. Conocimientos previos a las Aplicaciones Web
En modo consola se ingresa al Mysql con la opcion -u indicando el usuario root y con la
opcion -p la contraseña para próximamente ingresarla, Con el comando créate database,
creamos nuestra base de datos.
Pasamos a crear la tabla, primero indicamos con el comando use que base de datos vamos a
utilizar en este caso ejemplo, insertamos la tabla y sus parámetros con la sintaxis créate table
tabla(Documento int(15), Nombre text(15), Apellido text (15)); mediante lo anterior creamos
la tabla con el nombre tabla y con los parámetros documento, nombre y apellido.
TEXT indica que el tipo de carácter que ira en el campo en este caso será texto (letras), y
dentro de los paréntesis se ubica su longitud límite. INT indica caracteres numéricos.
Insertamos información en la tabla mediante la sintaxis:
INSERT INTO tabla (Documento, Nombre, Apellido) VALUES (“9412092464”, “Juan”
“Paniagua”); esto ingresa los valores en su columna respectiva.
22. Estos serán algunos comandos básicos para manejar Mysql.
Comando Función
Show databases; Ver las bases de datos creadas.
Show tables; Ver las tablas creadas.
Show columns from tabla; Ver la configuración de la tabla.
Describe tabla; Ver la configuración de la tabla.
Use base de datos; Usar una Base de Datos.
Créate table tabla (col1 tipo(lon.), col2 Crear Tabla.
tipo(lon.));
Créate base de datos; Crear Base de Datos.
Drop table tabla; Borrar una tabla.
Drop date base base de datos; Borrar una Base de Datos.
Select columnas from tabla where condisión; Seleccionar datos de una tabla.
Insert into table(col1, col1) values(“dato”, Introducir datos en una table.
“dato”);
23

24. Conocimientos previos a las Aplicaciones Web
WEBGRAFÍA
Sicrono.com
Socialblabla.com
Htmlpoint.com
Masadelante.com
Alegsa.com.ar
Wikipedia.org
Desarrolloweb.com
24