CSS

Divs.


Divs: Divisiones para repartir el espacio de una web en lugar de usar tablas. Cajas (en el HTML) como una división. Siempre hay uno encima de otro. Se adaptan al tamaño del contenido, cuanto más texto, más largo, son horizontales. Cada Div puede tener su propio estilo.  En el apartado "posición" podemos ponerlo donde nosotros le digamos, si le damos el valor "absolut" lo podemos mover donde queramos. 


imagen dreamweaver 




Div PA: Posicionamiento Absoluto, las podemos colocar donde queramos. Se pueden modificar como en Ai.
Podemos cambiarle el nombre a los elementos y no dejar los genéricos. El inconveniente de los absolutos es que son estáticos, no se mueven, nosotros le decimos donde puede estar pero si esa web se mira en un monitor más pequeño el DivPA se queda en su sitio, nose adapta. El Div si se adapta. 


-Índice Z: es como las capas, la posición relativa respecto a los otros elementos, cuanto menor es el número más por debajo queda. (dibujar ejemplo)


-En visibilidad podemos modificarlas y que no sean visibles pero la seguimos viendo. (Las vemos en el documento pero no se ven en la web).
- Las propiedades que le damos aparecerá en el código antes de "head" como "Style" creado.


¡Anotación General! 
Cuantas menos líneas tenga un estilo mejor, no poner por poner.
En la etiqueta Body personalizamos todo el body, fondo, tipografía, etc. 
En propiedades de la página, apariencia CSS se puede modificar el body directamente.

DreamWeaver

Crear botón


Hay varias formas de crear un botón, lo voy a explicar igual que el ejercicio de clase, aunque también se podría hacer a través de .css pero eso ya se verá más adelante.

Para que se vea el "efecto" de botón partimos de una imagen y desde Photoshop la modificamos para que haya una pequeña diferencia.

Ejemplo:

Una vez tenemos el botón con el efecto que queremos crear hacemos lo de siempre:
1- Abrimos DreamWeaver.
2- Creamos Sitios y vinculamos.

Para crear el botón vamos a la barra de herramientas y seguimos la ruta (no hay que poner ninguna imagen antes ni tener nada pulsado, añadimos todo desde el siguiente panel) :
    - Insertar / Objeto imagen / imagen sustitución y lo linkamos a la web.

Nos aparecerá el siguiente panel:

1.- Nombre de la imagen: ponemos el nombre que queramos, pero cuidado, no debe de tener espacios.
2.- Imagen original: ahí buscamos la imagen que queremos que se muestre en su estado normal.
3.- Imagen de sustitución: aquí buscamos la imagen que se verá cuando el ratón este encima.

Aceptamos.

Para ver el resultado de nuestro botón vamos a Archivo > vista previa de navegación, y aquí veremos lo que hemos hecho. Esto es solo el botón pero para que haga su función tendremos que vincularlo a alguna web.

DreamWeaver

Frames. Marcos. 

Los frames se utilizan para subdividir la web en partes.
Por ejemplo, tenemos una web que contiene un menú y un contenido, pues en el frame superior hacemos que el menú sea fijo, de forma que solo cambie el frame inferior.
Los Frames sirven para ahorrar tiempo en descarga y ver la web más ordenada.
Si mantenemos el menú, por ejemplo, en el frame superior como hemos dicho antes, hacemos que no se tenga que cargar todo el rato.

Hay muchos tipos de frames, a la hora de elegirlo solo tenemos que tener claro como va a ser nuestro diseño y cuales son nuestras necesidades para no estar cambiando cada dos por tres.














 A la hora de guardar tendremos que guardar el mismo número de archivos que de frames tengamos más uno que será el general.
En la carpeta "html" guardaremos todas las sub-páginas de forma que tendremos todo en orden.


Si dentro del frame tenemos un enlace o un botón pueden ocurrir dos cosas:
1.- Que se abra en la misma página.
2.-Que se abra en otra pestaña.


Si teniendo seleccionado el enlace ponemos en destino "mainFrame" la web se abrirá en el frame inferior, en la misma página. En caso de no ponerlo se abriría en otra pestaña.


