Muy buenas tardes, a todos comenzamos con esta Actualización de Página Web, para el Propedéutico de la Especialidad de Diseño Digital, donde verán, ciertos términos de Web, como el desarrollo de un sitio estático como dinámico.
Comenzamos!!!!
Lo primero que tenemos que saber:
¿Qué es Internet?
Es una enorme red que conectadas a redes y computadoras distribuidas por todo el mundo, permitiéndonos comunicarnos, buscar y transferir información.
¿Qué es WWW?
Consiste ser un acrónimo que viene del concepto World Wide Web, también conocido como la telaraña, red o telaraña mundial.
¿Qué es HTTP?
HTTP son las siglas de Hyper Text Transfer Protocol el cual es el principal protocolo tecnológico de la red que permite enlazar y navegar por internet.
¿Qué son los Navegadores?
Los navegadores o clientes Web son programas que permiten al usuario conectarse con servidores Web de internet. Los más conocidos son el Internet Explorer, Mozilla, Opera, Nestcape Navigator, Safari.
Dreamweaver.
Probablemente el mejor editor de páginas web para diseñadores que busquen resultados profesionales.
¿Qués es Dreamweaver?
Dreamweaver es la herramienta de diseño de páginas web más avanzada, tal como se ha afirmado en muchos medios. Aunque sea un experto programador HTML el usuario que lo maneje siempre se encontrarán en este programa razones para utilizarlo, sobre todo en lo que a productividad se refiere.
En pocas palabras es donde armamos nuestras páginas.
Sistema de Mediciones y de Color en la cual trabajamos.
En página Web el sistema de medición es muy importante, ya que nosotros como desarrollador no trabajamos en cm, metros, pulgada etc. si no más bien en el sistema de PIXELES.
En el sistema de Color tampoco trabajamos con los colores de CMYK si no trabajamos con RGB. Es importante que a la hora de trabajar en nuestro programa de Vector (Ilustrator o Corel) cambiemos este sistema, es así que lo que veamos y que convirtamos a JPG sean los colores que queremos visualizar en nuestro sitio o página Web.
Medidas para nuestro Sitio Web.
Actualmente casi todas las páginas están optimizadas únicamente para una resolución 900x600 y aunque la mayoría equipos. Actualmente están configurados a dicha resolución, los monitores los monitores más antiguos no soportan más de 640x 480px., y por el contrario, últimos equipos de nueva generación suelen estar configurados 1024x768px. y pueden soportar hasta 1280x1024px. más información aquí >>
Comencemos a Trabajar.
Lo primero que tenemos que hacer crear una carpeta de raíz en nuestro escritorio la cual le llamaremos de la siguiente forma _rootmaselnombre después entramos en ella y creamos de nuevo otra carpeta que le llamaremos imagenes donde vamos a depositar todas nuestras imágenes y en la que es de raíz(root) colocaremos los archivos .html, teniendo nuestra carpeta comenzamos por abrir nuestro programa vectorial, después cambiaremos nuestro sistema de medición por el de PIXELES, después nuestra gama de colores debe de estar en RGB.
Una vez hecho esto cambiaremos nuestra hoja de trabajo a la siguiente resolución 1024x768 que es la que tomaremos como referencia, ahí sacamos un rectángulo sin relleno con la medidas de 900x600, esta va ser nuestra base donde trabajaremos y diseñaremos nuestro primer sitio web.
Ya que tenemos nuestro rectángulo, haremos nuestra retícula de nuestro sitio Web, pero antes vamos a ver los elementos que componen un Sitio Web.
Tenemos un Banner (Publicitario animado o estático), Barra de Menu (Vertical o Horizontal) Botones (Apartados) Contenedor (Información texto, imagenes, videos, ligas y animaciones), footer (pie de página información del sitio).
Una vez que tenemos todo esto, vamos a convertir todo esto a JPG con las misma medidas que marcar cada elemento, es importante las medidas que estas manejando. ya que este convirtiendo a imágenes la resolución que vas a manejar es de 72 dpis, todo lo que conviertas a imagen debe de ir a esta resolución no importa lo que sea. Recuerda que las imágenes que vallar creando van ir en la carpeta de de _rootmaselnombre/imagenes .
ver este video tutorial
Abrimos el Dreamweaver elegimos la opción HTML para crear nuestra primera página HTML, también es importante recalcar que la primera página que hagas la llamaremos index.html será la primera que lea el servidor si no hay es archivo jamas veremos lo que estamos subiendo al internet.
Buscamos la opciones en la parte de arriba, Programador, Dividir y Diseño este último es con el cual vamos a trabajar, damos clic en esa opción y listo estamos trabajando en formato programador.
Buscamos los icono de Tabla y el icono de Celdas, ahi seleccionamos Tabla y con el raton sobre la parte blanca de nuestro programa hacemos un recuadro pequeño, después vamos a la parte de abajo que esta en PROPIEDADES y ahí le asignamos la medida de 900x600. Después añadimos de nuevo otra tabla a la media de nuestro banner y ubicación con las mismas medidas que tenemos de nuestras imágenes.
Ya colocada la tabla que tiene la medida de nuestro banner, ahora colocamos una celda, donde la celda va mandar llamar a nuestra imagen, como mandamos llamar esta imagen, debemos guardar nuestro archivo con el nombre de index.html, una vez guardado ahora si en la parte de arriba en la barra de menú principal buscamos INSERTAR después IMAGEN y automáticamente buscara dentro de computadora la carpeta de _rootmaselnombre/imagenes/banner.jpg damos clic y colocara ahí en la celda la imagen del banner.
Como ligar y los distintos formas de Ligar de una Imagen, Texto y Boton RollOver. (pendiente)
