Tanaceto y la Información

Siempre es preferible un final catastrófico a una catastrofe sin fin.

Archive for the ‘html’ Category

Como añadir meta-datos (metatags) a una página web

Posted by tanaceto en octubre 29, 2009

“Las metatags son etiquetas html que se incorporan en el encabezado de una página web y que resultan invisibles para un visitante normal, pero de gran utilidad para navegadores u otros programas que puedan valerse de esta información.

Su propósito es el de incluir información (metadatos) de referencia sobre la página: autor, título, fecha, palabras clave, descripción, etc.

Esta información podría ser utilizada por los robots de búsqueda para incluirla en las bases de datos de sus buscadores y mostrarla en el resumen de búsquedas o tenerla en cuenta durante las mismas y será invisible para un visitante normal”.

Wikipedia 29 de octubre de 2009

Para añadir los metadatos a nuestra página web deberemos abrir el archivo principal (index.html) en cualquier editor de texto o programa de edición HTML. Una vez con el código html delante, añadiremos esto entre <head> y </head>:

<title>Título de la web</title>
<meta name=”description” content=”Una breve descripción”>
<meta name=”keywords” content=”palabras, claves, separadas, entre, comas”>
<meta name=”author” content=”nombre del autor de la web”>
<meta name=”email” content=”autor@mailinator.com”

Guardamos, subimos el index.html modificado a nuestro servidor web y listo. También podemos ir a alguna web que auto genere los metatags, como AddMe, por ejemplo. Luego simplemente tendremos que dar de alta nuestra página en los buscadores que queramos, si no lo hemos hecho ya. Podemos usar las herramientas para navegadores de Google para actualizar nuestros datos lo antes posible.

Anuncios

Posted in html, internet, software | Leave a Comment »

Como configurar “servidores virtuales” en Apache2

Posted by tanaceto en julio 1, 2008

Por fin lo conseguimos. Después de muchos intentos ya puedo contar cómo configurar un servidor Apache2 para que aloje varias páginas web bajo una misma IP externa.

Para ello, una vez instalado el Apache2 deberemos ir a: /etc/apache2

