Unidad I: Fundamentos de sitios Web

Fundamentos de sitios Web
Unidad Temática I
Desarrollo de Aplicaciones Web
Presenta:
M.I.S.D. Luis Miguel Zapata Alvarado
Cuatrimestre: Mayo – Agosto 2013
Unidad Temática I
Fundamentos de sitios Web
•
•
•
•
Horas Prácticas: 24
Horas Teóricas: 6
Horas Totales: 30
Objetivo: El alumno desarrollará un sitio web
a través de una metodología y el lenguaje
XHTML para su publicación.
Temas
• Entorno de las aplicaciones Web (Internet,
Intranet y Extranet)
• Metodología de desarrollo y publicación de
un Sitio Web
• Lenguaje XHTML
Pregunta de diagnóstico
• Describe el proceso que se sigue para que en
la PC en la que estoy trabajando pueda
visualizar en el navegador IE el sitio Web:
http://cramac.com.mx
– Menciona los medios, aparatos, protocolos, capas,
normas, lenguajes de etiquetas, etc. que son
necesarios para lograrlo.
Entorno de las aplicaciones Web
(Intranet, Extranet e Internet)
• Intranet
– Es una red de computadoras privada basada en los
estándares de Internet.
– Enlaza recursos informativos de una organización,
desde documentos de texto a documentos
multimedia y bases de datos.
– Las Intranets incluyen sistemas de seguridad.
– Una Intranet puede extenderse a través de
Internet.
Entorno de las aplicaciones Web
(Intranet, Extranet e Internet)
• Intranet
– Es un Internet interno diseñado para ser utilizado
en el interior de una empresa, universidad, u
organización.
– Lo que distingue a un intranet del Internet de libre
acceso es el hecho de que el intranet es privado.
Gracias a los intranets, la comunicación y la
colaboración interna son más fáciles.
Entorno de las aplicaciones Web
(Intranet, Extranet e Internet)
• Intranet
Entorno de las aplicaciones Web
(Intranet, Extranet e Internet)
• Extranet
– Es una Intranet que se extiende más allá de los
límites físicos de una corporación.
– Las Extranets dan acceso a vendedores,
proveedores y distribuidores a la Intranet de una
compañía. Las compañías los incluyen para
facilitar la transferencia de información.
Entorno de las aplicaciones Web
(Intranet, Extranet e Internet)
• Extranet
– Proporciona acceso al sistema de información
para personas que están fuera de la empresa, a
través de una autenticación simple (mediante
nombre de usuario y contraseña) o autenticación
sólida (mediante un certificado). Se recomienda
usar HTTPS.
– Provee, acceso privilegiado a determinados
recursos informáticos de la empresa a través de
una interfaz Web.
Entorno de las aplicaciones Web
(Intranet, Extranet e Internet)
• Extranet
Entorno de las aplicaciones Web
(Intranet, Extranet e Internet)
• Internet
– Es un método de interconexión descentralizada de
redes de computadoras implementado en un
protocolo denominado TCP/IP, el cual garantiza
que redes físicas heterogéneas funcionen como
una red lógica única de alcance mundial.
Entorno de las aplicaciones Web
(Intranet, Extranet e Internet)
• Internet
– Sus orígenes se remontan a 1969, cuando se
estableció la primera conexión de computadoras,
conocida como ARPANET, entre tres universidades
en California y una en Utah, EE.UU.
– Algunos de los servicios disponibles en Internet:
Web 2.0, SSH, telnet, FTP, SSR, chats, Podcast,
P2PTV, Videocast, los juegos en línea y las redes
sociales.
Entorno de las aplicaciones Web
(Intranet, Extranet e Internet)
• Internet
Metodología de desarrollo y
publicación de un Sitio Web
•
Las metodologías imponen un proceso
disciplinado sobre el desarrollo de software
con el fin de hacerlo más predecible y
eficiente. Lo hacen desarrollando un proceso
detallado con un fuerte énfasis en planificar
inspirado por otras disciplinas de la
ingeniería.
Metodología de desarrollo
• Todo proyecto, para completarse de
manera exitosa, debe seguir una
metodología probada y basada en la
experiencia que guie el proceso de
desarrollo hasta alcanzar los objetivos
propuestos.
Metodología de desarrollo
• Método Clásico
–
–
–
–
–
Estudio de la Web
Estructura de la Web
Aspecto de la Web
Programación Web
Pruebas
Metodología de desarrollo
• Estudio de la Web
– Antes de empezar a diseñar nada debemos
hacer un estudio del sitio Web que nos han
encargado. Es decir, tener muy claro quién es
nuestro cliente, a quien va dirigido y como lo
vamos a realizar.
– El resultado de este paso es una lista de
objetivos a cumplir durante el resto del
desarrollo del sitio Web.
Metodología de desarrollo
• Estructura de la Web
– Es básicamente el contenido del sitio Web
ordenado jerárquicamente de manera que se
vea claramente como están relacionadas o
enlazadas las páginas y secciones. No es lo
mismo un diseño con cuatro secciones que con
cuarenta.
Metodología de desarrollo
• Aspecto de la Web
– Lo primero que debemos hacer es plasmar
nuestras ideas en forma de bocetos con lápiz y
papel.
– Segundo, abrir nuestro programa de diseño
favorito y definir con precisión el aspecto del
sitio Web.
– Tercero, cuando tengamos el diseño ya
terminado podemos enseñárselo al cliente,
realizar los cambios que nos pida rápidamente y
pasar al siguiente paso.
Metodología de desarrollo
• Aspecto de la Web
Metodología de desarrollo
• Programación Web
– En este paso se escribirán todas las líneas de
código JavaScript y/o de algún lenguaje de
servidor como PHP, JSP, ASP necesarias para
dinamizar la Web.
Metodología de desarrollo
• Pruebas
– Aunque las pruebas para la correcta
visualización y funcionamiento del sitio Web
comienzan desde el diseño, es obligatorio
reservar un tiempo al final para dedicarlo
exclusivamente a esta labor.
– Esta etapa resultará mucho más eficaz si se
cuenta con el apoyo de personas que no hayan
estado implicadas en el proceso de desarrollo
del sitio Web.
Homework #1
• Desarrollar la maqueta del tema de su
proyecto final (Utilizando MS PowerPoint), la
cual deberá incluir:
– Portada (Matricula, nombre, grupo, etc.)
– Estudio de la Web (objetivo del sitio, a quien va
dirigido, diagrama de actividades, editor a utilizar)
– Estructura de la Web (orden jerárquico y enlaces
de las páginas y secciones/menú)
– Aspecto de la Web (bosquejo del diseño de las
páginas )
• Nota: Convertir su archivo a PDF
Publicación de un Sitio Web
• El primer paso para publicar nuestro sitio
Web es buscar un hospedaje para el mismo,
es necesario que a la hora de iniciar la
búsqueda se tengan claros los aspectos
siguientes:
• ¿Que tipo de sitio voy a crear?
– Estático: No nos será necesario tener soporte
para base de datos.
– Dinámico: Necesitamos tener soporte para base
de datos
Publicación de un Sitio Web
• Herramientas de apoyo:
– Las herramientas que proveen para
apoyarnos en la creación y
mantenimiento, aunque se puedan
trabajar con herramientas instaladas en
nuestra PC y luego subir las paginas al
servidor.
– Buscar un servidor donde se pueden
realizar conexiones ftp, ya que nos
ahorrara bastante tiempo al subir y bajar
los archivos.
Publicación de un Sitio Web
• Para nuestra asignatura debemos
buscar un hospedaje que soporte PHP y
MySQL.
• El proceso de registro es similar al de un
correo electrónico.
• Ejemplo de hosting gratuito:
Publicación de un Sitio Web
• Dominio de Internet / Asignación de
direcciones URL
– Es un nombre base que agrupa a un conjunto de
equipos o dispositivos y que permite
proporcionar nombres de equipo más fácilmente
recordables en lugar de una dirección IP
numérica. Permiten a cualquier servicio (de red)
moverse a otro lugar diferente en la topología de
Internet, que tendrá una dirección IP diferente.
Publicación de un Sitio Web
• Ejemplo de un dominio / dirección URL
– http:www.utzac.edu.mx
World Wide Web
Protocolo de transferencia
de hipertexto (HyperText
Transfer Protocol)
México
Educación
Universidad Tecnológica del
Estado de Zacatecas
Publicación de un Sitio Web
Dominos
País
com-comercial
br-Brazil
org-organización
mx-México
edu-educación
es-España
Info-información
ve-Venezuela
mil-militar
us-United States
net-networking
ar-argentina
gob-bierno
gr-grecia
Publicación de un Sitio Web
• Ejemplos de dominios
– http://www.tvazteca.com/
– http://www.gob.mx
– http://www.zacatecas.gob.mx/
– http://www.greenpeace.org/international/
– http://www.whitehouse.net/
– http://www.programacion.net/
– http://www.disneylatino.com/index-flash.html
Publicación de un Sitio Web
• Organizaciones regentes de los dominios de
Internet
– ICANN La Corporación de Internet para la
Asignación de nombres y números de Dominios
(del Inglés: Internet Corporation for Assigned
Names and Numbers) es una organización sin
fines de lucro que opera a nivel internacional,
responsable de asignar espacio de direcciones
numéricas de protocolo de Internet (IP),
identificadores de protocolo y de las funciones de
gestión del sistema de nombres de dominio.
Publicación de un Sitio Web
• El registro de dominios es el proceso por el
cual una persona pasa a tener el control
sobre un nombre de dominio, a cambio de
pagar una cuota anual a un registrador de
dominios.
• El registrante (una persona) busca un
dominio aún no registrado.
• Elige un registrador (empresa) que ofrezca
este tipo de dominios.
Publicación de un Sitio Web
• Sigue el proceso de compra desde la página
Web del registrador:
– Elige el dominio.
– Da sus datos personales.
– Elige el tiempo por el que los compra (1 o
más años).
– Al final los paga, normalmente con tarjeta
de crédito (o también por transferencia
bancaria)
Publicación de un Sitio Web
• El registrante tiene que esperar un tiempo
hasta que los cambios surtan efecto.
– El registrador contacta con InterNIC y acaba el
proceso con ellos, de forma transparente para el
registrante.
– Se avisa al registrante de que se ha hecho el
registro sin problemas.
• El nuevo dominio funciona, y resuelve a la IP
apropiada en el servidor DNS usado, pero no
en el resto de servidores DNS del mundo.
Publicación de un Sitio Web
• Poco a poco se va propagando el cambio al resto de
servidores (propagación DNS). Como cada uno tiene
distintos tiempos de actualización y parámetros de
caché distintos, pasan varias horas (es difícil
predecir cuántas) hasta que todos los servidores
DNS del mundo conocen cómo hacer la resolución
del dominio.
• La página ya es accesible mediante un nombre de
dominio desde cualquier PC.
Publicación de un Sitio Web
• Por lo tanto la administración de un sitio
Web consiste en:
1. Crear y/o editar/modificar páginas en el disco
local de nuestro propio equipo.
2. Después conectarnos a un servidor Web
remoto (host) donde las vamos a alojar y,
3. a continuación, cargar una copia del sitio Web
y los documentos (páginas, imágenes, etc.) que
contiene en el servidor para ponerlas a
disposición pública
4. y que el servidor los "sirva".
Publicación de un Sitio Web
Publicación de un Sitio Web
Publicación de un Sitio Web
• Homework #2:
Tu turno
– Busca un sitio que ofrezca el servicio de
hospedaje gratuito/free hosting que
soporte PHP y MySQL regístrate para dar
de alta una cuenta.
– Enviar su URL a la plataforma Moodle
Publicación de un Sitio Web
• Homework #3
– Investigar el costo para contar con un
dominio, hospedaje sitio Web (hosting) que
soporte PHP y MySQL, por un año. En por
lo menos tres empresas (Mexicanas).
– Enviar sus cotizaciones en formato PDF a la
plataforma Moodle
Lenguaje XHTML
• XHTML (eXtensible Hypertext Markup
Language)
– Nace con el objetivo de remplazar a HTML ante la
llegada al mercado de un gran número de
dispositivos, ya que va a permitir una correcta
interpretación de la información
independientemente del dispositivo desde el que
se accede a ella.
Lenguaje XHTML
• El objetivo de XHTML es avanzar para lograr
una web semántica, donde la información, y la
forma de presentarla estén claramente
separadas.
– En su versión 1.0, XHTML es solamente la
versión XML de HTML, por lo que tiene,
básicamente, las mismas funcionalidades, pero
cumple las especificaciones, más estrictas, de
XML.
Lenguaje XHTML
• XML, Extensible Markup Language, es
un metalenguaje que no ha nacido sólo para
su aplicación en Internet, sino que se propone
como un estándar para el intercambio de
información estructurada entre diferentes
plataformas.
– Se puede usar en bases de datos, editores de
texto, hojas de cálculo etc. ya que permite la
compatibilidad entre sistemas para compartir la
información de una manera segura, fiable y fácil.
Lenguaje XHTML
• XHTML, al estar orientado al uso de un
etiquetado correcto, exige una serie de
requisitos básicos a cumplir en lo que a código
se refiere. Entre estos requisitos básicos se
puede
mencionar
una
estructuración
coherente dentro del documento donde se
incluirían elementos correctamente anidados,
etiquetas en minúsculas, elementos cerrados
correctamente,
atributos
de
valores
entrecomillados, etc.
Diferencias entre HTML y XHTML
Incorrecto
<br>
<p>
Correcto
<br></br>
<p></p>
<em><strong>Texto</em></strong> <em><strong>Texto</strong></em>
<td rowspan=3>
<td rowspan="3">
<td rowspan='3'>
<A
HREF="http://www.domname.com">Domname</
A>
<a
href="http://www.domname.com">Domname</
a>
<textarea readonly>Solo-
<textarea readonly="readonly">Sololectura</textarea>
lectura</textarea>
<font color="#0000FF">Blue
<span style="color: #0000FF;">Blue
text</span>
text</font>
<em><h2>Título</h2></em>
<h2><em>Título</em></h2>
Lenguaje XHTML
• Código de elementos anidados:
– <p>Ejemplo de elementos bien <em>anidados</em>.</p>
– <p>Ejemplo de elementos mal <em>anidados</p>.</em>
• Interpreta las mayúsculas y las minúsculas de forma
diferente.
– <body>Ejemplo correcto</body>
<BODY>Ejemplo incorrecto</BODY>
• Los elementos necesitan etiquetas de cierre:
– <p>Ejemplo correcto.</p>
<p>Ejemplo incorrecto.
Ejemplo XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<title>El primer documento XHTML</title>
</head>
<body>
<p>El lenguaje XHTML es <strong>tan sencillo</strong> que practicamente
se entiende sin estudiar el significado de sus etiquetas principales.</p>
<p>Ademas de textos en <strong>negrita</strong>, tambien se pueden
poner <em>en cursiva</em> o <del>tachados</del>.</p>
</body>
</html>
Ejemplo XHTML
Práctica
• Entrar a la siguiente dirección Web, leer los
14 capítulos que contiene el sitio, después en
un editor de texto crear una tabla con dos
columnas, en la primera establecer las
diferentes etiquetas que se encuentren a lo
largo de los ejercicios del capítulo 15 y en la
segunda columna redactar la descripción de
lo que hace cada <etiqueta>.
– http://www.librosweb.es/xhtml/index.html
• Homework #4
– Investigar que proceso se sigue para que los
buscadores (google-yahoo) encuentren mi sitio
Web cuando se teclee la frase: ”accesorios de
autos”.
Primer Avance del Proyecto Final
Homework #5
• Subir a su cuenta creada en la tarea #2, su
sitio Web creado en XHTML en el editor Web
de su preferencia. El cual deberá contar con:
– Index/inicio (objetivo del sitio)
– Sección principal (ustedes la definen)
– Contacto (teléfono, mail, ubicación)
– Una carpeta donde se almacene todas las
imágenes del sitio