sábado, 28 de junio de 2008

19.- Algunos Navegadores

aquí mencionaremos algunos navegadores que son necesarios para poder ver nuestros programas en acción:

Internet Explorer : Ya va por la versión 7 y es el navegador de Microsoft que viene preinstalado en los sistemas operativos Windows. Haciendo <click> en el siguiente icono iras directamente a la pagina de descarga de Microsoft.

explorer

Netscape : En su momento fue el mayor competidor de Microsoft en cuanto a navegadores. Actualmente su version es la 6.2 solo para windows. No es de los mas usados. Haciendo <click> en el siguiente icono iras directamente a la pagina de descarga de Netscape.

netscape

Mozilla FireFox: Mozilla Firefox va por la version 3.0 (nuevita), es gratuita y ya el 2º navegador por cantidad de usuarios. Es el rival actualmente mas serio de Internet Explorer. Haciendo <click> en el siguiente icono iras directamente a la pagina de descarga de Netscape.

image

Opera : Otra alternativa a los navegadores mencionados anteriormente es opera. que también podéis ir a su pagina de descargas haciendo <click> en el siguiente icono.

opera

Partiendo del supuesto que ya tengais instalado el Internet explorer, si es la versión 6.0 también vale, aconsejo descargar el Mozilla, ya que haremos nuestros programas para que los usuarios de ambos navegadores los puedan ver. Y que mejor que probar nosotros mismos como van a quedar. Se pueden tener instalados mas de 1 navegador en cada ordenador, sois vosotros después quienes elegís que navegador utilizar en cada caso.

Temas anteriores *
18.- Evolución del concepto hipertexto
17.- Información lineal e hipertexto
16.- Estructura básica de un documento HTML
15.- Definición de Tipos de Documentos (DTDs)
14.- Edición de páginas escritas en HTML
13.- Historia y evolución del lenguaje HTML y XHTML
12.- ¿Qué es HTML?
11.- URIs con identificadores y URIs relativos
10.- URL
9.- URI

viernes, 27 de junio de 2008

18.- Evolución del concepto hipertexto

Evolución del concepto Hipertext

En el post anterior tratábamos de explicar el concepto hipertexto, pues bien como todo nos "gastamos" explicando para decirles ahora que en la actualidad el hipertexto tiene un sentido mas amplio.

En la actualidad, un documento HTML nos permite incluir múltiples elementos multimedia (imágenes, sonido, vídeo, animaciones, etc.)

Los avances y la posibilidad de unión de hipertexto y multimedia acopia los beneficios de ambas tecnologías:

La multimedia proporciona una mayor riqueza y variedad en la transmisión de información, así como amplia el abanico de posibilidades para crear.

El hipertexto por su lado nos da una estructura que permite que los documentos se presenten y se exploren siguiendo diferentes secuencias.

Uniendo estos dos elementos, (hipertexto y multimedia) se obtiene el concepto de "hipermedia" donde se observa que los bloques de texto son cada vez menos y en su lugar aparecen  imágenes, animaciones y sonidos. Dando mas "vida" a las paginas web.

Temas anteriores *
17.- Información lineal e hipertexto
16.- Estructura básica de un documento HTML
15.- Definición de Tipos de Documentos (DTDs)
14.- Edición de páginas escritas en HTML
13.- Historia y evolución del lenguaje HTML y XHTML
12.- ¿Qué es HTML?
11.- URIs con identificadores y URIs relativos
10.- URL
9.- URI
8.- HTTP

jueves, 26 de junio de 2008

17.- Información lineal e hipertexto

Información Lineal e Hipertexto

Hoy trataremos de definir lo que es hipertexto.

Hipertexto fue definido en la década del 60 como "Una escritura no secuencial a un texto que bifurca, que permite que el lector elija y que lea mejor en una pantalla interactiva". Dicho de otra forma se trata de un conjunto de bloques de texto conectados entre sí por nexos (links) que dan opciones de diferentes caminos al usuario.

Podemos decir que hipertexto es un modelo diseñado para imitar la estructura asociativa, no lineal (un libro tiene estructura lineal), a través de enlaces electrónicos. Al seleccionar estos enlaces dirigen al usuario a recuperar información de acuerdo a sus preferencias.

Al no tratarse de un esquema lineal, es decir que no se lee un documento a continuación de otro linealmente, sino que a través de estos nexos se puede acceder a diferentes secciones según los criterios del usuario, facilitan la estructuración de toda la información.

Un ejemplo de hipertexto lo podéis ver en este mismo blog, si hacéis click en cualquiera de los enlaces de la derecha, los llevará al documento que este enlace señala.

Se que hasta el momento estoy dando la lata con estos temas, pero insisto que son muy útiles principalmente para los no iniciados.

