NOTAS PHOTOSHOP 1- Programa CMARA RAW, permite el retoque de fotografas formato raw como: diafragma, filtres color, luz...

El formato raw es el negativo digital y demuestra que la foto es tuya. Como un negativo analgico guarda toda la informacin de lo retratado. 2- FILTRO (OTROS) PASO ALTO, mejora la calidad de enfoque de la foto. 3- OBJETO INTELIGENTE, un objeto (capa) o grupo de capas se pueden convertir de este modo en un documento madre dentro de Photoshop. Al cliquear dos veces se abre como un psd en otra ventana (se puede editar, guardar y automticamente ser modificado en todos los psd donde est el objeto inteligente). Es como un grupo de capas en una sola capa. Sus principales ventajas son: se puede escalar de grande a pequeo y viceversa y no pierde resolucin (hasta su mximo tamao al crear el objeto inteligente) y, adems, se pueden aplicar filtros que se podrn editar como si fueran estilos de capa o efectos de capa. 4- Crear PINCELES, en un doc transparente poner imagen, dibujo, logo, etc > Edicin > Definir valor de pincel. 5- ACCIONES como archivo: para realizar una accin y compartirla vamos a archivo > automatizar > crear droplet (crea una aplicacin, es igual al lote de siempre y su icono es una flecha azul). 6- MALLA TRANSFORMAR: Con comando T podemos modificar un objeto/capa. En el men de la herramienta podemos crear malla 7- alt + borrar = rellenar color frontal (parecido al mayus + f5) 8- Crear HDR (High dynamic range) usar programa Photomatix. Hdr mejora la luminiscencia, es un retoque fotogrfico a partir de distintas fotos de rangos diferentes

9- alt + cliquear entre dos capas, se vinculan (para capas de ajuste) 10- Comando G > crea un grupo de capas de las que estn seleccionadas. 11- Seleccin de pelos y similares: herramienta BORRAR > borrador de fondos (en opciones > proteger color frontal. 12- IGUALAR COLOR ENTRE FOTOS: dos o ms imgenes con distinta luz se igualan con: imagen > igualar color. 13- Convertir foto en ilustracin: a cualquier imagen > capa nueva > rellenar con un color > usar PINCEL HISTRICO (ejercicio 08) 14- Comando + alt + Z = desacer infinito.

NOTAS PHOTOSHOP 15- Realizar niebla: Nueva capa > filtro nubes > Filtro ruido ( 5, uniforme y monocromo) > Destramar. 16- Realizar IMAGEN CON ZOOM en un navegador: Archivo > exportar > Zoomify > crear pelcula flash. 17- Crear PANORMICA (Hockney): archivo > automatizar > Photomerge. 18- Abrir video por frames en capas y animacin por cuadros: archivo > importar > cuadros de video a capas. 19- Herramienta seleccin + Desv: 60 > hacen degradado.

20- FILTRO PUNTO DE FUGA: para ampliar prespectiva de un edificio, etc. (ver ejercicio). 21- SELECCIN DE PELOS > estilos de capa > fusin (con el alt ponemos ms puntos) 22- Estilos de capa: podemos mover la sombra paralela en el documento de la propia ventana de estilos de capa. 23- GUARDAR ESTILOS DE CAPA: En la ventana de estilos > editar uno o varios > ESTILO NUEVO 24- Generar gua con exactitud > Vista > gua nueva. 25- Cualquier forma se puede modificar seleccionando los puntos con la herramienta flexa blanca. Ejemplo:

PHOTOSHOP INTERNET Internet es una red de ordenadores interconectados. Podemos ver pag. web hospedadas en HOSTINGS (grandes ordenadores que pueden ser privados (a) o compartidos (b) *En google poner: MYIP para saber el IP de mi ordenador www.google.com (en el hosting) A B C D E F G direccin IP (200.132.150.230) mediante DNS

a
Programas FTP (Firezilla)

Sirven para acceder remotamente a una carpeta (en un hosting) mediante un usuario y una contrasea. Tambin se usan para colgar webs. Es muy importante tener orden y nunca usar acentos, ni maysculas, ni caracteres especiales (, , ...) Photoshop GUARDAR PARA WEB En la pestaa laterial > Editar ajustes de salida > HTML > ajustes preestablecidos (peso doc) > guardar archivo (ojo acentos, maysculas...)

A la hora de guardar es mejor poner un Gif de POCOS COLORES (que lo calcula el ordenador) y a partir de all borrar ms colores si fuera necesario.

A) Tipos de imagen:
JPG (siempre imagenes) Opciones > MuyAlta, Alta... > Progresivo (descarga por pasos) / Optimizado (para menus) / Incrustar perfil de color (para que se vean los colores iguales en cualquier ordenador, depende de la calobracin pantalla) Convertir en sRGB > activar siempre Metadatos > + info en la imagen (copyright, para evitar que copien tu imagen en la red). Sube su peso. Tamao de imagen: por pixels o porcentual. Existen distintas formas de ampliar o reducir el tamao para va riar el peso. Pero no es recomendable no ampliar con este mtodo. Calidad > reduce el peso tambin. GIF, para animaciones, pueden ser transparentes (logo, pluma) y de distintos n de colores (256,128,64,32,16,8,4,2,1) PNG, imagenes transparentes como un logo o pluma (pueden crear incompativilidades con Explorer 6)

B) Debajo de la imagen tenemos la info de TIPO de imagen, PESO y TIEMPO DE BAJADA + un

indicar la bajada de datos que tenemos contratada (nivel pas)

desplegable para

En Espaa la conexin de bajada es de 1Mb, la de subida es 200k ( conexion simtrica significa misma conexin de cartga y descarga). La resolucin habitual 1024x720px (max 1Mb por imagen).

BANNER Se realizan en FLASH y en GIF (por si no se carga el Flash) > banner animado, o en PNG o JPG > banner esttico. Para realizarlo nos deben especificar tamao en pixels, peso y tiempo En Google 15 segundos sin bucle. En Yahoo 15 s con bucle. Peso de 15 a 40k. Tamaos estandar en Espaa, segun formato. (728x90/40k, 160x600/40k, 300x250/40k, 400x495/60k). Al anunciar algo en un banner hay que ser muy claro y directo: que vendo + como es el producto + oferta. Con la marcca o el anunciante muy presente. Especificaciones: Para banners o cualquier web la Tipografa debe tener siempre efecto NITIDO. Los banners con fondo blanco se debe colocar un marco de 1,2 pixels. Sino parece parte de la pag web. Poner direccin (URL) al banner: desde html o desde Photoshop. REALIZAR BANNER ANIMADO Abrir ventana ANIMACIN. Realizar animacin cuadro a cuadro Cada cuadro tiene la duracin que se quiera. Los gif se guardan como html + imagenes. Siempre guardar todo ms el psd a alta para modificaciones. Si se envia a alguien, para que lo vea a tamao real que lo abra arrastrando a un navegador PONER VENTANA ANIMACIN IMAGEN PARA EXPLICAR Capas unificar : botones, (mismo sitio) (misma visibilidad) (mismo efecto) en todos los cuadros ANIMACIN GIF Seleccionando todos los cuadros de la animacin, podemos en las capas mover varias o un grupo y cambia en todos los cuadros igual. Al hacer adaptaciones de banners y queremos mantener los cuadros de animacin > guardar como (otro nombre) > ampliar lienzo sin recortar imagen > usar guas > adaptar > recortar. para esto y en general realizar primero el banner de mayor tamao para no perder calidad.

BOTONES Tienen 4 posiciones: REPOSO, ROLLOVER o hover (puede ser gif animado), ACTIVO, SELECCIONADO Una vez realizado el diseo de los botones (ver ejercicio) debemos reducir el peso. En el psd > Inagen > cortar > pixeles transpartentes. Para que el botn sea transparente, ocultar fondo y guardar como png. Si no es transparente mejor jpg pq pesa menos. 1024 PGINAS Las pginas ms visitadas tienen la misma estructura. El estandard es 1024x768px pero pueden existir pantallas a menor resolucin, es recomendable colocar mens arriba y a la izquierda. Ultimamente el men se repita abajo, sirve para pginas con scrolls muy largos como un blog. Web lquida: la pgina se adapta al augmentar o reducir la ventana de navegacin, indicada para portafolios no para webs de contenido.
LOGO MEN CAJA BSQUEDA CONTENIDO INICIO SESIN PUBLICIDAD

MS OPCIONES

768

Scroll vertical de pgina

PI DE PGINA (acerca de..., copyright, etc)

El target al que se dirige una web condiciona: diseo, tamaos, contenido, etc. Imagen de degradado: una imagen degradada el navegador slo carga una linia de colores y la repita, as ahorra peso. Si haces un degradado en diagonal no podria ejecutar esto y pesara mucho ms.

