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

aProgramas FTP (Firezilla)

b

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.

B

A

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 + unindicar 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. CataluaFOTOS IMAGENES

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

WEBTEXTOS

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 ( 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: 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 ponemos CSS, javascript... En el ponemos todo lo visible, divs, tablas (newsletter)... 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 texto sigue texto no afectado. En texto sigue texto no afectado pero editable si hacemos nueva (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 que es un parrafo que a su vez esta dentro de una que es una celda dentro de una que esta dentro de una que puede estar dentro de otra table. Y todo dentro del 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, 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 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 hasta ) 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 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 ( foto2>

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:activeL 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 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 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 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 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 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 ( 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 ( 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 y . 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 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:opcion1 opcion2 opcion3 opcion4, 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 borrar y poner www.google.com. Borrar el resto de cdigo (estilo) src (pgina que se carga directamente. Copiar de a 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 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 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 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. 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 crear class dentro del enlace Marc Wask . 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 var imagen1=new Image ( ) image1. src=imagenees/fotopeque/foto-peque1.jpg var image2 . 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 ( 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 ( #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 a 86- Pegar 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 108- Cambiar direccin google por la direccin relativa de nuestro documento galeria.html (src=TinySlideshow/galeria.html). 109- En nueva clase marginiframe (slo del documento): Cuadro, margin left 25px y en 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
no hacer . Para aplicar la clase titular lo hacemos en cdigo: texto del titular
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 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. ????????

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

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