Y si tenéis alguna duda consulta o preferís cambiar la dirección de estos post, solo tenéis que escribir en los comentarios.

* Temas anteriores *
16.- Estructura básica de un documento HTML
15.- Definición de Tipos de Documentos (DTDs)
14.- Edición de páginas escritas en HTML
13.- Historia y evolución del lenguaje HTML y XHTML
12.- ¿Qué es HTML?
11.- URIs con identificadores y URIs relativos
10.- URL
9.- URI
8.- HTTP
7.- Evolución de la red

martes, 24 de junio de 2008

16.- Estructura básica de un documento HTML

Estructura básica de un documento HTML

Al fin vamos a ver un poco de código, ya me aburría con tanta palabrería, ahora veremos un poco como es la estructura de un documento html.

Un documento HTML sencillo podría ser el que se ve en el siguiente cuadro

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title> HTML de ejemplo </title>
</head>
<body>
  <p> Aquí iria el texto del documento </p>
</body>
</html>

En este documento podemos apreciar los siguientes elementos fundamentales:

a.- En la primera línea de un documento HTML se debe indicar que versión de HTML utiliza el documento. En nuestro caso de ejemplo, utilizamos la versión estricta de la versión HTML 4.01 definida en el documento "http://www.w3.org/TR/html4/strict.dtd"

b.- Los documentos HTML comienzan con una etiqueta <html> y finaliza con una etiqueta </html>. Observad que la etiqueta final es igual a la inicial con la única diferencia que se le agrega delante la barra inclinada a la derecha “/”.

c.- Dentro del documento se pueden ver dos secciones:  Head y  Body.  (Cabecera y cuerpo).

d.- La sección Head (cabecera) empieza con la etiqueta <head>, finaliza con la etiqueta </head> y contiene la sección Title que define el título del documento.

e.- La sección Body (cuerpo) empieza con la etiqueta <body>, finaliza con la etiqueta </body> y contiene un párrafo de texto encerrado dentro de las etiquetas <p> y </p>.

* Temas anteriores *
15.- Definición de Tipos de Documentos (DTDs)
14.- Edición de páginas escritas en HTML
13.- Historia y evolución del lenguaje HTML y XHTML
12.- ¿Qué es HTML?
11.- URIs con identificadores y URIs relativos
10.- URL
9.- URI
8.- HTTP
7.- Evolución de la red
6.- Como comenzó Internet

lunes, 23 de junio de 2008

15.- Definición de Tipos de Documentos (DTDs)

Definición de Tipos de Documentos (DTDs)

En la primera línea de un documento HTML se debe especificar la versión en la que está desarrollado. Esto se consigue insertando una referencia (URI) a un documento donde se especifica formalmente la sintaxis y estructura de todos los elementos que se pueden utilizar en esa versión de HTML.

Este documento se llama DTD (Data Type Definition, en castellano Definición de Tipos de Documento).

La DTD indica qué elementos, atributos, y demás, tiene un documento y cómo se anidan. No dice nada acerca de tipos de dato. En función de la DTD que se defina para ese documento, se permitirán o se prohibirán el uso de ciertos elementos. La definición de la versión de un documento HTML tiene la siguiente estructura:


donde el FPI (Format Public Identifier o Identificador Público de Formato) y la URI_DTD (URI de la DTD que define formalmente el FPI seleccionado) varían en función de las necesidades del documento.

Los posibles juegos de valores se pueden ver en la tabla que muestra el siguiente link:

Tabla de valores

Bueno ahora se anima un poco la cosa, ya sabemos que significa esta complicada línea de código que siempre (o casi siempre) vemos en los encabezados del código de las páginas web.

* Temas anteriores *
14.- Edición de páginas escritas en HTML
13.- Historia y evolución del lenguaje HTML y XHTML
12.- ¿Qué es HTML?
11.- URIs con identificadores y URIs relativos
10.- URL
9.- URI
8.- HTTP
7.- Evolución de la red
6.- Como comenzó Internet
5.- Introducción a la WEB

domingo, 22 de junio de 2008

14.- Edición de páginas escritas en HTML

Edición de páginas escritas en HTML

Como hemos dicho anteriormente HTML es un formato basado en texto, diseñado para ser leído y editado directamente usando un editor de texto. No obstante, escribir y mantener un gran número de páginas a mano requiere esfuerzo y conocimiento en profundidad de HTML, además de la dificultad del análisis del código. Un editor simple para realizar un programa html es el notepad de Windows.

Para evitar este problema existen algunos editores visuales como Macromedia Dreamweaver y Microsoft FrontPage que permiten editar páginas web de una forma similar a como se edita un documento de texto. Sin embargo, estos editores pueden llegar a generar código HTML de muy baja calidad sobre el que tarde o temprano habrá que realizar una operación de limpieza y reestructuración, utilizando un editor de texto.

