LOGO

Brush en forma de HUMO

Hola alumnos de 1º Semestre de Diseño necesitamos descargar el siguiente Brush, para hacer el siguiente efecto.

http://photoshoptutorials.ws/brushes/Real%20Smoke%20(1250%20pixels).zip

Técnica para corta el cabello con Phostoshop

Hola Alumnos de Primer Semestre de la Carrera de Diseño Gráfico, favor de descargar esta imagen, con la cual vamos a practicar la Técnica de Corta el cabello con Capas. Gracias al Profesor Miguel Angel de la agencia de escomic.com por prestarnos y enseñarnos la técnica.

Gracias.

Ejercicio 1.0

Realizar el siguiente ejercicio.

La actividad es construir el siguiente archivo en formato código, donde tendremos que utilizar las tablas (table) como base, después agregamos una fila (tr) y terminamos con la celda (td) y dentro de está celda agregamos el código de la imagen (img).

Recuerda de cerrar tanto las tablas con las filas, celdas y el código de la imagen.

descargar imágenes.

Tabla y su atributos

Una tabla en un conjunto de celdas organizadas dentro de las cuales podemos alojar distintos contenidos.
En un principio nos podría parecer que las tablas son raramente útiles y que pueden ser utilizadas principalmente para listar datos como agendas, resultados y otros datos de una forma organizada. Nada más lejos de la realidad.

oy, gran parte de los diseñadores de páginas basan su maquetación en este tipo de artilugios. En efecto, una tabla nos permite organizar y distribuir los espacios de la manera más optima. Nos puede ayudar a generar texto en columnas como los periódicos, prefijar los tamaños ocupados por distintas secciones de la página o poner de una manera sencilla un pie de foto a una imagen.
Puede que en un principio nos resulte un poco complicado trabajar con estas estructuras pero, si deseamos crear una página de calidad, tarde o temprano tendremos que vérnoslas con ellas y nos daremos cuenta de las posibilidades nos ofrecen.

Para empezar, nada más sencillo que por el principio: las tablas son definidas por las etiquetas table> y /table>
Las tablas son descritas por líneas de izquierda a derecha. Cada una de estas líneas es definida por otra etiqueta y su cierre: tr> y /tr> (Filas)

Asimismo, dentro de cada línea, habrá diferentes celdas. Cada una de estas celdas será definida por otro par de etiquetas: td> y /td>. Dentro de estas etiquetas será donde coloquemos nuestro contenido.

table>
tr>
td>Celda 1, linea 1 /td> td> Celda 2, linea 1 /td>
/tr>

tr>
td> Celda 1, linea 2 /td>
td> Celda 2, linea 2 /td> /tr>
/table>

Atributos que tiene la Tablas y Celdas:
align = Justifica el texto de la celda del mismo modo que si fuese el de un párrafo. (Left, center, Rigth)
valign = Podemos elegir si queremos que el texto aparezca arriba (top), en el centro (middle) o abajo (bottom) de la celda.
bgcolor = Da color a la celda o línea elegida.
bordercolor = Define el color del borde.
Otros atributos que pueden ser únicamente asignados a una celda y no al conjunto de celdas de una línea son:
background = Nos permite colocar un fondo para la celda a partir de un enlace a una imagen.
height = Define la altura de la celda en pixels o porcentaje.
width = Define la anchura de la celda en pixels o porcentaje.
colspan = Expande una celda horizontalmente.
rowspan = Expande una celda verticalmente.

Ejercicio que se dejo en Clase:

Body y sus Propiedades

Entre el Body hay propiedades /body> que debemos tomar en cuenta, la siguiente lista mostrará los códigos más su descripción:

background = de Fondo Imagen (JPG, PNG y GIF).

topmargin = Margen superior

Leftmargin = Margen Izquierdo

Rigthmargin = Margen Derecho

Bgcolor = Color del Fondo del documento

Música para tu Web.

Muchos sitios Web utilizan música para armonizar la visita del usuario, esto es bueno ya que hace más interesante nuestro sitio.

