ADSL
(Asymetric Digital Suscriber Line)
Comunicación
de alta velocidad. Es asimétrica porque las velocidades de subida y
bajada son diferentes.
CGI (Common Gateway Interface) Estándar para la comunicación entre un servidor y un programa externo al servidor.
DHTML (Dynamic HTML) Extensión de HTML que permite modificar el contenido de una web en el cliente sin necesidad de establecer una conexión con el servidor.
HTML (HyperText Markup Language) El futuro sustituto del HTML es XHTML.
HTTP (HyperText Transfer Protocol) Es un protocolo sin estado (stateless) ya que cada comando se ejecuta independientemente de los anteriores. HTTP 1.1 (la mayoría de los clientes lo tienen) soporta conexiones persistentes, lo que aumenta el rendimiento en un 20%.
ISP (Internet Service Provider)
LZW (Lempel Ziv Welch) Formato de compresión sin pérdidas utilizado en GIF.
MNG (Multiple-image Network Graphics) Basado en PNG soporta multiples imágenes en 1 fichero con o sin animación y con canales de transparencia.
ODBC (Object DataBase Conectivity) Capa de aplicación intermedia que proporciona una interfaz al cliente de tal forma que en futuras actualizaciones sólo haya que modificar el servidor.
PNG (Portable Network Graphics) Formato gráfico de un mapa de bits similar a un GIF. No tiene pérdidas (= GIF), tiene más compresión que el GIF y soporta un canal de 256 niveles de transparencia (GIF sólo 1 bit)
RPC (Remote Procedure Call) Llamada a procedimiento remoto. Protocolo que permite a un programa en un ordenador (cliente) ejecutar otro programa en otro ordenador (servidor). El cliente envá un mensaje al servidor con los argumentos necesarios y el servidor devuelve un mensaje que contiene los resultados obtenidos al ejecutar el programa.
SSL (Secure Socket Layer) Protocolo desarrollado por Netscape que permite transmisiones seguras.
URL (Universal Resource Layer)
VRML (Virtual Reality Modeling Language) Sirve para crear objetos en 3D en la web. Los ficheros tienen extensión .wrl.
W3C (WWW Consorcion) Conjunto de organizaciones y compañías involucradas en el desarrollo de Internet y en la creación de estándares.
WYSIWYG (What You See Is What You See) Sistema de diseño.
CAPÍTULO 2
Corolario del diseño web: “Un buen sitio web tiene que ser rápido de descargar, fácil de navegar, atractivo a la vista, centrado en la marca y en el objetivo, ofrecer algo diferente del resto, tener un valor añadido y constituir una experiencia única para el usuario. Simple, en realidad.” http://www.miguelripoll.com
Puertos más comunes FTP 21 23 Transferencia de ficheros Conexión en modo Terminal SMTP 25 Envío de correo electrónico DNS 53 Resolución de nombres de dominio HTTP 80 Páginas web POP3 110 Recepción de mails NNTP 119 Acceso a foros de discusión
CAPÍTULO 3 – Arquitectura cliente/servidor
Intro Tipos de clientes:
Separación de funciones Lógica de presentación – Interacción con el usuario Lógica de aplicación – Gestiona los datos a nivel de procesamiento Lógica de datos – Gestiona los datos a nivel de almacenamiento
Usuario logica de presentación lógica de aplicación lógica de almacenamiento
Modelos de presentación en aplicaciones cliente
SERVIDOR Presentacion Logica de presentación
Lógica de aplicación Lógica de datos Gestión de datos
SERVIDOR Presentación Lógica de presentación Lógica de aplicación
Lógica de aplicación Lógica de datos Gestión de datos ***Este modelo es el más flexible
SERVIDOR Presentación Lógica de presentación Lógica de aplicación
Lógica de datos Gestión de datos
Descripción de un sistema cliente-servidor 1 - Front-end (de cara al usuario) y Back-end (gestiona los recursos del servidor) 2 - Servidor y Cliente tienen distintas capacidades CAPÍTULO 4 - ¿Qué es una aplicación web?
Intro Una aplicación web es un tipo especial de aplicación donde el CLIENTE, PROTOCOLO y SERVIDOR están estandarizados.
Conexiones Se realiza una conexión por fichero con el estándar HTTP 1.0. Sin embargo, con el HTTP 1.1 se puede abrir una “sesión” y trasmitir varios varios ficheros en la misma conexión. De esta forma se incrementa el rendimiento de la transmisión en un 20%.
Entornos WEB
*** Ventaja de separar servicios en distintos servidores
Metodología del desarrollo de sitios web
CAPÍTULO 5 – Estructura de un sitio web
Estructura física:
Enlaces
Estructura lógica
Cómo no perderse en la estructura
Guía de estilo
CAPÍTULO 6 – HTML
<META HTTP-EQUIV=”propiedad” CONTENT=”valor de la propiedad”> HTTP-EQUIV CONTENT FUNCIÓN Refresh n; url Carga la página indicada en url a los n segundos. Si no se indica url se carga la propia página. pragma
Ej: “no-cache” Content-Language
Ej: “ES” Content-Script-Type
Ej: “JavaScript” Content-Tupe
Ej: “text/html; charset=iso-8859”
<META NAME=”propiedad” CONTENT=”contenido”> NAME CONTENT FUNCIÓN Autor cadena Indica el autor Rights cadena Indica de quién son los derechos de la página Description cadena Descripción de la página Keywords cadena, cadena,… Palabras clave en las que se fijarán las páginas de búsqueda robots cadena Ej: index, follow
Tags que pueden ir en la cabecera: <TITLE> <BASE> <META> <STYLE> <LINK>
Definen bloques de texto: <ADDRESS> <BLOCKQUOTE> <DIV> <H1> <H2> <H3> <H4> <H5> <H6> <P> <PRE> <XMP>
Creación de listas: <DIR> <DL> <DT> <DD> <MENU> <UL> <OL> <LI>
Etiquetas de características del texto: <B> <BASEFONT> <BIG> <BLINK> <CITE> <CODE> <EM> <FONT> <I> <KBD> <PLAINTEXT> <SMALL> <S> <STRIKE> <STRONG> <SUB> <SUP> <TT> <U> <VAR>
Enlaces y anclas: <A>
Imágenes: <IMG> <AREA> <MAP>
Tablas: <TABLE> <CAPTION> <TR> <TD> <TH>
Formularios:
CGI (Common Gateway Interface) Estándar para la comunicación entre un servidor y un programa externo al servidor.
DHTML (Dynamic HTML) Extensión de HTML que permite modificar el contenido de una web en el cliente sin necesidad de establecer una conexión con el servidor.
HTML (HyperText Markup Language) El futuro sustituto del HTML es XHTML.
HTTP (HyperText Transfer Protocol) Es un protocolo sin estado (stateless) ya que cada comando se ejecuta independientemente de los anteriores. HTTP 1.1 (la mayoría de los clientes lo tienen) soporta conexiones persistentes, lo que aumenta el rendimiento en un 20%.
ISP (Internet Service Provider)
LZW (Lempel Ziv Welch) Formato de compresión sin pérdidas utilizado en GIF.
MNG (Multiple-image Network Graphics) Basado en PNG soporta multiples imágenes en 1 fichero con o sin animación y con canales de transparencia.
ODBC (Object DataBase Conectivity) Capa de aplicación intermedia que proporciona una interfaz al cliente de tal forma que en futuras actualizaciones sólo haya que modificar el servidor.
PNG (Portable Network Graphics) Formato gráfico de un mapa de bits similar a un GIF. No tiene pérdidas (= GIF), tiene más compresión que el GIF y soporta un canal de 256 niveles de transparencia (GIF sólo 1 bit)
RPC (Remote Procedure Call) Llamada a procedimiento remoto. Protocolo que permite a un programa en un ordenador (cliente) ejecutar otro programa en otro ordenador (servidor). El cliente envá un mensaje al servidor con los argumentos necesarios y el servidor devuelve un mensaje que contiene los resultados obtenidos al ejecutar el programa.
SSL (Secure Socket Layer) Protocolo desarrollado por Netscape que permite transmisiones seguras.
URL (Universal Resource Layer)
VRML (Virtual Reality Modeling Language) Sirve para crear objetos en 3D en la web. Los ficheros tienen extensión .wrl.
W3C (WWW Consorcion) Conjunto de organizaciones y compañías involucradas en el desarrollo de Internet y en la creación de estándares.
WYSIWYG (What You See Is What You See) Sistema de diseño.
CAPÍTULO 2
Corolario del diseño web: “Un buen sitio web tiene que ser rápido de descargar, fácil de navegar, atractivo a la vista, centrado en la marca y en el objetivo, ofrecer algo diferente del resto, tener un valor añadido y constituir una experiencia única para el usuario. Simple, en realidad.” http://www.miguelripoll.com
Puertos más comunes FTP 21 23 Transferencia de ficheros Conexión en modo Terminal SMTP 25 Envío de correo electrónico DNS 53 Resolución de nombres de dominio HTTP 80 Páginas web POP3 110 Recepción de mails NNTP 119 Acceso a foros de discusión
CAPÍTULO 3 – Arquitectura cliente/servidor
Intro Tipos de clientes:
- Tontos (Dependen totalmente del servidor)
- Listos (Tienen su HW y SW propios)
- Horizontal (añadir o eliminar clientes)
- Vertical (añadir o eliminar servidores)
Separación de funciones Lógica de presentación – Interacción con el usuario Lógica de aplicación – Gestiona los datos a nivel de procesamiento Lógica de datos – Gestiona los datos a nivel de almacenamiento
Usuario logica de presentación lógica de aplicación lógica de almacenamiento
Modelos de presentación en aplicaciones cliente
- Presentación distribuida
SERVIDOR Presentacion Logica de presentación
Lógica de aplicación Lógica de datos Gestión de datos
- Aplicación distribuida
SERVIDOR Presentación Lógica de presentación Lógica de aplicación
Lógica de aplicación Lógica de datos Gestión de datos ***Este modelo es el más flexible
- Datos distribuidos
SERVIDOR Presentación Lógica de presentación Lógica de aplicación
Lógica de datos Gestión de datos
Descripción de un sistema cliente-servidor 1 - Front-end (de cara al usuario) y Back-end (gestiona los recursos del servidor) 2 - Servidor y Cliente tienen distintas capacidades CAPÍTULO 4 - ¿Qué es una aplicación web?
Intro Una aplicación web es un tipo especial de aplicación donde el CLIENTE, PROTOCOLO y SERVIDOR están estandarizados.
- Cliente
- Servidor
Conexiones Se realiza una conexión por fichero con el estándar HTTP 1.0. Sin embargo, con el HTTP 1.1 se puede abrir una “sesión” y trasmitir varios varios ficheros en la misma conexión. De esta forma se incrementa el rendimiento de la transmisión en un 20%.
Entornos WEB
- Internet
- Intranet
- Extranet
*** Ventaja de separar servicios en distintos servidores
- Aumenta el rendimiento (cada máquina se configura de acuerdo a su tarea)
- Aumenta la seguridad
Metodología del desarrollo de sitios web
- Se estudian los requisitos y especificaciones del web: contenidos objetivos, tiempo, a quién va dirigido….
- A partir de los requisitos se decide la arquitectura y tecnología que usará el web
- Diseño de arquitectura lógica de navegación: (página inicial, marcos, secciones, relaciones, …)
- Se define la estructura física (que puede ser igual a la lógica o totalmente independiente)
- Se crean los contenidos
- Diseño gráfico y ergonómico de la página.
- Se crean las páginas estáticas y elementos multimedia
- Desarrollo de scripts y páginas dinámicas
- Verificación del funcionamiento
CAPÍTULO 5 – Estructura de un sitio web
Estructura física:
- No utilizar nunca espacios ni caracteres raros en nombres de ficheros ni carpetas.
- Utilizar siempre minúsculas (preferentemente) o mayúsculas pero no alternar entre ambas.
Enlaces
- Según
ubicación
- Otro sitio
- Mismo
sitio
- Intradocumental
- Extradocumental
- Según
referencia
- Absoluto
- http://www.fasdfdsfsdafs.asdfsadfsadf.sdfsd......
- /dfadsf/dfasdfsd/dfasdfasdf…..
- Relativo
- a.htm
- Absoluto
Estructura lógica
- Secuencial (tutoriales)
- Rejilla (multiidioma)
- Árbol (organización jerárquica)
- Red (todas con todas)
Cómo no perderse en la estructura
- Con
indicadores de:
- Posición anterior
- Posición actual
- Posición siguiente
- Con
“Rastro de migas de pan”
- A>hálala>fefasdf>dfdfaee>….
- Esquema de numeración por pasos (para estructura secuencial)
Guía de estilo
- Regla de los 3 clics. La media de clics para acceder a la información debe ser 3 clics
- Evitar los “Callejones sin salida”. (Es conveniente que todas las páginas tengan un enlace a la página anterior y a la página principal) (otra solución es crear un menú)
- Los visitantes deberían saber en todo momento dónde se encuentran
- Incluir funciones de búsqueda, índices y mapa del sitio (hay herramientas que gestionan esto automáticamente)
- Incluir información de contacto
- Evitar estructuras muy profundas
- Todas las páginas deben tener una misma identidad visual que las identifique como “páginas del mismo sitio”
CAPÍTULO 6 – HTML
- Conceptos
básicos
- Estructura de una página
- Comentarios
- Caracteres especiales y secuencias de escape
- Metadatos
<META HTTP-EQUIV=”propiedad” CONTENT=”valor de la propiedad”> HTTP-EQUIV CONTENT FUNCIÓN Refresh n; url Carga la página indicada en url a los n segundos. Si no se indica url se carga la propia página. pragma
Ej: “no-cache” Content-Language
Ej: “ES” Content-Script-Type
Ej: “JavaScript” Content-Tupe
Ej: “text/html; charset=iso-8859”
<META NAME=”propiedad” CONTENT=”contenido”> NAME CONTENT FUNCIÓN Autor cadena Indica el autor Rights cadena Indica de quién son los derechos de la página Description cadena Descripción de la página Keywords cadena, cadena,… Palabras clave en las que se fijarán las páginas de búsqueda robots cadena Ej: index, follow
- Etiquetas HTML [clasificación]
Tags que pueden ir en la cabecera: <TITLE> <BASE> <META> <STYLE> <LINK>
Definen bloques de texto: <ADDRESS> <BLOCKQUOTE> <DIV> <H1> <H2> <H3> <H4> <H5> <H6> <P> <PRE> <XMP>
Creación de listas: <DIR> <DL> <DT> <DD> <MENU> <UL> <OL> <LI>
Etiquetas de características del texto: <B> <BASEFONT> <BIG> <BLINK> <CITE> <CODE> <EM> <FONT> <I> <KBD> <PLAINTEXT> <SMALL> <S> <STRIKE> <STRONG> <SUB> <SUP> <TT> <U> <VAR>
Enlaces y anclas: <A>
Imágenes: <IMG> <AREA> <MAP>
Tablas: <TABLE> <CAPTION> <TR> <TD> <TH>
Formularios: