Principios básicos sobre la Web.

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

Formatos gráficos y optimización de imágenes para la web

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)

Qué son los Formularios?

Qué son los formularios?

Los formularios son posiblemente la herramienta más utilizada en Internet para obtener datos e información acerca de la gente que navega nuestro sitio. La idea de los formularios es recolectar información online en la interacción con el usuario y luego ejecutar una determinada acción con la misma, que podría ser por ejemplo, quizás el caso más utilizado, un formulario de venta que el usuario completa y luego es enviado vía email al vendedor en forma encriptada.

Cómo los definimos?
Cinco son solamente las etiquetas que el código HTML posee para definir todos los elementos interactivos que un formulario puede presentar: FORM, INPUT, SELECT, OPTION y TEXTAREA. Estas etiquetas, junto a un número de modificadores o atributos, son suficientes para indicarle al navegador cliente cómo debe recolectar la información, cómo debe manejarla una vez recolectada y cómo debe interactuar con el servidor.



Etiqueta FORM
Todo formulario debe estar encerrado entre el par de etiquetas FORM y /FORM, y debe ser ubicado en el cuerpo de cualquier documento HTML, es decir, entre el par de etiquetas BODY y /BODY. Esta etiqueta FORM presenta tres atributos posibles:


Comando Descripción
ACTION: el valor de este parámetro es la URL del programa o guión en el Servidor Web utilizado para procesar la información recolectada.
METHOD: puede asumir el valor GET o el valor POST, y definen la manera en la cual los datos son transferidos al servidor.


Etiqueta INPUT

La etiqueta INPUT es la segunda etiqueta más importante de los formularios. Se la puede definir como una etiqueta multifunción, ya que con la misma podemos crear "push buttons", "radio buttons", "check boxes", y simples recuadros para ingresar texto. Posee ocho posibles parámetros: ALIGN, CHECKED, MAXLENGTH, NAME, SIZE, SRC, TYPE, y VALUE. Pero no se asusten con tantos parámetros porque normalmente solo se utilizan a lo sumo solo cinco. Los atributos cruciales para toda etiqueta <> son NAME, que asocia un nombre con cada variable ingresada; y TYPE, que puede asumir los valores TEXT, PASSWORD, CHECKBOX, RADIO, SUBMIT, RESET, IMAGE, and HIDDEN; de acuerdo al tipo de elemento que querramos representar. Más adelante todo será más claro con los ejemplos.


Etiqueta SELECT

Este par de etiquetas define una lista de elementos de los cuales el usuario debe seleccionar uno o varios, de acuerdo a los atributos que especifiquemos.


Etiqueta OPTION

Con esta etiqueta definimos cada elemento de las listas designadas con el par SELECT y /SELECT .

ETIQUETA TEXTAREA
Este par de etiquetas nos permiten definir un área de dimensiones arbitrarias que funciona como una suerte de editor, donde el usuario puede ingresar texto.



Radio Buttons y Check Boxes

---

Los Radio Buttons le permiten al usuario seleccionar una entre varias opciones. En cambio las Check Boxes le dan la posibilidad de elegir una o más opciones.
El código es el siguiente:

FORM< type = " radio " name = " equipos " value = " "> < / FORM >

Recordemos que toda etiqueta INPUT debe llevar un VALUE y un NAME:


FROM
< type = " radio " name = " equipos " value = " cuervo "> San Lorenzo<>
< type = " radio " name = " equipos " value = " gallina "> River Plate<>
< type = " radio " name = " equipos " value = " bostero "> Boca Juniors
< / FORM >
ver ejemplo: Nota: si no se ve el ejemplo traten de hacerlo en el programa.

San Lorenzo
River Plate
Boca Juniors

El NAME es el mismo para los tres Radio Buttons, pues son tres opciones para el mismo campo NAME="equipos". En este caso el VALUE ya está definido, solo debemos esperar la selección del usuario, por ejemplo si marcase la primera se procesaría la siguiente información: equipos=cuervo. Con el parámetro CHECKED le indicamos al navegador cual de todas las opciones debe aparecer marcada por defecto.

Check Boxes

---

La construcción de Check Boxes es bastante similar:
A diferencia de los Radio Buttons, los Check Boxes mantienen el mismo valor para el parámetro VALUE, y cambian el valor de NAME. Por ejemplo:

FROM

< type = " checkbox " name = " cuervo " value = " YES ">San Lorenzo<>

< type = " checkbox " name = " gallina " value = " YES "> River PLate<>

< type = " checkbox " name = " bostero " value = " YES "> Boca Juniors<> < type = " checkbox " name = " rojo " value = " YES "> Independiente

< / FORM >

si bien, algunas opciones están marcadas por defecto, el usuario es capaz de desmarcarlas y marcar otras. Los datos serán recolectados de la siguiente manera:

gallina=YES rojo=YES
(si es que el usuario no modifica las opciones por defecto... incluso pueden elegir ninguna, es decir, dejar todas desmarcadas, entonces no habrá ningún valor procesado). Ahora bien, supongamos que quisiéramos hacer tres preguntas con opciones acerca de un mismo tema, ¿como lo haríamos?, muy simple, lo único que debemos recordar es que no puede haber NAMES duplicados en un mismo formulario, por tanto el formulario tendría esta pinta:

Supongamos que el usuario marca en la primera pregunta "San Lorenzo", en la segunda "Boca Juniors" y en la tercera "San Lorenzo" nuevamente, la información procesada será entonces:
noriginal?..SL=YESnumerosa?..BJ=YESfiestera?..SL=YES

Listas Desplegadas

