Diseño web

130 views
94 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
130
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
2
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 con las fotos en internet  Etiquetas, menús  Spry  utilizando Javascript
  2. 2. Una Aproximación a Internet
  3. 3.  El protocolo TCP/IP proporciona la estructura básica del software para la transmisión de datos entre ordenadores, ejemplo de dirección IP  66.34.237.94
  4. 4.  INTERNET EXPLORER MOZILLA FIREFOX GOOGLE CHROME
  5. 5.  http:// Los sitios web se alojan en servidores que funcionan con software especializado, llamado servidores web, y para su funcionamiento implementan el protocolo HTTP (hipertext transfer protocol) HTML (Hipertext markup languaje) Lenguaje de programación. El servidor envía el código HTML de la página y el navegador lo interpreta y lo muestra en pantalla. No es necesario conocer HTML para diseñar una página web
  6. 6. Ejemplos de Protocolo ftp  transferencia de archivos telnet  accesos remoto
  7. 7.  Es un ordenador intermediario que intercepta las conexiones que un cliente hace a un servidor de destino. Permite el acceso a internet a todos los equipos teniendo un equipo conectado o sea, una dirección IP, protegiendo los PC clientes.
  8. 8.  La gente teme ingresar información personal como puede ser el número de la tarjeta de crédito. Afortunadamente existen métodos de encriptación de la información que se envía:  Secure sockets layer  SSL  Transport Layer Security  TLS
  9. 9.  Permite interactuar y colaborar entre sí como creadores de contenido generado por usuarios en una comunidad virtual, a diferencia de sitios web estáticos donde los usuarios se limitan a la observación pasiva de los contenidos . Ejemplos son las comunidades web, los servicios web, las aplicaciones Web, los servicios de red social, los servicios de alojamiento de videos, las wikis, blogs.
  10. 10.  Hay miles de proveedores de dominio y alojamiento Web. Ejemplo : arsys, dhapcenter Hacer prueba, simulacro de contratación de dominio, en ambos proveedores.
  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 puede haber decenas o cientos de líneas.  </BODY>  </HTML En todas las páginas web encontrareis esta estructura
  12. 12.  Javascriptpermite realizar muchas acciones:  Ejemplo: Menús dinámicos desplegables, cálculos, determinadas acciones.  En Dreamweaver se pueden implementar diversas acciones javascript sin necesidad de tener conocimientos. Y se pueden descargar aplicaciones preparadas y usarlas.  Después de este curso se recomienda curso javascript PHP y Mysql  Ambos lenguajes combinados nos permite crear y actualizar bases de datos dinámicas para el sitio web  Ejemplo: listado de productos de la empresa, listado de clientes.
  13. 13.  Flash y action script: en este curso se hace un aintroducción a flash ya que es recomendable tener conocimientos básicos para hacer una web. Hacer toda la web en flash dificulta y complica el posicionamiento de la página web. Pero se utiliza mucho para aportar contenidos multimedia a la web.
  14. 14.  Cuando normalmente decimos que hay una página web, nos referimos a un sitio web que es lo que contiene el conjunto de páginas web. Por ejemplo cuando hacemos una página web con Dreamweaver hacemos un sitio web que contiene páginas web. Dentro del servidor el sitio web es una carpeta.
  15. 15.  Como posicionar nuestro sitio Web en los buscadores. ( Conceptos básicos)  Colocar correctamente los metadatos del head, de la cabecera de la página Web.  Contenidos que cambian con frecuencia y se actualizan.  Publicidad por campaña o en el momento de lanzar el sitio en Google adwords.  Se hará un simulacro de campaña en google adwords
  16. 16.  Metatags en HTML: etiquetas con información sobre el propio documento web: autor, editor… Etiquetas META mas usuales:  Descripción<meta name="description" content="Es mi página " />Mediante esta etiqueta podemos incluir como metadato una descripción de nuestra página.  keywords<meta name="keywords" content="mp3, free, FREE, download, britney, spears" />Las palabras clave son aquellas que resumen de forma significativa 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 te permiten hacer prácticamente de todo, por ejemplo nuevas pá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 de menú, 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 NUEVA NO LA VAN A VER EN EL MENÚ DE FORMA AUTOMÁTICA, PERO HAY UNA FORMA DE HACERLO  Dentro de PRESENTACIÓN DEL SITIO  HACER CLICK EN NAVEGACIÓN (EDITAR) Se recomienda la opción  ORGANIZAR AUTOMÁTICAMENTE MI NAVEGACIÓN  DE ESA FORMA CUALQUIER PÁGINA QUE CREES APARECERÁ EN EL MENÚ IZQUIERDO DE FORMA AUTOMÁTICA. Práctica de clase Intentar hacer un sitio web dentro de google Sites  Hacer un sitio Web en blanco y probar a crear páginas dentro de ese sitio, y a su vez observar si aparecen en el menú con el truco aprendido en clase. (Preparación de sitio navegación organizar automáticamente.
  19. 19.  Esta aplicación y otras de pago son importantísimas para conocer los detalles sobre los accesos a tú página web ¿Cómo se hace? 1 Nos metemos en google analytics: creamos una cuenta. 2 Damos el nombre de la página nuestra sobre la que 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*new Date();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 a palabras clavese descarga desde clever stat Posición de su sitio web en el Tope de Google para keywords populares y conseguir más tráfico desde Google focalizando mejor su trabajo de SEO. Google Monitor envía una consulta a Google y le muestra la posición de su sitio para sus keywords objetivo y también qué tan bien lo están haciendo sus competidores.
  24. 24. Google Trends:  Probar instalar barra alexa.Alexa
  25. 25.  Servicio de Google para posicionar el establecimiento en Google Maps.
  26. 26.  Web que nos ofrece espacio para poder probar gratuitamente nuestra página web. Usando numerosos recursos.

×