Desarrollo y Programación Web.

VII Semestre - FADU

LDG MA Carlos Durán Hernández

 Unidad 1
Web e Internet.
Objetivo.- Analizar e identificar la diferencia entre
web e internet, la tipología de la web, así como los
temas de usabilidad, accesibilidad y la arquitectura de
la información.
1.1.- Introducción al Diseño
y desarrollo Web
TCP/IP

Es un conjunto de protocolos de red que las

computadoras usan para comunicarse a través
de Internet, así como redes IP privadas.

Es un estándar de red que de ne las reglas para

el intercambio de datos entre ordenadores y le
permite acceder a Internet cada vez que necesita
enviar un mensaje o recibir información de otro
ordenador host.
fi
HIPERTEXTO

El hipertexto es una herramienta de software con

estructura no secuencial que permite crear, agregar,
enlazar y compartir información de diversas
fuentes por medio de enlaces asociativos.
HTML

Siglas de HyperText Markup Language («lenguaje

de marcas de hipertexto»), hace referencia al
lenguaje de marcado para la elaboración de
páginas web. Es un estándar que, en sus diferentes
versiones, define una estructura básica y un código
(denominado código HTML) para la definición de
contenido de una página web, como texto,
imágenes, etc.
XHTML

XHTML es un lenguaje similar a HTML, pero con

algunas diferencias que lo hacen más robusto y
aconsejable para la modelación de páginas web.
Las siglas corresponden con las palabras inglesas
eXtensible Hypertext Markup Language, que
vendría a significar en castellano algo así como
lenguaje extensible de marcación hipertexto.
CSS

Las hojas de estilo en cascada o (Cascading Style

Sheets, o sus siglas CSS) hacen referencia a un
lenguaje de hojas de estilos usado para describir
la presentación semántica (el aspecto y formato)
de un documento escrito en lenguaje de marcas.
Su aplicación más común es dar estilo a páginas
webs escritas en lenguaje HTML y XHTML, pero
también puede ser aplicado a cualquier tipo de
documentos XML, incluyendo SVG y XUL.
ETIQUETAS

El HTML se escribe en forma de «etiquetas»,

rodeadas por corchetes angulares (<,>). HTML
también puede describir, hasta un cierto punto, la
apariencia de un documento, y puede incluir o
hacer referencia a un tipo de programa llamado
script, el cual puede afectar el comportamiento de
navegadores web y otros procesadores de HTML.

<etiquetas>
JAVASCRIPT

Es un robusto lenguaje de programación que se

puede aplicar a un documento HTML y usarse para
crear interactividad dinámica en los sitios web. Fue
inventado por Brendan Eich, cofundador del
proyecto Mozilla, Mozilla Foundation y la
Corporación Mozilla.
Se puede hacer casi cualquier cosa con JavaScript.
Desde pequeñas cosas como carruseles, galerías de
imágenes, diseños uctuantes, y respuestas a las
pulsaciones de botones, hasta crear juegos,
animaciones 2D y grá cos 3D, aplicaciones
integradas basadas en bases de datos, etc.
fl
fi
JQUERY

Es una biblioteca de JavaScript, creada inicialmente

por John Resig, que permite simplificar la manera
de interactuar con los documentos HTML,
manipular el árbol DOM (Document Object Model),
manejar eventos, desarrollar animaciones (FLV) y
agregar interacción con la técnica AJAX a páginas
web.
FTP

