sábado, 28 de septiembre de 2013

UF 1: Preparación de archivos, imagenes, videos y sonido

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 masaic


URL:

Uniform Resource Locator


Dominios comerciales:

.com
.edu
.net
.gov
.mi
.org



Dominios territoriales:

.es
.uk
.jd
.no
.cn
.cu
.mx
.fr
.de
.tu


Estandares Multimedia:

-Video: MP4, OGV / ogg
-Graficos: gif, png, jpg, vectoriales (swf, sug, pdf)
-Audio: mp3, ogg, acc, wma.
-Otros formatos


Editores html:

- De texto
- Wysiwyg


DNS ( Domain Name System ):

Transforma URL a IP.



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



-Se utiliza <tr> </tr> para crear una fila.
-Se utiliza <td> </td> para crear una columna.
-Ponemos el contenido (texto) y ponemos en negrita la parte del texto que queremos destacar poniendolo entre <b> </b>.
-Le damos color a las celdas poniendo "<td bgcolor="color o referencia">P".
-P.e: <td bgcolor= "greeen">M5.
-Para poder escoger los colores visita este enlace http://html-color-codes.info/codigos-de-colores-hexadecimales/


m2m8uf301


-Creamos una tabla para organizar el texto y las imagenes en el menu ( insertar > tabla) y creamos la tabla.
-Para combinar las filas (seleccionarlas, clic secundario "tablas > combinar celdas".
-Para poner imagenes le damos a "insertar > imagen" en el menu.
-Pegamos en las celdas el texto.
-Creamos los recuadros en Photoshop para insertarlos en la tabla, y colocamos el texto encima.

No hay comentarios:

Publicar un comentario