[Aportes indexados] Guía - Aprendiendo a diseñar webs

Estado
Cerrado para nuevas respuestas.

Khalem

Mica
Colaborador
Ex-Staff
Hoy les vengo a traer chicos la inicitiva de hacer mini-guias, tutorials o manuales de como diseñar una pagina web.
Se hablaran tanto los temas de diseño como de programacion y estructura.
Todos estan inventados a participar aportando con lo que crean que pueda ayudar, luego lo valoraremos para ver si realmente es util para aquellos interesados en aprender.

La guia se orienta a el diseño y desarrollo desde 0, por lo cual tengamos en cuenta que:
A) el usuario que comienza no sabe nada mas que mirar la pantalla del DreamWeaver (Yo uso version 8 CS2)
B) La guia debe ENSEÑAR, explicando y mostrando los pasos a seguir para que se puedan incorporar los conocimientos.
C) Nada es obvio, explicar nunca esta de mas.
D) Dejamos este espacio SOLO PARA LA GUIA, las discuciones sobre los aportes y desaportes de este se debaten en el link aqui abajo expuesto:
Tema para discutir: <a href="http://www.gs-zone.org/ft46701_discusion_de_la_guia_de_diseno_de_webs.html" class="postlink" rel="nofollow" onClick="window.open(this.href);return false;">ft46701_discusion_de_la_guia_de_diseno_de_webs.html</a> (Subforo: Cosas¿?)

Tomo 1: Diseñando marcos dinamicos. (Autor: Micaela "Khalem")
Tomo 2: Creando una barra de navegacion con imagenes. (Autor: "Reicko")
Tomo 3: Subiendo archivos a 000webhosting.com. (Autor: "Midracks")
 

Khalem

Mica
Colaborador
Ex-Staff
Guia:Aprendiendo a diseñar webs

TOMO 1. Creando marcos dinamicos
Autor: Micaela "Khalem".

Programas utilizados:
·Photoshop CS3 (Para la creacion de los marcos a nivel grafico)
·Dreamweaver 8

¿Para que?:
Si tenemos un sitio grande y queremos integrarle un sistema de noticias, imagenes, etc, donde el contenido es variable, lo mejor que podemos hacer es crear marcos dinamicos donde este tomara las medidas necesarias (y establecidas) para colocar el contenido. A su vez hace a un sitio mucho mas estetico que si usaramos, por ejemplo, un IFRAME de html.
Una utilidad que tienen los marcos dinamicos es que pueden introducirse dentro de otros marcos y webs, haciendo que no se pierda ninguna estructura establecida.

Imagenes utilizadas:
Marcos circulares con fondo blanco para los bordes, puede ser transparente, se recomienda extesion .GIF o .PNG para respetar transparencia de capas. Se pueden utilizar tambien imagenes para los costados del marco, pueden ser de cualquier color y tamaño.
circ1.gif
circ2.gif
circ3.gif
circ4.gif


Paso 1:
Creamos un nuevo archivo .html, este paso es inicial, pero no fundamental.
marcos1j.jpg

Paso 2:
Creamos una tabla, que es donde ira nuestro contenido luego una vez listo el marco.
Nos quedara algo como la siguiente imagen.
marcos2.jpg

marcos3p.jpg

Paso 3:
Seteamos el borde de la tabla en 0 (Buscar en la imagen el cuadrado rojo)
marcos4.jpg

Paso 4:
Comenzamos a añadir los bordes y/o bordes laterales si es que los tenemos.
marcos5.jpg

Ami me resulto algo asi:
marcos6.jpg


Paso 5:
Cambiamos el color (en mi caso,sino se puede poner una imagen) del fondo de los margenes y del centro de la tabla uqe quedaron en blanco:
marcos7.jpg

Quedara:
marcos8.jpg


Paso 6:
Finalmente podemos comenzar a agregar el contenido que querramos :), esto se puede reemplazar por funciones de php como include o require.
marcos9.jpg


