Buenos noches a todos!! (O buenos días, o buenas tardes... según cuando leas esto ).
En el anterior post estuvimos hablando sobre la intruducción, y llegamos a estructura de una web parte I, en este post, continuando con el anterior veremos:
6. Hacer un sitio Web parte 2;
7. Hacer un sitio Web parte 3;
8. Hacer un sitio web descargar plantilla;
CURSO GRATIS DE DREAMWEAVER PARTE 2.
El curso gratis de Macromedia Dreamweaver es recomendable para los que ya han estudiado operador en pc y diseño web con FrontPage. En el curso gratis de Dreamweaver se estudiara lo necesario para que se inicie en ente programa. Este curso se actualizará con mas información y material regularmente
Sugerencia para el estudio:
Se recomienda que practique varias veces cada lección. Los alumnos que mas estudian generalmente superan a los de capacidades innatas que se confían y no estudian.
6.HACER UN SITIO WEB PARTE 2.
Una ves que hemos realizado la estructura básica en tablas continuaremos en este caso con el diseño de la hoja básica que utilizáramos en el Sitio Web.
En la parte superior derecha se recomienda inserte una imagen con un logotipo, en este ejemplo yo utilizaré texto y colores de fondos porque es simplemente un ejemplo de Web, muy sencilla y rápida, ya que está formada manejando principalmente textos y colores.
En este ejemplo, si bien casi seguro www.poesiasdelavida.com.ar cambiará un poco en el futuro su diseño, ya que ingresaré publicidad he iré muy probablemente agregándole imágenes por el momento continuamos este ejemplo haciendo la parte superior del Sitio Web, como se observa en la imagen siguiente:
Las partes superiores derecha e izquierda, son las celdas respectivas con un color de fondo. Arriba de ellas a modo de logo de la parte izquierda el nombre del dominio del Sitio, que lo puede en caso de ser residente en Argentina tramitar directamente en http://www.nic.ar/frameset.html En la parte central una leyenda de bienvenida, y en la parte izquierda superior repito simplemente poesías de la vida. Es muy importante la elección de un nombre de dominio, yo prefiero sea justo la temática de el Sitio Web y no un nombre "fantasioso". Los textos de los extremos fueron achicados un poca para que entren perfectamente sin modificar las dimensiones de las celdas correspondientes. El del centro ha sido ampliado y cambiada el tipo de letra para que sea un poco mas atractivo y en el caso del tamaño de la letra mas relevante para buscadores como Google.
Luego de agregarle un poco de texto, links amigos y algunos colores quede de la siguiente forma (nada atractiva aun por cierto) pero note como la voy realizando y va tomando alguna forma.
Continua realizando esta tarea agregando los links y sección de intercambio de links y va quedando el sitio como se ve a continuación
A esta altura ya tengo un sitio en construcción con un esquema de diseño que debe trabajarse aún pero ya es es un principio, creo unas carpetas, en este caso puntual del ejemplo para distintos libros de poesías y le cambio la etiqueta titulo en Dreamweaver se puede hacer en vista código o desde propiedades de página, titulo/codificación, titulo. El siguiente paso sería a insertarle algunas imágenes, aunque sea sencillas para darle un poco mas de vida al Sitio y duplicar la pagina realizada pero cambiando su contenido central principalmente, para ir finalizando este diseño censillo y de ejemplo Observa un lugar en blanco a los costados, en mi caso voy a insertar publicidad puede hacer esto o insertar link a su sitio, que pueden ser los mismos que colocó en la parte central .
7. HACER UN SITIO WEB PARTE 3.
Una vez realizada la estructura se continua de ser necesario perfeccionándola un poco, acá por ejemplo le modifiqué levemente el color de fondo de las celdas superiores derecha he izquierda.
Para insertar una imagen, se posiciona en donde desea agregarla y se dirige a barra de menú, insertar, imagen, y selecciona la imagen a insertar.
Este sitio web "poesiasdelavida" que estoy asiendo y enseñándole con el a modo de ejemplo esta, como debe ser, optimizado para el buscador google, entonces en el logo que será lo primero que contiene cada página se encuentra un link hacia el mismo Web, siempre conviene hacerlo así, apuntando hacia su página principal o una sub-pagina principal. Y la imagen en su descripción posee un conjunto de palabras claves, que en este caso son poesias de la vida, es decir todo el sitio está pensado para que logre el primer lugar en Google con la frase "poesias de la vida" desde su nombre de dominio hasta detalles de optimización. luego también está optimizada para poesías y poemas, no obstante como a la hora de registrar un dominio no me estaba disponible por ejemplo poesias.com o en mi caso poesias.com.ar; como me iba a resultar difícil la optimización para estas palabras al no tenerlas claramente el el nombre de dominio lo hice para una frase.
En las palabras claves en la imagen me refiero a la etiqueta alt. al hacer clic en la imagen en la parte inferior de Dremwever, como ocurría con la tabla le aparecerá las propiedades de imagen. En donde dice alt ingresar las palabras claves (en este caso yo puse poesías de la vida), y el link apuntando preferentemente a su principal, en donde dice Vínculo. Observe la imagen de abajo.
Tenga en cuenta que esto es un diseño rápido, censillo, optimizado. En la celda central hay una imagen ingresada como fondo, el texto esta arriba de esta un titulo en destacado es muy importante fíjese que nuevamente repito la frase "poesías de la vida". La imagen está puesta como fondo de celda. Es decir que se la inserta desde propiedades de celda: hace un clic en la celda en la que desea insertar una imagen de fondo y en propiedades de la celda, en donde dice Fnd ingresa la ruta de la imagen o dirección Web.
La página se podría hacer mas atractiva redondeándole los bordes, para lo cual se utilizan imágenes con el color de fondo o añadirle alguna animación en flash o menú en este programa. Con relación a los menús en flash por mas que sean atractivos prefiero los de texto ya que son mas optimizados. Para finalizar ingresé un degradado de fondo esto lo hice desde propiedades de pagina, aspecto, imagen de fondo; para acceder a propiedades de pagina, haciendo un clic en una parte de la página, fuera de una tabla, en propiedades seleccione el botón propiedades de pagina.
Una vez que ya tengo realizada la página principal, con pequeñas modificaciones, a partir de la misma realizo las otras:
La captura de arriba es una sub pagina principal, inserté una tabla dentro de la celda principal, para esto se la selecciona haciendo un clic dentro y se inserta la tabla normalmente, esta sub pagina principal lleva a contenidos finales como se ve en la captura de debajo.
A esta altura ya tengo un sitio en construcción con un esquema de diseño bastante finalizado, ahora habría que añadirle contenidos y en cada hoja unas etiquetas no visibles (meta) que ayudarán el rastreo por parte de los buscadores.
8.HACER UN SITIO WEB, DESCARGAR PLANTILLA.
Para finalizar este ejemplo habría que agregarle en cada hoja una etiqueta descripción, de esta forma quedaría una pagina bastente optimizada, con espacio para agregar contenidos, links publicidad o lo que se desee. las dos etiquetas básicas que debe poseer todo hoja Web son las siguientes:
<title>Aca va el titulo</title>
<META name="description" content="Aca va una descripcion, no borrar nada que se encuentra fuera de las comillas">
Ahora pongo a su disposición una descarga con las tres plantillas principales que he utilizado para realizar este sitio como así también las dos imágenes para que pueda, teniendo las dimensiones justas reemplazarlas según necesite.
Términos y condiciones de uso: Puede variar todo o nada, de la plantilla, salvo la frase que dice: "Esta Web fue realizada a partir de un diseño ofrecido gratis por www.estudiargratis.com.ar " con el link correspondiente a www.estudiargratis.com.ar/ . No obstante puede cambiar de lugar sin modificar la frase o el link de la misma dentro de su pagina principal siempre y cuando no reduzca mas el tamaño de fuente.
La plantilla: que esta en este link: Obtener plantilla para pagina Web en html .El peso aproximado es de unos 32k esta en un .zip (plantilla.zip) comprimidas tres hojas y tres imágenes, y es lo que se viene haciendo en el curso de Dreamweaver ofrecido por esta Web que es www.estudiargratis.com.ar. Es un diseño fácil en HTML.
Me quedaron 3 puntos pendientes:
9. Finalizando etiquetas servidor y dominio;
10. Subir la Web al hosting;
11. Promocion y anunciante para la Web
Negocios en Internet.
Para no hacer tan molesta la lectura, decidi ponerlos en otro post, ya que eran muy largos! de paso en el próximo post aprovecharé para incluir algunas cosas sobre FLASH.
Lamento haber tardado tanto para poner este post! comienzo de clases... problemas personales, ya sabrán!. El próximo lo pondre en minutos!! Se los prometo! Jajaja.
.