Curriculo

mazejaxiri

Leia Mais

Presupuesto

PRESUPUESTO DEL DISEÑO WEB

Leia Mais

tema

OBJETIVO

Leia Mais

ASP

Active Server Pages (ASP), también conocido como ASP clásico, es una tecnología de Microsoft del tipo "lado del servidor" para páginas web generadas dinámicamente, que ha sido comercializada como un anexo a Internet Information Services (IIS).
La tecnología ASP está estrechamente relacionada con el modelo tecnológico de su fabricante. Intenta ser solución para un modelo de programación rápida ya que "programar en ASP es como programar en Visual Basic y C#", por supuesto con muchas limitaciones y algunas ventajas específicas en entornos web.
Lo interesante de este modelo tecnológico es poder utilizar diversos componentes ya desarrollados como algunos controles ActiveX así como componentes del lado del servidor, tales como CDONTS, por ejemplo, que permite la interacción de los scripts con el servidor SMTP que integra IIS.
Se facilita la programación de sitios web mediante varios objetos integrados, como por ejemplo un objeto de sesión basada en cookies, que mantiene las variables mientras se pasa de página a página.

PHP

PHP Perl. El programa está liberado bajo la licencia GNU y actúa como un servidor Web libre, fácil de usar y capaz de interpretar páginas dinámicas. Actualmente XAMPP esta disponible para Microsoft Windows, GNU/Linux, Solaris, y MacOS X.
PHP también tiene la capacidad de ser ejecutado en la mayoría de los sistemas operativos, tales como UNIX (y de ese tipo, como Linux o Mac OS X) y Windows, y puede interactuar con los servidores de web más populares ya que existe en versión CGI, módulo para Apache, e ISAPI.
PHP es una alternativa a las tecnologías de Microsoft ASP y ASP.NET (que utiliza C# VB.NET como lenguajes), a ColdFusion de la compañía Adobe (antes Macromedia), a JSP/Java de Sun Microsystems, y a CGI/Perl. Aunque su creación y desarrollo se da en el ámbito de los sistemas libres, bajo la licencia GNU, existe además un IDE (entorno de desarrollo integrado) comercial llamado Zend Studio. Recientemente, CodeGear (la división de lenguajes de programación de Borland) ha sacado al mercado un entorno integrado de desarrollo para PHP, denominado Delphi for PHP. Existe un módulo para Eclipse, uno de los IDE más populares.

Python

es un lenguaje de programación interpretado creado por Guido van Rossum en el año 1991.[1]
Se compara habitualmente con Tcl, Perl, Scheme, Java y Ruby. En la actualidad Python se desarrolla como un proyecto de código abierto, administrado por la Python Software Foundation. La última versión estable del lenguaje es la 3.1.1.[2]
Python es considerado como la "oposición leal" a Perl, lenguaje con el cual mantiene una rivalidad amistosa. Los usuarios de Python consideran a éste mucho más limpio y elegante para programar.

Python permite dividir el programa en módulos reutilizables desde otros programas Python. Viene con una gran colección de módulos estándar que se pueden utilizar como base de los programas (o como ejemplos para empezar a aprender Python). También hay módulos incluidos que proporcionan E/S de ficheros, llamadas al sistema, sockets y hasta interfaces a GUI (interfaz gráfica con el usuario) como Tk, GTK, Qt entre otros.
Python se utiliza como lenguaje de programación interpretado, lo que ahorra un tiempo considerable en el desarrollo del programa, pues no es necesario compilar ni enlazar. El intérprete se puede utilizar de modo interactivo, lo que facilita experimentar con características del lenguaje, escribir programas desechables o probar funciones durante el desarrollo del programa.
El nombre del lenguaje proviene de la afición de su creador original, Guido van Rossum, por los humoristas británicos Monty Python.[3] El principal objetivo que persigue este lenguaje es la facilidad, tanto de lectura, como de diseño.

Php+apache
Explicamos el proceso completo para instalar PHP en una máquina Windows y un servidor Apache. La instalación se realiza como módulo que es lo más seguro y rápido.
Por Miguel Angel Alvarez
Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.
En este artículo vamos a explicar cómo instalar PHP como módulo de Apache 2.0 en un sistema Windows. Para las pruebas hemos utilizado Windows XP, pero seguro que con otros sistemas el proceso será muy parecido, aunque, en todo caso, indicaremos las diferencias documentadas en el sitio de PHP.
Anteriormente habíamos explicado la instalación de PHP como un CGI, aunque en la página de PHP desaconsejan esta opción, puesto que adolece de graves problemas de seguridad. Además, PHP instalado como módulo de Apache resulta mucho más rápido que como CGI.
Referencia: Vamos a suponer que el servidor de páginas web Apache 2.0 está instalado en nuestro sistema. No obstante, para los que no lo tengan, les referimos a nuestro manual de instalación y configuración de Apache.
Descargar y descomprimir PHP
El primer paso consiste en descargar la última versión de PHP. Podremos hacerlo desde la página oficial de PHP, en la sección de descargas. http://www.php.net/downloads.php Debemos elegir la versión "zip package" que contiene todas las funcionalidades de PHP y el módulo necesario para instalarlo en Apache.
Una vez descargado el paquete comprimido en .zip de PHP necesitamos descomprimirlo en nuestro disco duro. Podemos utilizar el directorio raíz del disco duro para descomprimir los archivos. En ese caso, se creará un directorio llamado algo como "php-4.3.1-Win32" que colgará de nuestro directorio raíz. Se recomienda cambiar el nombre del directorio creado a algo como "c:php". En todo caso, nos advierten en la página de PHP sobre no colocar ningún nombre de directorio que contenga espacios, pues algún servidor web puede dar problemas. Por ejemplo, cuidado con instalar PHP en un directorio como este "c:archivos de programaphp", pues en la ruta tenemos directorios con espacios.
Copia de las DLL
A continuación nos informan sobre la necesidad de copiar en nuestro directorio de sistema una serie de librerías (.dll), que encontraremos en el directorio sapi de nuestra instalación de PHP, supuestamente algo como "c:phpsapi",
El mencionado directorio de sistema puede variar de unas versiones a otras de Windows. En Windows XP, el directorio de sistema donde debemos copiar las dll, es "C:WINDOWSsystem32". En Windows 9x/ME, el directorio sería "C:WindowsSystem" y en Windows NT/2000 sería el directorio "C:WINNTSystem32" o bien, "C:WINNT40System32".
Nota: no se deben mezclar las DLL de diversas versiones de PHP, porque de lo contrario, podría causarnos problemas.
Definir un archivo php.ini
Otro archivo que debemos copiar, esta vez en nuestro directorio Windows, es el php.ini, que guarda las opciones de configuración definidas para PHP. En la distribución de PHP se incluyen dos archivos php.ini que podemos utilizar directamente en nuestro sistema. Estos dos archivos se llaman "php.ini-dist" y "php.ini-recommended" y contienen unas opciones típicas de configuración de PHP. Se recomienda utilizar "php.ini-recommended", porque viene optimizado para obtener los mejores niveles de seguridad. En cualquier caso, podemos editar en cualquier momento el contenido del archivo para modificar la configuración de PHP a nuestro gusto o necesidades.
Para definir el php.ini debemos hacer una copia del archivo de configuración escogido ("php.ini-dist" o "php.ini-recommended") y renombrarlo como el "php.ini". Posteriormente debemos copiarlo en nuestra carpeta Windows, que en sistemas 9x/ME/XP es "c:windows" y en sistemas NT/2000 suele ser "c:WINNT", o bien "c:WINNT40".

Leia Mais

Interfaz y dreamweaver

Apariencia general
Nuestra andadura en la web ha comenzado con Dreamweaver y el estudio de XHTML.
A lo largo de las páginas de este documento iremos desarrollando los diferentes aspectos del diseño de páginas web, combinando tanto las herramientas propias de dreamweaver (DW de ahora en adelante), y recurriendo al código puro y duro en aquellos casos donde sea necesario.
En esta sección vamos a hablar sobre todo de la apariencia del programa, de algunas recomendaciones acerca de su configuración y uso y de herramientas a las que podemos recurrir sin que nuestro código resulte perjudicado.
Comencemos pues, con la apariencia y configuración del programa.

comenzar con dreamweaver.
Al abrir el DW descubrimos que es muy similar en apariencia al resto de los programas de la familia Macromedia:
Tenemos nuestros indispensables menús, una barra de herramientas para insertar elementos y paletas para desarrollar los diferentes aspectos de nuestro diseño.
El resto del espacio lo ocupará el área de trabajo, donde iremos añadiendo los elementos que necesite nuestro documento. No hablamos sólo de elementos visuales, como pueda ser el texto o las imágenes, sino también de enlaces (links) o botones que nos validen un formulario.


La barra de herramientas
La barra de herramientas nos permite insertar diferentes elementos en nuestro documento. En muchos casos nos ofrece un acceso rápido y cómodo a ciertas funciones del DW.
En el caso de que alguna vez tengamos que activarla (podemos cerrarla accidentalmente), debemos hacerlo desde el Menú Ver > Barras de herramientas > Insertar

La barra de herramientas nos ofrece varias opciones. Según la visualización que escojamos nos aparecerán diferentes herramientas, específicas para cada caso.
En el apartado "Común", que aparece por defecto al abrir el programa por primera vez tenemos las opciones más generales: crear tablas, puntos de ancla, insertar imágenes o crear imágenes de sustitución son las que mejor funcionan.


Nota acerca de las herramientas de DW
Tengamos en cuenta que no todas las opciones de la barra de herramientas son recomendables. Destacamos insertar formularios porque DW lo hace de manera aceptable, evitando que escribamos código. Pero en otros casos, DW genera código inadecuado. Aprender a controlar nuestro código es tan fundamental como saber para qué sirven las herramientas del programa.
Si pulsamos "Común" para desplegar las opciones de la barra, tendremos acceso al resto de herramientas propias de cada apartado. Uno de los más útiles para evitarnos escribir código es el de Formulario.

Desde aquí podemos definir qué tipo de elementos deseamos para nuestro formulario, insertar campos para pedir información al usuario y botones que validen la información, de tal manera que llegue a nuestro correo. Para más información, consulta el apartado sobre formularios.
¿Código o diseño?
Como ya te habrás dado cuenta, estamos haciendo mención a un buen uso del código XHTML. Esto es importante para no generar un resultado a partir de una etiqueta inadecuada.
Por tanto, desde aquí aconsejamos utilizar el doble espacio de trabajo que nos ofrece DW. ¿Qué es esto?
Básicamente, se trata de una opción que nos permite trabajar en el documento bien a nivel de código, bien sólo en modo diseño (la apariencia de la web).
Nosotros sugerimos la tercera opción: el modo dividir.

De esta manera visualizamos diseño y código al mismo tiempo. Esta opción se encuentra en la barra de herramientas "Documento", a la que accedemos desde el menú Ver > Barras de herramientas > Documento.

Vista de código

Cuando navegamos por internet podemos solicitar al navegador que nos muestre el código fuente de una página para saber cómo está hecha. Cuando trabajamos en nuestro documento en modo dividir también tenemos ese código a mano.

Por defecto, DW suele mostrar el código ocupando tanto ancho como sea necesario. Esto puede generar líneas de código interminables e incómodas de leer.

Para solucionar esto debemos activar una opción que permite visualizar el código según el ancho del área de trabajo, de tal manera que no habremos de recurrir a las barras de desplazamiento horizontales.

A esta opción llegamos desde el menú Ver > Opciones de vista de código > Ajustar texto.

Las paletas de trabajo

A medida que vayamos experimentando con DW y dominemos mejor el código necesitaremos nuevas herramientas que nos aporten nuevas posibilidades.

Una de las primeras aspiraciones es, por supuesto, la de para que esté accesible en la red y pueda ser visitada. Podemos también usar la paleta de los estilos CSS para gestionarlos desde nuestro documento, o crear comportamientos.

También surgirá la idea de crear un pop-up o abrir una nueva ventana mostrando en detalle alguna foto o cualquier otra cosa. Y a medida que queramos dar consistencia a nuestra página nos vendrá bien aplicar los estilos CSS de manera más rápida que tecleando en código.

Muchas de estas operaciones se realizan desde las paletas que nos ofrece DW. Todas ellas pueden activarse desde el menú Ventana.

El formato de texto en dreamwever

A.- CREAR Y CONFIGURAR LA PÁGINA O DOCUMENTO
1.- Crear Página: Archivo - Nuevo - Aparece el cuadro de diálogo «Nuevo documento» - En la lista de categorías de la izquierda, bajo Categoría, seleccionar la categoría Página básica

- Hacer clic en Crear - Aparece la ventana de Documento vacía

2.- Guardar página: Archivo - Guardar como - En el campo «Guardan en» buscar la carpeta raíz y subcarpeta - En el campo «Nombre de archivo» escribir el nombre del archivo y en el campo «Guardar como tipo» seleccionar Todos los documentos - Guardar

3.- Abrir página: Archivo - Abrir

4.- Modificar página: Existen dos maneras: Modificar - Propiedades de la página o pulsar el botón derecho del ratón y en el menú contextual seleccionar Propiedades de la página

a) Asignar un título al documento