y abrir el archivo httpd.conf (comando (yo uso ubuntu, por lo que uso “sudo” para autentificarme como root): sudo nano httpd.conf (y añado la contraseña que me pide para administrar).

A mi siempre me ha aparecido vacío. Entonces añado el siguiente texto en el archivo:

NameVirtualHost *:80

<VirtualHost *:80>
ServerName http://www.pagina1.com
ServerAlias pagina1.com *.pagina1.com
DocumentRoot /var/www/pagina1
</VirtualHost>

<VirtualHost *:80>
ServerName http://www.pagina2.com
DocumentRoot /var/www/pagina2
</VirtualHost>

Siendo 80 (si quieres un usar más seguridad investiga sobre SSH) el puerto redireccionado desde el router (para eso entras en la configuración del router, donde normalmente está en la opción NAT). Deberás crear también las carpetas correspondientes en el directorio que corresponda, y ahí añadir el index.html de cada una. Reinicias el servidor Apache2 (sudo /etc/init.d/apache2 restart) y no debería salirte error (salvo el clásico de incluir la IP interna como ServerName en caso de no haber ninguna disponible). Por cierto, “*” es para que valgan todos los nombres, pero puedes ponerle el específico si lo deseas.

Así a mí me funciona, aunque debo reconocer que me volví loco con la carpeta de sites-available y sites-enabled, las cuales hasta que no me olvidé de ellas no pude hacerlo funcionar. Creo que se puede configurar virtual hosts de varias maneras. De todas formas un error que no he conseguido arreglar es por ejemplo son las estadísticas del sitio una vez empiece a funcionar. No sé donde manda los .log, aunque tiene que ser sencillo.

Otra cosa, lo de “server alias” es para añadir alias al nombre de domino asignado. Es práctico si configuras las páginas web desde la propia red local, y usas CSM como por ejemplo Joomla.

* Un detalle a tener en cuenta es que si usas otro ordenador de la LAN conviene crear un virtual host con la IP de la LAN del ordenador servidor (apache). Si usas el mismo ordenador entonces lo que haces es poner la IP interna (localhost o 127.0.0.1). Como DocumentRoot asignamos la carpeta raíz del directorio y para acceder a todas las páginas tan solo añadimos la carpeta a la dirección de búsqueda del navegador (ejemplo: http://127.0.0.1/pagina1/index.html)

<VirtualHost *:80>
ServerName 127.0.0.1
DocumentRoot /var/www/
</VirtualHost>

Posted in html, internet, linux, software | 9 Comments »

Como ampliar o reducir el texto en nuestro navegador Firefox

Posted by tanaceto en junio 14, 2008

Conozco gente que se deja las pestañas por simplemente no apretar

Ctrl + ——–> Amplia la fuente del texto html.

ó

Ctrl – ——–> Disminuye el tamaño de dicha fuente.

Una bobería que conviene recordar.

Posted in firefox, html, info, internet, linux, mac, ubuntu, windows | 2 Comments »

DocMan: Gestor de Archivos para Joomla

Posted by tanaceto en febrero 5, 2008

He probado con éxito el sistema de compartición de archivos para Joomla (1.0 y 1.5 con legacy mode) y la verdad es que funciona perfectamente. Estamos hablando de un componente que es software libre.

imagen-2.png


Los pasos son muy sencillos.

1. Me bajé el programa en el gestor de extensiones de http://www.joomla.org. También el paquete de español (no se instala, sino que se añade al componente)

2. Instalé el programa en el sistema de instalación de mi Joomla 1.5 con legacy mode activo.

3. Añadí en uno de los Menús el enlace hacia el Docman, y me encargué que la columna de la izquierda quedará libre cuando se activara el programa para que no me lo comprima entre columnas (uso una plantilla con dos columnas laterales y una centra además dela cabecera y el pie).

4. Abrí la carpeta de traducción y busqué dentro de “themes” el archivo spanish.php

5. Accedí a mi servidor, al directorio raiz de mi web. Busqué dentro de complements el docman. Ahí busqué el archivo english.php. Lo guardé con otro nombre (english.phpOLD) subí el archivo spanish.php. Cambie el nombre del mismo por english.php y la traducción estaba lista. También puedes editar a mano el english.php para personalizar tu traducción.

6. Cree categorías y a compartir archivos. La configuración del programa es bastante completa, y tiene bastantes plugins. Es muy buen prograna

Saludos

Pablo

Posted in html, info, linux, software | 5 Comments »

Activar Plugin system-legacy mode en Joomla 1.5

Posted by tanaceto en enero 18, 2008

Uno de los detalles que hay que saber cuando instalamos nuestra versión 1.5 de Joomla es que el plugin “system-legacy mode” que permite la compatibilidad con la versión 1.0 del programa viene desactivada por defecto. Muchos no se dan cuenta que lo tiene ahi mismo porque está en la 2º página de los plug-in, puesto que por defecto solo te enseña los 20 primeros. Es un detalle, pero puede resolverte mucho trabajo si no eres un usuario experimentado

Posted in html, linux, software, ubuntu | 20 Comments »

Como instalar Joomla en Linux (ejemplo con Ubuntu Server 7.10)

Posted by tanaceto en enero 14, 2008

Para instalar el CMS Joomla tenemos que hacer una serie de pasos muy sencillos. Debemos crear una base de datos e instalar el Joomla. Uso un Ubuntu Server para mi explicación. Aviso por lo del comando “sudo” que usaré. Si usas otro sistema ten en cuenta que deberás acceder como usuario adminstrador para la creación de la base de datos)

imagen-4.png

1. Asegurarnos que nuestro sistema Linux tiene correctamente instalados Apache, MySQL y PHP (Una buena manera es instalar el Ubuntu-Server, seleccionar la opción de LAMP y listo).

2. Crear una base de datos para joomla. Deberemos entrar en el MySQL. Recuerda que necesitamos privilegios de administrador, por lo que usaremos el comando sudo que nos autentifica como tal.

sudo mysql -h NombreDelServidor -u NombreDeUsuario -p

ejemplo desde el usuario-administrador “root”:

sudo mysql -h -u root -p

y una vez dentro escribimos:

CREATE DATABASE nombredelabase;

por ejemplo:

CREATE DATABASE joomla;

(atento a poner lo del ;)

Luego debemos activar la base de datos que nos interese. Se hace con el comando “use”

use joomla;

Si queremos comprobar qué bases de datos están disponibles solo tenemos que usar el comando “show databases;”).

show databases;