El valor del parámetro SIZE indica exactamente cuántos elementos desplegar simultáneamente. Si el valor del SIZE es menor al número total de elementos de la lista, automáticamente aparecerá un barra de desplazamiento sobre el lado derecho de la misma. Para verlo mejor indiquemos un SIZE=3 para la lista de equipos:

FROM

< name = " equipos " size =" 3">

< value = " cuervo ">San Lorenzo< / OPTION >

< value = " gallina "> River Plate< / OPTION >

< value = " bostero ">Boca Juniors< / OPTION >

< value = " rojo ">Independiente< / OPTION >

< value = " academia ">Racing Club < / SELECT >

< / FORM >

El ejemplo es:

San LorenzoRiver PlateBoca JuniorsIndependienteRacing Club

Generacion 04-08

Resultados del Tercer parcial Grupo B

Resultados del tercer parcial de la Materia de página Web animada. Se califico el Portafolio junto con el examen escrito.

Alumno (Portafolio) ( Examen Escrito) y (Total)

1. Francisco (6) (4) (5)
2. Guillermo (memo) (10) (exento) (10)
3. Josue (choche) (7) (9) (8)
4. Profirio (6) (3.5) (5)
5. Debora (8) (no examen) (5)
6. Janet (8) (9) (8)
7. Georgina (6) (7) (6.5)
8. Filberto (10) (exento) (10)
9. Ofelia (10) (exento) (10)
10. gaby (6) (5) (6)
11. lulu (5) (7) (6)
12. edith (10) (exento) (10)
13. hugo (8) (6) (7)
14. magallanes (5) (6) (6)
15. Pedro (8) (9) (8)
16. Cinthya (8) (8) (8)
17. Salvador (10) (10) (10)
18. Efarin (7) (6) (6.5)

video Generación 2004-07

Ya volví a subir el video en otro servidor para que no tenga broncas... y mil disculpas no se por que se me a complicado mucho de subir el video, espero que alguien pueda subirlo al youtube y me pase despues la liga. Gracias nos vemos despues.

http://www.gigasize.com/get.php?d=shq7mbws2mf

Solo para los de B de Diseño gráfico de la UQI.

Buenos días aquí dejo la liga para que descargue el plugin del .ico y el ActivateactiveX.js
Pongansé a estudiar lo que les pregunte en la clase de hoy... Aguas con los Exámenes sorpresas.


http://www.sendspace.com/file/tujqn2

Everbody Hurt (Todo el mundo sufre)

WHEN THE DAY IS LONG AND THE NIGHT, THE NIGHT IS YOURS ALONE,
WHEN YOU'RE SURE YOU'VE HAD ENOUGH OF THIS LIFE, WELL HANG ON.
DON'T LET YOURSELF GO, EVERYBODY CRIES AND EVERYBODY HURTS SOMETIMES.

SOMETIMES EVERYTHING IS WRONG. NOW IT'S TIME TO SING ALONG.
WHEN YOUR DAY IS NIGHT ALONE, (HOLD ON, HOLD ON)
IF YOU FEEL LIKE LETTING GO, (HOLD ON)
WHEN YOU THINK YOU'VE HAD TOO MUCH OF THIS LIFE, WELL HANG ON.

EVERYBODY HURTS. TAKE COMFORT IN YOUR FRIENDS.
EVERYBODY HURTS. DON'T THROW YOUR HAND. OH, NO. DON'T THROW YOUR HAND.
IF YOU FEEL LIKE YOU'RE ALONE, NO, NO, NO, YOU ARE NOT ALONE

IF YOU'RE ON YOUR OWN IN THIS LIFE, THE DAYS AND NIGHTS ARE LONG,
WHEN YOU THINK YOU'VE HAD TOO MUCH OF THIS LIFE TO HANG ON.

WELL, EVERYBODY HURTS SOMETIMES,
EVERYBODY CRIES. AND EVERYBODY HURTS SOMETIMES.
AND EVERYBODY HURTS SOMETIMES. SO, HOLD ON, HOLD ON.
HOLD ON, HOLD ON. HOLD ON, HOLD ON. HOLD ON, HOLD ON


Traducción:
CUANDO EL DÍA ES LARGO Y LA NOCHE, LA NOCHE ES TUYA SOLAMENTE
CUANDO ESTÁS SEGURO DE QUE HAS TENIDO SUFICIENTE DE ESTA VIDA, BUENO ESPERA
NO TE DEJES IR, TODOS LLORAN Y TODOS LASTIMAN ALGUNAS VECES.

A VECES TODO ESTÁ MAL. AHORA ES HORA DE CANTAR TAMBIEN
CUANDO TU DÍA ES NOCHE SOLITARIA
SI TE SIENTES COMO DEJANDOTE IR, (ESPERA)
CUANDO PIENSAS QUE HAS TENIDO MUCHO DE ESTA VIDA, PUES ESPERA.

TODOS LASTIMAN, TOMA CONSUELO EN TUS AMIGOS
TODOS LASTIMAN, NO LANCES TU MANO. OH, NO. NO LANCES
TU MANO.
SI SIENTES QUE ESTÁS SOLO, NO, NO, NO, NO ESTÁS SOLO

SI ESTÁS SOLO EN ESTA VIDA, LOS DÍAS Y LAS NOCHES SON LARGOS
CUANDO PIENSAS QUE HAS TENIDO MUCHO DE ESTA VIDA, PARA ESPERAR

BUENO, TODOS LASTIMAN ALGUNAS VECES,
TODOS LLORAN. TODOS LASTIMAN ALGUNAS VECES.
Y TODOS LASTIMAN ALGUNAS VECES. ASÍ QUE, ESPERA, ESPERA.
ESPERA, ESPERA. ESPERA,