b) Definir una imagen de fondo (si se quiere): Hacer clic en Examinar - En el campo Buscar en seleccionar el disco local, carpeta y archivo de la imagen que se quiere poner de fondo- Aceptar - Aparece un cuadro de mensaje - Aceptar - Aparece un segundo cuadro de diálogo - Contestar: Sí - Guardar - Aceptar

c) Definir un color de fondo (si se quiere): Hacer clic en el cuadro Fondo - Seleccionar un color del selector de color - Aceptar

B.- EDITAR TEXTO

1.- Escribir un texto

a) En la ventana del documento vacío escribir títulos y párrafos

b) Para insertar caracteres especiales en un documento, hacer uno de los siguientes pasos:

Insertar - Caracteres especiales - Seleccionar el carácter deseado

En la barra «Insertar» hacer clic en categoría «Caracteres» - Aparece el menú de caracteres - Seleccionar el carácter deseado

Para utilizar otros caracteres especiales: Insertar - Caracteres especiales - Otro o también hacer clic en el icono «Otros caracteres» (el último icono de la derecha del menú de caracteres) - Seleccionar un carácter en el cuadro «Insertar otro carácter» - Aceptar

c) Para hacer el salto de línea (no confundir con el punto y aparte): En la barra «Insertar» marcar la categoría «Caracteres» - Aparece la barra de menú de caracteres - Hacer clic en el botón «Salto de línea» (primer botón de la izquierda)