La extensión de los ficheros que contienen código HTML es .html. Pero, debido a las limitaciones del sistema de ficheros del sistema operativo DOS de Windows, la extensión .htm también es aceptada como válida.

El código HTML también se puede generar de forma automática desde el servidor como respuesta a la ejecución de un script de servidor (escrito en Perl, PHP, ASP, JSP, etc.).

* Temas anteriores *
13.- Historia y evolución del lenguaje HTML y XHTML
12.- ¿Qué es HTML?
11.- URIs con identificadores y URIs relativos
10.- URL
9.- URI
8.- HTTP
7.- Evolución de la red
6.- Como comenzó Internet
5.- Introducción a la WEB
4.- Como empezar con PHP y MySQL

sábado, 21 de junio de 2008

13.- Historia y evolución del lenguaje HTML y XHTML

Historia y evolución del lenguaje HTML y XHTML

Si, si… se que este tema es “pesado” que todos queremos comenzar a escribir código y ver los resultados, pero es muy importante, conocer sobre estos temas, y que nuestra cabeza se vaya formando en estos conceptos HTML, HTTP, URI, URL, PHP, MySQL, WEB, son signos incomprensibles para muchas personas, pero a esta altura ya muchos de vosotros, al menos sabéis a que se refiere cada uno.

HTML fue definido originalmente por Tim Berners-Lee. Actualmente HTML es un Estándar Internacional (ISO/IEC 15445:2000), y es mantenido por el World Wide Web Consortium (W3C).

Las primeras versiones de HTML eran muy sencillas con el objeto de que fuera sencillo editar un documento HTML por personas no familiarizadas con la edición de textos. Los navegadores Web mostraban las páginas incluso con errores sintéticos, interpretando lo que el usuario habría querido mostrar. Con el paso del tiempo, los estándares han ido haciendo más rígida y formal la sintaxis del lenguaje, aunque los navegadores siguen mostrando los errores de sintaxis. El W3C ha definido como sucesor de HTML al lenguaje XHTML.

XHTML aplica las reglas de sintaxis estricta de XML al lenguaje HTML, facilitando de esta forma el mantenimiento y procesamiento de los documentos. No hay que confundir a XHTML con la versión actual de HTML.

XHTML es un estándar diferente pero que convive en paralelo con HTML. De hecho el W3C recomienda el uso de XHTML 1.1, XHTML 1.0, o HTML 4.01 para la publicación de páginas web.

En el próximo post, iremos viendo como editar documentos en html.

* Temas anteriores *
12.- ¿Qué es HTML?
11.- URIs con identificadores y URIs relativos
10.- URL
9.- URI
8.- HTTP
7.- Evolución de la red
6.- Como comenzó Internet
5.- Introducción a la WEB
4.- Como empezar con PHP y MySQL
3.- PHP y MySQL

viernes, 20 de junio de 2008

12.- ¿Qué es HTML?

¿Qué es HTML?
Vamos a comenzar a hablar sobre el HTML, es necesario dominar o conocer bien este lenguaje antes de introducirnos en otros lenguajes web, como el php.

HTML son las iniciales de HyperText Markup Language (dicho en castellano lenguaje de marcas basado en hipertexto). Este lenguaje de marcas fue diseñado para la creación de páginas web, y su posterior visualización en los navegadores. Es por lo tanto un leguaje de presentación, estructuración y especificación de hipervínculos.

HTML define la sintaxis y colocación de etiquetas especiales incluidas dentro del texto del documento, que no son visualizadas por el navegador, pero que si indican cómo mostrar los contenidos del documento, con texto, imágenes y elementos multimedia.
La estructura de un texto en HTML, se supone compuesta por cabeceras, párrafos, listas de elementos, etc. Además, es posible marcar el texto con diversos estilos de presentación, como por ejemplo, título, subtítulo, lista numerada, negrita, itálica, etc.

Este lenguaje es estandarizado y multiplataforma. Un documento preparado utilizando marcas HTML puede ser leído por una gran variedad de navegadores web, como FireFox, Opera, Netscape, o Explorer. El navegador interpreta las marcas HTML en un archivo y presenta la información formateada como una pagina web. Además, el navegador se puede ejecutar en aquella plataforma de Sistema Operativo sobre el que se encuentre disponible.

Por menciona un ejemplo, el navegador FireFox de Mozilla se puede ejecutar tanto en máquinas con Sistema Operativo Windows, como sobre equipos Linux, UNIX o Apple.

* Temas anteriores *
11.- URIs con identificadores y URIs relativos
10.- URL
9.- URI
8.- HTTP
7.- Evolución de la red
6.- Como comenzó Internet
5.- Introducción a la WEB
4.- Como empezar con PHP y MySQL
3.- PHP y MySQL
2.- MySQL, ¿Que es?