Ejemplo de paginas que usan marcos dinamicos:
http://www.arduz.com.ar/ - La web de Arduz no utiliza exactamente bordes, pero establece un marco superior para separar las noticias.
http://www.tierrasdelsur.cc/ - Tierras del Sur, en su web, coloca unos marcos grises y un fondo estilo arena para las noticias, vean como con las noticias se agrandan y los marcos continuan siendo acordes, al igual que el fondo de las noticias.
http://www.aurum-online.com.ar/ - Aurum utiliza unos marcos sensillos y esteticos para colocar su contenido, con un fondo de igual estilo que el de TDS.

Ejemplo de una web con un IFRAME:
http://aomania.net/ - El sistema de noticias de AOMania utilizaba un iframe, esto quiere decir que incorpora una web dentro de otra a la que le debe establecer un fondo y un contenido que, por lo general, arruina la estetica de la web.

Recuerden: Siempre hay mas de una opcion, lo importante es poder aprender de ellas.
 

Reicko

Engineering Manager @ Tienda Nube
Ex-Staff
Guia:Aprendiendo a diseñar webs

Tomo 2: Barra de navegación
Autor: Reicko

Programas utilizados:
Adobe Photoshop CS2 (Edición de las imagenes)
Adobe Dreamweaver CS4

¿Para que?
La idea de este tomo es darle un poco mas de "belleza" a los botones de nuestra web. Con este tutorial lograremos un efecto tal que al pasar el mouse sobre el boton, éste cambiará.

Paso 1: (Photoshop)
Dentro del photoshop creamos el boton que deseamos utilizar en nuestra pagina, en este caso utilizaremos éste.

Paso 2: (Photoshop)
Al boton anteriormente creado, le agregamos un efecto de Satinado quedando de la siguiente forma

Pase 3: (Dreamweaver)
Creamos un archivo .html

Paso 4: (Dreamweaver)
Creamos una barra de navegación.

Paso 5: (Dreamweaver)
Completamos los datos de la siguiente manera:
Imagen arriba: Link de la imagen sin satinar.
Sobre imagen: Link de la imagen satinada.
Al hacer click, ir a URL: Seleccionamos el vinculo que tendra el boton al hacerle click

Paso 6: (Dreamweaver)
Hacer click en aceptar, presionar la tecla F12 (Vista previa en navegado) y ver como quedo nuestro boton.
 

Midraks

Creador de AOWeb
Ex-Staff
Guia:Aprendiendo a diseñar webs

Tomo 3: Creación de host, servidor y como subir archivos.
Autor: Damián "Midraks".

Programas utilizados:
Google Chrome ( no precisamente se tiene que usar este explorador )
Filezilla

¿Para que?
Es lo escencial de todo proyecto, tener un host para subirlo, poder probarlo y mostrarselo a todos.

Paso 1:
Crear el host
Para ello usaremos la pagina http://www.000webhost.com/
Y nos dirigiremos a Sign Up
dibujoqz.jpg

Paso 2:
Crear cuenta en 000webhost
dibujo2rl.jpg

Paso 3:
Mail de 000webhost
Una ves creada nos llegara un mail diciendo que nos hemos creado una cuenta en <a href="http://www.000webhost.com/" class="postlink" rel="nofollow" onClick="window.open(this.href);return false;">http://www.000webhost.com/</a> y nuestros datos.
Tambien si nos llegara otro mail si nos creamos un dominio .freeiz.com

Paso 4:
Panel de control de 000webhost
Ahora nos dirigiremos al panel de control, para ello ir a http://members.000webhost.com/
dibujo3k.jpg

dibujo4d.jpg

Paso 5:
Información de cuenta
Una ves adentro del panel de control veran la información de la cuenta:
-El dominio( este sera nuestra web )
-El nombre de usuario( este lo usaremos para conectarnos con nuestro servidor )
-La contraseña( esta la veremos como *******, si no la recuerdas está en el mail )
-Uso de disco( es la capacidad que tiene para subir archivos )
-Nombre del servidor( este se usara para conectarnos con nuestro servidor )
dibujo5b.jpg

Paso 6:
Descargar Filezilla y conectándonos.
Iremos a esta pagina para descargarlo: https://www.ohloh.net/p/filezilla/download?filename=FileZilla_3.3.3_win32-setup.exe

Una ves instalado veremos un panel como este:
dibujo6.jpg