d) Para insertar la fecha actual en el documento:

En la ventana de documento, situar el punto de inserción en el lugar donde se desea insertar la fecha

Insertar - Fecha o también, en la barra «Insertar» hacer clic en la categoría «Común» - Aparece un menú de botones - Hacer clic en el botón «Fecha» - En el cuadro de diálogo que aparece seleccionar el formato de día, fecha y hora - Activar la opción «Actualizar automáticamente al guardar» - Aceptar

e) Para corregir la ortografía: Texto - Ortografía - En el cuadro «Ortografía» seleccionar la ortografía correcta en el cuadro «Sugerencias» o teclear la palabra correcta en el cuadro «Cambiar por» - Cambiar

2.- Dar formato al texto

a.- Aplicar fuentes y tamaños

Seleccionar el texto. Si no hay texto seleccionado, el cambio se aplicará al texto que se escriba a continuación

Para cambiar la fuente, caben dos opciones:

o Texto - Fuente - Seleccionar la fuente deseada

o En el inspector de propiedades de Texto elegir una fuente o combinación de fuentes

Para editar la lista de fuentes: Texto - Fuente - Editar lista de fuentes - En el cuadro «Editar lista de fuentes» seleccionar la fuente que se desee en el cuadro «Fuentes disponibles» - Hacer clic en el botón << - Aceptar. Si se quiere quitar una fuente de la lista editada de fuentes, en el cuadro «Lista de fuentes» seleccionar la fuente que se quiere quitar - Volver a seleccionar la misma fuente en el cuadro «Fuentes elegidas» - Hacer clic en el botón >> - Aceptar