Pero también tiene sus consecuencias, cómo cuales?.... El sitio se hace más pesado y lento. Otro sería que NO TODOS LOS NAVEGADORES que hay en la red, pueden leer el código para colocar la música.

Pero hay formas de nuestro sitio tenga música per esto lo veremos en 8º semestre en Flash, será más fácil.

Pero vamos a intentarlo con este código:

bgsound src="musica.mp3" loop="1">

El loop es la bucle o la veces que quieres que se reproduzca la música. -1 es infinito.

Videos.

De igual manera sucede con los vídeos, el subir un video a nuestro sitio servidor es pesado e inclusive para subirlo tardara mucho.

Para poder visualizar un video tienes que tomar en cuenta el tipo de formato que tenga:

AVI, MP4, WMB.

embed src="video.avi" width="300" heigth="300">

Tipografía y sus Atributos

Esto se hace a partir de la etiqueta <> y su cierre < / font >correspondiente. Dentro de esta etiqueta deberemos especificar los atributos correspondientes a cada uno de estos parámetros que deseamos definir.

A continuación los atributos principales de esta etiqueta:

Atributo FACE

Hay que tener mucho cuidado con este atributo, ya que cada usuario dependiendo de la plataforma que utilice, puede no disponer de los mismo tipos de fuente que nosotros con el que, si nosotros elegimos un tipo del que no disp

one, el navegador se verá forzada a mostrar el texto con

la fuente que utiliza por defecto (suele ser Times New Roman).

Para evitar esto, dentro del atributo suelen seleccionarse varios tipos de letra por separado por comas.

En este caso el navegador comprobará que dispone del primer tipo enumerando y si no es así, pasará al segundo y así sucesivamente hasta encontrar un tip

o que posea o bien acabar la lista y poner la fuente por defecto. Veamos un ejemplo.

font >Más el texto que quiero que aparesca /font>

Atributo Size

Define el tamaño de la letra. Este tamaño puede ser absoluto o relativo. Si hablamos en términos absolutos, existen 7 niveles de tamaño distintos numerados de 1 a 7 por orden creciente.

Elegiremos por tanto un valor size="1" para las letras más pequeñas o size="7" para las más grandes. Ejemplo:

font >Más el texto que quiero que aparesca /fon>

Atributo Color

El color del texto puede ser definido mediante el atributo COLOR-

Cada color es a su vez definido por un número de hexadecimal que esta compuesto a su vez de tres partes. Cada uno de estas partes representan la contribución de rojo, verde y azul al color en cuestion. (RGB).

Ejemplo:

font >Más el texto que quiero que aparesca /font>

Colores Hexadecimales