SECTORES Herramienta sector: sirve para dividir una imagen en diferentes imagenes (trozos de la misma). De este modo podemos crear botones o cargar newsletters. Los sectores de color gris los crea el ordenador automticamente, los azules nosotros. Es recomendable crearlos todos nosotros. Muy til para menus (ver ejercicio). Un sector puede ser un gif animado. Opciones de sector: 1- nombre al guardar: sin acentos, espacios, ni caracteres especiales. 2- URL: direccin absoluta que va a abrir al clicar. 3- Destino: _blank (nueva ventana al abrir) _parent (abre en la misma ventana) 4. Etiqueta Alt: para escibir un texto til con informacin de al imagen por si esta no se carga por los protocolos del mail o la web. Por ejemplo la imagen cabezera de un news poner: nombre news, nmero, marca. RUTA ABSOLUTA: direccin entera > (http://www.google.es/galeria/imagen01.jpg) Siempre funciona pq busca en el servidor la imagen. Se usa para newsletters RUTA RELATIVA: parte de la direccin > (/galeria/imagen01.jpg) No se precisa la absoluta pq ya estamos en la pgina web (su uso). Si movemos carpeta imagenes o la borramos no podr cargar las imagenes.
RELATIVA

Ejemplo: Direccin Pl. Catalua

FOTOS IMAGENES

Desde Madrid (absoluta): Espaa > Catalua > Barcelona > Pl. Catalua
GRAF.

WEB
TEXTOS

Desde Barcelona (relativa): Barcelona > Pl. Catalua

ABSOLUTA

NEWSLETTER Publicidad o contenidos que llegan al correo, ejemplo LeCool. Se pueden crear a partir de Dreamweaver (cuando hay ms texto que imagen) o en Photoshop (ms imagen que texto) Ventajas Dreamweaver: El texto es editable (se puede seleccionar) y el peso es muy inferior (en DW segn configuracin ordenador puede aparecer textos ms grandes -tener en cuenta al disear en este programa-) (ojo con tablas!) Ventajas Photoshop: El diseo no se altera, pudiendo utilizar cualquier tipografa, pq todo son imagenes. En realidad es realizar un diseo en Photoshop, crear sectores, guardar para web y colgar html. Newsletter paso a paso 1-Realizar psd con animacin (gif)

2-Realizar Sectores (dentro de harremienta recortar). Con la heramienta selecionar sector usar boton secundario (Modificar opciones de sector) para dar direccin web de destino al clicar imagen > Copiar direccin web absoluta en el apartado URL. Tambin se debe rellenar el apartado DESTINO con _blank o _parent y el apartado ETIQUETA ALT para poner texto substitutorio si no se carga la imagen por los protocolos del ordenador. 3-Guardar para web. Seleccionar el sector o sectores que son animados y poner gif, resto jpg y guardar. 4- En programa FILEZILLA (FTP) o otro programa colgar en servidor la carpeta imagenes + el HTML del newsletter (ojo mayusculas, acentos...) 5- Sabemos la direccin de nuestro servidor. En el curso www.jgoy.net/web5/ a partir de aqui nombre de mi nueva carpeta + nombre del newsletter (html) + .html > ya podemos ver el news en internet. 6- Ahora falta cambiar la direccin relativa a absoluta de las imagenes + el cdigo que anula el error de las linias blancas (style=display:block> Para ello en el news de internet en el navegador, clicar con botn secundario > ver imagen. De este modo en la barra de direcciones aparece la direccin absoluta. La copiamos y la pegamos en el cdigo, en cada imagen (<img scr=) desde imagen/ hacia atrs hasta <img scr= Repetir para todas las imagenes. Para ver el cdigo de programacin, boton secundario sobre el doc html y ABRIR programa Blog de notas (para PC) Para MAC ? En el cdigo ir pegando las direcciones absolutas substituyendo las relativas de cada imagen. gtambin se puede ir, dentro del blog de notas, a EDITAR > remplazar y hacer la substitucin a todo el documento de una sola vez De este modo podemos borrar la carpeta de imagenes de nuestro ordenador y ver bien el news en internet pq cargar las imagenes copiadas al servidor (no es recomendable borrarlas) 7-Solo queda preparar el mail. Copiar del cdigo slo la parte Table (<table hasta </table>). Con thunderbird > nuevo correo > poner destinatarios y asunto > con la zona de mensaje seleccionada > menu > insertar > html > pegar (lo copiado table > ENVIAR En un newsletter nunca hacer un gif por sectores, un sector=un gif animado. Estos newsletter son recomendados para CV o pequea seleccin de trabajos. Pq no debe descargar nada para ver, lo ve directamente en el mail, ventaja ante docs adjuntos.

DREAMWEAVER Colocar ventana insertar como herramientas en la parte superior. Esta barra esta definida por: Botones: Cdigo (para visualizar el cdigo HTML) Dividir (visualizamos el cdigo e imagen o diseo) Diseo (visualizamos slo la apariencia o diseo) Vista en vivo (como se ve en internet, nada fiable para verlo hay que tocar el botn navegador Boton Ttulo: poner nombre del doc, se ver el nombre en pestaa o ventana del documento en el navegador(se pueden poner caracteres especiales)

Boton Servidor: para subir al servidor

ventana archivo: aaprecen las imagenes creadas en el SITIO de nuestro html o documento.

(en una tabla de newsletter, en una div por cdigo o por diseo) Botn Insertar imagen: en ventana elegir imagen, ok. Se abre 2 ventana texto alternativo o Etiqueta Alt: texto que se ve en el navegador si la imagen no se carga

En visualizacin Diseo podemos seleccionar imagen y editar bordes, vinculos, etc. A travs de la VENTANA PROPIEDADES. Si escribimos en vnculos un # nos crea el cdigo de vnculo pero inactivo.
_blank: abre link en ventana nueva _parent: abre link en misma ventana en la que estamos navegando. clicando sin soltar sale ralla y vinculamos lo que queremos en ventana archivo. La carpeta del lado lo abre como en el escritorio

En la linia 4 de cdigo se especifica el lenguaje para poder usar en textos, titulares,etc los caracteres especiales como , , acentos,etc >poner: <meta http-equiv=Content-Type content=text/html; charset=iso-8859-1 /> Tamben se puede cambiar en menu > Dreamweaver > Preferencias > (en ventana desplegada) Nuevo documento > tipo de documento predeterminado: XHTML 1.0 > Codificacin predeterminada: Unicode 5.0

SITIO es una carpeta en nuetro ordenador donde se contienen todos los trabajos ordenados cada uno en su carpeta y dentro de ellas todos los html e imagenes que emos creado. Tambin se pueden guardar los psd del diseo creado. Ser la carpeta que subiremos al servidor (sin los psd). Nunca cambiar de sitio estas carpetas y documento, ni tampoco cambiar nombres desde el ordenador. Si lo podemos hacer desde DW (ventana archivos -para imagenes-, ventana estilos css- para css-). Antes de realizar un nuevo documeno html hay que crear el SITIO y especificar raiz: Crear SITIO (menu principal DW > sitio > nuevo). Aqu tambin se puede administrar, editar un sitio (cambiar nombre reubicar, etc)

Debemos seleccionar nuestra ruta de carpetas creadas Desde disco duro o usuario hasta la carpeta de nuestro proyecto.

De este modo en ventana Archivos apareceran automticamente las imagenes del sitio, las realizada para este documento

EN CDIGO En el <head> ponemos CSS, javascript... </head> En el <body> ponemos todo lo visible, divs, tablas (newsletter)... </body> Una CSS es una hoja de estilo que define un objeto. Pueden ser id vinculadas a una div, que definen un contenedor (con su tamao margenes tipografa...). O pueden ser class (clase) que definen estilos aplicables a todo sin vincularse a nada. Tambin se pueden crear especificas para cada documento html o hacer una hoja de estilos que aparecer como un documento xxxxx.css y se aplicara a todos los documentos de una misma pag web ( si se cambia algo en esta cambiar en todos los documentos). Estas hojas de estilo se pueden crear copiando el head de un documento html y copiandolo en un nuevo documento CSS en DW o creandolo de cero (nuevo doc > css).

REALIZAR UN NEWSLETTER EN HTML (prctica) Un Newsletter no puede usar ni divs, ni css, hay que realizar tablas. 1- Realizar un diseo en Photoshop o Illustrator + hacer SECTORES. (simple pq las tablas en DW dan problemas). 2- En DW crear Sitio y nuevo Documento html. 3- Crear tabla segun sectores. Es MUY importante especificar en cada celda de la tabla las medidas exactas (mismo tamao que las imagenes creadas por los sectores de Photoshop, por ejemplo). Las celdas inferiores a 20px pueden fallar. boton Insertar Tablas

4- Ir colocando imagenes (gif animado o jpg) adaptando tabla. Tambin se puede anidar una tabla dentro de una celda. Para ello con el boton Insertar tablas clicar dentro de la celda. Aparece ventana n filas, n columnas, etc.

unir / separar celdas (crear) 5- Editar titular, parrafo, texto en general: Dentro de una celda, en cdigo escribir <font> texto </font> sigue texto no afectado. En <font size=tamaotipo face=tipografiatipo color=FFF>texto</font> sigue texto no afectado pero editable si hacemos nueva <font> (Ojo espacio entre size, face, etc) (podemos encontrar en cdigo una celda, escibiendo algo en la celda deseada en apariencia diseo (ms fcil) Todo esto estar dentro de <p> </p> que es un parrafo que a su vez esta dentro de una <td> </td> que es una celda dentro de una <tr> </tr> que esta dentro de una <table> </table> que puede estar dentro de otra table. Y todo dentro del <body> </body> Especificaciones: - Al guardar aparece un bot-on, raiz del sitio, nos lleva a la carpeta del sitio, donde hay que guardarlo. - A la home o 1 pag siempre llamarla Index - Para copiar un color exacto de nuestro diseo en Photoshop hay que usar el cdigo hxagesimal (6 digitos con #) - Para eliminar una fila en cdigo, escribir en apariencia diseo algo y seleccionarlo. De este modo localizamos la fila en apariencia cdigo y podemos borrar esa linia, desapareciendo tambin del diseo. En cdigo > color verde > error. Para ver el cdigo fuente en mac, abrir html en Firefox > Men > ver > cdigo fuente de la pag. Para poner notas o comentarios en cdigo (color gris): escribir, <!-- blablablabla --> Para notas en CSS: escribir, /* blablablabla */ Para notas en javascript: escribir, // blablablabla (sin cerrar) Es aconsejable ir haciendo comentarios para saber que son o hacen cada parte o cosa. PROPIEDADES DE PAG ?

PRCTICA 03 NEWS 1- Crear sitio. 2- Nueva documento > crear tabla segn diseo psd (7 filas/2 columnas, anchos 730/0/0/0) 3- Primera y ltima fila > unir columnas (ventanas propiedades: botn ) 4- Primera fila definir Ancho (width) y altura (hieght). Siempre hay que definir el ancho y alto de cada fila y columna para que nada se mueva al verlo en distintos ordenadores y navegadores. El alto de celda con slo texto no es tan necesario, ya que segn las preferencias de visualizacin el texto puede ser a mayor tamao y una celda definida en altura podra hacer que no se viera parte del texto. 5- Insertar imagen o arrastrar desde Archivos locales

6- Definir resto de celdas de la tabla 7- Dar color a lab tabla, se selecciona (visualizacin diseo) o en el cdigo y en este <table width=130 border=0 bgcolor=#69e4 (color ). 8- Colocar texto Lorem Ipsum en fila 2 pegando siempre en ventana diseo, no en cdigo. 9- Editar texto: <td><p><font color=#xxxx face=xxxxx><b> texto pegado en diseo</b></font> La b es bold 10- Editar resto del prrafo. Para poner margenes (texto no pegado al margen del news) > seleccionar todo el texto y en ventana propiedades aparecen 4 iconos: usar el ltimo

11- En la siguiente fila: hacer tres columnas: herramienta 12- Crear en la del medio una imagen de fondo > poner linia. Si no sabemos donde esta la celda en el cdigo, escribir algo en apariencia diseo y buscar en el cdigo el texto. 13- En la siguiente fila copiamos y pegamos el texto ya editado. Tan solo tendremos que volver a hacer las sangres (punto 10) 14- En la fila siguiente pegamos el cdigo de la linia como imagen de fondo (desde <tr> hasta </tr>) 15- En la siguiente inia o fila copiar y peggar una linia de texto anterior (de este modo tenemos las mismas propiedades tipogrficas. Escribir Envia un correo as tadel@tadel.com. Seleccionar el correo y en ventana propiedades > vinculo poner correo (el propio) o un # (que indica link en funcin pero que no lleva a ningn sitio). 16- En la ltima fila insertar dos imgenes (sota1, sota2), en sota1 poner vnculo (http://www.tadelformacion.com) y tambin sacar borde (poner 0 pq evita problemas). Ambas acciones en ventana propiedades. 17- Colocar imagen en celda vertical. Lo haremos como background pq en Newsletters insertando puede deformarse segun ordenador, usuario o navegador. 18- Seleccionar la tabla entera (en diseo, en el borde aparece flecha vertical/ o buscar en cdigo) y hacer linia alrededor del news con background=imagenes/cap1.jpg. La linia como imagen s tres pixels (negro, blanco, azul) que el programa interpreta y repite alrededor de toda la tabla, tambin funciona con imagen como textura de fondo. 19- Para poder enviar por mail hay que substituir la direccin relativa de todas las imgenes por la absoluta. Podemos ver la direccin absoluta abriendo Firezilla y ver ruta de carpetas des del servidor jgoy ( o el servidor a usar). En Dw apariencia cdigo > comando F (buscar/remplazar). Se abre ventana > Buscar en: Documento actual, Buscar: Cdigo fuente, Buscar: imagenes/, reemplazar: http://www.jgoy.net/web5/news/news2/imagenes/ > Reemplazar

PRCTICA 03 NEWS 20- En cdigo copiar todo lo que est dentro de <body (de tabla a tabla). En el mail Thunderbird > nuevo mensaje > direccin, asunto y con el cursor en la parte de escribir mensaje (seleccionado) > Menu > insertar > html > Pegar. PRCTICA 04.FONDOREP Crear imagen de repeticin para fondos de newsletter o pag web. 1- Photoshop > nuevo doc > 728x100px >degradado horizontal/vertical > recortar largo altura 1px (degradado horizontal) o anchura 1px (degradado vertical) > guardar para web en jpg. 2- Abrir DW nuevo doc y nuevo sitio para vinvular carpetadonde esta el degradado. 3- Menu > Midificar > Propiedades de Pgina > apariencia (html) [Margen izq (nada), Margen sup (0), Ancho de imagen (nada), alto de imagen (nada)] [imagen de fondo (examinar) cargar fondo1. En la apariencia/navegador aparece repetido el degradado. Ir a Ps hacer degradado cap i cua y repetir paso 3 o substituir en cdigo el nombre de la imagen.

VENTANA ARCHIVOS Puedes ver todos los sitios creados y modificar nombres del sitio, de subcarpetas, imagenes, etc

ETIQUETA DIV (<div) Es una caja de un tamao a elegir (como tabla sin serlo). <body <div id=contenedor> <div id=menu> <div id=boton1>uno</div> <div id=boton2>uno</div> <div id=boton3>uno</div> </div> </div> </body> Las <div tienen indicadores (id=contenedor), los contenedores se les aplica CSS (ventana estilos css), se definen en el <head entre {} y sirven para editar el estilo de botones , divs, etc. Pueden ser internas, creadas en el propio y para el propio doc html o Externas (nombre.css) son un documento que puede guardarse a parte del html y se puede aplicar a diferentes html (como estilo de un menu). El nico inconveniente es que si se alteran se alterarn todos los html que contengan esta css o hoja de estilo css. CREAR DIV EN DW En apariencia diseo > botn (al lado de insertar imagen en ventana insertar). Al clicar se abre ventana: dar nombre (no mayusculas, ni nmeros al inicio, ni caracteres especiales) y clicar: Nueva regla CSS (abre ventana)

Existen varias posibilidades en principio las que aparecen en la ventana anexa. Podriamos hacer otro tipo de CSS, aplicarlo como hoja de estilos y no solo este documento. Una clase ID siempre lleva en su nombre un # delante (#xxxxx). Y slo se aplica a la Id =xxxxx Una clase siempe lleva un punto delante (.xxxx). Se puede aplicar a un botn, enlace, parte cde un texto, etc. A cualquier cosa. Tambin se puede crear <div escribiemdo en el cdigo

Aceptar > nueva ventana: TIPO: editamos tipografa de la div. FONDO: background-image (boton examinar) nos abre nuestro sitio buscar imagen y guardar. BLOQUE: CUADRO: define el tamao, color, Padding y margin, entre otros. Padding: para crear margen invisible interior, este margen se debe restar al tamao total del cuadro. Margin: suma un margen a la caja (no hay que variar cuadro y nunca taner activado igual para todo) BORDE:... PRCTICA div05.html 1- Como acabamos de explicar, creamos div + regla ID (css). 2- Ir a ventana Estilos CSS donde aparece la div #contenedor, clicar dos veces y editar la css (id): En cuadro: tamao 600x800px Margin left right: auto (centra div en navegador)> aceptar. 3-Queremos nueva div dentro de div contenedor, la div #menu. Podemos usar el botn insertar div colocandonos en diseo dentro de la div contenedor o por cdigo. Esta tambin tendr su css: cuadro 600x50px. 4- dentro de men creamos las divs boton (uno, dos, tres, cuatro) con su CSS id y editarla (ver prctica). 1- para realizarlo ms fcil: Escribir en cdigo (<body>) todos los divs: <div id=contenedor> <div id=menu> <div id=uno>uno</div> <div id=dos>dos</div> <div id=tres>tres</div> <div id=cuatro>cuatro</div> </div> <div id=>contenedor2> <div id=>foto1> <div id=>foto2> </div>

2- En cdigo seleccionar contenedor y en ventana Estilos CSS hacer nueva css o estilo, botn 3- En cdigo seleccionar menu y nueva css. En la ventana aparece (#ciontenedor#menu) aplicar boton MENOS ESPECFICO (#menu). Si no hacemos menos especfico el estilo css slo se aplicara en menus dentro de contenedor, no a los otros menus de la pgina, puede ser un problema. 4- Tambin en cdigo seleccionar uno + nueva css > editar. 5- Para aplicar css en dos > en ventana Estilos CSS clicar (#uno + ctrl) y duplicar css. Le cambio el nombre (#dos) y edito. 6- En css uno dos tres y cuatro editar: Cuadro, float left. El float left nos permite ir colocando las divs o cajas una al lado de la otra ordenando la pgina, ya que por defecto lo coloca una debajo de la otra. Si una caja se mueve abajo es pq hemos cambiado los tamaos de las divs y suman ms que el total del contenedor. 7- Creamos resto de css 8- Tenemos la estructura creada. Es MUY ACONSEJABLE primero realizar la estructura, el esqueleto luego ya editaremos bin css, etc. > comprobamos en el navegador. Si en el navegador no se ve bien > en navegador > herramientas > limpiar el historial recinte > todo > ok. Y actualizar navegador 9- Dar estilos definitivos a las css (menu) 10- Al menu editado Dar vnculo y destino (ventana propiedades). En vista diseo seleccionar texto uno, dos...) 11- Para colocar foto ir a div foto1 y entre >< insertar imagen (por cdigo img src=botn examinar). 12- Colocar texto Loren Ipsum (si aparece div idloren ipsum borrar). 13- En css texto > posicin > overflow > auto (scroll) + editar tipo, padding (5px lados *ojo restar del total de la caja estos 10px). 14- En fotos por cdigo aadir img src= poner nombre imagen botn examinar del cdigo. Ahora copiar img src 4 veces y cambiar nombre foto y ponerlo en la misma linia de cdigo para una correcta alineacin. 15- Colocar banner en una div, botn insertar imagen y en propiedades borde=0 (no en css). 16- La tipografa aparece azul con linia por el link. Para cambiarlo > menu principal > Modificar > propiedades de pgina > vinculos css > editar. Al realizar el vnculo aparecen automticamente en Estilos CSS lo siguiente: a a:link a: visited a: hover a:active
L O V E H A T E para recordar orden de las clases enlace

El orden es vital para que funcionen los enlaces

17- salvar documento y guardar como documento 2 (indexroger + indexroger2) A partir de ahora para seguir prcticaver indexroger2. 18- Borramos las css de vnculo a 19. Aplicamos clases. Son otra forma de estilo css como div pero no se vinculan a ningn identificador (id). Pueden aplicarse a vnculos, imagenes, a cualquier elemento html. Aparecen en ventana Estilos CSS con .xxxxxx (punto + nombre) Crear Clase: en ventana Estilos css > nuevo css (se abre ventana) > poner CLASS + nombre (uno_enlace) + en este doc (no hoja estilos) > aceptar > editar: tipo > guardar. 20- Para aplicar clase: en apariencia diseo seleccionar uno y en ventana propiedades > clase, aplicar nombre clase

21- En Estilos CSS seleccionar uno_enlace > duplicar (control + click) > poner 2 en vez de copia > aceptar >Z en la ventana Estilos css cambiar nombre a uno_enlace:link > una vez hecho, duplicamos :link varias veces y ponemos :visited, :hover, :active. 22- Editamos css uno_enlace:hover (al pasar el mouse por encima veremos el cambio) 23- Comprobar en navegador si funciona. 24- Si funciona, copiar cdigo uno_enlace { xxxxx }. Lo pegamos y substituimos uno_enlace por dos_enlace Estamos realizando el resto de botones. En diseo seleccionar dos y en ventana propiedades aplicar clase. Repetir operacin para resto de botones. PRCTICA 06flota Vamos a realizar el efecto relieve a un marco o objeto sin que pese mucho, sin realizar imagen de todo el cuadro. Adems con anchura y altura variable, sin limite. 1- Crear en photoshop el cuadro con reliebe deseado. Haremos sectores y guardamos para web
<div1 <div2 <div3

<div = sectores El orden es importante e igual que orden lectura.

<div4 <div5 <div6

La div5, la central no la necesitamos. En DW crear div contenedor: <div id=contenedor> (div1) <div id=corner_superior_izquierda></div> (div2) <div id=superior></div> (div3) <div id=corner_superior_derecha></div> (div4) <div id=izquierda></div> (div5) <div id=centro></div> (div6) <div id=derecha></div> (div7) <div id=corner_inferior_izquierda></div> (div8) <div id=inferior></div> (div9) <div id=corner_inferior_derecha></div> </div>

<div7

<div8

<div9

Alterando Cuadro de div2, div5, div8 o div4, div5, div6 podemos augmentar o reducir altura o anchura

En cada div crear css > colocar medidas en cuadro iguales al sector photoshop y en Fondo poner imagen de fondo. Excepto divs: 2,4,5,6,8. Porque hemos recortado (photoshop) a la mnima expresin el jpg resultado de los sectores. De este modo en estas divs en sus css, en fondo ponemos imagen + background repeat (excepto div5, sin imagen) y, de este modo, podemos darles la medida que deseamos.

COMO MONTAR UNA PGINA WEB (prctica web1) Firefox > Menu > Herramientas > Complementos. Hay que descargar antes a trevs de google, WEB DEVELOPER y FIREBUG. Photoshop 1- Pantallazo a Firefox > pegar en Ps 2- Borrar la parte propiamente de la pgina, fondo blanco. 3- Bajamos de www.vecteezy.com un pincel floral > descargar y abrir en Illustrator. 4- Copiar y pegar en Ps como objeto inteligente > ampliar 220% > montar fondo duplicando y ajustando uno al lado del otro > crear capa ajuste (tono/saturacin) para oscurecer. 5- Crear Barra Men: Herramienta seleccin > estilo: tamao fijo 1024x60px. > hacer degradado de arriba a abajo en seleccin > aplicar estilo resplandor exterior. 6- Crear Botones reposo, hover y active. Hacer un tipo, ponerlo en un grupo, duplicarlo dos veces y crear los otros. 7- Hacer sectores de los tres botones ms una representacin mnima de la barra. Guardar para web, en el caso de los botones guardar tres veces con las tres apariencias distintas. 8- Hacer jpg del fondo: buscar la unidad mnima de repeticin del fondo > recortar > guardar para web. En el Ps volver atrs para no perder el documento entero de la web. 9- Dejar slo visible el telfono (imagen) > cortar (pixels transparentes) > guardar para web jpg o png segun transparencias > volver atras y guardar psd completo. Dreamweaver 10- Menu > modificar > Propiedades de pgina: apariencia CSS (en ventana) > imagen de fondo (ponerla) Repetir (repeat). 11- Crear <div id=menu></div> en body. 12- Crear css seleccionando div menu + boton , la hacemos hoja de estilos. En la ventana emergente, en Definicin de regla poner (nuevo archivo de hoja de estilos). La llamamos estilo1.css. Editamos fondo > cargar imagen Blackground-repeat: repeat x. 13- En Propiedades de pgina > apariencia css > margen izquierdo y derecho = 0. De este modo el menu va de lado a lado del navegador. 14- Nuevo <div id=menu2></div> dentro de la div menu. Crear css (en ventana Estilos CSS, menos especfico y Definicin de regla > estilo1.css) > centrar cuadro con margin top o padding en menu. Hoja de estilo CSS (estilo1.css) es la carpeta que contiene todos los estilos de un html o varios. Es como un estilo tipogrfico de QxPress o Indesign. Muchas propiedades agrupadas crean una hoja de estilo que podemos aplicar ms facilmente a distintas pginas, menus, etc de un cliente. Podemos crear una hoja de estilos a partir de un documento creado con sus css > copiar estilos del <head >archivo nuevo DW tipo .css > pegar y guardar (siempre en el sitio del doc html) 15- En menu2 insertar las tres imagenes de menu activo. Es evidente que el cuadro de la css menu2 ser de la longitud de los tres botones 16- Hacer enlaces a los tres botones > ventana propiedades: vinculo > borde 0, para que no se mueva. 17- Crear CSS nueva tipo clase, sin vincular a nada, llamada gallery_boton > editarla: Cuadro(igual imagen galeria) + Float left + fondo (poner imagen que corresponde). 18- En cdigo, dentro de div menu2, borrar cada imagen entre <a a> sin borrar enlace y poner class=gallery_boton> 19- para resto de botones (hover) > en ventana Estilos CSS: copiar y pegar gallery_boton dos veces y cambiar nombres a comprar_boton y contacto_boton. En estas dos nuevas css cambiar imagen de fondo. Luego duplicar cada una y aadirle al nombre :hover. Para cambiar la imagen de fondo podemos: A) en la css > Fondo Examinar o B) en cdigo (<head) escribir el nombre de la nueva imagen. (en la hoja de estilo estilo1.css) 20- Colocar, despus de cada enlace de cada imagen (a href=), target=parent. 21- En cdigo (<body) hacer nueva div foto. Hacer nuevo estilo css dentro de la hoja de estilo1.css > Editar: vuadro (medidas imagen) + Margin: right, left auto (para centrarla).

COMO MONTAR UNA PGINA WEB (prctica web09) Photoshop Realizar diseo (Llusa) 1- Crear estructura con rectangulos simples (no desiar detalles). De este modo vemos si la estructura, orden y tamaos funcionan. 2- Marcar tamao pantalla con gua horizontal > ampliar lienzo hacia abajo. 3- Colocar, si queremos, imagen de fondo slo en la parte de arriba de la gua (lo que es la pantalla, puede dalir un poco por debajo. 4- Realizar sector de flecha, click e imagen ocultando el resto de capas > guardar para web. 5- Crear carpeta en escritorio (o en Sitio si esta creado) y guardar las tres imagenes que queremos, el resto de sectores creados tirarlos. Dreamweaver 6- Crear sitio (09web) y abrir archivo html nuevo. 7- Crear div contenedor en cdigo (<body) > cuadro: tamao segun imagenes. 8- Seleccionar contenedor y crear CSS de Identificador (Id). 9- Cuadro 1000x1500 + margin auto raight, left (centrar pag en navegador). 10- Saber de que color es el fondo > clicar en psd con cuentagotas y copiar cdigo (#xxxxx). 11- Se pega en Propiedades de Pgina (menu > modificar > apariencia css > fondo). 12- Creamos div heat + nueva CSS id > Cuadro 1000x112px (imagen 112px). En cdigo ponemos imagen flecha y click, escribimos <img src=flecha/> y <img src=click/>. 13- Crear clase img_flecha > aplicar seleccionando flecha en diseo o en cdigo y en Ventana Propiedades > Clase > aplicar. 14-Para crear la ralla blanca del diseo > en #heat > borde: boton solid; width (1px); color (#FFF). 15- Crear div menu y escribir texto (home, gallery, contact, bio). Seleccionando cada palabra en apariencia diseo > ventana propiedades: vnculo (#). 16- Crear la case enlace para editar tipografa (blanco, margin left right 14, etc). 17- En clase menu dar margen en cuadro para que el menu se situe a la izquierda. 18- En cdigo coger class enlace y copiar y pegar 4 veces. en orden poner enlace:link, enlace:visited, enlace:hover, enlace:active. En ellos editar los cambios que queremos, podemos abrirlos desde ventana Estilos CSS. As creamos la animacin de los botones. 19- Crear div imagen dentro de contenedor + crear css y editarla. 20- EL MENU NO QUEDA BIEN. Los espacios entre textos no son iguales. visualizamos en navegador. En Firefox > varios > mostrar reglas. Seleccionando vemos medidas de los botones. HOME = 47px, GALLERY = 77px, CONTACT = 77px, BIO = 29px. 21- Borrar todas las css enlace:algo y en la enlace restante cambiar nombre en la propia ventana estilos por enlace_home. 22- Editarla: a) con la medida de imagen Home (47px): Cuadro 47 + espacio de 5px por cada lado = 57px x altura 31px. b) Tipo: Arial / color:Blanco / Tamao:14 / Borde:center. c) no queda centrsdo respecto al eje y. Si hacemos Margin, al hacer el hover no ir bien pq el margin lo hace fuera de la caja > hacer Padding (hay que restar de la caja lo que se de de padding). 23- Duplicar enlace_home > cambiar nombre enlace_hover (en Estilos CSS duplicar o en cdigo) 24- En el cdigo escribirle :hover (se pone color rosa) 25- fondo color blanco / tipo color fondo de la web (ver en photoshop). 26- repetir operacin para LINK, VISITED, hover, ACTIVE 27- Ajustar div #menu > imagen y cuadro para aliniar bien el menu justo a la derecha. 28- Seleccionatr todos los enlaces (en cdigo) y cortar > archivo nuevo (.css) y pegar > Guardar y llamar enlaces.css 29- Hacer lo mismo con el resto de CSS y llamar Estructura.css 30- En documento web borrar style type. 31- Importar/aplicar css externa. En Estilos CSS, con el botn cadena (), podemos importar la css Estructura y estilos. Se colocaran en el <head. Copiando cdigo y pegando + cambiar nombre, ya tienes las dos css hechas. Aparecen es Estilos CSS, se puede abrir y editar, si se edita cambiar para todos los documentos con esa css externa (hoja de estilo). Por lo tanto, debemos hacer una especial: duplicartla, cambiar contenedor (nombre) y editar css. De esta manera podemos empezar a copiar pginas web, sus css colgadas en internet, etc. 32- Vamos a ajustar menu, linia y foto (aliniar derecha)

33- Vamos a hacer que el botn quede activo. a) en div menu en texto home substituir <a href por <span y teclear la nueva css (class). La nueva css se hace duplicando estilo-home_estoyaqui b) Debemos activar el enlace de gallery en cdigo > Menu > Gallery > substituir # (o crear si no est) por gallery. html. Un nuevo documento html. c) para gallery hacer lo mismo. En gallery enlace a home. Pq enlace-home_estoyaqui y enlace-gallery_estoyaqui han de estar en los dos documentos html (home y gallery). Poner en cada parte del menu la CLASS que le toca (enlace-gallery, enlace-contct, enlace-bio). 34- en Photoshop seleccionamos pestaa y hacemos imagen para web de la reposo y la activa en png (mantener transparencia y opacidad). Guardar en la carpeta imagenes. 35- Crear div destacados debajo de div imagen y crear #destacados (cuadro: tamao, padding, margin, float left). Poner los 4 botones en cdigo (escribir:<div id=destacados>opcion1 opcion2 opcion3 opcion4</div>, sin acentos en cdigo con acento en diseo). Sin seleccionar nada crear Css en hoja de estilos >fondo, cuadro... (ver prctica). 36- Editar .destacado > tipo/fondo cambiar ancho para poder mover texto sin que salte . *en tipo hacer mayusculas > capitalize. Pero mejor hacerlo manualmente en diseo evitamos algun problema de navegacin. 37- Ajustar pestaas al ancho de la foto > #destacados (css) ampliar ancho de Cuadro. Tambin hacer ms grande (ancho) el Cuadro de .destacado. 38-En #destacados > Cuadro: top (as separamos de la foto las pestaas). I-FRAME Es una ventana para cargar un sitio externo en una div de nuestra web. Su cdigo se encuentra en Google Maps. 1- Vamos a Google Maps > escogemos un lugar > dar al botn ENLAZAR. Se abre una ventana > clicar botn personalizar (editamos lo que queremos: tamao...) y copiar cdigo. 2- Nuevo documento iframe y pegar cdigo en <body 3- Aparece una direccin de enlace larga entre iframe > borrar y poner www.google.com. Borrar el resto de cdigo (estilo) src (pgina que se carga directamente. Copiar de <iframe> a </iframe> 39- En el documento home. Creamos nueva div iframe1 y entre >< pegamos cdigo iframe. 40- Editamos div: Cuadro: ancho de la foto y margin altura 410. En cdigo i frame poner mismas medidas que la div iframe1 41- En cdigo al <iframe poner nombre <iframe name=contenido. 42- Selecconamos en diseo OPCION2 dar vnculo (yahoo) destino: contenido. De este modo podemos colocar una pgina propia dentro nuestra pgina. 43- Creamos nueva div cuadraditos debajo de div iframe1. Dentro de div cuadraditos creamos 3 divs cuadro1, cuadro2, cuadro3. las editamos segun medidas Photoshop. En la div cuadraditos > Margin: top 24px (para separarlo del cuadro anterior). 44- hacer footer. Crear div footer fuera de div contenedor. 45- Crar #(css) y editar > Cuadro: width 100% (para centrar en la ventana nvegador) El footer se suele poner de lado a lado de la ventana navegador, as cierra mejor la web. 46- Queda muy alejada porque div contenedor es muy larga. Hay que cambiar #contenedor: Cuadro: hight. 47- (en javascript bajado) Vamos a poner contenido a los tres cuadros de div cuadraditos. Aplicaremos javascript (buscarlo en google > 150 javascript). Para hacer funcionar el javascript lo haremos borrando linias y probando en navegador si funciona: ENSAYO/ERROR. Crear Sitio nuevo > abrir php (substituir .php por .html y abrir). 48- (en javascript bajado) En el nuevo documento, selecionando en diseo > borrar todas las imagenes (divs) que no se utilizan. 49- (en javascript bajado) En el head eliminar cada funcin de programacin (script) que se asociaba a las divs. Al ir borrando comprobar en navegador si funciona, si no funciona, comando z (es recomendable cpiar el cdigo entero en un txt). 50- (en javascript bajado) Una vez est el cdigo limpio, podemos editar cosas del javascript (cambiando px, color...). En navegador vemos que cambia, as personalizamos el script. (al editar es recomendable usar colores fuertes y augmentar tamao px mucho para ver bien las diferencias) 51- (en javascript bajado) Se selecciona todo lo que hay dentro de <style, sin incluir el propio marcador. Cortamos y pegamos en nuevo doc CSS y guardar con nombre style.css

52- (en javascript bajado) Volvemos al documento index buscamos en <style copiamos el cdigo <script (sin primera linia) > pegamos en nuevo documento .js. De este modo hacemos hoja de javasscript externo (no coger etiquetas <script). Ahora tenemos javascript y css externos. 53- (en javascript bajado) En documento index, en ventana Estilos Css, clicar (cadena) para importar style.css. Se abre opcin vincular (hoja externa) o importar (pegar en cdigo documento) > vinculamos. 54- (en javascript bajado) Hacer lo mismo con el estilo javascript. 55- (en javascript bajado) La primera linia scrip es donde busca la programacin javascript en internet. Copiar direccin (google) en Firefox. Aparece un documento que guardamos, es un cdigo que nos vincula la pgina web al servidor google y no queremos depender de otro servidor que no sea nuestro. Este cdigo lo copiamos y pegamos en nuevo documento javascript > guardar como .js > Borrar linia script con direccn google e insertar hoja de java (jquery-1.3.1.js) (ver imagen js1) IMPORTA EL ORDEN DE LOS JAVASCRIPT En Ventana Archivos se pueden agrupar .css y .js o combinarlos en una carpeta con o sin subcarpetas. Pero desde DW (nos pedir si aplicar en todo los documentos con esos java o css). Hay javascripts que van en el <head o despus del <body. Se especifica en la pgina web de descarga o en el propio html bajado de esta web (si esta en head ponerlo all, si esta despus del body lo mismo). Es ms comn en head. 56- (en javascript bajado) Seleccionar en style.css la linia body {} y borrar. 57- (en javascript bajado) Ponemos una imagen para la web index.html (por cdigo o por botn ). No encaja, hay que cambiar tamao cuadro > ir a clase style.css y en boxgird cambiar width y height. Tambin quitamos matgin y border. Al verlo en navegador la banda negra sube demasiado > ir a javascript ventana. Hay que cambiar las medidas Top: no es aqui. Hay que ir a style.css en caption .boxcaption > editar: 247px inicio imagen. Ahora en ventana.js poner 247px y 193px pq hemos puesto 27 ms a 247px. 58- En style.css vamos borrando linias que no sirven (ir comprobando en el navegador que no afecta). 59- Al documento index del sitio provesjavascript > ir a Ventana Archivos, cargar el sitio 09web (dende esta la web de Llusa) y abrir home.html (la web). 60- En index copiar todo el body y pegar en div id=cuadro1> lo que hay en el body</div>. Aparece la imagen pero no va porque hay que copiar los dos javascript y las css. 61- Copiamos style.css y lo pegamos en estructura.css al final del cdigo (poner aviso (en gris) que es para la caja). 62- Importar javascript (botn pergamino). Poner cursor en cdigo debajo de <title y pegar: 1 jquery-1.3.1.js y 2 ventana.js. Quitar color de fondo de la hoja de estilos cuadro1. 63- El nombre de la artista no sale hasta pasar cursor por encima de navegador. Arreglar? 64- Cambiar color del texto artista hay que modificar css boxgrid p, que afecta al <p> de donrtro de la div cuadro1 (class boxgrid caption -son dos clases, boxgrid y caption-). Para cambiar color al enlace (Marc Wask) > crear class dentro del enlace <a href=# class=colorenlace target=_blank>Marc Wask </a>. La llamo colorenlace. ????? 65- Ordenamos el Sitio desde DW > archivos css en carpeta css, archivos javascript en carpeta js, y las dos en carpeta src. 66- Buscamos 4 imagenes, las llamamos foto-peque1.jpg, foto-peque2.jpg, foto-peque3.jpg, foto-peque4.jpg. 67- Seleccionar js y pegar e cdigo. En <script type=text/javascript> var imagen1=new Image ( ) image1. src=imagenees/fotopeque/foto-peque1.jpg var image2 </script>. 68- Insertamos imagen foto-peque1.jpg en diseo para saber la ruta (imagenes/fotospeque/foto-peque1.jpg). Cuando no sabemos una ruta insertar la imagen en DW para verla en cdigo > la copiamos y pegamos en js substituyendo la direccin que aparece (slw1.jpg), lo hacemos en todas las imagenes poniendo 1,2,3,4. 69- En diseo localizamos el cuadro 2, seleccionamos y buscamos en cdigo > div=cuadro2. 70- Le podemos insertar imagen (foto-peque1) con toda su direccin, desde cdigo o diseo. 71- Para poner una foto ms hay que copiar (imagen4) e el script superior (2linias) y pegar cambiar 4 por 5. En el script de abajo poner 5, 6, 7. Podemos repetir la operacin poniendo ms fotos. Sobretodo las imagenes deben llamarse igual y ser correlativas (1, 2, 3, 4...) y tener el mismo tamao. Otra manera de hacer esto sera hacer un gif., pero sera ms lento en cargar porque debe cargarlo entero (peso) antes de visualizar. id= y name= Son lo mismo podemos asociar js o css a cada uno. En cdigo el tiempo va en milisegundos (3500 = 3,5segundos)

72- HACEMOS EL FOOTER, diseamos en Ps. 73- Creamos nueva div piedepagina dentro de footer 74- >Seleccionando piedepagina creamos css dentro de hoja de estilo css estructura.css > Editamos: Margin right left uto, Fondo rojo, Cuadro 975x195px. 75- Vamos a Ps y escogemos un trozo del fondo a ver si repitiendo imagen queda bien. Si no le damos ruido. 76- Hay que hacer div de todo el footer. Eliminamos div footer pq no queremos el footer de lado a lado del navegador. 2 3 Creamos: div dos 4 div tres > una imagen div cuatro > menu 5 div cinco > texto 6 7 div seis div siete 1 Insertamos en div cuatro los botones creados para el footer. Para div cuatro ponemos los botones de menu creados en Ps a travs de cdigo (<a href=# <a/>) o insertando imagen. Creamos css enlace-home, enlace-gallery, enlace-contact, enlace-bio > editamos: Cuadro igual tamao imagenes, Fondo: imagen del boton. Si lo hemos hecho en diseo eliminamos imagen insertada y damos clase a los cuatro botones de div cuatro (<a href=# class=botonhome <a/>). En Ventana Estilos Css creamos las clases de :link, :visited, :hover, :active y editamos el hover... Ya tenemos el botn activo. Hacerlo con los cuatro botones En cdigo div cuatro cambiamos el link (#) en los botones. Ponemos el nombre de los html del resto de secciones (home.html, gallery.html, contact.html, bio.html). Como estamos en home, su boton no debe tener link y estar activo marcando donde estamos en la web. Para ello, duplicamos css botonhome:hover y le llamanos botonhome_estoyaqui. En cdigo cambiamos la clase y convertimos el <a href (enlace) ></a> a <span (no enlace)></span>. El :visited tiene la apariencia distinta una vez visitado quedar en ese estado hasta refrescar la web en el navegador. El :link solo cambia apariencia si ese botn tiene un link asociado, es decir, nos lleva a algun sitio. 77- Falta animar botones sociales. Haremos que salgan de detrs de la linia. Creamos los 4 botones con sus dos posiciones, en total ocho. Crearemos clases link, visited, hover, active y daremos link a cada uno. Igual que punto anterior 78- En div cinco editamos texto Lorem ipsum (copiado de internet). Podemos editarlo a traves de la css #cinco o hacer una clase aplicada a <p class=......> texto lorem ipsum </p> o como lo hemos hecho. <span class=textofooter1> texto lorem ipsun </span>.Ver linia de cdigo 68. 79- Hacemos lo mismo en div siete. 80- Ponemos Jquery-Popeye en div cuadro3. Lo bajamos de internet, descomprimidos y abrimos plugin.html. 81- Limpiamos (borramos) desde apariencia diseo lo que no queremos. Tambin desde cdigo (ej: 2,3) 82- Eliminamos css pip1: 2, 3. 83- En jquery.popeye.style.css > #ppy1 .ppy.stage{ > cambia tamao ventana. 84- En css, vamos probando substituyendo colores, cambiamos tamaos, etc. Existe una css que define radio en div, en#ppy1 .ppy-outer (linia 43) ver txt. Ver tambin degradado en cdigo css de popeye. Si seleccionamos algo en el cdigo + botn secundario: ver en navegador podemos identificar que es cada cosa. Al final para vincular nueva imagen, ir a cdigo (no css) apariencia diseo > seleccionar imagen y en Ventana Propiedades cambiar ORIGEN y en vnculo (debajo origen) linkamos la imagen ampliada para el javascript. 85- Ya tenemos el javascript limpio > copiamos dentro de div cuadro3 de index.html (antes home.html, el documento que debe abrir la web debe llamarse siempre index, es el que busca primero el navegador) el cdigo de Plugin desde <div class=ppy id=ppy1> a </div> 86- Pegar <script del final de todo de plugin.html encima del ltimo script de Index.html (fuera del body) debajo.

87- Hay que vincular javascript y css de plugin a index.html. En plugin vemos lo que hay que llevar al documento index.html en el <head. los script que hay en el head iran al head los que estan debajo iran debajo. a) <script type=textjavascript src=htpp://ajax... b) en la linia de abajo del cdigo de index.html. Con botn pergamino, buscar archivo en javascriptpopeyepruevas/ popeyeok/jquery.popeye-2.0.4.min.js c) Vincular hoja de estilos. En ventana Estilos Css, con botn (cadena) buscamos en la misma carpeta que el javascript pero en css y llamar las dos css existentes (hay que hacerlo a la vez). Todas las dependencias (.js y .css) estan en el head. Tan slo buscar .js y .css y comprobar que estan en nuestro sitio (sino ponerlos). d) Es posible que debamos vincular la imagen de nuevo (Origen, VNCULO de ventana Propiedades). Si hemos movido las imagenes de carpeta o no habiamos creado las imagenes para el vnculo. (ver <li> foto-grande4 / fotopeque4) 88- Para div menu en los botones de menu a travs de cdigo (<a href=# <a/>). Creamos css enlace-home, enlace-gallery, enlace-contact, enlace-bio > editamos: (<a href=# class=enlace_home <a/>). En Ventana Estilos Css creamos las clases de :link, :visited, :hover, :active y editamos el hover... Ya tenemos el botn activo. Hacerlo con los cuatro botones En cdigo div menu cambiamos el link (#) en los botones. Ponemos el nombre de los html del resto de secciones (home.html, gallery.html, contact.html, bio.html). Como estamos en home, su boton no debe tener link y estar activo marcando donde estamos en la web. Para ello, duplicamos css enlace-home:hover y le llamanos enlace-home_estoyaqui. En cdigo cambiamos la clase (estoyaqui) y convertimos el <a href (enlace) ></a> a <span (no enlace)></span> Lo hremos en todos los botones cuando hayamos creado todas las secciones de la web (index.html, gallery.html, contact.html y bio.html) 89- En index.html, guardar como gallery.html 90- Eliminar des del cdigo para dejar el menu principal y el footer. Sin borrar contenedor heat menu ni div footer. 91- Borrar todos los script, de arriba y de abajo. 92- Borrar <link href de las css cargadas de popeye. No las de favicon, estructura, enlaces y destacados. 93- Duplicar #contenedor, llamarla #contenedor-gallery y guardarla como nueva hoja de estilo css llamada gallery.css 94- En el menu principal de la pgina y el menu del footer hay que activar el botn home (enlace con index.html). Para ello, en div menu (principal) y div cuatro (menu footer), en botn home <span lo cambiamos por: <a href=Index.html class=botonhome ></a> (para footer) <a href=Index.html class=enlace-home >home</a> (para menu principal) (ponemos el link Index.html y cambiamos la class, ya no _estoyaqui) Para vincular Index.html con gallery.html, en Index poner en los botones gallery el link (# > gallery.html) Los botones gallery deben convertirse en <span y aplicar clase enlace-gallery_estoyaqui (duplicar enlacegallery:hover y cambiar nombre) en el menu principal. Y en el footer clase botongallery_estoyaqui (duplicar betongallery:hover y cambiar nombre. 95- Vamos a poner un javascript (TinySlideshow). Guardamos la carpeta descomprimida del javascript en nuestro sitio (guardar el zip). Abrimos documento index.html (del javascript). 96- Vamos analizando el cdigo identificando cada parte (ver documento index2.html). Ver que clases tienen las partes. Ver la hoja de estilos style.css (para saber que es cada cosa cambiamos tamao, color...). 97- Creamos nuevas imagenes, 10 grandes y 10 pequeas (llamadas en script thumbnail). Guardamos las grandes dentro carpeta Fotos dentro deTinySlideshow de nuestro sitio. las pequeas en carpeta thumbnail. 98- Tenemos que modificar el javascript: En css > #wrapper (contenedor de todo) > Cuadro ancho 947px En css > #fullize (imagen grande) > Cuadro ancho 947px alto 500px En css > #information (texto foto grande) > Cuadro ancho 947px + editar texto En css > #images > Cuadro 947px ancho En css > #slicharea > Cuadro ancho 900px 99- En index2.html hay un javascript a bajo del todo donde se puede variar la velocidad del scroll inferior (ScrollSpeed=4, y las de las fotos Speed=5 (lo modificable aparece en rojo). 100- En clase .imgmov > Cuadro: hieght 500px asi ponemos las flecha de la imagen grande centrada. 101- En #fullsize quitar borde (desaparece borde blanco de la foto grande. 102- Vamos a poner todo este javascript index2.html en un iframe. Se podra hacer en una nueva div pero debemos importar las hojas de css y javascripts.

103- En index2, en css body sacar color de fondo y padding, en wrapper sacar margin. 104- En navegador FireFox > en menu developer: Varios > mostrar Reglas. Para saber medidas de la galeria: 951x591px 105- Guardar index2.html como Galeria en carpeta TinySlideshow de nuestro sitio web (09web). Comprobar que funciona. 106- Crear iframe > vamos a google maps, ir a un lugar > botn ENLAZAR + personalizar y obtener vista previa del mapa que se va a instalar. Poner medidas que tenemos (paso 104). Copiar cdigo. 107- En Gallery.html, dentro de div contenedor al final antes de su cierre pegar el cdigo. Borrar todo lo que hay despus de </iframe> 108- Cambiar direccin google por la direccin relativa de nuestro documento galeria.html (src=TinySlideshow/galeria.html). 109- En <iframe height=600 la imagen se queda centrada. 110- No queda centrada, hay que mover a la derecha > nueva clase marginiframe (slo del documento): Cuadro, margin left 25px y en <iframe (poner) class=marginigrame... 111- En #contenedorgallery > Cuadro height 825 y en .marginiframe > margin top 25px. Haciendo margin negativo podemos ocultar el filete de una foto... 112- Guardar documento gallery.html como bio.html. De nuevo desactivamos botones bio y enlazamos el botn gallery en menu y footer (ver punto 94) 113- a los dems documentos html de nuestra web, en los botones de menu principal y menu footer, hacer vinculos (substituir # por nombre de los documentos html, por ejemplo Gallery.html). 114- En bio.html creamos hoja de estilos bio.css y dentro poner duplicdo contenedor_gallery llamandolo #contenedor_bio (eliminar contenedor_gallery). Borrar .marginiframe. 115- En bio.html Borrar y dejar slo men principal y footer. Creamos contenido. Creamos nueva div debajo div menu, la llamamos contenfoto y guardamos css en bio.css > editamos. Dentro ponemos div media y div texto_bio > editar. Dentro de media hacemos dos divs ms foto_bio y video_bio y editamos

116- En Photoshop editar foto retrato de 555px por 385px y guardamos para web (foto de internet). Ponerla en carpeta imagenes del sitio web 09web. Hacer css div foto_bio y editar, poner foto. 117- Poner video vimeo.com en la div video_bio. En vimeo.com seleccionar video, sobre el video hay botn EMBED, al clicar se abre ventana > botn CUSTOMIZE + EMBED OPTIONS: editar tamao, color de fondo... > copiar cdigo y pegar dentro div video_bio + editar css video_bio: margin. 118- Editar css Texto una vez pegado en la div texto_bio un texto Lorem ipsum. Hacemos clase titular (editar). En vista diseo hacer un mayusculas+enter para el titular (haciendo slo enter crea un salto con demasiado espacio) crea un <br/> no hacer <p>. Para aplicar la clase titular lo hacemos en cdigo: <span class=titular>texto del titular<br/></span> resto del texto... Acabamos de ajustar css del texto, etc. 119- Hacemos contactos. Del sitio formularios copiar .css y .php en el sitio 09web, al mismo nivel de todos los html. 120- Guardamos como bio.html y lo llamanos contact.html. Borramos divs excepto footer y menu 121- creamos dev conten_contact + css (=conten_bio) podemos duplicarla o crearla de nuevo, pero uardar en hoja de estilos contact.css 122- Abrimos formulario.html (sitio formularios) > seleccionar el link de la css + el script siguiente (linia 6 a 16) > copiar y pegar en contact.html en <head. Tambin copiamos div container y la pegamos dentro div contenedor, al final antes de </div> 123- Al #container (dentro estiloform.css) dar a Cuadro 975x800 o mas px.

124- Hay que editar css del formulario instalado en contact.html: a) Primero eliminar las divs que no queremos (sexo, edades, lista menu intereses, programas...) b) Eliminar la css de estas divs. c) Al editar, crear css clase a ventanas para ecribir (ojo quitar float left puede quedar la ventana por delante de E-mail: Otra manera de controlarlo sera crear una div que contenga la ventana, es decir, <div id=finestra<imput name=mail type=text class=ventanita id=mail2 ..... </div> 125- Vincular menus con distintos html en <a href=

PRCTICA FRAMES (12/11/2010) 1- Crear sitio frame 2- Hacer 8 documentos html (1, 1b, 2, 2b, 3, 3b, 4, 4b) mejor con css internas: -doc 1, 2, 3, 4 > div de 400x450px + color + numero (1, 2, 3, 4) -doc 1b, 2b, 3b, 4b > div de 400x80px + diferentes colores doc: 1, 2, 3, 4 + numeros: 1, 2, 3, 4. 3- Crar nuevo documento index y copiar cdigo (facililtado por profesor) A una div podemos ponerle una clase : <div class=xxxx id=xxxxxx 4-Crear #con de div id=con y editar. Crear class de sube y editar.. Crear #frane2 y #frame3 y editar (ver prctica). 5- Queremos que al tocar un botn (1 2 3 4) cambian dos cosas > JAVASCRIPT > se escribe cdigo debajo de <title> y antes de <style type=text/css>. Poner <sript lenguage=javascript type=text/javascript></script>. Para insertar, botn pergamino de la Ventana Insertar 6- ponemos programacin, pero no se aplica hasta que se de la orden a los botones 1, 2, 3, 4 de arriba (<div id=1...) onClick=nombre function. Tambin existe, aparte del onClick el rel= 7- Podemos copiar todo el script sin <script y </script>(desde function). 8- Lo pegamos en un nuevo documento Dw javascript y gardar como .js 9- En documento Index2 no tenemos el script, lo cargamos pq lo hemos guardado como hoja de estilo. 10- Debajo de </title> con boton pergamino, cargamos javascript creado (igual que las css externas). PRCTICA 2 (bajar javascript y aplicar). 1-Descargamos javascript shadowbox. En la web, doenload: caracteristicas: a)base b)Images/external /inline/flash/ flash video.../quicktime/windows... c)Choose lenguaje support d)include suport for using CSS > ok 2- Crear sitio donde dejaremos dos carpetas (dependientes y imagenes), en la primera material javascript (css, scripts) y en imagenes las tres imagenes. Nuevo documento Html. 3- En Usage (dentro de la pgina de descarga copiar cdigo (el primero) y pegar debajo de <title. 4- Hay que cambiar en linia 6, href > borrar enlace de a y escribir poner nuestro archivo css en carpeta dependiente poner lo mismo en src 5- Hacer lo mismo con linia imagen de la web y substituir por imagen de nuestro sitio con <a href (quitando nombre y escribiendo comilla botn examinar. Myimage es un texto pero podra ser una clase, un botn o una imagen. 6- Podemos poner un titulo (title=hola) y en tamao shadowbox: height=500, widht=700, en cdigo. 7- Quitamos tamao y guardar como index2.html. 8- En cdigo creamos galleria > shadowbox[galeria] > duplicamos de <a a </a> y cambiamos la imagen <a href= y quitamos botn MyImage (ver prctica). 9- Si queremos aplicar el javascript en otro lado, en un botn > poner rel=shadowbox y copiar todo el cdigo script en el head. (ver webprova.html en sitio 11shadowprova).

PRCTICA 13 GALERIAS 1- Crear Sitio 13galerias 2- Abrir galeria demo para modificarla. En <head hay varios javascript y css. En <body lleno de listas <li>, cada linia es una imagen excepto la <li class que marca la primera imagen que se ve. <p class=nav<a href=# onclick=gallery... es el previus/next, un botn. El resto es la informacin del creador de la galeria, se puede borrar. Aparece la div en verde, significa error pq no est cerrada. Galeria.css: en ventana Estilos Css podemos ver propiedades de las css y modificando sus editores (cuadro, fondo, borde...) ver que se modifica. Para ir investigando se recomienda cambiar colores por otros muy llamativos, modificar las medidas en pixels de manera exagerada. As en el navegador podemos detectar con facilidad que hemos alterado, por lo tanto para que sirve lo alterado previamente. Cada vez que alteramos algo lo vemos en navegador, si realizamos muchas alteraciones no sabremos cual es cual (con el comando z podemos dejar la css como estaba). En esta galeria con miniaturas de las fotos principales hay que substituir, si se desea, la imagen grande (ojo resoluciones) pq la miniatura la genera a partir de la imagen madre o grande. En general podemos modificar div (posicin, tamao, color) y clases css, tambin borrar algun script si no es til, es decir, si funciona al borrarlo en el navegador. Nunca tocar los php, son un lenguaje de programacin que enlaza/administra contenidos de un servidor o un motor con una aplicacin, pgina web (ejemplo: Wordpress, Joomla) ver 13 galerias en material ??? PRCTICA tipogoogle.html 1- Tipografas para web > en google poner google fonts. Escoger tipografa LOBSTER > Ver cdigo y copiar en head. 2- Escribir algo en apariencia diseo en DW y crear una clase (font: arial). 3- Volvemos a Google y copiamos el cdigo entre {} que que esta ms abajo y pegar en head substituyendo fontfamily. 4- Aplicar clase a texto del diseo. lo hacemos seleccionandolo y aplicando clase en la ventana Propiedades. En navegador vemos la tipo, en DW no es visible en diseo. Que es un php? > es un tipo de lenguaje de programacin que interactua entre tu documento y un servidor php. Si no tenemos servidor hay que crear uno virtual. En DW se puede hacer un servidor virtual para pruebas. > Ir a Sitio: administrar sitio > escoger sitio > editar: se abre lista: servidor de prueba > PHP MySQL CREAR FAVICON Es un icono que se carga delante de la direccin en la barra del navegador o en las ventanas abiertas. Su formato es . ico, pero tambin puede ser gif o png. Debemos llamarlo favicon.gif/.png/.ico. El ttulo de la ventana o pestaa aparece si escribimos algo en Ttulo de DW (al lado de botones cdigo, dividir, diseo). Medida favicon: 32x32px a 72ppi. <link rel=shrtcut icon href=imagenes/favicon.png> ????????

PRCTICA SPRAY 1- En DW > menu principal, debajo activar Spray y poner vista diseo.

1
2- Insertar un menu (boton 1) > ir a Ventana Propiedades: podemos coger cada elelmento y escribir el texto del menu. 3- podemos aadir ms menus, ordenar, hacer vnculo... El nico problema de estos mens es que generan javascript con ms informacin de la necesaria.

menu

submenu

subsubmenu

WORDPRESS (http://es.wordpress.org) Es un motor para crear blogs o pginas con administracin de contenidos 2,0. A partir de una plantilla escogida y descargada aadimos menus, etc. establecidos. Funciona como div perto online, con estilos, divs y cdigo. Se puede hacer enDW y pegarlo en WordPress. Joomla, es otro gestor de contenidos ms potente, para webs ms grans 2.0 con foros, noticias... Joomla template free. www.jgoy.net/web5/administrator USUARIO: generico CLAVE: tadel451 Tipos de usuario 2.0: Registrados (Front-end Public): ven la parte visible. Autor Editor Publicador Back-end Public: vemos parte editable. Gestor Administrador Super-administrador Mi usuario: rogerbadia mail:rogerbadiagimeno@gmail.com clau: rogerbadia

1 Entrar en crear artculo. 2- Rellenar con mi nombre, alias. Escribir texto y editarlo. 3- Si apretamos botn HTML, sale el cdigo y se puede programar. 4. Insertar imagen (boton ventana insertar), buscar una imagen en google, imagen completo y copiar direccin absoluta. 5- Extensiones, para gestionar Modulos, Plugins, Plantillas, Idiomas. En las plantillas de WordPress aparece quien la a diseado y que es un producto WordPress. Puede haber un conflicto con el cliente. Algunas se pueden borrar. (http://es.wordpress.com/) > entramos y vemos la actividad y los enlaces a blogs deestacados. En google buscar wordpress templates free para ver plantillas. Si buscamos free themes wordpress, encontramos temas. 1- Entrar http://es.wordpress.com/ > registrarse: Direccin del blog: rogerbadia.wordpress.com Usuario: rogerbadia Clave: badia9278 Te llega un mail para activar, ir al link e introducir usuario y contrasea. Para ver mi blog http://rogerbadia.wordpress.com Para administrar el blog http://rogerbadia.wordpress.com/wp-admin BLOG CREADO GRATIS, si hacemos uno de pago tendremos ms opciones. 2- Entrar en administrador (wp-admin) + clave Cambiar idioma > Settup: Lenguage (opciones) lenguaje (ajutes) 3- Entrar en jgoy.net blog desde FireFox barra developer: webdeveloper. 4- Modificar plantilla > ir a apariencia: Temas. a) Buscar en google (wordpress theme free), escoger plantilla que nos guste y descargar (no tirar .zip, se una para instalar) b) En instalar temas vemos biblioteca de plantillas (+ destacados/recientes). c) instalar tema > subir (examinar) > instalar Throughout.zip (siempre zip). Podemos activar y volver a pgina administrador.

5- En ajustes poner hora / titulo del sitio / descripcin corta / direccin / correo... 6- Apareiencia > Widgets: son funciones autodeterminadas en el tema escogido. 7- Apariencia > Editar: Podemos cambiar cosas del diseo. No tocar programacin php. Para encontrar algo en el cdigo > buscar (comando F): mirando nombre, palabra de apariencia... < aparece sealada en el cdigo. Siempre que cambiamos algo, paso a paso, actualizar archivo y comprobar si ha cambiado lo ue queremos. La barra de la derecha es como ventana Estilo Csss + cdigo. Son plantillas del tema con sus estilos css del tema. Para cambiar una imagen en visualizacin (no administrator) > botn secundario: ver imagen. Vamos el nombre de la imagen y el tamao y hacer la nueva imagen igual y substituirla en el servidor con el mismo nombre. As es ms fcil que encontrar la imagen en cdigo. 8- Men > Entradas > lista de todas las entradas/comentarios del blog. Botn con el cursor en el texto (parrafo 1) o donde queremos, dividir entre lo visible del artculo y lo que esta oculto si no se hace clic en el artculo. Los videos los importamos de youtube, para que no pese nuestro blog. En visual editores, en html, podemos copiar cdigo a DW. 9- Apariencia Plugins > iconos facebook, twiter... Aadir nuevo. 10- Los menus horizontales estan en > Pginas. 11- Ir a footer (pie de pgina) intentar eliminar info WordPress y diseador.

WEB 2.0 Google docs > a travs de gmail (direcciones) podemos compartir un texto con alguien o un grupo. Estos pueden corregir/aadir/borrar el texto sin enviar mail, en vivo. para hacerlo: 1-Entrar en google docs > introducir mail y contrasea. 2- Botn Share: para vincular a los usuarios que quiero que vean mi texto. WIKIS (Wikipedia) Pgina de informacin con artculos colgados por usuarios, son corregibles, editables y podemos crear uno. www.meneame.net > web 2.0 de noticias colgadas por usuarios. Si la mueves sube en el ranking hasta llegar a la portada. Buena manera de autopromocin de un blog, pgina, etc. la gente ve tu noticia, la interesa y entra en tu web. Les gusta te aaden en su blog y tu web crece, es decir, la publicidad ser ms cara. Igual que flickr, facebook, twiter, delicious, digg... www.thinkwasavi.com > web den tecnologa. meme > en un blog hacer el juego de que cada usuario excribe una linia de un texto que solo puede leer la frase anterior creando un texto divertido www.chatroulette.com > divertida Cada 2,3 meses cambiar contraseas (ir poniendo una letra del abecedario)

DESCARGAR WEB (cafe) 1- Ir a la web Softonic > descargar httrack webside copier 2- Crear sitio propio para guardar web descargada. 3- Ir a la pgina que queremos probar www.thehappytimecafe.com > copiar direccin del navegador y pegar en el programa htttrack 3- dar nombre cafe > ruta base del sitio (el nuestro) > botn SIGUIENTE > pegar direccin de la pgina a descargar > definir las opciones: LIMITS: Profundidad mxima, 1; Profundidad externa mxima, 0. > SIGUIENTE >FINALIZAR. En nuestro sitio se descarga todo. 4- En DW nuevo documento html y asignar sitio creado. 5- Abrir documento indice de la carpeta CAFE (nombre que hemos creado en el programa de descarga). 6- Lo que no nos interesa de la pgina lo borramos des de la apariencia diseo, ya tenemos la parte que nos interesa. En cdigo ir borrando, limpiando. Siempre borrar y comprobar en navegador, si ya no funciona comando Z en DW. Ya lo tenemos limpio. 7- Pegar las divs en nuestro documento (aparece todo desordenado) en <body y pegar scripts en <head. Comprobar que funciona. 8- Limpiar cdigo, ir borrando linias sin que altere en navegador (es recomendable eliminar css que podemos crear luego). En linia 10 hay css, copiar direccin y pegar en navegador donde aparece la clase o la hoja de estilos con todas las css que nos interesa. Lo copiamos y pegamos en nuevo documento DW .css y guardamos en nuestro sitio. Desde el documento html con botn cadena (ventana Estilos css) la vinculamos al documento. En el documento html aparece cdigo fuente / htc.css / slideshow.css / etc... 9- Eliminar la direccin linia 10 y con examinar ( ) poner nuestra hoja css slideshow. Siempre tratar de desvincularse de lo que hay en servidores ajenos, pq si algun da eliminan la pgina la nuestra no funcionara. 10- Seguir limpiando: hay dos javascripts jquery (versin 1.3.2 y 1.2.6) eliminar la ms vieja. Los tres scripts que nos quedan y necesitamos hay que buscarlos en internet y bajar el cdigo pq si de quien lo robamos descuelga web nos fallara la nuestra. Hacemos lo mismo que con hojas de estilo css, copiamos el cdigo y pegamos en DW guardamos documento como .js Ya tenemos la galeria preparada para usar en nuestra web. Javascript CUFON, para poner la tipografia que queremos en nuestra web. TOMAR PRESTADO OTRO JAVASCRIPT DE UNA WEB 1- Abrimos httrack para descargar pgina. 2-En l, botn siguiente: a) nombre del proyecto acordeon b) categoria. c) Ruta, nuestro sitio web bajada. -Siguiente: Poner direccin de la web a robar. Definir opciones de Limites: Profundidad mxima:1, Profundidad externa max:0 > Aceptar. - Siguiente > Finalizar (empieza bolcado) 3- Para bajar imagenes en Firefox > Guardar como (nos baja toda la web sin vincular bin, pero tienes todas las imagenes) 4- Vamos en sitios (bajada). Hemos de ir a la carpeta con el nombre proyecto acordeon, dentro hay otra carpeta y el html que necesitamos (fuera de esta carpeta tambin hay un index.html que es propio del programa no de la web robada). Lo que hace el Httrack es redireccionar los vnculos para ver bien la web -direccin absoluta-). 5- Abrir index.html en DW. 6- Escogemos lo que queremos y borramos el resto a travs de apariencia diseo. Siempre comprobar que sigue funcionando en navegador. 7- Ya tenemos slo lo que queremos, ahora limpiar cdigo a travs del cdigo fuente. Ir borrando y comprobar funcionamiento en navegador. Borrar: primero > divs, footers..., segundo > scripts, tercero > css. Muchos CSS dependen de algo en la red, hay que abrir la css copiando su direccin en navegador. El cdigo que aparece copiarlo en nuevo documento css de DW. Guardar dentro de acordeon dentro de carpeta direccin web. Una vez hecho en el cdigo hay que substituir la direccin por la nuetra interna (vnculo ) TODO ESTO SE APLICA IGUAL A UN JQUERY O CUALQUIER OTRO COMPONENTE BAJADO DE INTERNET

8- Podemos poner un jquery en DW > ventana Archivos. Antes colocarlo en el sitio nuevo. Otra manera de localizar partes de un cdigo es mirando en la demo jquery vemos el texto que aparece y lo localizamos en el cdigo. Siempre bajar jquery con demo sino es muy difcil interpretar el cdigo.

CSS Hay dos tipos: a) Compuesto: es un id compuesto que se aplica a #contenedor#cuadro#fila3. Es como una ruta absoluta, por lo tanto, puede existir otra #fila3 que tendrn una ruta distinta y no entrasrn en conflicto. As especificamos que fila3 es. En principio borramos la ruta especifica pq tendramos css con nombres inmensos. Buscar iframe en Google Maps (ver prctica iframe de web Llusa)

Z INDEX Es una manera de crear niveles, capas en una pgina web. Ya no al lado. Sirve por ejemplo para clicar un botn y que aparezca una div, una imagen, o un submenu. 1- Abrimos prctica web1.html (sitio web1, prctica 07) 2- Vamos a div menu abrir su css > en ventana ir a Posicin: le damos posicin absoluta, z-index = 2 (para dejar una capa , la 1, por si hemos de poner algo por debajo). Visible, sin Placement ni Clip Al hacer div con zindex en el navegador al mover su ventana ms pequea o grande, la div no se centra automticamente, se queda fija. Lo que debemos hacer para que no ocurra es, en cdigo la colocamos dentro de una div con css que su Cuadro sea izquierda y derecha auto. En la prctica esta div por encima de div menu y la Posicin (css) del zindex ha de ser relativa a la div nueva. Las classes a travs de POSICIN (ventana desplegada CSS) podemos dar la profundidad o capa donde situar una div, botn, etc. POSICIN (position) a) Absoluta: respecto a la pgina web, a la ventana navegador. b) relativa: posicin respecto a su contenedor (div o contenido de la web). Es probable que se mueva segn navegador, puede ser un problema VISIVILIDAD (visibility) capa visible o no. A travs de un javascript podemos hacer que una oculta se muestre. PLACEMENT Igual que margin.