Para cambiar el tamaño de la fuente, existen dos opciones:

o Texto - Fuente - Tamaño - Elegir el número de tamaño

o En el inspector de propiedades de Texto, en el cuadro «Tamaño de texto» hacer clic en la flecha de opciones - Seleccionar el número de tamaño que se desee

b.- Aplicar color al texto

Seleccionar texto

Existen dos opciones para cambiar el color de texto

o 1ª) Texto - Color - Se abrirá la paleta de colores - Hacer clic en el color deseado

o 2ª) En el inspector de propiedades de Texto hacer clic en icono de color de texto - Se abrirá la paleta de colores - Hacer clic en el color deseado Figura

c.- Aplicar estilo al texto

Seleccionar texto

Existen tres opciones para aplicar estilo al texto

o 1ª) Texto - Estilo - Negrita, cursiva, etc.

o 2ª) En el inspector de propiedades de texto hacer clic en los botones negrita (B) o cursiva (I)

o 3ª) En la barra «Insertar» hacer clic en la categoría «Caracteres» - Aparece la barra de menú - Hacer clic en los botones negrita (B) o cursiva (I)

3.- Alinear y sangrar texto

a) Para alinear texto:

Seleccionar texto

Para alinear texto existen dos posibilidades:

i. Texto - Alinear - Izquierda, centro, etc.

ii. En el inspector de propiedades de texto hacer clic en los botones «alinear a la izquierda», «alinear al centro», etc.

b) Para crear o quitar sangría de texto existen también dos opciones:

i. Texto - Sangrar o Anular sangría

ii. En el inspector de propiedades de texto hacer clic en los botones «sangría de texto» o «anular sangría de texto»

4.- Crear una lista

a) Situar el punto de inserción en la línea o lugar donde se desea añadir una lista

b) Para empezar a crear una lista existen dos posibilidades:

1ª) Texto - Lista - Seleccionar el tipo de lista deseado en el menú desplegable

En el inspector de propiedades hacer clic en los botones «Lista sin ordenar» (viñeta) o «Lista ordenada» (numerada)

c) Para terminar de crear la lista, se puede actuar de dos maneras:

Presionar dos veces seguidas la tecla Entrar

Después de haber pulsado la tecla Entrar, caben dos opciones:

o 1ª) Texto - Lista - Ninguno

o 2ª) En el inspector de propiedades de texto hacer clic en los botones «Lista sin ordenar» o «Lista ordenada»

5.- Formato de párrafos y encabezados

a) Situar el punto de inserción en el párrafo o seleccionar parte del texto del párrafo

b) Existen dos posibilidades para aplicar o quitar una etiqueta de párrafo o encabezado:

1ª) Texto - Formato de párrafo - Elegir un formato de párrafo del menú desplegable

2ª) En el inspector de propiedades de texto hacer clic en el cuadro Formato - Aparece el menú desplegable - Elegir la opción deseada
6.- Insertar una regla horizontal

En Dreamweaver es posible separar visualmente diferentes textos y objetos en la misma ventana de documento con una o más reglas horizontales.

a) Para insertar una regla horizontal:

Situar el punto de inserción en el lugar donde se quiere insertar una regla horizontal

Existen dos opciones para insertar regla horizontal:

o 1ª) «Insertar - Regla horizontal

o 2ª) En la barra «Insertar» marcar la categoría «Común» - Aparece la barra de menú - Hacer clic en el botón «Regla horizontal» (4º botón empezando por la derecha)

c) Para modificar una regla horizontal en la ventana de documento.

Seleccionar la regla horizontal que se quiere modificar

En el inspector de propiedades de «Regla horizontal» modificar las propiedades que se deseen: ancho (An) y alto (Al), alineación de de la regla y sombreado