Cuando ponemos "iFrame" nos permite incrustar una web dentro de otra. Y podemos cambiar la imágen por un vídeo online, por ejemplo, es el código que utiliza youtube para insertar y compartir.

Cuando metemos algún enlace siempre hemos de indicar donde queremos que se abra, su destino.

¿Qué significa cada uno?

_blank: abre el vínculo en una ventana nueva. 

_parent: ocupa todo el espacio, su conjunto de frames.

_self: se abre en ese mismo frame.

_top: ocupa todo el espacio pero a diferencia de _parent en este caso se abre en todos los conjuntos de frames, ventana al completo.

¡Anotación General! 
-.Vp7 es un formato propio de Google.
-Siempre que tocamos un .gif en Ph hay que pasarlo a RGB y tras acabar seguidamente  guardar para web y dispositivos en formato gif con transparencia.

DreamWeaver

Tablas.

Se utilizan para dividir la página para colocar las cosas en su lugar y poner orden visualmente.

Para colocar la tabla nos ayudaremos de las cuadrículas. Vamos a insertar > tabla y nos aparecerá la ventana que tenemos a la izquierda. 
Podemos modificar el grosor, relleno de celda, espacio entre celdas, etc.
Si lo dejamos vacío no es nulo, queda predeterminado.
Se pueden distorsionar.
Las tablas se adaptan al contenido a no ser que indiquemos el tamaño deseado.
Tienen un largo límite porqué las páginas son infinitas.
Podemos limitar el tamaño en píxels o en porcentaje.
Referencia de celda: elimina las líneas si ponemos (O,O)
Se pueden combinar las celdas.


La alineación del texto en una celda puede ser vertical.
Hay que diseñar sin hacer tablas dentro de tablas.
Bajo la web pone el recorrido de las tablas para poder seleccionarlas: 

<body><table><tr><td><table>...

esto nos hará más sencilla su selección.

¡Anotación General!  Para modificar las propiedades en general de la página web:
Modificar/ Propiedades de la página
        -Apariencia HTML: damos estilo al HTML en general.

DreamWeaver

¿como iniciar una práctica? 

Para iniciar una práctica o una web con DW tenemos que tener un lugar donde alojarla.
Nosotros de momento la subimos al Wuala.
1.- Abrimos el Wuala.
2.- Creamos una carpeta para el projecto en la carpeta Web de Wuala.
3.- Dentro de la carpeta del projecto estará el archivo .html y la carpeta "img" que contiene todas las imágenes a utilizar. Es muy importante tener todo ordenado para trabajar con tranquilidad y encontrar todo.








4.- Abrimos DW.
5.- Igual que en Wuala, creamos en nuestro ordenador, dentro de la carpeta Web, otra carpeta con el projecto y sus documentos.

6.- Desde DW administraremos los "sitios" que se encargan de enlazar la web con Wuala y con la carpeta creada en nuestro ordenador.  Vamos a la pestaña "Sitios" y "Nuevo Sitio" para poder crearlo, si lo que queremos es modificarlo le damos a "Administrar sitios" y desde ahí se modifican.

En la ventana que se abre le damos a la pestaña de "Avanzado" y se nos abrirá un panel más extenso.



7.- El primer apartado es "Datos locales", aquí indicaremos donde está la carpeta del projecto y la carpeta de imágenes dentro de nuestro ordenador.

8.- El Segundo es "Datos Remotos" y aquí lo enlazaremos con la carpeta creada en Wuala.

DreamWeaver

Apuntes a desarrollar:
Al abrir DW tenemos que seleccionar lo que queremos: en nuestro caso, elegimos crear documento HTML.

-Sitio > nuevo sitio
   -Creamos carpetas que aparecen en la pantalla con la localización
   -Sitios: administrar sitios, aparece el listado de sitios.
   -Categoria > Datos remotos > enlazamos las carpetas con Wuala en nuestro caso.
          -Indicamos que suba los archivos a wuala a través de su ruta: wuala > web > Carpeta
          -Desde datos remotos:
                  Acceso: Local/red
                  Carpeta remota: seleccionar la carpeta de wuala.