-si por aquí no hemos podido hacerlo, puedes probar un GUI para MySQL a ver si tienes mas suerte-

3. Descargarnos el Joomladesde la página oficial. -Recomiendo la versión 1.5.x, a la que podemos añadir plantillas de lenguaje español si es nuestro objetivo-. Ya está disponible la versión estable.

4. Descomprimir en una carpeta y añadir su contenido a nuestro directorio raíz web (por defecto suele ser /var/www, pero puede ser otro).

5. Ir a nuestro navegador web (Firefox por ejemplo) y escribir la IP local (127.0.0.1 ó localhost)

http://127.0.0.1

6. Usar el menú web para instalar el joomla. En host de la base de datos ponemos “localhost” o 127.0.0.1. El nombre en nuestro ejemplo será “root”.

7. Una vez termines deberás borrar la carpeta “install” del servidor raíz web (te lo dice).

8. Accedes desde tu navegador escribiendo en la barra de navegación: localhost o 127.0.0.1. Para acceder a la administración del sitio deberás ir a localhost/administrator o acceder desde la web de ejemplo que salta con el joomla recién instalado.

9. Busca documentación sobre qué permisos debes introducir a cada carpeta para que todo vaya bien, sobretodo en la instalación de aplicaciones. Para temas de permisos usa el comando chmod. los permisos van de 000 a 777 (de mayor restricción a menor restricción). Por ejemplo:

sudo chmod -Rf 777 /templates

Que la suerte te acompañe.

Posted in html, linux, software, ubuntu | Etiquetado: | 20 Comments »

Hacer una página básica HTML con Dreamweaver CS3 (III): Crear un Sitio

Posted by tanaceto en noviembre 23, 2007

Cuando hayamos usado el Dreamweaver para hacer unas cuantas páginas, ya sabremos que hay que tener mucho cuidado en donde se guardan los archivos y carpetas, y cada vez que retocabamos un archivo asociado a nuestra web teníamos problemas. Para una gestión mucho más eficiente y actualizada es muy interesante crear un “sitio”, donde podremos trabajar más cómodamente e incluso configurar la conexión con nuestro servidor htttp para actualizar la web desde el Dreamweaver (la verdad es que yo prefiero usar programas distintos para diferencias el diseño de la web y el envío de la misma).
Bien, vayamos a lo nuestro: Abrimos el Dreamweaver y vamos a Site/New Site (Sitio/Nuevo Sitio). Se abre una ventana en la que vemos dos pestañas: Basic y Advanced. Como ya habrás podido imaginar, le damos a Advanced.

Dentro de Categoriy (categorías) vamos a Local Info:

j2.png

Introducimos el nombre del sitio y la carpeta donde se ubicarán los archivos relacionados. Yo suelo crear una carpeta para cada trabajo web que hago.

En Remote Info ponemos “None” en Access. Si queremos configurar la conexión con nuestro servidor http es aquí donde debemos hacerlo, pero yo uso programas independientes (como el cyberduck).

Lo demás lo dejamos tal y como nos viene. Ya tendremos creado nuestro “Sitio”. Podremos, con la columna de la izquierda, en la pestaña “sitios” modificar los archivos enlazados a nuestra web. Lo normal es crear un sitio para cada web que hagas.

ff1.png

Posted in html, info | 1 Comment »

Como publicar tu página web en OS X

Posted by tanaceto en noviembre 11, 2007

Aunque muchos no lo saben, el sistema operativo de Apple, el OS X, trae ya instalado el servidor http apache. Es el programa que nos permitirá alojar nuestra página web y que las personas que quieran verla solo tengan que acceder a nuestra dirección IP externa (la que nos suministra nuestro ISP) y disfrutar de sus contenidos desde su navegador web (como por ejemplo Firefox).

Primero deberemos activar el Apache. Para ello vamos a Preferencias del Sistema / Compartir. Una vez en la ventana nos fijaremos en “Servicios”.

1.png

Dentro marcamos la opción de “compartir web”, y activamos el proceso. Creo que no hace falta reiniciar, pero no estoy seguro. Una vez hemos activado el proceso nuestro OS X es ya un servidor web.

La carpeta para poner nuestra web es la siguiente:

Sistema/Librería/Webserver