Leia Mais

Hipertexto

Definiciones

El hipertexto es una tecnología que organiza una base de información en bloques distintos de contenidos, conectados a través de una serie de enlaces cuya activación o selección provoca la recuperación de información [Días et al, 1996].
El hipertexto ha sido definido como un enfoque para manejar y organizar información, en el cual los datos se almacenan en una red de nodos conectados por enlaces. Los nodos contenienen textos y si contienen además gráficos, imágenes, audio, animaciones y video, así como código ejecutable u otra forma de datos se les da el nombre de hipermedio, es decir, una generalización de hipertexto.
Considerando cómo se representa el conocimiento humano, el hombre opera por asociación, saltando de un item al próximo, en forma casi instantánea. El paradigma hipermedia intenta modelar este proceso con enlaces entre pedazos de información contenidos en nodos.

Funcionamiento de la web

La visualización de una página web de la World Wide Web normalmente la URL de la página en el navegador web, o siguiendo un enlace de hipertexto a esa página o recurso. En ese momento el navegador comienza una serie de comunicaciones, transparentes para el usuario, para obtener los datos de la página y visualizarla.

El primer paso consiste en traducir la parte nombre del servidor de la URL en una dirección IP usando la base de datos distribuida de Internet conocida como DNS. Esta dirección IP es necesaria para contactar con el servidor web y poder enviarle paquetes de datos.

El siguiente paso es enviar una petición HTTP al servidor Web solicitando el recurso. En el caso de una página web típica, primero se solicita el texto HTML y luego es inmediatamente analizado por el navegador, el cual, después, hace peticiones adicionales para los gráficos y otros ficheros que formen parte de la página. Las estadísticas de popularidad de un sitio web normalmente están basadas en el número de páginas vistas o las peticiones de servidor asociadas, o peticiones de fichero, que tienen lugar.

Al recibir los ficheros solicitados desde el servidor web, el navegador renderiza la página tal y como se describe en el código HTML, el CSS y otros lenguajes web. Al final se incorporan las imágenes y otros recursos para producir la página que ve el usuario en su pantalla.

Correo web

Casi todos los proveedores de correo dan el servicio de correo web (webmail): permiten enviar y recibir correos mediante un sitio web diseñado para ello, y por tanto usando sólo un navegador web. La alternativa es usar un programa de correo especializado.

El correo web es cómodo para mucha gente, porque permite ver y almacenar los mensajes desde cualquier sitio (en un servidor remoto, accesible por el sitio web) en vez de en un ordenador personal concreto.

Como desventaja, es difícil de ampliar con otras funcionalidades, porque el sitio ofrece un conjunto de servicios concretos y no podemos cambiarlos. Además, suele ser más lento que un programa de correo, ya que hay que estar continuamente conectado a páginas web y leer los correos de uno en uno.

Cliente de correo

También están los clientes de correo electrónico, que son programas para gestionar los mensajes recibidos y poder escribir nuevos.

Suelen incorporar muchas más funcionalidades que el correo web, ya que todo el control del correo pasa a estar en el ordenador del usuario. Por ejemplo, algunos incorporan potentes filtros anti-spam.

Por el contrario, necesitan que el proveedor de correo ofrezca este servicio, ya que no todos permiten usar un programa especializado (algunos sólo dan correo web). En caso de que sí lo permita, el proveedor tiene que explicar detalladamente cómo hay que configurar el programa de correo. Esta información siempre está en su página web, ya que es imprescindible para poder hacer funcionar el programa, y es distinta en cada proveedor. Entre los datos necesarios están: tipo de conexión (POP o IMAP), dirección del servidor de correo, nombre de usuario y contraseña. Con estos datos, el programa ya es capaz de obtener y descargar nuestro correo.

El funcionamiento de un programa de correo es muy diferente al de un correo web, ya que un programa de correo descarga de golpe todos los mensajes que tenemos disponibles, y luego pueden ser leídos sin estar conectados a Internet (además, se quedan grabados en el ordenador). En cambio, en una página web se leen de uno en uno, y hay que estar conectado a la red todo el tiempo.

Algunos ejemplos de programas que realizan las funciones de cliente de correo electrónico son Mozilla Thunderbird, Outlook Express y Eudora (ver lista completa).

Funcionamiento

Escritura del mensaje

Se pueden mandar mensajes entre computadores personales o entre dos terminales de una computadora central. Los mensajes se archivan en un buzón (una manera rápida de mandar mensajes). Cuando una persona decide escribir un correo electrónico, su programa (o correo web) le pedirá como mínimo tres cosas:

• Destinatario: una o varias direcciones de correo a las que ha de llegar el mensaje
• Asunto: una descripción corta que verá la persona que lo reciba antes de abrir el correo
• El propio mensaje. Puede ser sólo texto, o incluir formato, y no hay límite de tamaño

Además, se suele dar la opción de incluir archivos adjuntos al mensaje. Esto permite traspasar datos informáticos de cualquier tipo mediante el correo electrónico.

Origen de la web