-Ocultación: permite discriminar los archivos de trabajo. P. Ej: ignora psd pero no el jpg o tiff.
-Si arrastramos una foto del escritorio al DW se nos crea la carpeta "-notes" que solo es de DW donde guarda la información ajena.


Dentro de nuestro ordenador alojamos las carpetas dentro de nuestro usuario > casita > web.


Una herramienta que nos ayudará mucho es "Edición/Buscar y reemplazar" así no tendremos que estar buscando a lo largo de todo el documento, lo hace automático.

-Colocar mapa de imagen (imagen clicable): Con la imagen pulsada le hacemos el recuadro encima que será de color azúl, esa será la zona clicable.
Para probar si funciona vamos a Archivo > Vista previa navegador > seleccionamos el navegador o lo añadimos en caso de que no esté.
Volvemos a DW y con la selección azul pulsada vamos a donde pone "zona interactiva" ponemos el nombre de lo anclado " #____". Para que funcione tenemos que tener la palabra anclada y la selección azul con el mismo nombre, si varia en algo no funcionará.

Editores HTML

A la hora de editar texto en HTML hay muchos editores, aunque muchos informáticos se conforman con un TextEdit donde simplemente vuelcan sus conocimientos.
Nosotros hemos tocado dos: TextWrangler y Dreamweaver.

TextWrangler.

Es un editor de texto HTML avanzado, y sencillo. También se pueden trabajar otros lenguajes como PHP, JavaScript, Perl, Java, ANSI C, C++ y otros.
De lo que hemos visto, la herramienta más útil me a parecido la de buscar y reemplazar.

DreamWeaver.

DreamWeaver es uno de los editores de texto más conocidos y más utilizados ya y que es de Adobe.
Principalmente se utiliza para la creación de sitios webs, aplicaciones y editar sitios ya creados.  Igual que TextWrangler soporta otros lenguajes informáticos, al abrirlo te sale una lista donde indicar cual quieres utilizar.
Para DreamWeaver vamos a hacer una entrada a parte ya y que es más extenso.

HTML 3

Etiquetas: 

•  <br> Nos hace un salto de línea. Si empezamos a poner cosas y no utilizamos esta etiqueta lo que ocurrirá será que saldrá todo junto, una cosa al lado de otra. 
•  <strike> Nos tacha el texto. 
• <u> Subraya el texto. 
•  &nbsp; Crea espacios. Algunos navegadores no detectan el espaciador del teclado. Se utiliza mayormente para forzar espacios en blanco entre palabras que no se pueden separar, por ejemplo "Hi World", se pondría "hola&nbsp;mundo" si está a final de línea para que no nos haga un espacio, lo rompemos y se pasa a la línea de abajo, pero esto ya es a gusto del que lo haga. 
•  <h> Encabezado, header </h> 
• <h1> Título </1> Existen hasta 6 tipos de títulos diferentes.
•  <p> Párrafo (crear ejemplo con Lorem Ipsum)
• <hr> Crea una línea horizontal a lo largo de la página. No hace falta cerrarla. 
• <code> tipo de código. 
• <font face="____" > tipografía que indiquemos para utilizar. Se cierra solo con: </font>
• <font color="____" > Para indicar el color. 
• <font size="__"> indicamos el tamaño a usar.
•  <ul> Lista sin orden numérico. ( ···) 
• <ol> Lista con numeración( 1,2,3..) 
• <meta charset="urf-8"> indica la codificación del texto. <img src="img/face.jpg"
Añadimos una imagen que se encuentre en la carpeta "img" del directorio donde tenemos todo. 
• <img src="url de internet" >
añadimos la imagen directamente de internet. 
• <img src="../face.jpg">
al añadir los puntos antes del nombre estaremos indicando que está en el directorio anterior a la web, es decir, que retrocedemos. 
• <img src="face.jpg">
le indicamos que está en la misma carpeta de la web.

Valor de colores: Para elegirlo en Ph activamos "solo colores web"

Los colores en código suelen ser: # ( al principio ) FF (R) 00 (G) 33 (B)
Son siempre 6 dígitos, en caso de ver #F03 es porqué se entiende que son repetidos, osea #FF0033. 

