19/09/2013
Diseño de páginas web
Infra estructura de comunicaciones: esta construida por una serie de ordenadores conectados entre si, que pueden compartir datos y recursos.
Una red de ordenadores abiertas: ningún país, organismo, entidad o individuo tiene un control global.
- Red anillo
- Red estrella
- Red en serie
Redes
- LAN: red de area local, los ordenadores están físicamente cerca unos de los otros.
- WAN: red de area extensa. Los ordenadores estan alejados físicamente unos de los otros.
Canal
Cable telefonico, fibra óptica, red electrica, satelites.
Dispositivos electronicos
Servidores, enrutadores, modems, electrodomesticos.
Conjunto de herramientas de software
Sistemas operativos, protocolos, aplicaciones, servidores, visualizadores o navegadores.
-1969: ARPAnet
-1985: NSF net
-1992: www
-1993: MCSA masaicURL
Uniform Resource Locator
Dominios comerciales
.com
.edu
.net
.gov
.mi
.org
- De texto
- Wysiwyg
DNS ( Domain Name System )
Transforma URL a IP.
26/09/2013
Tim Bernens - Lee
HTTP- Hiper Text Transfer Protocol
HTML- Hiper Text Markup Languaje
W3C
www -> World Wide Web
HTML5
html ( lenguaje marcado semantico) + CSS ( formato, estética, funcionalidad ) + Javascript ( Dinamiza, motor)
Etiquetas
<html>: define el inicio del documento HTML, le indica al navegador que lo que viene a continuación debe ser interpretado como código HTML.
Dominios territoriales
.es
.uk
.jd
.no
.cn
.cu
.mx
.fr
.de
.tu
20/09/2013
Estandares Multimedia
Video: MP4, OGV / ogg
Graficos: gif, png, jpg, vectoriales (swf, sug, pdf)
Audio: mp3, ogg, acc, wma.
Otros formatosEditores html
- De texto
- Wysiwyg
DNS ( Domain Name System )
Transforma URL a IP.
26/09/2013
Tim Bernens - Lee
HTTP- Hiper Text Transfer Protocol
HTML- Hiper Text Markup Languaje
W3C
www -> World Wide Web
HTML5
html ( lenguaje marcado semantico) + CSS ( formato, estética, funcionalidad ) + Javascript ( Dinamiza, motor)
Etiquetas
- La mayoría de etiquetas deben cerrarse como se abren, pero con una barra («/»)
<html>: define el inicio del documento HTML, le indica al navegador que lo que viene a continuación debe ser interpretado como código HTML.
<head>: define la cabecera del documento HTML; esta cabecera suele contener información sobre el documento que no se muestra directamente al usuario como, por ejemplo, el título de la ventana del navegador. Dentro de la cabecera <head> es posible encontrar:
<title>: define el título de la página. Por lo general, el título aparece en la barra de título encima de la ventana.
<link>: para vincular el sitio a hojas de estilo o iconos. Por ejemplo:<link rel="stylesheet" href="/style.css" type="text/css">.
<style>: para colocar el estilo interno de la página; ya sea usando CSS u otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo externo usando la etiqueta <link>.
<meta>: para metadatos como la autoría o la licencia, incluso para indicar parámetros http (mediante http-equiv="") cuando no se pueden modificar por no estar disponible la configuración o por dificultades con server-side scripting.<body>: define el contenido principal o cuerpo del documento. Esta es la parte del documento html que se muestra en el navegador; dentro de esta etiqueta pueden definirse propiedades comunes a toda la página, como color de fondo y márgenes. Dentro del cuerpo <body> es posible encontrar numerosas etiquetas:
<h1> a <h6>: encabezados o títulos del documento con diferente relevancia.
<table>: define una tabla.
<tr>: fila de una tabla.
<td>: celda de una tabla (debe estar dentro de una fila).
<a>: hipervínculo o enlace, dentro o fuera del sitio web. Debe definirse el parámetro de pasada por medio del atributo href. Por ejemplo: <a href="http://www.example.com" title="Ejemplo" target="_blank" tabindex="1">Ejemplo</a> se representa como Ejemplo).
<div>: división de la página. Se recomienda, junto con css, en vez de <table> cuando se desea alinear contenido.
<img>: imagen. Requiere del atributo src, que indica la ruta en la que se encuentra la imagen. Por ejemplo: <img src="./imágenes/mifoto.jpg" />. Es conveniente, por accesibilidad, poner un atributo alt="texto alternativo".
<li><ol><ul>: etiquetas para listas.
<b>: texto en negrita (etiqueta desaprobada. Se recomienda usar la etiqueta <strong>).
<i>: texto en cursiva (etiqueta desaprobada. Se recomienda usar la etiqueta <em>).
<s>: texto tachado (etiqueta desaprobada. Se recomienda usar la etiqueta <del>).
<u>: Antes texto subrayado.
Prácticas
m2m8uf300
Para crear este horario utilizamos <tr> </tr> para crear una fila y para crear una columna <td> </td> .
Después metemos la información que deseamos.
Ponemos en negrita el texto más importante con <b> </b>, por último le damos color a la caja por ejemplo " <td bgcolor="#E2A9F3">P "
m2m8uf301
- Organizar el documento en tablas, para poder colocar el texto y imagenes. ( Insertar > tabla )
- Depende de la fila deberemos de combinar las filas. ( seleccionando celdas y botón derecho combinar celdas )
- Insertamos imágenes donde respectivamente necesitamos, y texto.
- Crear los recuadros en photoshop, y colocarlo como imagen y ponerle encima el texto.
m2m8uf302
- Estructuramos la página en una tabla de 3 columnas dándole el valor más ancho a la del medio, y creamos unas 60 filas para organizar el texto por apartados.
- Para el titulo utilizamos un formato de encabezado 1 ( <h1> )
- Para los demás subtítulos utilizamos encabezado 3 ( <h3> ) para que quede proporcional con el título.
- Hay que darle el formato al texto que va de párrafo.
- Poner en cursiva o negrita lo necesario
- Hay que seleccionar las palabras que queremos vincular a una URL ( vínculo ) y en la página te redigira a la página que hayas puesto.
- Utilizamos la herramienta "anclaje con nombre"enlazar a una parte concreta de un documento.
Y en este documento lo hacemos servir para volver desde una región al principio, ponemos un ancla en cada región y otra en la parte del principio y entre si que se enlacen.
- Para hacer que un mapa sea interactivo y que te redirija según la zona que le des vaya al apartado que quieras, hay que utilizar la herramienta "herramienta zona interactiva poligonal"
Seleccionando la imagen le vas dando creando el contorno deseado a lo que quieres vincular, y después le das de nuevo aqui para que no siga creando puntos, y a otra zona para que no afecte a lo seleccionado.
Va quedando asi cuando lo seleccionas:
Y finalmente tienes que poner a donde quieres vincularlo
- Utilizamos background para tener una imagen de fondo la cual no podemos copiar desde la página además de que se puede poner otra imagen, animación, texto.. encima.
Quedaría asi en html: " <td width="675" height="313" background="img/mapa.png"><img src="img/regionsdvd5.gif" width="675" height="313" /></td> "Para hacer el gif:
- Con photoshop le damos a ventana > animación
- Dejamos "visible" la capa que queremos que parpadee
- Creamos una nueva capa en la cual quitamos la "visibilidad" a la capa, y le damos los parámetros que deseamos los segundos que quieres que dure, y cuantas veces se repite.
m2m8uf303
Esta practica se basa en saber integrar botones, y vincular varias paginas adentro de una misma.
1. Crear botones:
Con photoshop hacemos un botón para cada estado que queramos que actue, por ejemplo para cuando se le pase por encima, para cuando este en la pagina actual, o cuando esta inactivo.
Y los guardamos para web.
2. Integración de botones:
En dreamweaver creamos una pagina llamada inicio, y creamos una tabla con sus correspondientes medidas, columnas y filas.
Para insertar el botón que tenga efecto al pulsarle encima, hay que ir a : insertar > objetos de imagen > Imagen de sustitución.
+19.00.45.png)
+19.01.19.png)
+19.04.47.png)
Aprendimos hacer varios css, uno para imprimir y otro para pantalla.
Esta practica se basa en saber integrar botones, y vincular varias paginas adentro de una misma.
1. Crear botones:
Con photoshop hacemos un botón para cada estado que queramos que actue, por ejemplo para cuando se le pase por encima, para cuando este en la pagina actual, o cuando esta inactivo.
Y los guardamos para web.
2. Integración de botones:
En dreamweaver creamos una pagina llamada inicio, y creamos una tabla con sus correspondientes medidas, columnas y filas.
Para insertar el botón que tenga efecto al pulsarle encima, hay que ir a : insertar > objetos de imagen > Imagen de sustitución.
Hay eliges la imagen original, y la de sustitución es cuando pases por encima, tambien puedes indicarle la URL hacia donde quieres que vaya.
Ahora es hacerlo todas las veces necesarias.
3. Crear apartados:
Creas los HTML necesarios según pestañas tengas en tu inicio y las vinculas a los botones.
4. En cada apartado:
Por ejemplo en el apartado de música, hay sus subapartados y en cada uno crearemos otro html.
Vinculamos el apartado "punk" a otro html, que profundice más en el tema:
Se vinculan las páginas mediante esta herramienta:
m2m8uf304
Aprendimos a como insertar un frame.
En la practica lo que hicimos fue reemplazar las direcciones de las imagenes y hacer frames.
m2m8uf305
Le ponemos que h1 tiene una clase:
+19.09.38.png){kind=small}
Y en el css ponemos que esa clase los parámetros que deseamos:
+19.09.53.png)
Para crear un nuevo css, es tan simple como ir Archivo > nuevo > CSS:
+19.10.06.png)
Así es como queda la practica acabada:
+19.16.38.png)
m2m8uf306
Utilizamos la etiqueta span para crear el menu de arriba, que nos redireccionara hasta el apartado que tiene.
+19.20.36.png){kind=small}
Y para apartado hicimos un div:
+19.23.33.png)
A cada elemento del div le ponemos si tiene alguna clase, y en el css le ponemos lo que le corresponde.
Así es como queda la practica finalmente:
+19.25.56.png)
m2m8uf307
En este documento hicimos varios css, para cada parte del documento:
+19.33.19.png){kind=small}
Para estructurar el documento utilizaremos div:
+19.36.26.png)
Hay lo que hicimos fue hacer el menu superior, dandole una referencia para que fuera rediriccionado:
+19.38.38.png){kind=small}
+19.40.53.png)
Posicionamiento CSS
m2m8uf308 ( Diferentes visualizaciones )
Primero creamos los css necesarios y los guardamos con el nombre oportuno en este caso hemos echo estos:
+19.09.03.png)
- static: corresponde al posicionamiento normal o estático. Si se utiliza este valor, se ignoran los valores de las propiedades top, right, bottom y left que se verán a continuación.
- relative: corresponde al posicionamiento relativo. El desplazamiento de la caja se controla con las propiedades top, right, bottom y left.
- absolute: corresponde al posicionamiento absoluto. El desplazamiento de la caja también se controla con las propiedades top, right, bottom y left, pero su interpretación es mucho más compleja, ya que el origen de coordenadas del desplazamiento depende del posicionamiento de su elemento contenedor.
- fixed: corresponde al posicionamiento fijo. El desplazamiento se establece de la misma forma que en el posicionamiento absoluto, pero en este caso el elemento permanece inamovible en la pantalla.
m2m8uf308
En esta practica, tenemos como finalidad hacer un diseño personalizado y colocarlo en blogger.
Primero hacemos una previa de como queremos más o menos en photoshop, colocando reglas y haciendo los diferentes apartados.
+20.00.16.png)
Creamos un CSS para el blog, además también ponemos el CSS del reset, y ahora tenemos que crear la estructura donde pondremos las entradas, pie, cabecera...Que seria en este orden:
- div blog : es el que contiene todo el material.
- div cabecera: solo contiene la imagen de la cabecera.
- div principal: que es donde esta el titulo de la entrada, contenido y pie.
- div menu: para tener ordenadas y situadas las etiquetas de cada entrada.
Es cuestión de ir encajando cada div para que queden de forma adecuada, utilizando margin, paddin, y float.
Cuando ya tengo todo como quiero, para pasarlo a -> Blogger
En esta practica, tenemos como finalidad hacer un diseño personalizado y colocarlo en blogger.
Primero hacemos una previa de como queremos más o menos en photoshop, colocando reglas y haciendo los diferentes apartados.
Podemos poner la imagen de fondo en el Dreamweaver para poder guiarnos al hacer el blog.
Creamos un CSS para el blog, además también ponemos el CSS del reset, y ahora tenemos que crear la estructura donde pondremos las entradas, pie, cabecera...Que seria en este orden:
- div blog : es el que contiene todo el material.
- div cabecera: solo contiene la imagen de la cabecera.
- div principal: que es donde esta el titulo de la entrada, contenido y pie.
- div menu: para tener ordenadas y situadas las etiquetas de cada entrada.
Es cuestión de ir encajando cada div para que queden de forma adecuada, utilizando margin, paddin, y float.
Cuando ya tengo todo como quiero, para pasarlo a -> Blogger
- Creamos un nuevo blog de pruebas.
- Plantilla > Editar código HTML de la plantilla.
- Borramos todo lo que contenga.
- Abrimos un TextEdit, entonces hay tenemos que juntar la plantilla de blogger y la de dreamweaver.
- Después de <div id="principal"> le colocamos <Blogger>
- Y cuando acaba la entrada ( después del pie ) colocamos </Blogger>
- Dentro de <div class="titulo"> <BlogItemUrl><a href="<$BlogItemUrlgt;" title="external link"></BlogItemUrl><$BlogItemTitlegt; <BlogItemUrl></a></BlogItemUrl> </div>
-
A continuación <div class="contenido"><p><$BlogItemBody$> </p></div>.
m2m8uf308 ( Diferentes visualizaciones )
Primero creamos los css necesarios y los guardamos con el nombre oportuno en este caso hemos echo estos:
- bloc_mobil.css ( Móvil vertical )
- bloc_mobile_landscape.css ( Móvil apaisado )
- bloc_tablet.css ( Tablet )
- m2m8uf308.css ( Pantalla )
- reset.css
En el HTML le ponemos cada css asi:
Después en cada css le ponemos esto especificándole sus medidas:
- bloc_mobil.css
+19.15.54.png)
- bloc_mobile_landscape.css
+19.17.31.png)
- bloc_tablet.css
+19.16.44.png)
- m2m8uf308.css
+19.19.38.png)
Hype
Es un programa de animación muy similar al flash pero esta dirigido para HTML5.
Para insertar un objeto se hace desde aqui:
+16.33.57.png)
Desde esta ventana puedes editar todo el contenido del documento ( tamaño del documento o objeto, color de fondo, letras, tipografia...)
+16.35.32.png)
Tenemos una parte donde poder crear nuevos fotogramas clave, para cambiar forma, opacidad, color...
+16.37.51.png)
Si le damos al botón de show scenes, podremos ver y editar las diferentes escenas de la animación, y podemos mandar que de una a la otra salte.
+16.40.23.png)
+16.44.02.png)
Después para poder ponerlo en nuestro blog tenemos que darte a Export as HTML 5 -> Folder:
+17.39.34.png)
Después abrimos el archivo .html que nos crea:
+17.41.14.png)
Ahora solo tenemos que colocar ese código en el sitio donde queramos que se reproduzca.
No hay comentarios:
Publicar un comentario