Diseño web

115 views
98 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
115
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Diseño web

  1. 1.  Aproximación a internet Alojamiento web y contratación de dominios. Diseño Web y creación de sitios web Generación de sitio web utilizando Google Sites. Dreamweaver CS 5 Creación del sitio Creación de las páginas web Viñetas, tablas, sangrías Inserción de imágenes etiquetas, hipervínculos Photoshop nivel usuario para poder manejarse conlas fotos en internet Etiquetas, menús Spry  utilizando Javascript
  2. 2. Una Aproximacióna Internet
  3. 3.  El protocolo TCP/IP proporciona laestructura básica del software parala transmisión de datos entreordenadores, ejemplo de direcciónIP  66.34.237.94
  4. 4.  INTERNET EXPLORER MOZILLA FIREFOX GOOGLE CHROME
  5. 5.  http:// Los sitios web se alojan en servidoresque funcionan con software especializado,llamado servidores web, y para sufuncionamiento implementan el protocoloHTTP (hipertext transfer protocol) HTML (Hipertext markup languaje) Lenguajede programación. El servidor envía el código HTML de la páginay el navegador lo interpreta y lo muestra enpantalla. No es necesario conocer HTML para diseñaruna página web
  6. 6. Ejemplos de Protocolo ftp  transferencia de archivos telnet  accesos remoto
  7. 7.  Es un ordenador intermediario queintercepta las conexiones que un cliente hacea un servidor de destino. Permite el acceso a internet a todos losequipos teniendo un equipo conectado osea, una dirección IP, protegiendo los PCclientes.
  8. 8.  La gente teme ingresar informaciónpersonal como puede ser el número de latarjeta de crédito. Afortunadamente existen métodos deencriptación de la información que seenvía: Secure sockets layer  SSL Transport Layer Security  TLS
  9. 9.  Permite interactuar y colaborar entre sí comocreadores de contenido generado por usuariosen una comunidad virtual, a diferencia desitios web estáticos donde los usuarios selimitan a la observación pasiva de loscontenidos . Ejemplos son las comunidadesweb, los servicios web, las aplicacionesWeb, los servicios de red social, los serviciosde alojamiento de videos, las wikis, blogs.
  10. 10.  Hay miles de proveedores de dominio yalojamiento Web. Ejemplo : arsys, dhapcenter Hacer prueba, simulacro decontratación de dominio, en ambosproveedores.
  11. 11.  LA SINTAXIS DE HTML  SINTAXIS BÁSICA: <HTML> <HEAD> TÍTULO Y METATAGS </HEAD> <BODY> Es el contenido de la web, dentro del body puedehaber decenas o cientos de líneas. </BODY> </HTML En todas las páginas web encontrareis estaestructura
  12. 12.  Javascriptpermite realizar muchas acciones: Ejemplo: Menús dinámicosdesplegables, cálculos, determinadas acciones. En Dreamweaver se pueden implementar diversasacciones javascript sin necesidad de tenerconocimientos. Y se pueden descargar aplicacionespreparadas y usarlas. Después de este curso se recomienda curso javascript PHP y Mysql  Ambos lenguajes combinadosnos permite crear y actualizar bases de datosdinámicas para el sitio web Ejemplo: listado de productos de la empresa, listadode clientes.
  13. 13.  Flash y action script: en este curso se hace unaintroducción a flash ya que esrecomendable tener conocimientos básicospara hacer una web. Hacer toda la web en flash dificulta ycomplica el posicionamiento de la páginaweb. Pero se utiliza mucho para aportarcontenidos multimedia a la web.
  14. 14.  Cuando normalmente decimos que hayuna página web, nos referimos a un sitioweb que es lo que contiene el conjunto depáginas web. Por ejemplo cuando hacemos una páginaweb con Dreamweaver hacemos un sitioweb que contiene páginas web. Dentro del servidor el sitio web es unacarpeta.
  15. 15.  Como posicionar nuestro sitio Web enlos buscadores. ( Conceptos básicos) Colocar correctamente los metadatos delhead, de la cabecera de la página Web. Contenidos que cambian con frecuenciay se actualizan. Publicidad por campaña o en elmomento de lanzar el sitio en Googleadwords. Se hará un simulacro de campaña engoogle adwords
  16. 16.  Metatags en HTML: etiquetascon información sobre el propio documentoweb: autor, editor… Etiquetas META mas usuales: Descripción<meta name="description" content="Esmi página " />Mediante esta etiqueta podemosincluir como metadato una descripción de nuestrapágina. keywords<meta name="keywords" content="mp3,free, FREE, download, britney, spears" />Laspalabras clave son aquellas que resumen de formasignificativa el contenido de la página.
  17. 17.  Google  más  mucho más En la parte superior de tú página de sites tienes dos iconos que tepermiten hacer prácticamente de todo, por ejemplo nuevaspáginas, diseño de las página creación de menú . Modificar página Nueva página Administrador sitio 1 Página web Administración del sitio Actividad reciente del sitio Páginas Archivos adjuntos Plantillas de páginas Dirección web Presentación del sitio 2 Archivador 3 Lista Navegación Editar Desde el menú página se pueden hacer páginas y desde la opción demenú, se puede enlazar, a la página creada. O se pueden hacer enlaces a páginas Web.
  18. 18.  TRUCO  CUANDO CREE UNA PÁGINA NUEVANO LA VAN A VER EN EL MENÚ DE FORMAAUTOMÁTICA, PERO HAY UNA FORMA DEHACERLO  Dentro de PRESENTACIÓN DELSITIO  HACER CLICK EN NAVEGACIÓN(EDITAR) Se recomienda la opción  ORGANIZARAUTOMÁTICAMENTE MI NAVEGACIÓN  DEESA FORMA CUALQUIER PÁGINA QUE CREESAPARECERÁ EN EL MENÚ IZQUIERDO DEFORMA AUTOMÁTICA. Práctica de clase Intentar hacer un sitio web dentro degoogle Sites  Hacer un sitio Web en blanco y probara crear páginas dentro de ese sitio, y a su vez observarsi aparecen en el menú con el truco aprendido en clase.(Preparación de sitio navegación organizarautomáticamente.
  19. 19.  Esta aplicación y otras de pago sonimportantísimas para conocer los detalles sobrelos accesos a tú página web ¿Cómo se hace? 1 Nos metemos en google analytics: creamos unacuenta. 2 Damos el nombre de la página nuestra sobre laque queremos informes de accesos y seguimiento. Automáticamente analytics genera un código. Ese código se copia y se pega dentro del Head,preferentemente justo al final del fin de head </head>  es decir antes fin de la cabecera
  20. 20. <script>(function(i,s,o,g,r,a,m){i[GoogleAnalyticsObject]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*newDate();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,script,//www.google-analytics.com/analytics.js,ga);ga(create, UA-40169149-1, google.com);ga(send, pageview);</script>
  21. 21. En caso de GOOGLE SITES es másfácil porque basta con ir a ADMINISTRACIÓN DEL SITIO general  habilitar analytics y ponerdirectamente el número de referenciaque nos da analytics para esa página.
  22. 22. Permite a los editores obtener ingresosmediante la colocación de anuncios en sussitios web, ya sean de texto, gráficos opublicidad interactiva avanzada. Estosanuncios son administrados y ordenadospor Google en asociación con losanunciantes de AdWords a través de unsistema complejo de subasta instantánea.
  23. 23.  Programa que ayuda a estudiar los accesos apalabras clavese descarga desde clever stat Posición de su sitio web en el Tope deGoogle para keywords populares yconseguir más tráfico desde Googlefocalizando mejor su trabajo de SEO. GoogleMonitor envía una consulta a Google y lemuestra la posición de su sitio para suskeywords objetivo y también qué tan bien loestán haciendo sus competidores.
  24. 24. Google Trends: Probar instalar barra alexa.Alexa
  25. 25.  Servicio de Google paraposicionar el establecimientoen Google Maps.
  26. 26.  Web que nos ofrece espacio parapoder probar gratuitamente nuestrapágina web. Usando numerosos recursos.

×