HTML 2

Cosas básicas que hay que saber antes de ponernos con HTML.

• Para trabajar con HTML ante todo hay que ser ordenado para no liarnos y no andar modificando nombres, rutas, carpetas.. porqué sino después a la hora de buscar un archivo, o querer modificar algo no vamos a encontrar nada, y nos liaremos.
• HTML funciona a través de etiquetas: <…> es muy importante cerrar la etiqueta que hemos utilizado para limitar su función, para ello pondremos una barra. <xx/>
• También es importante cerrar las etiquetas por orden, es decir, si metemos una dentro de otra, saber cerrarlas.
• Ej: <1><2>-------- Primero cerramos la más reciente y así hacia fuera.

• Es sumamente importante trabajar sin la tecla de mayúsculas, pues no tiene el mismo significado una etiqueta en minúsculas que en mayúsculas, pueden surgir errores, o que las cosas no funcionen por el simple detalle de escribirlo en mayúsculas.
• Recomendación: poner el e-mail como imagen en lugar de texto para evitar que lo cojan en el código fuente y lo utilicen para hacer spam.
• La carpeta "html" es para meter las sub páginas y así tener todo ordenado. 
• Recordatorio: para encontrar algo rápidamente en el código fuente pulsar "comando y f" y lo encontrará.
• Muchas etiquetas se aprenden fácilmente si utilizamos la lógica, las de texto suelen ser la inicial de su nombre. P.ej: <i> </i>de italic <u> </u>underline...
• Para poder poner códigos de html en nuestra web se tendrá que utilizar una web que te transforme el código en texto, porqué sino, lo tomará como código y lo aplicará. Una web útil es:  http://www.blogcrowds.com/resources/parse_html.php

HTML 1

Para empezar a estudiar HTML primero echaremos una ojeada a su base: Internet.

Internet fue creado en 1957 con objetivo militar, se pensó en un documento estándar basado en texto "HTML" para una fácil transmisión. Con el tiempo internet pasó a ser más asequible y fue cambiando su objetivo: búsqueda de información, documentarse, y ahora es un murmullo donde hay interferencias, jugar, mezcla de ideas, pensamientos distintos, y sobre todo sirve para perderse en sus redes y sus miles de posibilidades.

Hoy en día nadie tiene un control global sobre la red, todos accedemos de forma anónima en cierta forma pero se quedan las huellas a través del registro de la IP del usuario.

Ej. Podemos ir por la playa de forma anónima porqué nadie nos conoce, pero dejamos un rastro en la arena que nos delata.

LAN: Red de área local. Es la conexión de varios ordenadores con extensión limitada físicamente.

Ej. Ordenadores en aulas u oficinas.

WAN: Red de área extensa. Para ordenadores alejados físicamente.

Se puede decir que es una conexión enorme de muchas LAN.

Internet hace que se puedan compartir tecnologías a nivel mundial. Ej: ADSL, 3G, fibra óptica, red eléctrica, satélite.

-Dispositivos electrónicos: 

• Servidor: En internet es un ordenador remoto donde se guardan datos solicitados por los navegadores u otros ordenadores. En LAN es el software que configura el ordenador para tener acceso a la red. Pueden almacenar información de páginas web que através del protocolo HTTP se puede ver en otros ordenadores. 
• router: es un buscador de caminos o rutas. Se asegura de que la información llegue a su destinatario y no a donde no se necesita.
• módem: es el hardware que va conectado del ordenador a la línea de teléfono. Transforma las señales digitales del ordenador en señal telefónica analógica y al revés para poder transmitir y recibir información por la línea del teléfono. 

-Conjunto de software: 

• sistema: Es el conjunto de programas que gestiona en un sistema informático organiza los recursos de hardware.
• protocolo: es un conjunto de reglas usada por ordenadores para comunicarse unas con otras a través de una red y de forma simple. 
• Ej. HTTP , Wap, Ftp.
• aplicaciones: servicios que pueden utilizar los usuarios a través de un servidor web conectado a internet o una intranet mediante un navegador. 
• navegadores: aplicación que funciona a través de internet, buscando e interpretando información de sitios web con tal de que podamos leerla. Normalmente están alojadas en World Wide Web. Siempre interpreta el código HTML con el que está creada la web y lo presenta en la pantalla presentandolo así al usuario. 