Todo esto, el z index, sirve para hacer una ventana vacia con marco y debajo poner un video. PRCTICA VIDEO YOUTUBE (sitio tv) 1- Nuevo sitio tv + nuevo documento html (index.html). 2- En cdigo crear tres divs. Contenedor dentro tv y youtube 3- Crear css de contenedor (Cuadro 888x899px, Margin left right auto), de youtube (Cuadro 888x899px, Float left) y de tv (Cuadro 888x899px, Posicin absoluta, W 888px, H 889px, Z index=2). 4- Ir a Youtube, escoger un video, clicar botn INSERTAR. Copiamos cdigo y pegamos en div youtube entre ><

PRCTICA FORMULARIOS (sitio formularios) 1- Nuevo sitio formularios + abrir documento formulario.html (base para realizar formularios dada por profesor). 2- Editar sitio formularios > Avanzados > Servidor de prueba > Modelo de servidor: PHPMySQL. 3- Estudiamos el documento formulario.html en cdigo: a) Primer javascript que colocamos en la web de Llusa (en el head) b) De <from a </from> es un formulario. Dentro de <from hay distintas divs para cada apartado del formulario con sus css. As podemos editar cada parte. 4- En le documento enviar.php: a) 3 linias, damos un nombre ($nombre). A lo que han rellenado = $_POST[nombre]; $apellidos y $mail. Es como una leyenda de mapa. b) los siguientes nos definen el envio de mail de cada parte del html. 6- En documento formulario.html. Seleccionamos div nombre > editamos css (ej:#container, #form1, #nombre. Al seleccionar <script name=nombre. En ventana propiedades puedes variar cosas. Poner imagen Ventana Propiedades documento formulario.html ir probando. 7- Para cambiar la ventana donde el usuario escribe, hay que dar una clase a la ventana. En DW en Ventana Insertar > formularios, podemos crear un formulario.

Al acabar la web CREAR META TAGS www.webtutoriales.com/herramientas-posicionamiento/generador-meta-tags-avanzado.html 1- Usar este generador de Meta Tags pq no pone publicidad. Un Meta Tags es las palabras clave para encontrar una pgina web en internet (google). En tema, dentro de este generador, poner en diferentes idiomas, segun idiomas web o intencin de target. Siempre ingls y castellano. En palabras clave, hay que poner flatas ortograficas o dislecsias, por ejemplo: graffiti, grafiti, grafity, grafitty... En Expira: poner fecha de caducidad de la pgina. Por ejemplo web lanzamiento de un libro. Revisitar despus de...: lo usamos si el blog o web se actualiza muy a menudo. Hace que los bots de Google revisen la pgina web. Rellenar todo, lo ms importante es Keywords, Titulo, Autor... 2- Apretar botn CREAR ETIQUETAS META. 3- Vamos a ventana donde introducimos un cdigo + VALIDATE 4- Copiar cdigo y pegar despus de </title> DW puede crearlo con el botn en Ventana Insertar > Comn > cin, Actualizar Base, Vinculo) desplegable (Meta, palabra clave, descrip-

GOOGLE

Mejor web en posicionamiento (busqueda)

anuncio pagado (color rosa)

Google Adwords

Los Google Adwords, es otro tipo de publicidad. Su coste no es por precio nico como medio tradicional, es por clics. Si clicas en ellos le supones un coste a la empresa anunciada. La empresa paga a google por clics en su anuncio, invierte un dinero que si se acaba debe reponer o renovar. GOOGLE ANALITICS Sirve para controlar las visitas nuevas o no a tu web. De los sitios desde donde te visitan, promedios de tiempo de navegacin en tu web por usuario, etc. Como se instala: se coloca en el cdigo abajo antes de <body, El cdigo se da al registrarte y poner tu pgina web. La popularidad de una web se mide por nmeros de enlaces. Hay que mover tu web, enlazarla, comentarla, actualizarla para ser la ms popular. Hay que vincular la pgina web en facebook, twiter... DATOS DEL SERVIDOR COMO REDIRECCIONAR UN MAIL a otra cuenta. Entrar en Gmail, en configuracin.