Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
info
Tu Sitio YA
A. Maurizzio Peñalba
1
http://www.tusitioya.info
Introducción
La Internet es un conjunto descentralizado de redes de comunicación interconectadas
que utilizan la familia de protocolos TCP/IP, garantizando que las redes físicas
heterogéneas que la componen funcionen como una red lógica única, de alcance
mundial. Sus orígenes se remontan a 1969, cuando se estableció la primera conexión
de computadoras, conocida como ARPANET, entre tres universidades en California y
una en Utah, Estados Unidos.
Uno de los servicios que más éxito ha tenido en Internet ha sido la World Wide Web
(WWW, o "la Web"), hasta tal punto que es habitual la confusión entre ambos
términos. La WWW es un conjunto de protocolos que permite, de forma sencilla, la
consulta remota de archivos de hipertexto. Ésta fue un desarrollo posterior (1990) y
utiliza Internet como medio de transmisión.
La web está disponible como una plataforma más englobada dentro de los mass
media. Para "publicar" una página web, no es necesario acudir a un editor ni otra
institución, ni siquiera poseer conocimientos técnicos más allá de los necesarios para
usar un editor de texto estándar.
Lo necesario
Únicamente necesitaremos saber leer, y una conexión a internet, pues los recursos
que utilizaremos están disponibles en la red de manera gratuita.
Dudas
Siempre puedes preguntar en el /Foro/ donde procuraremos responder tus preguntas
lo mejor que podamos, puedes buscar y leer los temas en el foro sin necesidad de
registrarte sin embargo para poder preguntar debes hacerlo. Es necesario que
evitemos el SPAM y es una manera de hacerlo.
2
http://www.tusitioya.info
1. Conceptos básicos
1.1 Software Necesario
NOTA: El 90% del curso puede seguirse utilizando cualquier editor de código fuente
como el HTML-Kit o bien KompoZer (ambos totalmente gratuitos).
https://www.adobe.com/cfusion/tdrc/index.cfm?product=dreamweaver&loc=es_es
3
http://www.tusitioya.info
Sea que hayamos descargado el trial, o bien hayamos obtenido alguna versión menos
“legal” de Taringa o Nicarevolution. El proceso de instalación será relativamente
sencillo y no vale la pena detallarlo aquí.
Es hora de iniciar con la creación de nuestro sitio web, sin embargo, es importante que
configuremos nuestro espacio de trabajo. Así pues, ejecutaremos el Dreamweaver y
veremos algo como esto
4
http://www.tusitioya.info
Vamos a seleccionar “No” Por el momento, no nos hará falta un servidor. Ya será en la
segunda parte de este curso que utilizaremos tecnologías como php. Solo nos queda
hacer Clic en Siguiente.
Aquí podemos seleccionar la ruta para nuestros archivos locales. Yo lo dejare por
defecto, la ruta señalada es el directorio raíz de Mis Documentos. Clic en “Siguiente”
5
http://www.tusitioya.info
Cuando se nos pregunte como nos conectaremos con nuestro servidor remoto,
seleccionaremos “Ninguno” y hacemos clic en Siguiente
Una vez que hemos completado la configuración del nuevo sitio, veremos de nuevo la
pantalla de bienvenida, sin embargo en el administrador de archivos, veremos algo
como esto
Esto nos permitirá mantener el orden del sitio y almacenar todos nuestros archivos, asi
mismo creara rutas relativas al sitio y no rutas absolutas lo que nos permitirá crear
hipervínculos con más facilidad, pero ese es otro tema. Es hora de crear un Nuevo
“HTML”
6
http://www.tusitioya.info
Ahora si, por primera vez podemos observar nuestro espacio de trabajo. Pero, ¿que
son todas esas barras y opciones?
La barra Insertar, nos permitirá manipular fácilmente algunos elementos y objetos que
eventualmente utilizaremos.
7
http://www.tusitioya.info
Hasta este punto, hemos evitado la mención del susodicho lenguaje, pero. ¿Que es
HTML? Wikipedia lo define como
Los documentos HTML (de extensión .html o .htm) son documentos cuyo formato
debe ser interpretado por el navegador. Y son los que conforman las páginas web.
Como todo, dichos documentos tienen una estructura básica. Vamos a cambiar a
modo código en Dreamweaver para observar más claramente de que hablamos.
<html>
</html>
8
http://www.tusitioya.info
Y claro, podemos identificar las etiquetas en un documento html pues estas están
denotadas por los signos <etiqueta> además, toda etiqueta debe cerrarse si deseamos
que la misma sea interpretada adecuadamente por el navegador. Una etiqueta de
cierra con el signo “/” es decir </etiqueta>
<head>
</head>
<head>
</head>
El title del sitio, es el nombre que vemos en las pestañas de nuestro navegador.
<body>
</body>
Si hemos comprendido estos conceptos, podemos hacer una pequeña prueba. Para
visualizar nuestro primer sitio, vamos a realizar las siguientes ediciones al código
fuente:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
9
http://www.tusitioya.info
</head>
<body>
</body>
</html>
Si bien es un documento html bien estructurado, resulta muy simple, y claro no vamos
a colgarlo en la red.
10
http://www.tusitioya.info
<p>Esto es un parrafo</p>
Y claro, el texto, es una parte que deseamos pueda ser observada por el usuario, por
tanto lo incluiremos dentro del cuerpo del documento
<br />
11
http://www.tusitioya.info
Si oprimimos F12 y guardamos los cambios, veremos algo como esto en el navegador:
Tenemos un párrafo muy prolijo, sin embargo, no tiene ninguna clase de alineación,
justificado ni cualquier otro formato básico. Para lograr un resultado más elaborado,
deberíamos incluir en la etiqueta <p> ciertos atributos.
12
http://www.tusitioya.info
Si consideramos el resultado de la edición con la tecla F12, veremos algo como esto
Existen ciertos caracteres que no pueden ser incluidos de manera directa dentro del
código fuente.
13
http://www.tusitioya.info
En realidad estos caracteres se usan en HTML para no confundir un principio o final de etiqueta, unas
comillas o un & con su correspondiente carácter.
Á Á À À
É É È È
Í Í Ì Ì
Ó Ó Ò Ò
Ú Ú Ù Ù
á á à à
é é è è
í í ì ì
ó ó ò ò
ú ú ù ù
Ä Ä Â Â
Ë Ë Ê Ê
Ï Ï Î Î
Ö Ö Ô Ô
Ü Ü Û Û
ä ä â â
ë ë ê ê
ï ï î î
ö ö ô ô
ü ü û û
à à å å
Ñ Ñ Å Å
Õ Õ Ç Ç
ã ã ç ç
ñ ñ Ý Ý
õ õ ý ý
Ø Ø ÿ ÿ
ø ø Þ Þ
Ð Ð þ þ
ð ð Æ Æ
ß ß æ æ
14
http://www.tusitioya.info
¼ ¼
½ ½ ¡ ¡
¾ ¾ £ £
© © ¥ ¥
® ® § §
ª ª ¤ ¤
² ² ¦ ¦
³ ³ « «
¹ ¹ ¬ ¬
¯ ¯ ­
µ µ º º
¶ ¶ ´ ´
· · ¨ ¨
° ° ± ±
¸ ¸ » »
¿ ¿
× × ¢ ¢
÷ ÷ € €
“ “ ™ ™
” ” ‰ ‰
Œ Œ ƒ ƒ
‡ ‡ † †
Resulta sin embargo, que utilizar esta lista es poco práctico, pero claro, tenemos una
alternativa interesante y es a la hora de crear textos, podemos utilizar el editor grafico
de Dreamweaver.
Así, cada vez que insertemos un carácter especial, como por ejemplo µ Dreamweaver
lo registrara automáticamente como un carácter especial.
1.6 Enlaces
Esos elementos que no pueden faltar en un sitio web, que nos permiten relacionar
nuestros documentos entre sí y crear contenidos dinámicos.
15
http://www.tusitioya.info
Los enlaces están marcados por la etiqueta <a>enlace</a> siendo “enlace” la palabra a
la que el usuario tendrá acceso, ahora. La etiqueta <a> por si sola, no tiene demasiada
utilidad. Por lo que se utiliza el atributo href que indica la ruta que debe seguir el
enlace.
<a href=”ruta”>Enlace</a>
Siendo ruta, el documento “destino” o bien puede ser un enlace externo incluyendo
<a href=”http://ruta.com”>Enlace</a>
Con esta sintaxis hemos creado un enlace a bloggeandolo que se abrirá en la misma
ventana. Cosa que aunque para los links internos del sitio está bien, si deseamos incluir
un link externo puede resultar poco conveniente para hacer que el navegador abra la
“ruta” en una nueva pestaña haremos uso de otro atributo de la etiqueta <a>
16
http://www.tusitioya.info
Las hojas de estilo en cascada (en inglés Cascading Style Sheets), CSS es un lenguaje
usado para definir la presentación de un documento estructurado escrito en HTML
usualmente resulta un dolor de cabeza aprender este lenguaje sin embargo, aquí lo
haremos fácil ;-)
En primer lugar, vamos a crear nuestra hoja de estilos. Vamos a hacer clic en Archivo -
Nuevo
17
http://www.tusitioya.info
Una vez definida nuestra hoja de estilos, solo hace falta que incluyamos algo de
contenido (claro que esta no es la parte mas fácil) sin embargo. Seguro que siguiendo
el curso todo saldrá como esperamos.
Aclaro que estoy utilizando una ruta relativa a mi documento html. Es decir estilos.css
está en la misma carpeta que index.html
Vale, ahora vamos a editar algunos atributos de nuestro sitio utilizando las
propiedades que definiremos en nuestra hoja de estilos CSS. Vamos a cambiar el color
de fondo de nuestro sitio web, de esa manera comprenderemos mejor cómo
funcionan las hojas de estilo.
Como vemos, hemos dado a nuestro sitio un color amarillo que utilizaremos de base.
<img src=”objetos/equipo.jpg”/>
19
http://www.tusitioya.info
Aplicando esto que hemos mencionado a nuestro código fuente, veremos algo como
esto:
Y en el navegador
Nuestro sitio, poco a poco empieza a tomar forma ahora tiene una hoja de estilos,
texto e imágenes, pero claro, no se mira demasiado elegante sino como un montón de
elementos dispersos por todos lados.
Me gustaría aclarar que los atributos de las imágenes, si bien pueden editarse a través
del código fuente, resulta más práctico utilizar el editor grafico de Dreamweaver, que
20
http://www.tusitioya.info
permite redimensionar imágenes de manera grafica. Así mismo añadirlas puede ser
tan sencillo como hacer un Crtl + V
Claro que estas tareas sencillas realmente son muy fáciles desde el modo diseño, sin
embargo, el conocer el “Modo Texto” nos facilitara las cosas más adelante cuando
debamos realizar operaciones más complejas que solo pueden hacerse manualmente.
Una imagen también puede ser usada como enlace, lo que debemos hacer es agregar a
la etiqueta <a><img></a> Sin embargo, si hacemos esto, aparecerá un borde alrededor
de nuestra imagen, que podemos solucionar agregando el atributo border=”0” a
nuestra imagen
Resulta más conveniente hacerlo desde nuestra hoja de estilos CSS asi:
21
http://www.tusitioya.info
Entonces, ¿qué hace falta? En primer lugar, no hemos aprendido a marquetar una
web, es decir estructurarla. También debemos profundizar nuestros conocimientos
sobre CSS.
Pues refiriéndonos a las hojas de estilos, nos hace falta aprender a definir clases. Es
decir, grupos de atributos que podamos aplicar a ciertas etiquetas.
p {text-align:center}
Sin embargo, es poco probable que deseemos que TODOS los párrafos de nuestro sitio
estén alineados al centro, es por eso que vamos a crear una clase, que podamos usar
con la etiqueta <p>
Para definir una clase, basta con agregar un punto antes del nombre de clase es decir.
.titulos
Si creamos una clase llamada títulos para ciertos párrafos podemos definir ciertos
valores como por ejemplo:
font-size:30px;
font-weight:bold;
text-align:center}
Y ahora, para aplicar dicho estilo a un párrafo, vamos a agregarlo mediante el atributo
class=””
22
http://www.tusitioya.info
Veremos más el uso de las clases cuando empecemos a enmarquetar nuestro sitio sin
embargo este es su funcionamiento básico.
En este capítulo, hemos aprendido los conceptos y tenemos las nociones básicas sobre
el lenguaje HTML y la creación de un sitio web, El funcionamiento de las hojas de estilo
y las clases.
23
http://www.tusitioya.info
Ahora, para poder definir los elementos editables y los no – editables, debemos crear
una estructura básica en nuestro sitio web. Podemos usar para ello. Tablas o Capas.
Este curso, utilizaremos capas, un método más limpio y profesional.
Vamos a relacionar nuestra hoja de estilos con el documento en cuestión. Justo como
lo vimos en el capítulo 1.7.
Una vez hecho esto, vamos a crear nuestras capas, la etiqueta que define a una capa
es <div>.
Una capa no es más que un elemento rectangular que sirve para agrupar datos dentro
de bloques en un sitio web. La posición, y tamaño de una capa, está definida por su
clase o por su id de clase.
Pero antes de empezar a escribir <div> a lo loco, hace falta que hagamos un pequeño
esquema de la estructura que deseamos. Esto lo podemos hacer en cualquier
programa para la edición de gráficos.
¿Por qué hacer esto? Aunque es un paso adicional, nos permite darnos una idea mas
clara de lo que queremos hacer.
Es muy importante que a la hora de diseñar estemos claros de lo que deseamos hacer,
plantearnos un objetivo y alcanzarlo.
24
http://www.tusitioya.info
Una vez que tenemos una idea clara de lo que deseamos hacer, podemos empezar
crear nuestras capas.
Para crear una capa, basta con definir un texto entre las etiquetas <div></div> sin
embargo, el hacerlo de esta manera solo agrupa el texto en bloques sin formato
alguno.
Ahora, un concepto que debemos tener claro es el de clase, pero más importante el de
“estilos únicos” pues son un identificador para cada capa. Si bien las clases las
definimos con un “.” los estilos únicos los definimos con “#”
Claro que el detalle del concepto siempre es algo vago, por eso vamos a aplicarlo a
nuestra plantilla definiendo nuestros 5 capas principales (1 – 5) más adelante
explicaremos la capa “global”
En nuestra hoja de estilos vamos a incluir 5 nuevos “estilos únicos” y vamos a definir
los colores de borde para cada uno.
Como habremos notado, Dreamweaver nos echa una mano en este asunto y resulta
muy fácil trabajar en el CSS del sitio con una herramienta tan completa.
25
http://www.tusitioya.info
Y además, con su selector de color, se hace mucho más fácil el trabajo de diseño.
Ahora, solo hace falta que definamos nuestros divs en nuestra plantilla, pero primero
vamos a guardarla como plantilla.html, una vez hecho esto vamos a definir nuestros
divs de la siguiente manera
<div id="estilounico">AlgunTexto</div>
26
http://www.tusitioya.info
No hay de qué preocuparse. Mas adelante arreglaremos ese problemita con el texto
(si, el que no se ve) por el momento hablaremos un poco de de nuestro div global. Es
decir, en nuestra plantilla de diseño, nuestro div 0.
Al ser nuestro div, global el “padre” de todas nuestras capas. Debemos ubicarlo de la
siguiente manera:
27
http://www.tusitioya.info
Nuestro “estilo único” global, dictara el tamaño asignado al contenido de nuestro sitio,
en este caso, por ser la resolución más usada. Vamos a definir el ancho de nuestra web
en 800px. ¿Cómo? Adivinaron, desde nuestra hoja de estilos.
#global {width:800px;
margin:4px auto}
Además, vamos a definir en nuestro estilo único “global” el fondo de nuestro sitio. De
nuestro contenido para ser exactos.
#global {width:800px;
margin:4px auto;
background-color:#FFFFFF;
Y nuestra vista previa en el navegador revela un resultado que cada vez parece más
una página web.
28
http://www.tusitioya.info
Ahora que hemos terminado con nuestro Div global, vamos a reubicar algunos
elementos. Me refiero al Div 4. Vamos a ubicarlo encima del Div3.
Una vez hecho esto, vamos a editar las propiedades CSS de nuestros divs, ubicándolos
como en nuestra plantilla de diseño.
Vale, ahora vamos a darle un poco mas de forma a nuestro sitio, agregando un par de
propiedades más a nuestra hoja de estilos CSS. Estas ubicaran nuestros divs, en las
posiciones que le indiquemos.
Así pues, vamos a comenzar con nuestro “menú”. Este lo ubicaremos a la izquierda,
donde usualmente están ubicados los menús en un sitio web. Y le daremos un ancho
de 150px.
#menu {
width:150px;
float:left;
padding:3px;
height:auto;
margin:5px
Indicamos en primer lugar que el ancho de la capa será de 150 pixeles, estará
“flotando” a la izquierda del contenido con un padding de 3 pixeles. El padding es una
29
http://www.tusitioya.info
especie de borde interno que hará que nuestros contenidos no estén muy pegados al
borde de la capa
Así mismo, definimos la altura de la capa como “auto” es decir, estará en dependencia
del contenido. El margen es ese espacio que vemos entre las capas. Lo mismo haremos
para el Div 4 pero vamos a cambiar left por right, es decir, que este flotara a la
derecha.
#publicidad {
width:150px;
float:right;
padding:3px;
height:auto;
margin:5px
Para nuestro Div número 3, vamos a alinearlo a la izquierda justo después de nuestro
menú siempre agregando un padding de 3 pixeles y un margen de 5
#contenido {
width:420px;
height:auto;
padding:3px;
margin:5px;
float: left;
Una vez que hemos definido nuestros 3 divs principales, vamos a agregar un par de
propiedades al head y a los créditos a fin de crear un poco de orden.
#creditos {
30
http://www.tusitioya.info
width:auto;
height:30px;
margin:5px;
clear: both;
OJO, Además de los elementos que ya manejamos aquí utilizamos la propiedad clear,
que nos dice que no permitirá elementos flotantes ni a la izquierda ni a la derecha (por
eso utilizamos both).
Para el head, solamente vamos a incluir un par de márgenes que separaran nuestra
cabezera del cuerpo del sitio
#head {
margin:5px
Al final, nuestro código fuente (el de la hoja de estilos) debería lucir más o menos así:
31
http://www.tusitioya.info
Ciertamente hemos alcanzado nuestro objetivo. Y por fin nuestro sitio tiene una
estructura básica. De modo que podemos empezar a trabajar sobre esta.
2.2 Menú
El menú, uno de los elementos más importantes de nuestro sitio. Y es que permite a
los usuarios navegar a través de nuestro contenido. Ya que hemos designado un
espacio para nuestro menú es hora de construirlo.
Vale, para crear nuestro menú, vamos a utilizar listas. En HTML una lista se define con
la etiqueta <ul> y cada elemento se marca con la etiqueta <li> de esta manera.
<ul>
<li>elemento 1</li>
<li>elemento 2</li>
<li>elemento 3</li>
<li>elemento 4</li>
</ul>
32
http://www.tusitioya.info
Aunque claro, nuestro menú, será un poco más elaborado, ¿cómo? Muy fácil, y si,
seguro lo has adivinado. Con nuestra hoja de estilos.
En primer lugar, ya que hemos ubicado nuestro menú, el feo borde anaranjado no nos
hará falta, por tanto vamos a removerlo.
#menu {
width:150px;
float:left;
padding:3px;
height:auto;
margin:5px;
Ahora, vamos a definir las propiedades específicas para cada elemento HTML dentro
del menú, esto lo haremos utilizando la nomenclatura:
Y como primer paso, vamos a quitarle a las listas dentro de nuestra capa, esas pelotitas
negras que aparecen a la par del elemento señalado.
#menu ul, li {
list-style-type: none;
33
http://www.tusitioya.info
Además, quitaremos el margen y el padding a nuestro listado, lo que hará ver los
elementos del nuestro menú, perfectamente alineados.
#menu ul {
margin: 0;
padding: 0;
Y a cada elemento de nuestro menú, vamos a darle un borde que hará las veces de
separador para los elementos del mismo.
#menu li {
Ahora, vamos a darle un estilo característico a cada enlace dentro de nuestro menú.
Para eso utilizaremos las siguientes propiedades
#menu a {
text-decoration: none;
color: #333333;
background:#FFFFFF;
display: block;
width: 138px;
Finalmente, vamos a agregarle a nuestro menú una propiedad hover. Es decir que se
activara cuando pasemos el mouse sobre él elemento.
34
http://www.tusitioya.info
#menu a:hover {
background: #CCCCCC;
Ahora, debemos agregar algunos elementos a nuestro menú para poder visualizar el
resultado. Claro que nuestro sitio no tiene ningún enlace, así que agregaremos algunos
links “ejemplo” cuya ruta sea “#” (es decir, ninguna)
Nuestra hoja de estilos, debería verse algo así una vez finalizada la edición. (Ojo que
solo estoy colocando la parte en la que trabajamos)
35
http://www.tusitioya.info
2.3 Header
36
http://www.tusitioya.info
Probablemente una de las partes más importantes de nuestro sitio, es lo primero que
los usuarios ven, y debe ser llamativo, pero no excesivamente pomposo. De cualquier
manera es algo muy personal.
En primer lugar, vamos a eliminar ese molesto borde azul que no hace otra cosa más
que molestar. Pero claro, no hace falta que explique nuevamente como hacerlo. Yo
utilizare este:
Para insertarlo, en primer lugar, necesitamos ubicar nuestro objeto en nuestra carpeta
de objetos. Lo llamare webhead.png
Tenemos dos opciones para insertar nuestro head. La primera, hacerlo como una
imagen dentro de nuestro DIV head. Y la segunda, como fondo de nuestro DIV
Sin embargo. Por el momento no vamos a insertar nada más en nuestra cabecera y
por tanto vamos a insertarlo como si de una imagen cualquiera se tratase, espero no
se os haya olvidado como insertar imágenes.
37
http://www.tusitioya.info
A que ahora empieza a parecer un verdadero sitio web. Aunque claro, aun tenemos
muchos detalles que debemos pulir y de hecho, secciones completas que construir.
2.4 Créditos
Quizá en este momento te preguntaras, ¿A qué hora empezaremos a trabajar en el
contenido? Pero debemos recordar que estamos trabajando en la plantilla. Por tanto,
debemos definir primero las partes estáticas del sitio.
En este momento, vamos a trabajar en una de las partes más importantes del sitio. Los
créditos. ¿Por qué importante? Fácil, porque si hemos creado todo esto desde 0,
mínimo incluir nuestro nombre en el pie de página.
Pero más importante que ser reconocidos, es que con el “pie de página” vamos a
aprender a redondear esquinas.
Un script liberado balo la licencia GPL que planea facilitarnos la vida, al menos hasta
que CSS3 esté bien soportado por todos los navegadores.
Vale, pero que es un ¿script?, es un pequeño programa que automatiza ciertas tareas.
38
http://www.tusitioya.info
Y ¿cómo se usa? Muy fácil. En primera, nos vamos a descargar este paquete desde el
sitio oficial.
http://www.html.it/articoli/niftycube/NiftyCube.zip
Una vez lo hemos descomprimido (sea con winrar o cualquier otro gestor de paquetes)
y copiaremos estos 4 archivos
Una vez establecido este parámetro, podremos llamar a la función Nifty(), señalando el
div, que queremos afectar.
<script type="text/javascript">
window.onload=function(){
Nifty("div#creditos","big");
</script>
Donde div#creditos indica que la capa cuyo id único de estilo sea #creditos, será
afectada por la función Nifty.
Una vez hecho esto, vamos a colorear nuestro DIV y a cambiar el color del texto desde
nuestra hoja de estilos. El resultado final será:
39
http://www.tusitioya.info
¿A qué os vais emocionando con el resultado he? Pero aun nos falta un poco para
acabar.
De modo que en la parte superior, veremos una imagen, en medio, los bordes y en la
parte inferior la imagen que cerrara la caja de contenido
Yo utilizo adobe fireworks para crear estas imágenes, aunque claro puedes utilizar
cualquier editor de imágenes.
40
http://www.tusitioya.info
curva-superior.png
fondopubli.png
curva-inferior.png
<div id="publicidad">
<div id="curvasuperior"></div>
<div id="contenidopubli"></div>
<div id="curvainferior"></div>
</div>
Esto implica que nuestro div, publicidad, contendrá 3 divs adicionales (justo como
hicimos con nuestro div global)
Ahora, vamos a crear los estilos únicos para cada DIV, donde incluiremos cada una de
las imágenes de fondo que seleccionamos para nuestra web.
Para nuestro div de contenido, vamos a fijar nuestro height en auto, para que nuestra
capa pueda variar su tamaño. Y haremos que el background-image se repita en el eje y
de modo que en nuestra hoja de estilos, agregaremos lo siguiente:
41
http://www.tusitioya.info
#curvasuperior {
background-image:url(objetos/curva-superior.png);
background-repeat:no-repeat;
width:100%;
height:30px;
#contenidopubli {
width:auto;
height:auto;
padding:5px;
background-image:url(objetos/fondopubli.png);
background-position:center;
background-repeat:repeat-y;
#curvainferior {
background-image:url(objetos/curva-inferior.png);
background-repeat:no-repeat;
width:100%;
height:30px;
Como pueden observar, no hemos hecho nada más que definir las propiedades más
elementales de cada uno de los componentes.
OJO: Claro que pudimos utilizar este método anteriormente para crear las esquinas
redondeadas de nuestros “créditos” sin embargo, en el curso, se pretende presentar
algunas técnicas de diseño y no “normalizar” un procedimiento.
Una vez concluida la edición, podremos ver en nuestro navegador algo como esto:
42
http://www.tusitioya.info
En primer lugar, vamos a eliminar finalmente el feo marco rojo y a crear un par de DIVs
adicionales dentro de nuestra sección “contenido” para definir el sitio donde irán los
“Títulos” y donde ira propiamente nuestro “Contenido”
Esto nos facilitara darle formato a los distintos tipos de letras que vamos a crear,
además dará un orden riguroso a nuestro sitio haciéndolo mas profesional.
Hecho esto, vamos a darle algunas propiedades en nuestra hoja de estilos a sus
respectivos id’s
Claro que no voy a detallar este procedimiento, pues lo hemos repetido ya en varias
ocasiones a lo largo del curso. Además no utilizaremos al menos por el momento,
ninguna propiedad nueva.
43
http://www.tusitioya.info
Vale, una vez que hemos definido las propiedades más básicas, vamos a definir el tipo
de letra, tamaño y color que utilizaremos en nuestras etiquetas h, que se refieren a los
encabezados.
Para la etiqueta h1 (que usualmente marca el titulo de nuestro sitio) vamos a definir
ciertas propiedades.
#titulo h1 {
color:#660000;
font-size:18px;
font-weight:bold;
44
http://www.tusitioya.info
Ahora, vamos a darle a nuestro “content” propiedades para la etiqueta p, y así definir
claramente el tipo de letra que utilizaremos.
#content p {
font-size:12px;
Una vez hecho esta, y un par de correcciones más que pueden ver a continuación
Vamos, a finalmente, definir las partes editables de nuestro sitio web. Esto lo haremos
en modo diseño.
Haremos clic derecho sobre nuestro “DIV 3”, y vamos a seleccionar donde dice
“plantilla” – “Nueva región editable”
45
http://www.tusitioya.info
Cuando nos solicite un nombre para la región, podemos llamarle “contenido” por
ejemplo. Y ahora en nuestro condigo fuente, veremos algo como esto:
Para darle elementos editables a nuestro Head, vamos a dejar nuestro title entre:
Una vez hemos hecho esto, vamos a guardar nuestro documento. Completando
cualquier información que Dreamweaver nos solicite.
Ahora, vamos a crear un nuevo archivo, (Archivo Nuevo) pero vamos a irnos a
plantillas de la página en vez de HTML en blanco. Y ¡Voila! Nuestra plantilla esta lista
para usarse.
Que quiere decir esto, significa que ahora podremos editar el contenido de las páginas
creadas a partir de la plantilla. Pero no la estructura de la misma en cada página
individual. Para editarlas todas al mismo tiempo. Solo vamos a editar nuestra plantilla
en cuestión, que se habrá guardado en una nueva carpeta llamada templates. Con
extensión .dwt
46
http://www.tusitioya.info
Si vemos nuestro código fuente, solo tenemos permisos para editar el “contenido” y el
“title” de nuestro sitio. Aunque claro, siempre podemos editar la estructura desde
nuestra plantilla.
Agregando algo de contenido a nuestro DIV content (no hace falta que explique esta
parte) tendremos algo más o menos asi:
47
http://www.tusitioya.info
3.1 Secciones
En primer lugar, vamos a desarrollar un pequeño esquema, que nos facilitara las cosas,
vamos a definir que contenido vamos a mostrar en nuestro sitio.
Inicio
Historia
Galería
Recursos
Contacto
Ustedes pueden crear más o menos secciones. A partir de aquí, el curso es un mero
ejemplo de las cosas que podemos hacer una vez creada nuestra plantilla y definidos
los aspectos más importantes de nuestro sitio.
En primer lugar, vamos a crear nuestros documentos html, esto lo haremos desde
“Archivo” “Nuevo” y seleccionando “Pagina de Plantilla” para seleccionar nuestra
plantilla.
48
http://www.tusitioya.info
Una vez hecho esto, vemos como en nuestro árbol de archivos, aparece un nuevo
archivo llamado historia.html
Repetiremos este procedimiento para cada una de las secciones de nuestro sitio, de
modo que tendremos cinco archivos .html en nuestro directorio raíz.
Hecho esto, abriremos nuestra plantilla para poder editar los elementos de nuestro
menú. Esto podemos hacerlo desde nuestro árbol de objetos, seleccionando el archivo
plantillaprinc.dwt en la carpeta “Templates”
49
http://www.tusitioya.info
Finalmente, con una ruta que dar a nuestros enlaces, empezaremos a definirlos en
nuestro menú.
OJO, que estamos agregando “../” A nuestras rutas, lo que indica que nuestro
documento siempre buscara en el directorio raíz el archivo especificado.
50
http://www.tusitioya.info
Como podemos observar, todo cambio que apliquemos a nuestra plantilla será visible
en los archivos “hijos” de la misma.
3.2.1 Galería
Crear una galería, puede ser tan simple como agregar algunas imágenes a nuestra
página, sin embargo. Quisiera que nuestra galería incluyera un efecto “lightbox” Lo
haremos con la inclusión de un script adicional desarrollado por un tercero, justo como
hicimos con nuestras esquinas redondeadas.
http://www.huddletogether.com/projects/lightbox2/#download
51
http://www.tusitioya.info
OJO: Recuerda que solo podrás incluir contenido dentro de una pagina generada a
partir de una plantilla si cuentas con una instancia editable en la misma, para
identificar dichas regiones, busca en tu código fuente
Hecho esto, vamos a incluir las imágenes que incluiremos en nuestro “content” pero
claro, no queremos ubicar imágenes pesadas en nuestro contenido, pues harían que
nuestro sitio fuese muy pesado.
52
http://www.tusitioya.info
Vamos a crear dos imágenes, una será una “miniatura” y la otra la imagen que
utilizaremos como “destino”.
Ahora, en nuestro DIV “content” vamos a crear una tabla de 3 x 2, esto lo haremos
para crear ordenar un poco las imágenes que incluiremos. Esto lo hacemos utilizando
la etiqueta table.
<tr>
<td>Primera Celda</td>
<td>Segunda Celda</td>
<td>Tercera Celda</td>
</tr>
<tr>
<td>Cuarta Celda</td>
<td>Quinta Celda</td>
<td>Sexta Celda</td>
</tr>
</table>
53
http://www.tusitioya.info
Hecho esto, dentro de nuestra primera celda, vamos a insertar un vínculo a nuestra
imagen, utilizando como texto para el vínculo nuestra miniatura.
Agregando a nuestra etiqueta <a> un nuevo atributo. rel=”lightbox” que indica que
nuestro la una relación entre nuestro enlace y la función lightbox que incluimos en
nuestro <head>
Y al hacer clic sobre la imagen, veremos algo como esto, aunque claro, ustedes pueden
agregar muchas más imágenes, siempre siguiendo el procedimiento descrito mas
arriba.
54
http://www.tusitioya.info
Probemos hacer clic sobre nuestra imagen y ¡Voila! Un efecto lightbox que queda
excelente con nuestro sitio.
3.2.2 Contacto
En nuestra página de contacto, incluiremos un formulario que utilizara un lenguaje de
programación llamado PHP. Uno de los más comunes en el desarrollo web. Aunque
claro, en este curso. No aprenderemos PHP. Eso será quizás en el siguiente (claro que
depende si logro un éxito moderado con este :-))
Pero bueno, vamos a crear en primer lugar un formulario, donde nuestros usuarios
introducirán datos, que luego serán utilizados por nuestro script en php. Abrimos
nuestro “contacto.html” y seleccionaremos “Archivo” “Guardar Como”
55
http://www.tusitioya.info
OJO que una vez realizados estos cambios, conviene editar en la plantilla la ruta del
menú para que señale al archivo “enviar.php”
Una vez hecho esto, vamos a copiar nuestro programa dentro de nuestro DIV
“content”
<?
if (!$HTTP_POST_VARS){
?>
<p>Nombre: </p>
<p>
<br>
</p>
<p>Email:</p>
<p>
<br>
Comentarios:</p>
<p>
<br>
</p>
</form>
<?
}else{
56
http://www.tusitioya.info
//mando el correo...
mail("tucorreo@tudominio.com","Formulario recibido",$cuerpo);
?>
Como mencione antes, en este curso no aprenderemos PHP así que no comentare el
código fuente, pues tendríamos que remitirnos a conceptos tan básicos como las
variables. Y están fuera de contexto.
Vista en nuestro navegador, nuestra página de contacto, luciría más o menos así
57
http://www.tusitioya.info
OJO que el formulario no funcionara hasta que no hayamos montado nuestro sitio en
la red, además depende del servidor y su soporte de la función mail ()
De modo que hemos terminado con nuestro sitio, es hora de montarlo en la red, y
echarlo a andar. ¿Genial no? Estamos a punto de terminar, y que duro ha sido, pero
seguro ha valido la pena.
58
http://www.tusitioya.info
NO SON MUCHOS los servidores gratuitos que admiten la función mail (), uno de ellos
sin embargo es 000webhost.com
59
http://www.tusitioya.info
Conviene que los guardemos en un archivo para acceder a ellos cuando los
necesitemos. Una vez hemos guardado los detalles de nuestra cuenta, vamos a
necesitar un cliente FTP (File Transfer Protocol) para subir los archivos de nuestro
ordenador.
60
http://www.tusitioya.info
En el cuadro rojo, podemos acceder a nuestros archivos locales. Es importante que nos
ubiquemos sobre nuestro directorio raíz.
Ahora, vamos a realizar la conexión utilizando los datos que nos suministro
000webhost.
Debemos subir TODOS los archivos de nuestro sitio local al servidor remoto. (si no son
muchos más que en este curso, no tardara mas de unos pocos segundos)
Dicho proceso es muy similar en un servidor de pago. Claro que la velocidad de carga
en un servidor de pago, será muy superior.
Concluido el proceso. Solo hace falta apuntar nuestro navegador al sudominio que
hemos especificado y ¡FINALMENTE hemos creado un sitio web!
61