Proyecto Apache

El proyecto se inició en 1995 por 8 desarrolladores para trabajar la ampliación de HTTPd. Apache es una base de datos sql con servidor y hosting web.

Infraestructura.

1969/- ARPAnet. Red de ordenadores creado como medio de comunicación por diferentes organismos.  Fue el primer concepto de una red de ordenadores capaces de comunicar usuarios desde distintos puntos.
1985- NSFnet. Red creada por EEUU dedicada a la comunicación de investigación y la educación. Reemplazó a ARPAnet.
1992- WWW.  Sistema de distribución de información basado en hipertextos ( sistema de información textual que permite enlazar varios textos ) enlazados y accesibles por internet. Utilizando un navegador nos ayuda a visualizar webs compuestas por textos, imágenes, vídeos, etc.
1993- NCSA, Mosaic navegador, luego NETScape y luego Firefox. Dominaba el mercado hasta que llegó Internet Explorer.

Guerra de navegadores.
Se trata de la competencia entre navegadores web por el dominio del mercado. Específicamente entre Internet Explorer ( Microsoft ) y Netscape Navigator ( Netscape ) a finales de los '90. En la actualidad la guerra está entre Mozilla Firefox, Opera, Safari y Google Chrome aunque no tan fuerte como al principio puesto que solo eran dos navegadores.

En internet, a diferencia del resto de medios, el usuario no es tan solo un espectador sino que a su vez puede participar.

-World Wide Web: Como he nombrado antes,  el World Wide Web es un sistema utilizado en internet para distribuir información basandose en el hipertexto. Para poder hacerlo se necesita un navegador.

-Hipertext: sistema de información textual que permite enlazar varios textos al pulsar en ciertas zonas destacadas con el ratón. Lo más utilizado son los hipervínculos. 

-ASCII (American Standard Code for Information Interchange ) Su traducción es "Código Estándar Americano para el Intercambio de Información". Podemos definirlo como un código de caracteres creado para la informática, actualmente utiliza 8 bits para representar cada caracter, al principio solo utilizaba 7 bits. 

-Direcciones:

http://www.dominio.pais/directorio/página.htm (El conjunto es una URL)

el_meu_nom@servidor.com

ftp.rapidsite.com

-Dominio web: identificación de un sitio web. Traducen las direcciones IP de cada nodo de la red y así hacer posible utilizar internet sea donde sea.

    -Comerciales: tienen tres dígitos. P. Ej: .com

    -Territoriales: tienen dos dígitos. P. Ej: .es

Los sitios webs son un conjunto de páginas verticales.

-www.w3c.org : es una asociación internacional online donde hacen recomendaciones para la World Wide Web. Dirigida principalmente por URL, HTTP y HTML.    

Existe un estándar multimédia para internet.

-Redes de ordenadores.

confinación de máquinas IP: 192.168.5.30

-DNS: sistema de nombres de dominio. Su función es traducir nombres y números que nosotros no entendemos en identificadores binarios conectados a equipos de red para poder localizar otros equipo a nivel mundial.
        -Rutas Absolutas - relativas.

-Next Computer (steve Jobs) que desarrolló una serie de ordenadores de trabajo destinados a la educación superior y las empresas. Su software es la base del sistema operativo Mac Os X. 

Valores decimales:

-Binario: 1 0

-Decimal: 0 1 2 3 4 5 6 7 8 9

-Hexadecimal: 0 1 2 3 4 5 6 7 8 9 a b c d e f.

FTP: Protocolo de transferéncia de ficheros. Hay varios programas FTP, para conectar a otro ordenador, por ejemplo: Transmit y FileZilla entre otros.
Dentro del FTP tenemos la carpeta con nuestro nombre (o el de la práctica) y dentro la carpeta "img" donde guardaremos todas las imágenes a utilizar y el archivo "pagina1.html" si la llamamos index.html al abrirla se abre la web directamente.