La Web fue creada en 1989 por el inglés Tim Berners-Lee y el belga Robert Cailliau mientras trabajaban en el CERN en Ginebra, Suiza. Desde entonces, Berners-Lee ha jugado un papel activo guiando el desarrollo de estándares Web (lenguaje con los que se crean las páginas Web), en los últimos años ha abogado por su visión de una Web Semántica, empezó a escribir un programa que le permitiera almacenar información. De modo magistral, dio forma y aplicación a un par de conceptos que ya habían sido formulados de forma más o menos vaga y genérica: El hipervínculo, que conducía directamente al concepto de hipertexto, de ahí al de páginas HTML (páginas Web) que a su vez,darían origen a un nuevo servicio de Internet (mejor diríamos una nueva forma de usar la Red) que acabaría arrasando, y a un nuevo paradigma de arquitectura de la información:Los "Hypermedia".

Las páginas de hipertexto, con sus hipervínculos enlazando información en cualquier parte del mundo, tejen una telaraña mundial,"World Wide Web",abreviadamente "La Web";WWW o W3.

No confundir "la Web" con "la Red". La Red, es Internet y estaba inventada bastante antes. La Web es uno de los muchos servicios que proporciona Internet. Además, como la Web es, entre otras cosas, una "interfase" para utilizar la red (de tremendo éxito), muchos de los servicios se han "maquillado de Web", adoptando formas compatibles con los navegadores.

Partes de un documento HTML

Un documento HTML ha de estar delimitado por la etiqueta y . Dentro de este documento, podemos asimismo distinguir dos partes principales:

El encabezado, delimitado por y donde colocaremos etiquetas de índole informativo como por ejemplo el titulo de nuestra página.

El cuerpo, flanqueado por las etiquetas y , que será donde colocaremos nuestro texto e imágenes delimitados a su vez por otras etiquetas como las que hemos visto.

Ø Herramientas de desarrollo: fases de un desarrollo web, así como los lenguajes de programación usados, son muy extensas y variadas, y por ello necesitamos herramientas específicas para cada una de ellas. Conoceremos a continuación las principales herramientas existentes para poder desarrollar fácilmente un proyecto web.

En el desarrollo web tenemos unas herramientas para el diseño, otras para la maquetación, otras para la programación, y para la depuración. Todas las herramientas que usemos son muy importantes, desde el Sistema Operativo hasta el comando más insignificante, y por ello debemos elegir la más adecuada a nuestras necesidades y capacidades.

Para desarrollar una web, lo primero que necesitamos es un Sistema Operativo, como es lógico, y su elección no es tan trivial. Hay que tener en cuenta las aplicaciones de las que dispone el Sistema Operativo y sus costes.

Fases de desarrollo de una Web

Para elegir las herramientas a utilizar, antes debemos identificar las fases del proceso que forman el ciclo de vida de un desarrollo Web.

· Diseño:

El diseño consiste en crear esbozos de la web final mediante una herramienta gráfica, como Photoshop, GIMP o Inkscape.

· Maquetación HTML/CSS:

La maquetación consiste en convertir los esbozos creados en la fase anterior en plantillas HTML, su respectiva hoja de estilos, y las imágenes usadas. Programación cliente:

· Programación servidor:

En esta fase, que se desarrolla junto con la anterior, crearemos la aplicación Web en un lenguaje de servidor, como puede ser PHP, ASP .NET, Python, Perl, etc.

· Depuración:

Esta fase enlaza la anterior con la siguiente, y es donde haremos las pruebas unitarias, aserciones, trazas, etc.

· Pruebas en local:

En nuestro servidor local haremos todas las pruebas posibles.

· Subir ficheros al hosting:

Una vez nuestra Web esté completada y bien testeada en nuestro servidor local (desarrollo), la subiremos al servidor del hosting elegido (producción).

Ø Elementos: Una página Web tiene contenido que puede ser visto o escuchado por el usuario final. Éstos elementos incluyen:

• Texto. El texto editable se muestra en pantalla con alguna de las fuentes que el usuario tiene instaladas .El texto editable puede marcarse con el ratón o el teclado y copiarse a otra aplicación, como el bloc de notas (muchos de los elementos textuales de las páginas, en especial los títulos, botones de navegación, etc. son realmente gráficos, y su texto no es editable.)

• Imágenes. Son ficheros enlazados desde el fichero de la página propiamente dicho. Se puede hablar de tres formatos casi exclusivamente: GIF, JPG y PNG.

Ø Atributos: Existe una serie de atributos que se aplican de manera global a toda la página, como el color de fondo el del texto, de los enlaces, márgenes, etc.

Las páginas HTML pueden construirse con variedad de atributos que le pueden dar un aspecto a la página muy personalizado. Podemos definir atributos como el color de fondo, el color del texto o de los enlaces. Estos atributos se definen en la etiqueta y, como decíamos son generales a toda la página.

Atributos para fondos

bgcolor: especificamos un color de fondo para la página. El color de fondo que podemos asignar con bgcolor es un color plano, es decir el mismo para toda la superficie del navegador.