La composición de web juega un papel muy importante que son los colores. Se indican en valores RGB, es decir que para conseguir un color cualquiera mezclaremos cantidades de Rojo Verde y Azul. Los valores RGB se indican en numeraciones hexadecimales en base 16. (Los dígitos puede crecer hasta 16. Como no hay tantos dígitos numéricos se utilizan las letras de la A a la F.

Para conseguir un color, mezclaremos valores de esta manera: RRGGBB, donde cada valor puede creccer desde 00 hasta FF. Ejemplo:

Cómo se cambiaría la fuente para escribir en rojo:

font >Má el texto en rojo /font>

Al atributo del color se le agrega un valor RGB en formato hexadecimal. El caracter # se coloca al principio de la cadena.

Narana # ff8000

verde turquesa # 339966

Azul Oscuro # 000080

Introducción HTML 2

Para hacer una lista en código HTML.

Las se define de forma muy sencilla: se dice dónde empieza la lista, dónde empieza cada punto y dónde acaba las lista. Las etiquetas que se utilicen en cada caso debe aparecer al principio de la línea o al menos sin texto por delante (Sólo espacios o tabulaciones). Podemos recurrir a tres tipos distintos de lista, cada una con presentación diferentes, no numeradas, numeradas y listas de definiciones (glosarios). Las listas se pueden anidar, es decir, en el lugar donde debería ir uno de los términos de las lista se pone una nueva lista, que por supuesto no tiene porqué ser del mismo tipo. Esto es una lista no numerada.

el Código sería de la siguiente manera.

(Por cuestión de que el Blog admite estos códigos no colocare las <> solamente el código que va dentro)

ul

li tomates

li Zanahoria

li Perros

/ul

Para hacer una lista con código:

ol

li Miguel

li Pedro

li Juan

/ol

Como agregar una línea:

La directiva <> sitúa el documento una línea horizontal de separación.

En este documento, por ejemplo, se han utilizado líneas horizontales para separar las diferentes secciones: hr

Como hacer comentarios dentro de mi código HTML.

Para hacer un comentario en un documento HTML es decir, una aclaración que no aparece en la presentación final del documento, se encierra el texto que formará el comentario entre los símbolos

Que es URL?

URL (Uniform Resource Locator, es decir Localizador Uniforme de Recurso) Un URL está formado de la siguiente manera: esquema://maquina/ruta (en realidad, como se verá dentro de un documento, la barra / puede considerarse para de la ruta).

h t t p : / / www.uqi.edu.mx

Enlace

Con lo que ya hacemos dicho, podemos abordar sin problemas el asunto que originalmente nos ocupaba como se introduce enlaces en un documento HTML. Para definir un enlace es necesario marcar la directiva <> el objeto del cual va a partir dicho enlace. Dicha directiva debe de incluir el parámetro href="URL" para especificar el destino del enlace. Es decir que antes del objeto elegido debemos abrir con < href="URL"> y después cerrar < / a > Por ejemplo si queremos que el texto pulse aquí para visitar la UQI nos conduzca al sitio de la Universidad, debemos escribir en nuestro texto HTML.

< href="http://www.uqi.edu.mx/">aqui < / a >

Gráficos IMAGENES

para incluir un gráfico en un documento HTML se utiliza la directiva <>

En dicha directiva debe incluirse un parámetro src="URL" con el cual indicamos dónde está el fichero con el gráfico concreto que queremos para nuestro documento.

< src="imagenes/foto.jpg">

Introducción al HTML

Qué es HTML?

HTML (HyperText Markup Language) es un lenguaje muy sencillo que permite describir hipertexto, es decir, texto presentado de forma estructurada y agradable, con enlaces (hyperlinks) que conducen a otros documentos o fuentes de información relacionadas, y con inserciones multimedia (gráficos, sonido...) La descripción se basa en especificar en el texto la estructura lógica del contenido (títulos, párrafos de texto normal, enumeraciones, definiciones, citas, etc) así como los diferentes efectos que se quieren dar (especificar los lugares del documento donde se debe poner cursiva, negrita, o un gráfico determinado) y dejar que luego la presentación final de dicho hipertexto se realice por un programa especializad.

Cómo Especificar Efecto de Texto?

La mayoría de los efectos se especifican de la misma forma: rodeando el texto que se quiere marcar entre dos etiquetas o directivas (tags, en inglés), que definen el efecto o unidad lógica que se desea. Las etiquetas están formadas por determinados códigos metidos entre los signos <>, y con la barra / cuando se trata de la segunda etiqueta de un efecto (la de cierre). Por ejemplo: para abrir y para cerrar. Ciertas directivas sólo se ponen una vez en el lugar del texto donde queramos que aparezca el efecto concreto. Esto es lo que ocurre, por ejemplo, cuando queremos poner un gráfico, caso en el que se usa algo parecido a (más adelante ya veremos la directiva concreta que se utiliza).

A veces es necesario ofrecer datos adicionales en una directiva. Por ejemplo, cuando se define un hiperenlace hay que especificar su destino. Para ello se incluyen parámetros en la directiva inicial (la de apertura), de la siguiente forma: . La directiva de cierre, caso de ser necesaria, queda como antes: .

Estructura Básica del HTML

Un documento HTML comienza con la etiqueta <> , y termina con < / html >. Dentro del documento (entre las etiquetas de principio y fin de html), hay dos zonas bien diferenciadas: elencabezamiento, se delimitado por <> y < / head >, que sirve para definir diversos valores válidos en todo el documento; y el cuerpo, delimitado por <> y < / body >, donde reside la información del documento.

La única utilidad del encabezamiento en la que nos detendremos es la directiva <>, que permite especificar el título de un documento HTML. Este título no forma parte del documento en sí: no aparece, por ejemplo, al principio del documento una vez que este se presenta con un programa adecuado, sino que suele servir como título de la ventana del programa que nos la muestra. Por ejemplo, en el encabezamiento de este manual se ha especificado:

<>Manual práctico de HTML <  / title >

El cuerpo de un documento HTML contiene el texto que, con la presentación y los efectos que se decidan, se presentará ante el hiperlector. Dentro del cuerpo son aplicables todos los efectos que se van a mencionar en el resto de esta guía. Dichos efectos se especifican exclusivamente a través de directivas.

En resumen, la estructura básica de un documento HTML queda de la forma siguiente:

<>
 <>
 <>  Título <  / title >
 < / head >
 <>
 Texto del documento, menciones a gráficos, enlaces, etc.
 <  / body  >
 <  / html  >

Estilo y Efecto Básicos.

Como ya hemos dicho, la estructura lógica del texto y los diferentes efectos que se le apliquen se especifican mediante directivas. En este punto vamos a repasar algunas de las más importantes. En cada uno de los casos que veremos, primero se presenta el texto original HTML, es decir, lo que nosotros editamos, con las directivas situadas en los lugares adecuados; y después se presenta el efecto que dicho texto fuente produce una vez que se interpreta y se representa con el programa adecuado.

Titulos

Mediante los títulos, en sus diferentes niveles de importancia, podemos definir el esqueleto del documento, su estructura básica.

<>Mucha importancia< / h1 >

Mucha importancia

<>Menos importancia< / h2 >

Menos importancia

<>Mucha menos importancia< / h3 >

Mucha menos importancia

ATRIBUTOS DEL TEXTO

Mediante estos atributos determinamos el estilo y el tipo de letra que tendrá la presentación del documento final.

El primero en el que nos deberíamos detener es el texto normal entendiendo como tal el que no tiene ninguna característica especial. Para definir un párrafo como normal no es necesario poner ninguna etiqueta. Lo único que hay que tener en cuenta, como ya se ha dicho antes, es que al presentar el documento se hace caso omiso de los espacios, tabulaciones, que se encuentren en el texto fuente. Por ello cuando se quiera forzar un final de línea es necesario utilizar dos directivas especiales: <> < / P > para marcar un fin de párrafo, y <> para un único retorno de carro. La diferencia entre ambas es que la separación de líneas que provoca <> es algo mayor que la de <>, para que los párrafos se distingan bien entre sí. Las dos directivas mencionadas se sitúan en el punto en que queremos poner la separación. Por ejemplo:

Este será un texto normal (párrafo 1, línea 1).<>
 El primer párrafo estará formado por 2 líneas (párrafo 1, línea 2).<>
 Este ya es el segundo párrafo (párrafo 2, línea 1).<> 

Introducción

¿Qué es un Sitio web y Página web? - Definición de Sitio web y Página web En inglés website oweb site, un sitio web es un sitio (localización) en la World Wide Web que contine documentos (páginas web) organizados gerárquicamente. Cada documento (página web) contiene texto y o gráficos que aparecen como información digital en la pantalla de un ordenador. Un sitio puede contener estas páginas y una combinación de gráficos, texto, audio, vídeo, y otros materiales, dinámicos o estáticos.

¿Qué significa World WideWeb o WWW? - Definición de World Wide Web o WWW Web o la web, la red o www de World Wide Web, es básicamente un medio de comunicación de texto, gráficos y otros objetos multimedia a través de Internet., es decir, la web es un sistema de hipertexto que utiliza Internet como su mecanismo de transporte o desde otro punto de vista, una forma gráfica de explorar Internet. Esta comunicación se da entre las computadores por medio un lenguaje TCP/IP que pertenecen a una misma RED.

Pero que 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. Se sabe que fue inventado para usos militares, pero hay muchas versiones que no podemos descartar, pero lo que si sabemos es que una red de redes conectadas.

HTTP de HyperText Transfer Protocol (Protocolo de transferencia de hipertexto) es el método más común de intercambio de información en la world wide web, el método mediante el cual se transfieren las páginas web a un ordenador.

Para poder desarrollar un Sitio Web hay muchos programas que no pueden ayudar, uno son totalmente obsoletos y otros que de plano son de un nivel profesional. Estamos hablando cualquier programa de Hypertexto (Word, Block de Notas , eh inclusive programas que no imaginábamos Power Point, Excel, Corel) pero no son totalmente fiables para desarrollar totalmente un sitio web. Ahora bien hablemos un poco de Dreamwaever es un programa totalmente desarrolladores de sitios web en formatos tanto programador como diseñadores, ya que es un programa totalmente versátil y más para nosotros como Diseñadores Gráficos.

¿Que 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.

Así como hay muchos programas para desarrollar también existen Navegadorespara visualizar los sitios web que vemos a diarios por Internet. Uno de ellos, es el que más problema nos da como desarrollador y diseñador, estamos hablando de Internet Explorer, una navegador que llego para quedarce, en las computadoras de todo los usuarios. Pero nosotros como desarrolladores y diseñadores vemos un campo de Navegadores más amplio y encontramos los siguiente Navegadores en forma jerárquica:

En Primer Lugar se lo lleva: FireFox, Mozilla, Safari, Opera, Crome, NextCape y por último y no muy agraciado el Internet Explorer.

Ya hablamos un poco de los Navegadores ahora hablemos de los Ajustes y Tamaños de nuestros sitios web, tenemos los formatos Blog que son grandes por su basta información y están los standards. Pero para todo esto tenemos medidas que debemos guiarnos para comenzar. Nuestros ancho de nuestro formato debe ser de 900x600 o 955x600. Podemos modificar nuestro ancho de nuestro sitio si es requerido, pero lo que no podemos hacer es reducir la altura menos de 600 o sea que podemos tener un sitio de 900x1325, esto se le conoce como formato de blogs.

El monitor debe tener un ajuste de resolución de 1024x768, sabemos que ya hay monitores muy grandes, pero mientras la cultura de tener monitores de 17" ó 19".

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 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.

Bienvenidos Alumnos de 7º Semestre

Bienvenidos Alumno de 7º Semestre de Diseño Gráfico.

Este es mi blog que utilizo para llevar acabo mi materias de Páginas Web (Estáticas como Dinámicas). En este Blog encontrarán todo aquello que este relacionado con mi materia, ejemplos, ilustraciones, códigos y apuntes de mi materia. Es importante recalcar que si es importante que tomen nota en su cuaderno de lo que se hace en clase. Este blog es de uso didáctico no tiene ningún lucro, así que pueden recomendar este blog. También algo muy importante es que dejen sus comentarios sobre el tema en el blog, ya que esto me servirá para mejorar la clase, si algo no se entiendo, está este medio donde yo, personalmente lo estaré revisando continuamente.

A continuación daré una pequeña lista de lo que se requiere en mi clase.

1. Se tomara lista los días que son (*).

2. Alumno(a) que llegue después de los 10 minutos de la hora tendrá retardo después de haber pasado lista el alumno tiene derecho a entrar a mi clase con falta.

3 Se tomara lista por hora.

4. Alumno que llegue después de la media hora no puede interrumpir la clase, tendrá que esperar a la siguiente hora y ponerse al corriente.

5. Alumno que llegue a tener más 10 faltas pierde derecho a Examen final y automáticamente se ira a Extra-Ordinario.

6. El alumno no puede expresarse con palabras altisonantes con sus compañeros y mucho menos con el profesor. (persona que no respete este tipo de cosas tendrá el derecho de reponer su error comprando dulces para todos).

7. Prohibido Fumar y Comer dentro del Laboratorio.

8. Alumno que llegue en estado Alcoholizado o Drogado sera expulsado de la clase y remetido con el Licenciado Guillermo Nava.

9. Que da prohibido abrir páginas pornográficas.

10. El Alumno se hará responsable de su equipo de computo, que se le asigne. si llegará a faltar algún componente o un desperfecto en su caso, será responsable de ello.

11. Queda Prohibido el uso equipo portátil en el Laboratorio.

12. Que da estrictamente descargar algún Programa en el equipo.

13. Todo alumno debe reportar si su equipo de trabajo cuenta con todo lo necesario, en caso de que no reportara dicho evento, se le responsabiliza todos los imperfectos a la persona que halla usado el equipo.

14 Los celulares tendrán que ponerse en estado de silencio o vibrar, pueden salir del salón a tomar la llamada.

La forma de evaluar son las siguientes:

Primer Parcial 6 al 10 Septiembre

12.5% Diseño y Creatividad

12.5% Programación

será un total de 25% de Calificación

Segundo Parcial 4 al 8 Octubre

12.5% Diseño y Creatividad

12.5% Programación y Funcionalidad

será un total de 25% de Calificación

Tercer Parcial 3 al 5 Diciembre.

12.5% Diseño y Creatividad

12,5% Funcionalidad en el RED

será un total de 25% de Calificación.

Para poder presentar el Examen Final deberá de desarrollar un sitio web propio de ustedes para entrega CD con portada y un resumen del diseño de su propio sitio web. En caso de no entregar o reprobar, se le descontará calificación para el examen final.

Examen Final 6 al 17 de Diciembre

12,5% Diseño y Creatividad

12,5% Funcionalidad en la RED

Este examen se entregara en formato CD con carátula y una breve justificación, y se subira a internet en una cuenta de Hosting y Dominio Gratis.

Se tomara en cuenta los trabajos en clase, la forma de desempeño y la creatividad.

NOTA IMPORTANTE: NO SE CALIFICA "EL ESFUERZO".

Sitio Web.

Desarrollar un sitio Web con las siguientes características:

- 900x600 o más

- 5 apartados

- Con Submenus

- Footer

- Información texto e imágenes.

Favor de descargar las imágenes:

Banner Descargar Imagen

Footer Descargar Imagen 2

LIGAS EN TEXTO, IMAGEN, BOTON ROLL OVER.

Ahora veremos como ligar ciertos objetos dentro de nuestro programa de Dreamweaver. Lo primero que tenemos que hacer es siempre que vallamos a insertar, cualquier cosa debemos tomar en cuenta esto: Un Tabla mas una Celda o también Tabla sobre Tabla, y lo que no se puede hacer es que coloquemos una Celda sola sin Tabla, o también Celda sobre Celda.

Una ves colocado las tabla, donde vamos a representar que ahí va insertado Texto tenemos que colocar una celda, despues colocaremos el texto conveniente, seleccionamos el texto dentro de nuestra celda, nos dirigimos en el panel de Propiedades, buscamos vinculo y agregamos el apartado que queremos mostrar en este caso seria algo así como: nosotros.html con un destino (Target) _self. Y ahí tenemos un texto en forma de botón con liga.

Ahora haremos uno de imagen, que viene siendo lo mismo que el de texto, pero en vez de colocar el texto mandamos llamar una imagen, desde la barra de herramientas/imaganes/buscamos en tu carpeta de _root/imagenes/tu.jpg y listo tenemos insertada nuestra imagen en tabla y celda. Solo nos falta ligarla o vincular, damos un clic sobre la imagen y en Propiedades buscamos vinculo y ahora colocamos el apartado contacto.html con un destino (Target) _self. y listo tenemos ahora el imagen.

Ahora vamos hacer el de RollOver para este necesitamos dos botones con diferente color pero con el mismo texto y convertidos en .jpg sabiendo que son dos del mismo solo le ponemos un palabra final del nombre de nuestro archivo Ejemp. btn_quienessomosroll.jpg.

Ya que tengamos nuestras dos imagenes de botones, hacemos el mismo paso como lo hemos hecho antes Tabla y Celda pero ahora nos vamos a Insertar/Objeto de Imagen/Imagen de sustitución, se desprende una ventana con dos opciones una para la imagen origina y la otra que será las sustitución, que tiene al final la palabra "roll" damos Aceptar.

Y solo le damos un clic en la imganes y en propiedades/vinculo mas el destino y listo tenemos el de RollOver.

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,