FTP (siglas en inglés de File Transfer Protocol, 'Protocolo de Transferencia de

Archivos') en informática, es un protocolo de red para la transferencia de archivos
entre sistemas conectados a una red TCP (Transmission Control Protocol), basado
en la arquitectura cliente-servidor. Desde un equipo cliente se puede conectar a un
servidor para descargar archivos desde él o para enviarle archivos,
independientemente del sistema operativo utilizado en cada equipo.
CÓMO FUNCIONA?
RECURSOS GRATUITOS

www.w3schools.com

www.maestrosdelweb.com

www.cristalab.com
MÁS RECURSOS GRATUITOS

www.lipsum.com
1.2.- Qué es la Web y
cómo funciona.
World Wide Web - WWW

World Wide Web (WWW) o Red informática

mundial, comúnmente conocida como la web, es un
sistema de distribución de documentos de
hipertexto o hipermedios interconectados y
accesibles vía Internet. Con un navegador web, un
usuario visualiza sitios web compuestos de páginas
web que pueden contener texto, imágenes, vídeos
u otros contenidos multimedia, y navega a través
de esas páginas usando hiperenlaces.
El servicio WWW, es el servicio multimedia de
Internet más extendido. Fue desarrollado en el
CERN (Centre Européen de la Recherche Nucléaire,
Suiza) en 1992 y desde entonces se ha extendido
hasta ser uno de los servicios más populares de
Internet. Los primeros servicios de Internet se
basaban en texto y no eran muy intuitivos. Por
ello se comenzó a desarrollar en el CERN suizo, un
servicio que permitiera la inclusión de cualquier
tipo de contenido multimedia y que fuera cómodo
de utilizar.
DIFERENCIA ENTRE WEB E INTERNET.

Se suelen definir estos dos términos como

sinónimos, y no lo son.

Mientras el internet es una red de computadoras

interconectadas a nivel mundial, la web es la
enorme colección de páginas que se asienta sobre
esa red.

Podemos compararla con una carretera, que viene

siendo la internet (la infraestructura), en donde lo
que viaja por esa infraestructura son los coches
(los contenidos de las páginas web).
ELEMENTOS DEL SERVICIO WEB

HTTP El protocolo http es el protocolo utilizado para la transferencia de páginas

Web. Éste es el protocolo con el que se entienden cliente y servidor y por
medio de él puede recibirse información de todo tipo (texto, grá cos, etc.),

HTML Es un lenguaje de de nición de páginas con extensiones hipertextuales

portable a cualquier tipo de plataforma grá ca. Tiene la ventaja de ser muy
sencillo y potente, pues permite combinar imágenes, textos y enlaces. La
Web es en realidad una red de servidores dentro de Internet que ofrecen
páginas hipertextuales en formato html.
fi
fi
fi
URL Es el mecanismo con el cual la Web asigna una dirección única a cada uno
de los recursos de información localizado en cualquier lugar de Internet.
Consiste en un código que contiene la identi cación del servicio, la dirección
del servidor (se puede especi car hasta el número de puerto), y, si es
necesario, el directorio donde se encuentran los cheros dentro del servidor.
De esta forma se direccionan los recursos accesibles a través de un
navegador Web. El formato general de una URL es el siguiente:

protocolo o servicio://dirección de la máquina:puerto/directorio/ chero

fi
fi
fi
fi
 atom://tree-view

Protocolo o servicio: especi ca el protocolo a utilizar para acceder al objeto. Puede ser uno
de los siguientes:

telnet:// acceso remoto usando protocolo telnet

tn3270:// acceso remoto usando protocolo telnet con emulación 3270;
ftp:// transferencia de cheros;
gopher:// información en modo texto basado en menús;
news: grupos de interés
le:// acceso a cheros

Dirección de la máquina y puerto: identi can la máquina y el puerto. La dirección de la

máquina se puede especi car tanto en formato numérico IP o mediante su nombre de
dominio. El campo que hace referencia al puerto puede eliminarse si el servicio está en su
puerto estándar.

El directorio o camino (path): Aquí se especi ca la localización del recurso dentro del
servidor de Web.
fi
fi
fi
fi
fi
fi
fi
 Ejemplos:

http://www.uat.edu.mx

ftp://ftp.uat.edu.mx

Navegadores Son los programas que se utilizan para 'navegar' por las páginas Web
distribuidas por Internet. Los más conocidos son: Google Chrome, FireFox y
Safari, este último enfocado mas a la plataforma Mac. Son de muy fácil
manejo y, además, suelen integrar programas que acceden a otros servicios
como el correo electrónico o las news.
LOS DOMINIOS Y SUS TIPOS.

El dominio es el nombre exclusivo y único que se le

da a un sitio web, con la finalidad de ser
identificado fácilmente por el internauta y pueda
navegar por él. Su nombre es único e irrepetible.

Su importancia radica en la presencia global de la

marca, cuanto mas corto y mas directo, más fácil
será recordado e identificado.

www.tuempresa.com
Dominios de Nivel Superior Genéricos (gTLD, generic Top-Level Domain)
Este tipo de dominios son los de uso común y más utilizados a nivel mundial,
no se ajustan a un país determinado y sus terminaciones de nen el concepto
para el cual se utilizan:

.com - sitio comercial

.net - empresa de servicios de internet
.org - organización sin nes de lucro
.info - sitio informativo
.biz - sitio de negocios
.tv - sitio de streaming
fi
fi
Dominios de Nivel Superior Geográ co (ccTLD, country code Top-Level Domain)
Son conocidos también como dominios territoriales y son usados por países o
territorios dependientes; se componen de dos caracteres.

fi
 Dominios de Tercer Nivel
Son aquellos que resultan tras combinar un dominio genérico (gTLD) y uno
geográ co (ccTLD); los alcances del dominio genérico es delimitado por el
dominio territorial.

Ejemplos de dominios de tercer nivel en México:

.com.mx - usado para entidades comerciales

.net.mx - empresa de servicios de internet
.org.mx - organización sin nes de lucro
.edu.mx - instituciones educativas
.gob.mx - entidades gubernamentales

Para las instituciones educativas y de Gobierno, el registro de los dominios .edu.mx y .gob.mx es
gratuito o a precio preferencial demostrando que son una de éstas entidades.
fi
fi
 Subdominio
El subdominio es un derivado del dominio principal que se crea añadiendo a su
izquierda una o varias palabras separada(s) por un punto, dando acceso directo
a una determinada sección del Sitio Web. El subdominio más común es el www.

Un subdominio puede utilizarse para varios nes:

• Acceso a la administración del Sitio. Este es el uso más común, un ejemplo
sería https://admin.dominiomuestra.com
• Dar acceso a una sección en particular del sitio web. Ej.: http://
blog.dominiomuestra.com
• Clasi car la información por productos o servicios, ubicación geográ ca o por
idioma, por ejemplo: https://es.wikipedia.org (Wikipedia en español); https://
pt.wikipedia.org (Wikipedia en portugués).
fi
fi
fi
TIPOS DE PÁGINAS WEB

Por su construcción.
Esta a su vez se dividen en:

• Estáticas.- Son las que no necesitan variar contenidos, ya que su

finalidad radica en mostrar la información básica de la empresa o
negocio. Suelen estar construidas con HTML.

• Dinámicas.- son más complejas porque muestran información básica

pero también sus contenidos varían en función de la interacción del
usuario, y que además, necesitan una actualización periódica. Además
de HTML, mayoritariamente están construidas con software abierto
CMS, que permite ese dinamismo en las actualizaciones.
¡¡¡Ojo!!!

Estáticas y dinámicas no tienen que ver con animación!! ;)