Todo lo que se pedirá aquí lo puede encontrar en la pagina "información de la cuenta"
1-Es donde pondremos el nombre de nuestro servidor
2-Aquí pondremos el nombre de usuario
3-Aquí ponemos la contraseña( esta es la que pusimos cuando creamos la cuenta en 000webhost )
4-Es el panel de nuestra computadora, aquí seleccionaremos los archivos que mandaremos al host
5-Es el panel del host, aquí se encuentran todos los archivos subidos al mismo.

Paso 7:
Subiendo archivos.
Una ves conectado nos dira:
Estado: Directorio listado correctamente
Si no nos dice eso es porque pusimos algún dato mal.

-Primero veremos en el panel del servidor que tenemos un archivo que se llama "DO_NOT_UPLOAD_HERE" Por si no sabes que significa esto, quiere decir: No suban archivos aquí.

Los archivos se subiran solamente en la carpeta "Public_html"
Abriremos esta carpeta dandole doble click, y notaremos que tiene un archivo adentro "Default.php", le daremos click derecho y lo borraremos ya que nosotros queremos subir nuestros archivos.

Primero vamos a crear en nuestro escritorio una carpeta imagenes, y lo buscaremos en el panel nuestro, le daremos click derecho y ponemos subir. En esta carpeta sera donde se suban todas las imagenes de nuestra web.

Yo voy a subir una web previamente hecha para que vean como queda, SIEMPRE la primera pagina se llamara index.html, no se podra llamar INDEX.HTML, Index.html ni nada parecido, todo en minuscula.

dibujo7g.jpg

dibujo8us.jpg

dibujo9i.jpg
 

Khalem

Mica
Colaborador
Ex-Staff
Guia:Aprendiendo a diseñar webs

TOMO 4. Cortando PSD para HTML
Autor: Micaela "Khalem".

Programas utilizados:
·Photoshop CS3
·Dreamweaver 8 (Colocacion de links, etc)

¿Para que?:
Cuando diseñamos una web completa desde Photoshop, crear una imagen con el contenido en una sola imagen puede ser muy pesado, anti-estetico y con falta de funcionalidad. Contando con esta herramienta desde los inicios de Adobe Photoshop, usaremos los "Slices" (Cortes) para delimitar los graficos y la estructura web, para finalizar con un archivo HTML maqueteado y agregado con las imagenes divididas.

Paso 1:
Una vez que tenemos nuestra web diseñada, limpiaremos la pantalla de trabajo y la dejaremos lista para trabajar. Yo voy a usar una que diseñe hace un tiempo, es algo asi:
cortando1.jpg

Paso 2:
Claro que pasar semejante imagen grafico por grafico nos llevara no solo mucho tiempo sino tambien ganas, por lo cual las cortaremos y guardaremos directamente con la opcion Slice o "herramienta de sector" del Photoshop;
cortando2.jpg

Paso 3:
Vamos con el mouse, manteniendo el click, marcando las lineas que dividiran los graficos, se vera algo asi:
cortando3.jpg

Paso 4:
Una vez finalizado todo el trazo, vamos a la bella opcion de "Archivo - Guardar para Web y Dispositivos...";
cortando4.jpg

Paso 5:
En la nueva ventana que se presente, debemos ir marcando cada imagen haciendole click y mantiendo la tecla "Shift", sino podemos mantener shif y con el mouse manteniendolo apretado, seleccionar todo;
cortando5.jpg

Paso 6:
Una vez marcada todos los graficos, debemos clickear en Guardar, y establecer el tipo, en nuestro caso, HTML:
cortando6.jpg

Una vez que finalize el photoshop veremos esto en la carpeta donde seleccionamos crear el archivo:
cortando7.jpg


Paso 7:
Finalmente abrimos con el Dreamweaver, y seteamos los links correspondientes en cada imagen:
cortando8.jpg

¡Y eso es todo!, realmente es muy sencillo y util.
 

Lazarith

-Staff Argentum Online -
Propongo que se vaya enumerando segun el nivel de conocimiento de cada tutorial.

Conceptos de Html Basicos

HTML, siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje de marcado predominante para la elaboración de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML se escribe en forma de "etiquetas", rodeadas por corchetes angulares (<,>). HTML también puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo Javascript), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML.

