   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
Una Aproximación
    a Internet
   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
 INTERNET EXPLORER
 MOZILLA FIREFOX

 GOOGLE CHROME
   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
Ejemplos de Protocolo
 ftp  transferencia de archivos
 telnet  accesos remoto
   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.
   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
   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.
 Hay miles de proveedores de dominio y
  alojamiento Web.
 Ejemplo : arsys, dhapcenter

 Hacer prueba, simulacro de
  contratación de dominio, en ambos
  proveedores.
   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
   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.
   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.
   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.
   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
   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.
   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.
   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.
   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
<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>
En caso de GOOGLE SITES es más
fácil porque basta con ir a 
ADMINISTRACIÓN DEL SITIO 
general  habilitar analytics y poner
directamente el número de referencia
que nos da analytics para esa página.
Permite a los editores obtener ingresos
mediante la colocación de anuncios en sus
sitios web, ya sean de texto, gráficos o
publicidad interactiva avanzada. Estos
anuncios son administrados y ordenados
por Google en asociación con los
anunciantes de AdWords a través de un
sistema complejo de subasta instantánea.
   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.
Google         Trends:
  Probar   instalar barra alexa.

Alexa
 Servicio de Google para
 posicionar el establecimiento
 en Google Maps.
   Web que nos ofrece espacio para
    poder probar gratuitamente nuestra
    página web.
   Usando numerosos recursos.

Diseño web

  • 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.
  • 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.
     INTERNET EXPLORER MOZILLA FIREFOX  GOOGLE CHROME
  • 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.
    Ejemplos de Protocolo ftp  transferencia de archivos  telnet  accesos remoto
  • 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.
    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.
    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.
     Hay milesde proveedores de dominio y alojamiento Web.  Ejemplo : arsys, dhapcenter  Hacer prueba, simulacro de contratación de dominio, en ambos proveedores.
  • 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.
    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.
    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.
    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.
    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.
    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.
    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.
    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.
    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.
    <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.
    En caso deGOOGLE SITES es más fácil porque basta con ir a  ADMINISTRACIÓN DEL SITIO  general  habilitar analytics y poner directamente el número de referencia que nos da analytics para esa página.
  • 22.
    Permite a loseditores obtener ingresos mediante la colocación de anuncios en sus sitios web, ya sean de texto, gráficos o publicidad interactiva avanzada. Estos anuncios son administrados y ordenados por Google en asociación con los anunciantes de AdWords a través de un sistema complejo de subasta instantánea.
  • 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.
    Google Trends:  Probar instalar barra alexa. Alexa
  • 25.
     Servicio deGoogle para posicionar el establecimiento en Google Maps.
  • 26.
    Web que nos ofrece espacio para poder probar gratuitamente nuestra página web.  Usando numerosos recursos.