Background: sirve para indicar la colocación de una imagen como fondo de la página. La imagen se coloca haciendo un mosaico, es decir, se repite muchas veces hasta ocupar todo el espacio del fondo de la página

Color del texto

text: este atributo sirve para asignar el color del texto de la página. Por defecto es el negro.
Además del color del texto, tenemos tres atributos para asignar el color de los enlaces de la página. Ya debemos saber que los enlaces deben diferenciarse del resto del texto de la página para que los usuarios puedan identificarlos fácilmente. Para ello suelen aparecer subrayados y con un color más vivo que el texto. Los tres atributos son los siguientes:

link: el color de los enlaces que no han sido visitados. (Por defecto es azul clarito)

vlink: el color de los enlaces visitandos. La "v" viene justamente de la palabra visitada. Es el color que tendrán los enlaces que ya hemos visitado. Por defecto su color es morado. Este color debería ser un poco menos vivo que el color de los enlaces normales.

Alink: es el color de los enlaces activos. Un enlace está activo en el preciso instante que se pulsa. A veces es difícil darse cuenta cuando un enlace está activo porque en el momento en el que se activa es porque lo estamos pulsando y en ese caso el navegador abandonará la página rápidamente y no podremos ver el enlace activo más que por unos instantes mínimos.


Márgenes

Con otros atributos de la etiqueta se pueden asignan espacios de margen en las páginas, lo que es muy útil para eliminar los márgenes en blanco que aparecen a los lados, arriba y debajo de la página. Estos atributos son distintos para Internet Explorer y para Netscape Navigator, por lo que debemos utilizarlos todos si queremos que todos los navegadores los interpreten perfectamente.

Leftmargin: para indicar el margen a los lados de la página. Válido para iexplorer.

Topmargin: para indicar el margen arriba y debajo de la página. Para iexplorer.

Marginwidth: la contrapartida de leftmargin para Netscape. (Margen a los lados)

Marginheight: igual que topmargin, pero para Netscape. (Margen arriba y abajo)

Lenguaje Estructurado: Lenguaje con el que está desarrollada una página Web.

Editor: Programa utilizado para crear páginas Web sin la necesidad de tener que aprender el lenguaje. Ejemplos: M. Front Page 2000 y Macro-media Dreamweaver.

Servidor: Máquina conectada a Internet que –entre otros servicios- ofrece albergue para páginas Web haciendo que estén accesibles desde cualquier punto de Internet.

Cliente FTP: Programa que permite conectarse al servidor para publicar páginas Web.

Hosting: Hospedaje Web.

Dominio: Dirección Web asociada a una página Web.

ISP: En el ámbito del desarrollo de sitios web, se puede decir que un ISP es un proveedor de servicios para web. Los diferentes servicios que pueden ofrecer son: conexión a Internet, registro de dominio, hospedaje de sitios web, servicios de contadores de servicios, libros de visitas gratuitos, estadísticas para web, entre otros.

URL: (Universal Resource Location / Localizador de recursos universal) Cadena que proporciona la dirección de Internet de un sitio Web o un recurso del World Wide Web, junto con el protocolo mediante el cual se tiene acceso al sitio o al recurso.

El tipo más común de dirección URL es http://, que proporciona la dirección de Internet de una página Web. Otros tipos de dirección URL son gopher://, que proporciona la dirección de Internet de un directorio Gopher, y ftp://, que proporciona la ubicación de red de un recurso FTP. Ejemplos: http://www.mitecnologico.com , http://www.google.com

Applets: Programas desarrollados con Java para mejorar la presentación de las páginas Web que realizan animaciones, juegos e interacción con el usuario.

Frames (marcos): Áreas rectangulares que subdividen las ventanas de algunas páginas Web, cada una de las cuales contiene un documento de hipertexto independiente de los demás.

Webmaster: Un webmaster es el encargado de crear, diseñar, estructurar, maquetar, publicar, promocionar y mantener un sitio web.

Tablas: Deben utilizarse únicamente para datos tabulados. Nunca para maquetar.

Banner: Elemento gráfico con forma rectangular, normalmente animado, cuyo contenido es publicidad.

Imagen: Archivo gráfico que se puede insertar en una página Web y mostrar en un explorador de Web. Existen diferentes formatos: GIF, JPEG, BMP, TIFF, WMF y PNG, entre otros.

Propiedades: Características de un elemento del Web actual, como el título y la dirección URL de un Web o el nombre y el valor inicial de un campo de formulario. También puede especificar propiedades para elementos de página como tablas, gráficos y elementos activos.

Ø Estructura básica de una pagina: Un documento escrito en HTML contendría básicamente las siguientes etiquetas :

Indica el inicio del documento.
Inicio de la cabecera.
Final del título del documento.
Final de la cabecera del documento.
Inicio del cuerpo del documento.
Final del cuerpo del documento.
Final del documento.

