PRACTICA 003: Pagina web(FrontEnd
y BackEnd)
Ing. Honoria Reyes Macedo
Editor:
Block de notas, Atom, Dreamweaver
Editor
de XML: XMLNotepad
Navegador
web: Chrome, Firefox, safari, edge…
Tecnologias
web: HTML, CSS, XML, Java Script
Servidor Web: Apache o IIS
Servidor Web: Apache o IIS
INTRODUCCION
El objetivo de esta
práctica es identificar la ubicación de los sitios web en nuestro equipo,
guardar una página web(con frontend y backend) y ejecutarla en un navegador.
Los proyectos para web
se ubicarán de acuerdo al Servidor Web que se utilice, por ejemplo:
- El sitio web default para
IIS(Internet Information Services) en Microsoft
(se usa tambien para proyectos web en Visual
Studio)
C:\inetpub\wwwroot
- El sitio web para Apache
en XAMPP
C:\xampp\htdocs
- El sitio web para Apache
en Netbeans
C:\Program
Files\apache-tomcat-9.0.30\webapps
Nota: Cuando hacemos
modificaciones del código y queremos probar de nuevo, debemos
borrar la cache del
navegador: ver la letra C del anexo de esta práctica.
ACTIVIDADES
1. Revisar Sitio web del
servidor IIS
Entrar al Administrador de Equipos
Observar en la parte derecha las acciones:
Nota: Si no tienes acceso al Administrador de Internet:
Activarlo en las características de Windows
1.1 En la parte de “Acciones”
al dar click en “Explorar”
Te presenta el sitio web
por default del servidor IIS
La carpeta "wwwroot" contendrá
los proyectos web
1.2.- En la parte de “Acciones”
Dar click en “Examinar
sitio web” (Observa que tiene el puerto
80 por default)
Te presenta la información del
servidor IIS en el navegador, en este caso Chrome
2.- Trabajar en la práctica
anterior
2.1 En la carpeta “img”,
copiar una foto
2.2 En el archivo “materias.xml”
Con el editor XML
Notepad
Agregar un elemento “foto” como
hijo de “alumno”
Colocar el valor(parte derecha) à el nombre de la imagen copiada en la carpeta img
2.3 Crear un archivo “scriptLeeXML.js” en la carpeta “js”
Observa que utiliza
una función Abrir(), para dar acceso
al XML y lo asigna a una variable xmlDoc.
Utilizamos la
variable xmlDoc para extraer los elementos y atributos del XML.
Hacemos una cadena con los
valores del XML en txtHtml, el cual
se asignará al id “mostrar” del
archivo html
2.4 En el archivo “leealumnoXML.html” àCapturar las líneas sombreadas y comentar la section “alum”
2.5 Capturar las líneas sombreadas
en el archivo “estilopagina.css”
3.- Identificar en que servidor web se ejecutara:
3.1.- LOS QUE EJECUTAN EN SERVIDOR APACHE
En XAMPPà Iniciar el servidor apache (Ver anexo de como iniciarlo)
En XAMPPà Iniciar el servidor apache (Ver anexo de como iniciarlo)
3.1.1 La
práctica deberá estar en el sitio web de Apache “C:\xampp\htdocs”
3.1.2 Ejecutar en el navegador (En este equipo esta en el
puerto 8090)
3.2.-
3.2.1 La práctica deberá estar en el sitio
web “C:\inetpub\wwwroot”
3.2.2 Al ejecutar en el navegador (Por default tiene puerto
80)
http://localhost/practica3_xml/leealumnoXML.html
************************0**0*******************************
*********************000*****000****************************
ANEXO: "INICIAR SERVIDOR WEB"
Tenemos dos opciones de servidores web
A)
Servidor
Apache de XAMPP o
B)
Servidor
IIS de Microsoft
A) Iniciar el servidor
Apache de XAMPP
Doble click enà c: /xampp/xampp-control.exe
Seleccionar el botón Start
Observar que el
puerto que activa ( en este caso utiliza 8090)
Nota: Si necesitas cambiar el puerto porque está ocupado:
En Config +
Apache(httpd.conf) cambiar el puerto
en “Listen”
B) Iniciar el servidor
IIS de Microsoft
Entrar al
Administrador de Equipos
En la parte de
Acciones à Seleccionar Iniciar
Observar que el
puerto que activa (por default es el 80 )
CONFIGURAR IIS
EN LAS CARACTERISTICAS DE WINDOWS:
************************0**0*******************************
*********************000*****000****************************
ANEXO: "REFRESCAR CACHE DEL
NAVEGADOR"
Borrar la cache del
web browser (Para evitar errores al
refrescar el sitio web creado)
En el navegador :
************************0**0*******************************
*********************000*****000****************************
ANEXO: CREAR OTRO SITIO
WEB
Cuando se tiene
un dominio y se crea su sitio web
******************************************
ANEXO "DE
ERRORES":
INSPECCIONAR --> Con mouse derecho sobre el navegador
ERRORES COMUNES:
A) Cuando no
encuentra el archivo materias.xml
B) Cuando le falta
algún elemento a materias.xml, y se está ocupando en el js
C) Los elementos
no deben llevar acentos(en XML ni en el código js)
D) No reconoce el
formato jpeg de imagenes
E) Cuando no abre
el XML por errores de escritura “mixml”
F) No reconoce a "alumno" como hijo de
"alumno"
G) No se ejecuta desde el navegador con “localhost”: http://localhost/practica_xml/leealumnoXML.html
---------------------------------------0--0------------------------------------------------------
----------------------------------------~--------------------------------------------------------
-----------------------------------000---000---------------------------------------------------
