Diseño web
Upcoming SlideShare
Loading in...5
×
 

Diseño web

on

  • 160 views

 

Statistics

Views

Total Views
160
Views on SlideShare
160
Embed Views
0

Actions

Likes
0
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Diseño web Diseño web Presentation Transcript

  •  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
  • Una Aproximacióna Internet
  •  El protocolo TCP/IP proporciona laestructura básica del software parala transmisión de datos entreordenadores, ejemplo de direcciónIP  66.34.237.94
  •  INTERNET EXPLORER MOZILLA FIREFOX GOOGLE CHROME
  •  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
  • Ejemplos de Protocolo ftp  transferencia de archivos telnet  accesos remoto
  •  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.
  •  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
  •  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.
  •  Hay miles de proveedores de dominio yalojamiento Web. Ejemplo : arsys, dhapcenter Hacer prueba, simulacro decontratación de dominio, en ambosproveedores.
  •  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
  •  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.
  •  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.
  •  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.
  •  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
  •  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.
  •  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.
  •  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.
  •  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
  • <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>
  • 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.
  • 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.
  •  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.
  • Google Trends: Probar instalar barra alexa.Alexa
  •  Servicio de Google paraposicionar el establecimientoen Google Maps.
  •  Web que nos ofrece espacio parapoder probar gratuitamente nuestrapágina web. Usando numerosos recursos.