Según su tecnología.
Existen diferentes programas y lenguajes que nos ayudan a crear sitios web de
diferentes formas, dependiendo de el efecto que queramos conseguir en el
usuario, también de las características de la empresa, además de otras variables
como el presupuesto y la vigencia. Sin embargo se pueden clasi car
básicamente en estáticas y animadas (no confundir con la tipología anterior).

Según su función.
Existen muchos tipos de web tipi cados por su función, entre los que destacan:

-Institucionales o de negocio. -Comercio electrónico

-Personales o portafolio. -Portales
-Micrositios -Noticias o revista
-Blogs -Wiki o foros de comunidades
-Educativos -Redes Sociales
fi
fi
Institucionales o de negocio.
El mas convencional y común de todos. Dan información básica sobre su
marca, producto o servicio: desde cuándo existe, cuál es su misión y valores,
dónde tiene presencia, sus diferenciadores; es el que cualquier empresa o
negocio debe tener.

Sitios personales o Portafolios.

Los profesionales independientes también pueden crear y bene ciarse con
sitios web personales que muestren su trabajo, colaboraciones y logros. Alacraña
Ayudan a mostrar el CV de una manera atractiva, fácil de comprender www.alacrannna.com

Micrositios.
Se dedica a dar información sobre una línea de producto o una campaña
publicitaria, y en muchas ocasiones tiene una fecha de caducidad. Su nalidad
es dar información detallada sobre un producto, un evento, un negocio. Aunque
puede estar ligada al sitio web o cial de una marca o empresa, el micrositio
tiene su propia URL. Lo usan empresas que desean alcanzar objetivos de
marketing especí cos.
fi
fi
fi
fi
Blog.

Pueden ser la versión digital de los diarios o bitácoras. Su tono es informal,

buscan contar una historia o, al menos, adoptar un estilo conversacional para
atrapar a los lectores. Lo utilizan líderes de opinión o de una industria,
expertos y profesionales que comparten textos de interés para la gente, ya sea
por su estilo de escritura o lo valioso de los datos a los que tienen acceso.

Sitios educativos.

Fueron creados para que sus visitantes aprendan algo nuevo, generalmente
alejado de los intereses de una empresa o una marca. Muestran
procedimientos, paso a paso, que se consultan por sus visitantes cada vez que
lo necesiten.

Sitios de Comercio Electrónico.

Creados para realizar compras en línea; muestran el catálogo actualizado de los

productos de una marca y toda la información necesaria para la decisión de
compra: materiales, dimensiones o tallas, precio, tiempo de envío, etc. Ideal
principalmente para distribuidores.
Portales.

Los portales son el tipo de sitio web que recopila información de diferentes
tipos de fuentes; mezcla artículos originales con otros disponibles, para su
libre publicación, en otras páginas o sitios, y pueden estar centrados en un
tema o en varios. Los crean empresas o profesionales que buscan atraer a
colegas o clientes, gracias a su grado de autoridad en el tema o el gremio. Y si
tiene éxito, lo lanzarán para el público en general.

Sitios de noticia o revista.

Medios de comunicación, sin importar su plataforma original, cuentan con un

sitio web de noticias que les permite ampliar sus notas o dar adelantos en
tiempo real, mientras los hechos se llevan a cabo. Y las revistas, que
generalmente tienen una periodicidad menos continua que un noticiario,
aprovechan este formato para crear contenidos que, de otro modo, no destacan
o no caben en su edición impresa.
Foros de comunidades.

También conocidos como wikis, son una buena opción para mejorar y
compartir conocimiento, porque este se construye de manera colaborativa y se
puede actualizar en cualquier momento. Un foro o sitio wiki puede dedicarse a
prácticamente lo que sea, y puede crearse desde la intención de convocar a
todos los seguidores de un tema, producto o ciencia en un sitio, o para permitir
que las personas construyan sus propias comunidades de información.

Redes Sociales.

Los sitios web de redes sociales son aquellos que le dan espacio a las personas
para compartir su contenido propio, dentro de una plataforma con
características de nidas. Algunas redes sociales le dan prioridad a cierto
formato de contenido, por lo que es común que atraiga a distintos per les de
gente.
fi
fi