jueves, 19 de junio de 2008

11.- URIs con identificadores y URIs relativos

Seguimos con las URIs

Identificadores de fragmento

Hay algunas URIs que se refieren a una localización dentro de un recurso. Este tipo de URIs termina con un "#" seguido de un identificador de vínculo (llamado identificador de fragmento). Esta notación permite acceder a zonas internas de un documento.

Por ejemplo, aquí tenemos un URI que apunta a una zona interna llamada seccion_4 del documento html/principal.html, localizado en el servidor documentos.com.


URls relativos

A un URI que no contiene información completa sobre la localización del objeto se le llama relativo. Su ruta de acceso se refiere generalmente a un recurso que está en la misma máquina que el documento actual. Los URIs relativos pueden contener indicadores relativos de ruta.
Por ejemplo, "../" significa un nivel superior en la jerarquía definida por la ruta de acceso), y puede contener identificadores de fragmento.

Los URIs relativos se convierten en URIs completos a partir de un URI base. Como ejemplo de conversión de un URI relativo, supongamos que tenemos el URI base "http://www.milugar.com/documentos/entra.html". Si utilizamos el URI relativo proveedores.html dentro de un enlace de hipertexto :

se expandiría al URI completo


Asimismo el URI relativo de la siguiente línea de código de una imagen:

se expandiría al URI completo


Dentro de un documento escrito en HTML, se usaran los URIs para:

Crear un vínculo a otro documento o recurso.
Crear un vínculo a una hoja de estilo o script externos.
Incluir una imagen, objeto o aplicación en una página.
Crear un mapa de imágenes.
Enviar un formulario.
Crear un documento con marcos.
Citar una referencia externa.
Hacer referencia a convenciones de metadatos que describen un documento.
Designar una imagen de fondo.

* Temas anteriores *
10.- URL
9.- URI
8.- HTTP
7.- Evolución de la red
6.- Como comenzó Internet
5.- Introducción a la WEB
4.- Como empezar con PHP y MySQL
3.- PHP y MySQL
2.- MySQL, ¿Que es?

10.- URL

URL
Hemos visto en el post anterior lo que es URI, pues bien ahora veremos que es la ton sonada URL que significa Localizador Uniforme de Recursos (Uniform Resource Locator).


Suena importante, pero se preguntaran que significa esto.? Un URL es una cadena de caracteres con la que se asigna una dirección única a cada uno de los recursos de información disponibles en Internet. Cada recurso tiene un URL único en la Web. El URL de un recurso de información es su dirección en Internet. Esta dirección permite que el navegador encuentre de forma precisa el recurso en la Web, para poder realizar la petición de este. El URL combina el nombre del ordenador que proporciona la información, junto con el directorio donde se encuentra, el nombre del fichero y el protocolo a usar para recuperar los datos.

Un URL es un URI que además indica como localizar el objeto en cuestión. El conjunto de los URLs es por tanto un subconjunto de los URIs. Los URLs se componen normalmente de tres partes: Tomaremos como ejemplo el URL que designa este blog con la entrada: http://bobuu.blogspot.com/2008/06/mysql.html

Este URL puede interpretarse de la siguiente manera:
Hay un documento disponible a través del protocolo HTTP, que se encuentra en la máquina bobuu.blogspot.com accesible a través de la ruta "/2008/06/mysql.html. Entre otros esquemas que pueden encontrarse en documentos HTML se incluyen "mailto" para correo electrónico y "ftp" para FTP.

Pongamos ahora otro ejemplo de URL. Éste referido al buzón de correo electrónico de un usuario:

...aquí va texto...

Para cualquier comentario, envíe un mensaje a

<a href="mailto:jose@midomino.com">Jose Chachi</a>

Resumiendo el formato general de un URL es el siguiente:
protocolo://máquina/directorio/fichero

El formato extendido de un URL puede también incluir, el nombre y contraseña de un usuario, y el puerto de conexión al servidor. Lo vemos esquemáticamente a continuación:
protocolo://usuario:contraseña@máquina:puerto/directorio/fichero

Y ahora un ejemplo: http://juan:micontraseña@dondelopuse.eu.mkk.es:8080/modera/precios.txt

La especificación detallada del URL se encuentra en la RFC 1738 (Uniform Resource Locators).

Ya hemos visto URL, URI, y poco a poco estamos familiarizandonos con la web y sus tecnicismos. Todos estamos impacientes por empezar a realizar programas que funcionen. Pero les pido un poco de calma, y aunque se haga pesado tratéis de entender estos términos, ya que todo esto es información muy útil y necesaria para lo que viene.