Etiquetas:

Las etiquetas permiten marcar el inicio y fin de un elemento. Un ejemplo puede ser <p> </p>. <p> Marcaria el inicio de un parrafo, mientras que </p> marcaria su fin.

<html>: Define el Inicio de un Documento html.

<head>: Define la cabecera del documento HTML, esta cabecera suele contener información sobre el documento que no se muestra directamente al usuario. Como por ejemplo el título de la ventana del navegador. Dentro de la cabecera <head> podemos encontrar:

<script>: Incrusta un script en una web, o se llama a uno mediante src="url del script".

<title>: Define el título de la página.

<link>: Se usa para vincular un sitio a hojas de estilo (css) o iconos. Por ejemplo:<link rel="stylesheet" href="/style.css" type="text/css">

<style>: Para colocar el estilo interno de la página; ya sea usando CSS, u otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo externo usando la etiqueta <link>.

<body>: define el contenido principal o cuerpo del documento. Esta es la parte del documento html que se muestra en el navegador; dentro de esta etiqueta pueden definirse propiedades comunes a toda la página, como color de fondo y márgenes. Dentro del cuerpo <body> podemos encontrar numerosas etiquetas. A continuación se indican algunas a modo de ejemplo:

<p>: Da inicio y fin a un párrafo.

<span>: Su única funcion es encuadrar un texto para que a este se le aplique un atributo, sin cambiar de parrafo o capa. Ejemplo: <p>El color principal de GS-Z es el <span class="green">verde/span>.</p>

<h1> a <h6>: encabezados o títulos del documento con diferente relevancia.

<table>: define una tabla

<tr>: fila de una tabla

<td>: columna de de una tabla

<a>: Hipervínculo o enlace, dentro o fuera del sitio web. Debe definirse el parámetro de pasada por medio del atributo href. Por ejemplo: <a href="www.gs-zone.org">Gs-Zone</a> se representa como Gs-Zone)

<div>: división de la página. Se recomienda, junto con css, en vez de <table> cuando se desea alinear contenido

<img>: imagen. Requiere del atributo src, que indica la ruta en la que se encuentra la imagen. Por ejemplo: <img src="./imagenes/mifoto.jpg" />. Es conveniente, por accesibilidad, poner un atributo alt="texto alternativo".

<li><ol><ul>: Etiquetas para listas.

<b>: texto en negrita (Etiqueta desaprobada. Se recomienda usar la etiqueta <strong>)

<i>: texto en cursiva (Etiqueta desaprobada. Se recomienda usar la etiqueta <em>)

<s>: texto tachado (Etiqueta desaprobada. Se recomienda usar la etiqueta <del>)

<u>: texto subrayado


Atributos:

Precisamente el nombre los define, son atributos que se les agrega a un elemento y que se encuentran dentro de las etiquetas, y con cada atributo se definira las carateristicas del contenido de una etiqueta. He aquí un ejemplo:

<div id="header">gs-zone</div>

<div> es una etiqueta, pero id="header" es un atributo, en este caso estoy proporcionandole un id a este <div>. Asi, el div respondera a las propiedades de #header.

Los atributos mas usados son:

"id=" Proporcionan un id a la etiqueta en la que se encuentre, esto hara que responda a las propiedades que dicho id tenga en la hoja de estilos.
"class=" Tiene una funcion similar a "id" pero en este caso se aplica para textos.
"align=" Sirve para alinear el contenido de la etiqueta, se puede selecionar entre center, justify, left y right.
"style=" Sirve para agregar propiedades a la etiqueta sin necesidad de usar un documento .css externo. De todas maneras por algunas razones es mejor usar el atributo "id" o "class" y agregar todas las propiedades desde un documento externo pero les enseñare como usarlo, he aqui un ejemplo:

<div style="width:100px; height:20px;"></div>

De esta manera la capa tendra un acho de 100 px y un alto de 20 px.

En el proximo Capitulo (de CSS), explicare la funcion de las propiedades mas útiles y por ende voy a explicar mejor este atributo :ok: .
 
Estado
Cerrado para nuevas respuestas.
Arriba