Your SlideShare is downloading. ×
Internet   diseño web
Internet   diseño web
Internet   diseño web
Internet   diseño web
Internet   diseño web
Internet   diseño web
Internet   diseño web
Internet   diseño web
Internet   diseño web
Internet   diseño web
Internet   diseño web
Internet   diseño web
Internet   diseño web
Internet   diseño web
Internet   diseño web
Internet   diseño web
Internet   diseño web
Internet   diseño web
Internet   diseño web
Internet   diseño web
Internet   diseño web
Internet   diseño web
Internet   diseño web
Internet   diseño web
Internet   diseño web
Internet   diseño web
Internet   diseño web
Internet   diseño web
Internet   diseño web
Internet   diseño web
Internet   diseño web
Internet   diseño web
Internet   diseño web
Internet   diseño web
Internet   diseño web
Internet   diseño web
Internet   diseño web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Internet diseño web

1,186

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,186
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Internet - Informática 4º
  • Internet - Informática 4º
  • Internet - Informática 4º
  • Internet - Informática 4º
  • Internet - Informática 4º
  • Internet - Informática 4º
  • Internet - Informática 4º
  • Internet - Informática 4º
  • Internet - Informática 4º
  • Internet - Informática 4º
  • Internet - Informática 4º
  • Internet - Informática 4º
  • Internet - Informática 4º
  • Internet - Informática 4º
  • Internet - Informática 4º
  • Internet - Informática 4º
  • Internet - Informática 4º
  • Internet - Informática 4º
  • Internet - Informática 4º
  • Internet - Informática 4º
  • Internet - Informática 4º
  • Internet - Informática 4º
  • Internet - Informática 4º
  • Internet - Informática 4º
  • Internet - Informática 4º
  • Transcript

    • 1. INTERNET . PUBLICACIÓN DE PÁGINAS WEB TICO Bachillerato
    • 2. Índice
      • Internet, protocolo TCP/IP y servicios de internet
      • HTML
      • Conexión a Internet, El W3C y Publicación de sitios Web
      • Práctica
    • 3. INTERNET, PROTOCOLO TCP/IP Y SERVICIOS DE INTERNET
    • 4. ¿Qué es Internet?
      • Internet es una red informática mundial , descentralizada, formada por la conexión directa entre ordenadores mediante protocolos especiales de comunicación (TCP/IP).
    • 5. Origen de Internet
      • 1969: comienza el desarrollo de ARPANET (4 ordenadores en red en EEUU).
      • 1979: nace el protocolo TCP/IP.
      • 1991: nace la www y el lenguaje html.
    • 6. Protocolo TCP/IP I Protocolo TCP/IP Para que independientemente del sistema operativo del ordenador y de la red a la que pertenezcan los ordenadores éstos se puedan conectar a Internet existe un protocolo común y único, el protocolo TCP/IP. Conjunto de protocolos que rige el intercambio de información en Internet. TCP (Transmision Control Protocol, que divide la información en paquetes y los envía a través de Internet) e IP (Internet Protocol, que dirige la información a través de Internet, en la cabecera de los paquetes este protocolo escribe las direcciones de los ordenadores de origen y destino)
    • 7. Dirección IP Cada ordenador conectado a Internet tiene una dirección única para identificarlo. esta dirección está formada por 4 números entre 0 y 255 separados por puntos. Ejemplo: 192.168.1.205 Para ver la dirección IP de nuestro ordenador, podemos usar el comando ipconfig . Sistema DNS Para que no sea necesario el recordar las direcciones IP de los ordenadores, se creó el sistema de nombres de dominio (DNS), que permite identificar a los ordenadores mediante un sistema jerárquico de nombres sencillos de recordar. (Por ejemplo: www.iesgrandecovian.com, perteneciente al dominio principal com (comercial)) Los servidores de nombres de dominio son ordenadores que tienen la función de relacionar el nombre de dominio del ordenador con su dirección IP. Protocolo TCP/IP II
    • 8. URL Localizador Uniforme de recursos (URL) Dirección que con un formato estándar identifica los recursos  de internet. Formato estándar:     protocolo://nombre de dominio del servidor/carpetas/fichero Ejemplo:     http://www.iesgrandecovian.com/informatica/internet.htm
    • 9. Función Servicio navegación www (world wide web) buscadores wikipedia comunicación correo electrónico listas de correo chats sistemas de gestión de contenidos foros blogs servidor de datos ftp alojamiento web redes P2P (peer-to-peer) redes P2M (peer-to-mail) servicios multimedia voz sobre IP televisión y radio por Internet cámaras web juegos en línea servicios comerciales comercio electrónico banca electrónica
    • 10. Servicios que ofrece Internet
      • Navegación : www, buscadores, wikipedia, etc.
      • Comunicación : correo electrónico, listas de correo, chats, sistemas de gestión de contenidos, foros, blogs.
      • Servidores de datos : ftp, alojamiento web, redes P2P.
      • Servicios multimedia : voz sobre IP, TV y radio por Internet, cámaras web, juegos en línea.
      • Servicios comerciales : comercio electrónico, banca electrónico.
    • 11. Servicios de Internet
      • www
      • Correo electrónico
      • chats
      • Mensajería instantánea
      • Foros
      • Blogs
      • ftp
      • telnet
    • 12. World Wide Web
      • Sistema de documentos de hipertexto con información y vínculos a otros documentos.
      • Se basa en tres estándares:
        • URL ( uniform resource location ), dirección única para localizar una página web.
        • HTTP ( hypertext transfer protocol ), manera en que se envía y recibe la información entre el navegador y el servidor.
        • HTML ( hypertext markup language ), cómo se ve la información en el navegador.
      • El organismo encargado de mantener estos tres estándares es el W3C .
    • 13. WWW. Navegación
      • En el navegador web se escribe la dirección URL.
      • Se traduce parte en una dirección IP mediante la base de datos DNS (Domain name server), y se envía una petición al servidor web que hay en la dirección IP.
      • Llega al navegador el código HTML del documento, el navegador lo interpreta y pide al servidor otros recursos como imágenes, música, etc.
      • El navegador muestra la página solicitada.
    • 14. Correo electrónico
      • Enviar y recibir mensajes.
      • Protocolos:
        • POP3 : ( post office protocol ), para obtener los mensajes de correo electrónico que se encuentran en un servidor remoto.
        • SMTP : ( simple mail transfer protocol ), para enviar un mensaje a un equipo remoto.
        • IMAP : ( Internet message access protocol ), ídem que POP3, pero no es necesario descargarlos.
      • Acceso al correo:
        • Webmail: programa que permite acceder al correo electrónico mediante una página web.
        • Gestor de correo electrónico.
    • 15. ftp (file transfer protocol)
      • Transmitir archivos de un equipo a otro.
      • Protocolo cliente – servidor, con el que nos conectamos a un equipo para descargar o cargar archivos independientemente del sistema operativo.
      • Ejecuta en la shell: ftp, para qué sirven get y put (ejecuta help get, help put).
    • 16. Telnet (terminales informáticos)
      • Protocolo para conectarse a otro ordenador y ejecutar órdenes de forma remota.
      • Entorno de consola.
    • 17. Arquitectura cliente – servidor
      • Servidores: equipos informáticos con software que ofrecen un servicio a otros ordenadores que lo solicitan: clientes.
    • 18. HTML
    • 19. HTML
      • HTML (hipertext mark language) lenguaje para la creación de páginas web, está basado en etiquetas que definen las cualidaes de los textos que contienen.
      • Ejemplos: <HTML>, <head>, <body>.
    • 20. HTML. Estructura básica
      • Estructura básica
        • <HTML>
          • <HEAD>
            • <TITLE>Título de la página</TITLE>
            • ...
          • </HEAD>
          • <BODY>
            • Aquí iría el contenido de la página
          • </BODY>
        • </HTML>
      • Atributos de la etiqueta BODY:
        • BGCOLOR=… color de fondo de la página.
        • TEXT=… color del texto
        • BACKGROUND=… ruta y nombre de archivo de la imagen que será usada como fondo del documento
        • Ej.: <BODY BGCOLOR=blue TEXT=red BGCOLOR=imagenes/fondo.gif>
    • 21. HTML. Formatos
      • Títulos : Los títulos o encabezamientos: al comienzo de una sección. <H1>, <H2>, …, <H6>
      • Estilos de fuentes :
        • Negrita: <B>
        • Cursiva: <I>
        • Subrayado: <U>
      • Fuente : <FONT> atributos:
        • FACE=…, tipo de fuente <FONT FACE=“Courier”>
        • SIZE=Nº: tamaño (Nº entre 1(menor) y 7) <FONT SIZE=5>
        • COLOR=… <FONT COLOR=blue>
      • Párrafo y Bloques :
        • <P> Para que queden separados por una línea en blanco. Atributo: ALIGN
        • <BR> Salto de línea
        • <HR> Línea horizontal. Atributos:
          • WIDTH=…, ancho (En píxels o en porcentaje del ancho de la ventana)
          • SIZE=…, grosor de la línea
          • COLOR=…
        • <BLOCKQUOTE> tabulaciones
    • 22. HTML. Listas
      • Listas con viñetas :
        • <ul> <li>Primer término de la lista <li>Segundo término </ul>
      • Listas ordenadas : (Type= 1, A, a, I, i)
        • <ol type=i> <li >Primer término de la lista <li >Segundo término </ol>
      • Listas de definiciones :
        • <dl> <dt >Término 1º <dd>Definición del elemento 1º <dt>Término 2º <dd>Definición del elemento 2º </dl>
    • 23. HTML. Tablas
      • Etiquetas :
        • <TABLE> y </TABLE> son las etiquetas donde está contenida la tabla
        • <TR> y </TR> son las etiquetas que indican el comienzo y fin de una fila
        • <TD> y </TD> señalan una celda
      • Atributos TABLE:
        • BORDER=Nº. Tamaño del borde en píxels. Si no se pone, carece de borde.
        • WIDTH=&quot;5&quot; o WIDTH=&quot;50%&quot;. Es el ancho de la tabla.
        • ALIGN=&quot; left&quot;, &quot;right&quot;, &quot;center&quot;. Alinea de la tabla.
      • Atributos de TR y TD
        • BGCOLOR=…
      • Atributos de TD
        • COLSPAN=3. Especifica el número de columnas que abarca la fila
        • ROWSPAN=2. Especifica el número de filas que abarca la columnaç
      • Otros usos de las tablas : las tablas son a veces la mejor manera de asegurarnos que cada cosa esté en su sitio. En esos casos toda la página es una tabla invisible (Borde=0).
    • 24. HTML. Imágenes
      • La etiqueta para incluir una imagen es la siguiente:
        • <IMG SRC=ruta/archivo>
      • Atributos de IMG:
        • ALT=&quot; Texto al situar el cursor sobre la imagen “ o si el navegador no carga la imagen.
        • ALIGN= Nos indica la posición de la imagen respecto del texto.
          • TOP si queremos que el texto esté alineado con la parte superior de la imagen
          • MIDDLE alinea el texto con la parte central de la imagen
          • BOTTOM alinea el texto con la parte inferior de la imagen
          • LEFT alinea la imagen a la izquierda de la página forzando la colocación del texto en la parte derecha y arriba
          • RIGHT alinea la imagen en la derecha de la página forzando la colocación del texto en la parte izquierda y arriba.
        • WIDTH=80, HEIGTH=100 Indican la anchura y altura de la imagen en píxels. Si especificamos las dimensiones de las imágenes, las páginas se cargan más rápido, debido a que el navegador reserva el espacio para ellas y sigue cargando el texto
        • BORDER=2 Añade un borde, a modo de marco, a la imagen.
      • Formatos de las imágenes: En internet se usan básicamente dos: GIF y JPG
    • 25. HTML. Enlaces
      • <A HREF=&quot;URL&quot;> Texto del enlace</A>
      • Enlace a otra página de tu sitio Web: En este caso la URL se dará de forma relativa
        • <A HREF=“ruta/archivo.htm”>Texto del enlace</A>
      • Enlace a una dirección de Internet: (De forma absoluta)
        • <A HREF=&quot;http://www.google.es&quot;>Buscador Google</A>
      • Enlace con una dirección de correo:
        • <A HREF=&quot;mailto:nombre@gmail.es&quot;>Correo al creador de la página </A>
    • 26. CONEXIÓN A INTERNET, EL W3C Y PUBLICACIÓN
    • 27. Conexión a Internet
      • Para que un ordenador esté conectado a Internet:
        • Ordenador
        • ISP
        • HW de conexión: Router o modem, línea ADSL, RDSI o RTB.
        • Protocolo TCP/IP
        • Programas clientes: navegador web (Internet explorer, Mozilla firefox, Safari, Opera), gestor de correo electrónico (Outlook, Windows Mail, Mozilla Thunderbird), etc.
    • 28. W3C (Consorcio de la WWW)
      • Organismo internacional encargado de gestionar las recomendaciones para los estándares de creación Web.
      • Integrado por más de 400 asociaciones internacionales, fabricantes de software y desarrolladores Web.
    • 29. El lenguaje XHTML
      • Nueva versión del HTML, con pequeñas modificaciones de sintaxis.
      • Principales novedades: incorporación de las Hojas de estilo CSS.
      • Ya no será necesario definir todos los atributos de texto, sino asignarles un estilo.
    • 30. Páginas Web estáticas y dinámicas
      • Las páginas tienen un contenido fijo que sólo puede modificarse si editamos los archivos HTML y los subimos al servidor: Estáticas.
      • Páginas dinámicas: con contenido en PHP, ASP, Java, etc., que permite que la página se actualice en el servidor accediendo a una base de datos.
      • Applet: pequeña aplicación que funciona dentro de otra (por ejemplo una página Web).
    • 31. Accesibilidad en la Web
      • Técnicas de diseño de páginas Web que permiten a cualquier persona con discapacidad física o sin medios tecnológicos necesarios el acceso a la información.
        • Accesibilidad técnica.
        • Accesibilidad física. (Dificultades de visión, motrices, de percepción, sorda).
      • El consorcio que regula las aspectos de accesibilidad en la Web es el consorcio W3C dentro de su iniciativa WAI.
      • Test de accesibilidad Web: La W3C define 3 grados de accesibilidad. Se puede hacer un test de accesibilidad que nos dirá los problemas.
    • 32. Recomendaciones de laWAI
      • Utilizar textos alternativos para imágenes y animaciones.
      • Añadir subtítulos y explicaciones a los elementos multimedia.
      • Establecer hipervínculos significativos (no pincha aquí ).
      • Utilizar hojas de estilo y estructurar las páginas con títulos, encabezados, etc.
      • Evitar los marcos.
      • Describir detalladamente cualquier diagrama o figura.
      • Web de la WAI:
        • http://www.w3c.es/Traducciones/es/WAI/intro/accessibility
      • Test de accesibilidad Web: http://www.tawdis.net
    • 33. Publicación
      • Después de diseñar y editar una página Web.
      • Necesitamos:
        • Espacio en un servidor de Internet. Existen proveedores que ofrecen alojamiento Web pagando o gratuito.
        • Debes registrarte, elegir un nombre de dominio, activar el servicio Web, obtener los datos para el cliente ftp y subir nuestros archivos (Publicar mi sitio).
      • Un programa para transferir archivos (ftp).
    • 34. PRÁCTICA
    • 35. Diseño, realización y publicación de un sitio Web I
      • El alumno deberá realizar en HTML un sitio Web con 2 páginas al menos.
      • Las dos páginas deberán estar enlazadas entre sí. La principal se llamará index.html.
      • Deberán tener una estructura correcta, incluir las etiquetas de formato, de tablas, imágenes y enlaces a las otras páginas del sitio Web y a otras páginas externas.
    • 36. Diseño, realización y publicación de un sitio Web II
      • El tema será alguno relacionado con la asignatura (El ordenador, Sistemas Operativos, Internet, etc.).
      • Por último deberás publicarla, comprobar que funciona bien y por último enviar un correo a la profesora con el enlace.
    • 37. INTERNET
      • TICO Bachillerato

    ×