El documento se hallará situado en algún ordenador al que se pueda acceder a través de Internet. Para indicar la situación del documento en Internet se utiliza la URL (Uniform Resource Locator). La URL es el camino que ha de seguir nuestro navegador a través de Internet para acceder a un determinado recurso, bien sea una página Web, un fichero, un grupo de noticias, etc. Es decir, lo que el navegador de páginas Web hace es acceder a un fichero situado en un ordenador que está conectado a la red Internet. La estructura de una URL para una página Web suele ser del tipo http://dominio/directorio/fichero. El dominio indica el nombre del ordenador al que accedemos, el directorio es el nombre del directorio de ese ordenador y fichero el nombre del fichero que contiene la página Web escrita en HTML. Por ejemplo:

http://www.webtaller.com/manual-html/index.hml

Donde....
http:// es el indicador de pagina Web
www.webtaller.com es el Dominio (nombre) del ordenador
/manual-html/ es el Directorio dentro del ordenador

index.html es el Fichero que contiene la página Web

Ø Cuerpo: Los parámetros que admite la etiqueta

Background: define un grafico de fondo para la página.
bgcolor: define un color de fondo de la página.
text: cambia el color del texto
link: cambia el color de un enlace no visitado
leftmargin / topmargin: especifica el número de píxeles de margen entre el borde de la ventana y el contenido de la página, por default cero.
marginwidth / marginheight: igual en el caso anterior pero para navegadores de Netscape.

Aquí en esta parte ingresamos la información (el contenido de nuestra página) etiquetas HTML, código embebido de otros lenguajes permitidos embeberse en HTML. Aconsejable las propiedades y atributos de etiquetas HTML manejarlas con hojas de estilo.

Ø Titulares: Existen cuatro pasos para integrar titulares en su página web.
1. Escoja la sección o categoría.

2. Elija un tipo de diseño o edítelo.
3. Obtenga su código.
4. Intégrelo en su web.

Los titulares se actualizarán en tiempo real, manteniendo siempre informados a los lectores de su página.

Ø Hiperenlaces: La característica principal de una página Web es que podemos incluir Hiperenlaces. Un Hiperenlaces es un elemento de la página que hace que el navegador acceda a otro recurso, otra página Web, un archivo, etc.

Para incluir un Hiperenlaces se utiliza la directiva . El texto o imagen que se encuentre dentro de los límites de esta directiva será sensible, esto quiere decir que si pulsamos con el ratón sobre el, se realzará la función de hiperenlaces indicada por la directiva . Si el Hiperenlaces esta indicado por un texto, este aparecerá subrayado y en distinto color, si se trata de una imagen, esta aparecerá con un borde rodeándola. Esta directiva tiene el parámetro href que indica el lugar a donde nos llevará el Hiperenlaces si lo pulsamos.

5. imágenes: Las imágenes son un elemento muy importante para nuestra pagina WEB, ya que la adornan y la embellecen, pero hay dos aspectos que debemos tener en cuenta:
La primera es que el tiempo de descarga de una imagen es lento, lo cual quiere decir que si llenamos nuestra pagina de imágenes va a demorar mucho en descargarse completamente lo cual puede hacer que la persona si salga sin llegar a ver el contenido de esta. Es por esto que se dice que las imágenes en la Web son un arma de doble filo. Una buena imagen puede llamar la atención y ser de gran utilidad para ilustrar o para atraer visitantes, pero una imagen mala o muy pesada (es decir, un archivo de muchos kilobytes de tamaño) puede espantar hasta al más voluntarioso de los navegantes.

La segunda es que el visitante haya deshabilitado la carga automática de imágenes lo cual podría ser muy perjudicial si hemos escogido imágenes para explicación de algo, o como link, etc.

En cuanto a las imágenes existen dos formatos fundamentales que nos proporcionan el mejor uso: GIF (llamado así por sus siglas en inglés, Graphic Interchange Format) y JPEG (iniciales del grupo que lo desarrolló, el Joint Photograph Expert Group).

El formato GIF fue creado por la empresa CompuServe, para que sus usuarios pudieran intercambiar imágenes entre sí a través de la Red. Para almacenar la información, el GIF utiliza 8 bits (unidades de información) por cada pixel. Como cada bit tiene dos estados posibles (uno o cero), la imagen puede desplegar hasta 256 colores. Como la mayoría de los monitores tienen capacidad para representar por lo menos 256 colores en pantalla, el formato GIF funciona de manera razonable.

Por otro lado, el formato JPG fue creado especialmente para almacenar imágenes con calidad fotográfica. Cumple con su tarea sacrificando calidad de imagen a cambio de una paleta de colores más extensa. Utiliza 24 bits por pixel, lo que le permite albergar hasta 16.777.216 colores en cada imagen. A diferencia de lo que se puede llegar a pensar, el jpg no necesariamente es más pesado, ya que posee un mecanismo de compresión que reduce el tamaño del archivo mediante cierta pérdida en la información.

Como regla general, conviene utilizar archivos con extensión JPG cuando la imagen a insertar sea una foto. Si, en cambio, nuestra imagen contiene un logo o un dibujo de pocos colores o con grandes superficies cubiertas por colores parejos, es conveniente utilizar un GIF.

Leia Mais