Y para comprobar que funciona solo debemos introducir nuestra dirección IP interna (http://127.0.0.1) en nuestro navegador web.

aimagen-1.png

Lo que queda es redireccionar el puerto 80 hacia tu dirección IP local. Depende del modelo de router que tengas (si usas modem no hay problema). El puerto 80 es el puerto por defecto asignado al protocolo http (que sustenta Internet). Podemos asignar otro puerto, pero entonces la persona que escriba nuestra dirección deberá añadir el puerto concreto (ejemplo: http://85.45.69.124:5000)

Para que otros amigos puedan ver tu web necesitarás saber tu dirección IP externa. La puedes saber acudiendo a muchas páginas webs (por ejemplo la de cualestuip).

PD: Ya para completar la jugada deberás registrar un dominio (www.ejemplo.com) y asociarlo a tu IP externa (que deberá ser estática o usar algun programa como no-ip)

Posted in html, info, internet, mac, software | Leave a Comment »

Cómo hacer una página básica html en Dreamweaver CS3 (III): Las imágenes de sustitución

Posted by tanaceto en octubre 12, 2007

Hoy vamos a seguir explicando cómo se pone una imagen de sustitución (rollover image) en el dreamweaver CS3. Consiste en crear un espacio para una imagen que cuando pasamos el ratón sobre ella cambie a otra imagen (durante el tiempo que el cursor del ratón se quede sobre la imagen).

* Recuerda que una imagen individual se introduce en Insertar/Imagen (Insert/Image).

1. Creamos nuestra página con su tabla correspondiente. Para saber más de esto consulta los antiguos post relacionados (1 y 2).

2. Seleccionamos la tabla y le damos a Insertar/Objetos de imagen/Imagen de sustitución (Insert/Image Objets/Rollover Image). Nos saldrá esta ventana:

lk2.png

3. En ella vemos dos pequeños rectángulos donde ponemos las dos imágenes que queremos insertar. La primera es la que se verá normalmente, y la segunda solo se verá cuando pasemos el ratón por encima de la imagen. De paso también hemos introducido un enlace para cuando se presione con el ratón sobre la imagen (siempre será la segunda imagen la que se vea cuando presionemos).

Un ejemplo de una página con imágenes de sustitución la encontramos en la página web del documental Teranga.

* Si combinamos una imagen de sustitución con una imagen gif animada (podemos hacerla con el Adobe ImageReady, por ejemplo), podemos crear una animación cuando el ratón pasa sobre el objeto/imagen seleccionada. Se pueden conseguir efectos muy bonitos.

Posted in html, info | Leave a Comment »

MetaTags para páginas html

Posted by tanaceto en octubre 9, 2007

Tenemos nuestra preciosa página web en su servidor Apache listo para funcionar y con su nombre de dominio bien enlazado. ¿Cómo hacemos que los buscadores tengan la información de nuestra página?.

La respuesta es sencilla: usando alguna de las miles de páginas que sirven de alta para los buscadores más usados (con google a la cabeza claro). Con registrar tus datos ya se encargan ellos gratuitamente en darte el alta (lo tienen informatizado).

Una vez hemos realizado este proceso solo nos queda esperar hasta que los buscadores sean capaces de encontrar nuestra página, pero hay algo más. Los buscadores leen los metatags, que no son otra cosa que trozos de código html con información específica para los buscadores. Tienes que escribirla en tu index.html, pero no te preocupes, será un corta y pega.

Para hacer las metatags puedes ir a cualquier de las miles de páginas que te facilitan escribir el código html que necesitas. En nuestro caso vamos a usar una que se llama Alta Buscadores. Accedemos a la sección de “metatags” y rellenamos con los datos de nuestra web la información que queremos que los buscadores lean de nuestra página web (título, autor, breve descrpción, palabras clave, etc).

Generamos el código y lo copiamos. En nuestro caso este fue el resultado:

<title>Tanaceto</title>
<meta name=”title” content=”Tanaceto”>
<meta name=”DC.Title” content=”Tanaceto”>
<meta http-equiv=”title” content=”Tanaceto”>
<meta name=”DC.Creator” content=”www.altas-buscadores.com”>
<meta name=”keywords” content=”tanaceto, informatica, redes, software, hardware, linux, mac, blog”>
<meta http-equiv=”keywords” content”tanaceto, informatica, redes, software, hardware, linux, mac, blog”>
<meta name=”description” content=”Tanaceto es un blog sobre informática y redes”>
<meta http-equiv=”description” content=”Tanaceto es un blog sobre informática y redes”>
<meta http-equiv=”DC.Description” content=”Tanaceto es un blog sobre informática y redes”>
<meta name=”author” content=”tanaceto”>
<meta name=”DC.Creator” content=”tanaceto”>
<meta name=”vw96.objectype” content=”Document”>
<meta name=”resource-type” content=”Document”>
<meta http-equiv=”Content-Type” content=”ISO-8859-1″>
<meta name=”distribution” content=”all”>
<meta name=”robots” content=”all”>
<meta name=”revisit” content=”15 days”>

Lo siguiente es abrir nuestro archivo index.html con el editor html, poner la visualización en forma de código y pegar el texto copiado debajo del primer <head>, bueno, eso es lo que hago yo. Grabamos y volcamos el index.html modificado en el servidor. En unos cuantos días podrems comprobar si los buscadores son capaces de leer la información de tus metatags.

Posted in html, info, software | Leave a Comment »

Hacer una página básica HTML con Dreamweaver CS3 (II): Los Marcos

Posted by tanaceto en octubre 9, 2007

Esta es la segunda parte del post “Como hacer una página básica HTML con Dreamweaver (I)“.

Anteriormente hemos realizado una sencilla página html (index.html) con tres tablas (donde hemos añadido texto html y alguna imagen) y un enlace (link).

Vamos a seguir profundizando un poco en el Dreamweaver. Para ello introduciremos un nuevo elemento con mucho juego: los “marcos”.

– Los Marcos (frames):

Cuando hacemos una página html, ésta ocupa todo el espacio del navegador, pero a través de los marcos podemos hacer que una página principal sea el enlace a dos páginas html con un tamaño concreto donde se pueden visualizar independientemente y que veamos las dos páginas en una sola ventana.

Podemos hacer múltiples marcos, pero por ahora solo vamos a dividir una página en dos, con el fin de poder hacer una página donde pondremos un menú superior fijo y una página inferior que irá cambiando en función de los enlaces que presionemos (situados en la página fija superior). Veamos como se hace:

1. Abrimos el Dreamweaver y creamos una página nueva (HTML).

2. Vamos a Insertar/HTML/Marcos (Insert/HTML/Frames) y seleccionamos el “Top”. Se abrirá una pequeña ventana donde tendremos que especificar el nombre del nuevo marco (frame). Es importante poner bien el nombre para luego situarnos sin problemas sobre la página correspondiente. En este caso le pondré el nombre “top frame” a mi página superior. Verás que aparece una línea gruesa gris que divide la página en dos. Cuando presionas sobre la superior te sitúas en ella, y lo mismo con la inferior.

ff.png

* Aquí quisiera especificar dos detalles:

– Cuando creamos un “marco”, las páginas resultantes de tal división quedan separadas por una línea gruesa que podemos mover con el ratón (cambiando de tamaño las páginas). Pero cuando abrimos ese archivo previamente guardado, esa línea desaparece. Deberemos activarla (para poder mover esa línea a nuestro antojo) en View/Visual Aids/Frame (perdón, pero no tengo la versión en español).

h.png

– Solo tenemos que presionar con el ratón sobre la página que queramos modificar, pero, ¿cómo activar la página index.html que nos permitirá abrir las dos nuevas páginas creadas con nuestro marco?. Bien, para ello deberemos ir a Ventanas/Marcos (Windows/Frame). A nuestra derecha se abrirá una ventana donde se puede ver la página que hemos creado. Si presionamos sobre cada una de las dos páginas accedemos a ellas, y si presionamos la línea que los une (en gris claro), se marcarán las dos y veremos que tenemos el index.html marcado. Esto es muy útil cuando queramos, por ejemplo, introducir los mega-tags, pero eso será otro post.

2. Lo segundo que hacemos es acceder a las propiedades de página de cada una de las dos que hemos creado, e introducir los valores que nos parezcan más oportunos.

3. Ahora deberemos guardar el proyecto. Yo, por sistema, creo una carpeta nueva donde voy introducir mis archivos html de la web. En este caso, llamaremos a la carpeta “Web”. Una vez creada me voy al Dreamweaver y le doy a “guardar todo”, en Archivo/Guardar Tod (Archive/Save All). Como no hemos guardado el proyecto hasta ahora, nos saldrá una ventana para asignar un nombre a cada una de las tres páginas de las que disponemos (hemos hecho un marco que divide la página en dos, por lo que tenemos dos páginas (una superior y otra inferior) y una página principal que nos sirve para visualizar las otras dos en una sola ventana, y que será la que usemos para leer nuestra página (como siempre, se deberá llamar index.html, para que los servidores la reconozcan). También deberá ir en la propia carpeta “web”.

Para darnos cuenta de qué página estamos guardando, tendremos que mirar el cuadrado que señala qué página estamos guardando. La primera es la principal, que abarca las dos páginas. A esta la llamaremos “index.html”. A la segunda, que es la inferior, la denominaremos “cuerpo.html”. A la tercera (la superior) la llamaremos “cabeza.html”. Recuerda que deberas darle un título a cada página en vez del “untitled document”.

4. Hemos dicho que queremos crear un menú superior con una serie de categorías que una vez sean presionadas con el ratón, abrirán una página con la información que queramos, pero no en “cabeza.html”, sino en “cuerpo.html”.

Nuestras categorías, para este ejemplo, serán 2: “contacto” y “enlaces”. Nos situamos en “cabeza.html” y creamos una tabla con dos columnas y una sola fila. En su interior escribimos en texto las dos categorías. En “cuerpo.html” creamos una tabla con un mensaje de bienvenida a nuestra web.

kjh.png

5. El siguiente paso es crear una página nueva para el contenido de “contacto” y otra para el contenido de “enlaces”. Introduciremos una simple tabla con una columna y una fila y dentro escribiremos los datos que queramos meter. Las guardaremos como “contacto.html” y “enlaces.html”, en una carpeta llamada “html” que hemos creado previamente dentro de la carpeta “Web”. Podría grabarlas directamente en la carpeta web, pero a la larga, a medida que la página tiene más elementos, se vuelve un lío, así que es mejor subdividir en carpetas desde un principio. El modelo es el que consideres más oportuno, siempre que respetes a “index.html” como la principal e introduzcas y añadas los archivos de la web dentro de la carpeta principal. Los enlaces de “enlaces.html” recuerda ponerlos con un target blank, puesto que son páginas ajenas a la tuya y es mejor que abra una ventana nueva para que no se vaya el usuario de nuestra página.

fgj.png

5. Volvemos “cabeza.html”, y seleccionamos cada categoría añadiéndole un enlace (con la barra de tareas claro) con la ubicación de su archivo correspondiente, es decir, cuando hacemos un link nos deja una opción de buscar un archivo del ordenador, y elegimos para contacto el archivo “contacto.html”. En destino (target) veremos que además de los clásicos blank, self, etc, hay ahora main frame y top frame. Son nuestras dos queridas páginas creadas con el marco. Marcamos “main frame” en las dos, para que el enlace se abra en el hueco de cuerpo.html, y no en cabeza.html.

6. Lo único que nos queda es “guardar todo” (aquí, como ya hemos grabado una vez, nos guardará todo donde estaba previamente). Abres la página con algún navegador (en Archivo/Previa) y compruebas que todo esté bien.

Posted in html, info | 10 Comments »

Hacer una página básica HTML con Dreamweaver CS3 (I): Crear página nueva, tablas y enlaces

Posted by tanaceto en octubre 8, 2007

Objetivo: Crear una página html simple sin marcos con imágenes, texto html y enlaces.

* Esta explicación vale para Dreamweaver CS3 de OS X y de XP.

Hoy vamos a aprender cómo se hace una página simple en html. Hemos hablado en otras ocasiones de los servidores web Apache, y lo fácil que resulta tener nuestro propio servidor. Como las conexiones caseras suelen ser bastante lentas (sobretodo en la subida), la ligereza de la página es una aliada para nuestros objetivos.

Para la explicación usaremos el Adobe Dreamweaver CS3.

1. Lo primero de todo es abrir un nuevo documento HTML. Usaremos el diseño visual (hay otras dos opciones de visualización: como código o una mezcla). Aquí, aunque no vamos a trabajar con lenguaje html conviente ir mirando como se articula. Es un lenguaje bastante sencillo y no tardaremos en encontrarle su lógica.

kk1.png

El elemento clave para trabajar con el dreamweaver es este:

dd1.png

Permite configurar los elementos que tengamos seleccionados en la página (ya sea texto, una imagen, una tabla, etc).

– Al nuevo documento le asignamos un título (el nombre por el cual será reconocido por la web, y que saldrá siempre) y acudimos a “propiedades de página”. Ahí tenemos las opciones de personalización; lo más interesante es determinar una tipografía adecuada, adecuar los márgenes a nuestras necesidades y determinar el comportamiento de los links. (modify/page properties).

2. A continuación determinaremos la estructura de la web e insertaremos sus elementos. Para ello utilizaremos los denominados “tablas” (insert/table). En nuestro caso vamos a hacer una página con un título y un subtítulo en la parte superior, una imagen en la parte central izquierda, una área de texto en la parte central derecha y un pequeño texto con las características de la página e información de contacto.

dream1.png

– Primero creamos una tabla con dos filas y una sola columna. Debemos comprobar que el grosor de la línea exterior de la tabla es igual a 0. Si no saldrá un marco (entendido como línea) alrededor de la tabla. En nuestro caso también alinearemos la página con el centro, para que se mantenga centrada aunque se usen distintos tamaños en el navegador web (aling/center). En el hueco superior escribiremos el título de nuestra web, y en el inferior el subtítulo. Para finalizar ajustaremos el tamaño de la tabla exactamente a la extensión del subtítulo (en este caso no nos interesa hacer dos renglones de subtítulo).

– Nos situamos debajo de la tabla superior, y creamos una nueva tabla, esta vez con dos columnas y una sola fila. La centramos. Nos situamos en el lado izquierdo y le damos a insertar imagen (insert/image). Seleccionamos la imagen que queremos poner y aceptamos. En el lado derecho de la tabla escribimos un texto. Si queremos añadir un link a la imagen solo tenemos que seleccionarla y usar el menú para añadirle la dirección correspondiente (hacia Internet o hacia otro archivo nuestro, por ejemplo, otra página web con información más detallada.

* El Dreamweaver viene configurado por defecto para dejar dos renglones si utilizas el “enter”. Para que solo baje un renglón deberás usar el “enter”+”shift”.

** Antes de introducir una imagen para la web deberemos encargarnos de que ocupe lo mínimo de espacio. Lo normal es utilizar formas específicas de grabar imágenes para web (como en el photoshop), pero podemos hacerlo nosotros. Como consejo decirte que para imagenes con pocos colores, si puedes usar GIF mejor que JPG (recuerda que las GIF son imágenes con un máximo de 256 colores, por lo que para blanco y negro o imágenes con menos colores viene mejor que la JPG). También atento a su tamaño en pixeles (La resolución de la pantalla empleada, normalmente, suele ser de 1024 x 768 – 1024 x 864 – 800 x 600. Para garantizarnos que todo el mundo pueda ver nuestra página sin que salte el scroll (columna de desplazamiento) usaremos un tope de 800 x 600 (quizás estoy siendo demasidado conservador; hoy en día casi todo el mundo usa ya resoluciones mayores). El tamaño final de la página se ajustará a los elementos que pongamos en ella.

– Por último introduciremos una última tabla individual para poner datos de la web e información de contacto. También centrado y sin márgenes.

3. Queda hacer un enlace. Para ello seleccionaremos el elemento (sea texto o imagen) que queremos convertir en un link (el texto lo seleccionamos), en nuestro caso, un texto en la tabla central derecha que ponga “enlace a google”, y que nos lleve a la página correspondiente. Como queremos que abra una nueva página (es decir, que no nos mueva de la que ya hay), en “target” introduciremos el comando “blank“. Si quisiéramos que el enlace fuera en la misma pestaña deberíamos poner “self“.

* Recuerda que el formato para escribir una página empieza siempre con un html://

4. Por último solo queda guardar el archivo con el nombre de index.html y colocarlo en la carpeta correspondiente de nuestro servidor Apache (o el que quieras usar claro). A partir de entonces, y si tienes bien configurado el puerto 80 (puerto web por defecto) hacia tu ordenador, la gente podrá acceder a tu página escribiendo tu IP externa. Solo te quedará hacerte con un nombre de domino y coordinar IP con nombre de dominio.

Espero más adelante seguir con mis explicaciones de cómo hacer una página web html un poco más compleja (con marcos).

Posted in html, info, mac, windows | 24 Comments »