La WEB 2.0

La Web 2.0 es la representación de la evolución de las aplicaciones tradicionales hacia aplicaciones web enfocadas al usuario final. El Web 2.0 es una actitud y no precisamente una tecnología.

La Web 2.0 es la transición que se ha dado de aplicaciones tradicionales hacia aplicaciones que funcionan a través del web enfocadas al usuario final. Se trata de aplicaciones que generen colaboración y de servicios que reemplacen las aplicaciones de escritorio.

Es una etapa que ha definido nuevos proyectos en Internet y está preocupándose por brindar mejores soluciones para el usuario final. Muchos aseguran que hemos reinventado lo que era el Internet, otros hablan de burbujas e inversiones, pero la realidad es que la evolución natural del medio realmente ha propuesto cosas más interesantes como lo analizamos diariamente en las notas de Actualidad.

Y es que cuando el web inició, nos encontrábamos en un entorno estático, con páginas en HTML que sufrían pocas actualizaciones y no tenían interacción con el usuario.

Pero para entender de donde viene el término de Web 2.0 tenemos que remontarnos al momento en que Dale Dougherty de O’Reilly Media utilizó este término en una conferencia en la que compartió una lluvia de ideas junto a Craig Cline de MediaLive. En dicho evento se hablaba del renacimiento y evolución de la web.

Constantemente estaban surgiendo nuevas aplicaciones y sitios con sorprendentes funcionalidades. Y así se dio la pauta para la Web 2.0 conference que arranca en el 2004 y hoy en día se realiza anualmente en San Francisco, con eventos adicionales utilizando la marca en otros países.

En la charla inicial del Web Conference se habló de los principios que tenían las aplicaciones Web 2.0:

• La web es la plataforma




• La información es lo que mueve al Internet




• Efectos de la red movidos por una arquitectura de participación.




• La innovación surge de características distribuidas por desarrolladores independientes.




• El fin del círculo de adopción de software pues tenemos servicios en beta perpetuo

La Web 2.0 con ejemplos

Entender la evolución que ha llegado con la Web 2.0 puede realizarse con ejemplos, con proyectos. Podemos comparar servicios web que marcan claramente la evolución hacia el Web 2.0 con una nueva forma de hacer las cosas:

• Web 1.0 > Web 2.0

• Doubleclick –> Google AdSense (Servicios Publicidad)

• Ofoto –> Flickr (Comunidades fotográficas)

• Akamai –> BitTorrent (Distribución de contenidos)

• mp3.com –> Napster (Descargas de música)

• Britannica Online –> Wikipedia (Enciclopedias)

• Sitios personales –> Blogs (Páginas personales)

• Especulación con dominios –> Optimización en motores de búsqueda SEO

• Páginas vistas –> Costo por click

• CMSs –> Wikis (Administradores de contenidos)

• Categorías/Directorios –> Tags

¿Qué tecnologías apoyan a la Web 2.0?

El Web 2.0 no significa precisamente que existe una receta para que todas nuestras aplicaciones web entren en este esquema. Sin embargo, existen varias tecnologías que están utilizándose actualmente y que deberíamos de examinar con más cuidado en busca de seguir evolucionando junto al web.

Tecnologías que dan vida a un proyecto Web 2.0:

• Transformar software de escritorio hacia la plataforma del web.



• Respeto a los estándares como el XHTML.



• Separación de contenido del diseño con uso de hojas de estilo.



• Sindicación de contenidos.



• Ajax (javascript ascincrónico y xml).



• Uso de Flash, Flex o Lazlo.



• Uso de Ruby on Rails para programar páginas dinámicas.

• Utilización de redes sociales al manejar usuarios y comunidades.

• Dar control total a los usuarios en el manejo de su información.

• Proveer APis o XML para que las aplicaciones puedan ser manipuladas por otros.

• Facilitar el posicionamiento con URL sencillos.
  

¿En qué nos sirve la Web 2.0?

El uso de el término de Web 2.0 está de moda, dándole mucho peso a una tendencia que ha estado presente desde hace algún tiempo. En Internet las especulaciones han sido causantes de grandes burbujas tecnológicas y han hecho fracasar a muchos proyectos.

Además, nuestros proyectos tienen que renovarse y evolucionar. El Web 2.0 no es precisamente una tecnología, sino es la actitud con la que debemos trabajar para desarrollar en Internet. Tal vez allí está la reflexión más importante del Web 2.0.Yo ya estoy trabajando en renovar y mejorar algunos proyectos, no por que busque etiquetarlos con nuevas versiones, sino por que creo firmemente que la única constante debe ser el cambio, y en Internet, el cambio debe de estar presente más frecuentemente.

ELEMENTOS DE RED

Asymmetric Digital Subscriber Line: ADSL

ADSL son las siglas de Asymmetric Digital Subscriber Line ("Línea de Suscripción Digital Asimétrica"). ADSL es un tipo de línea DSL. Consiste en una transmisión de datos digitales (la transmisión es analógica) apoyada en el par simétrico de cobre que lleva la línea telefónica convencional o línea de abonado, siempre y cuando la longitud de línea no supere los 5,5 km medidos desde la Central Telefónica, o no haya otros servicios por el mismo cable que puedan interferir.

Es una tecnología de acceso a Internet de banda ancha, lo que implica una velocidad superior a una conexión tradicional por módem en la transferencia de datos. Esto se consigue mediante una modulación de las señales de datos en una banda de frecuencias más alta que la utilizada en las conversaciones telefónicas convencionales (300-3800 Hz), función que realiza el Router ADSL. Para evitar distorsiones en las señales transmitidas, es necesaria la instalación de un filtro (llamado splitter o discriminador) que se encarga de separar la señal telefónica convencional de las señales moduladas de la conexión mediante ADSL.

Concentrador: Hub


Un concentrador o hub es un dispositivo que permite centralizar el cableado de una red y poder ampliarla. Esto significa que dicho dispositivo recibe una señal y repite esta señal emitiéndola por sus diferentes puertos.

Un concentrador funciona repitiendo cada paquete de datos en cada uno de los puertos con los que cuenta, excepto en el que ha recibido el paquete, de forma que todos los puntos tienen acceso a los datos. También se encarga de enviar una señal de choque a todos los puertos si detecta una colisión. Son la base para las redes de topología tipo estrella. Como alternativa existen los sistemas en los que los ordenadores están conectados en serie, es decir, a una línea que une varios o todos los ordenadores entre sí, antes de llegar al ordenador central. Llamado también repetidor multipuerto, existen 3 clases.

Pasivo: No necesita energía eléctrica. Se dedica a la interconexion.
Activo: Necesita alimentación. Además de concentrar el cableado, regeneran la señal, eliminan el ruido y amplifican la señal
Inteligente: También llamados smart hubs son hubs activos que incluyen microprocesador.

Enrutador: Router

El enrutador (calco del inglés router), direccionador, ruteador o encaminador es un dispositivo de hardware para interconexión de red de ordenadores que opera en la capa tres (nivel de red). Un enrutador es un dispositivo para la interconexión de redes informáticas que permite asegurar el enrutamiento de paquetes entre redes o determinar la ruta que debe tomar el paquete de datos.

Los enrutadores pueden proporcionar conectividad dentro de las empresas, entre las empresas e Internet, y en el interior de proveedores de servicios de Internet (ISP). Los enrutadores más grandes (por ejemplo, el CRS-1 de Cisco o el Juniper T1600) interconectan ISPs, se utilizan dentro de los ISPs, o pueden ser utilizados en grandes redes de empresas.
Proveedor Edge Router: Situado en el borde de una red ISP, habla BGP externo(eBGP)a un destinatario (sS]].

Clasificación de redes por ubicación:

¿Qué es una Intranet?

Una Intranet es una red de ordenadores privada basada en los estándares de Internet.Las Intranets utilizan tecnologías de Internet para enlazar los recursos informativos de una organización, desde documentos de texto a documentos multimedia, desde bases de datos legales a sistemas de gestión de documentos. Las Intranets pueden incluir sistemas de seguridad para la red, tablones de anuncios y motores de búsqueda.Una Intranet puede extenderse a través de Internet. Esto se hace generalmente usando una red privada virtual (VPN).

¿Que es una Extranet?

Una Extranet es una Intranet que se extiende más allá de los límites físicos de una corporación.Las Extranets dan acceso a vendedores, proveedores y distribuidores a la Intranet de una compañía. Las compañías los incluyen para facilitar la transferencia de información.

¿Qué es Internet?

Podemos definir a Internet como una "red de redes", es decir, una red que no sólo interconecta computadoras, sino que interconecta redes de computadoras entre sí. Una red de computadoras es un conjunto de máquinas que se comunican a través de algún medio (cable coaxial, fibra óptica, radiofrecuencia, líneas telefónicas, etc.) con el objeto de compartir recursos.De esta manera, Internet sirve de enlace entre redes más pequeñas y permite ampliar su cobertura al hacerlas parte de una "red global". Esta red global tiene la característica de que utiliza un lenguaje común que garantiza la intercomunicación de los diferentes participantes; este lenguaje común o protocolo (un protocolo es el lenguaje que utilizan las computadoras al compartir recursos) se conoce como TCP/IP.Así pues, Internet es la "red de redes" que utiliza TCP/IP como su protocolo de comunicación.Internet es un acrónimo de INTERconected NETworks (Redes interconectadas).Para otros, Internet es un acrónimo del inglés INTERnational NET, que traducido al español sería Red Mundial.

UNIDAD II: REDES

¿QU ES UNA RED?

Es un conjunto de equipos (computadoras y/o dispositivos) conectados por medio de cables, señales, ondas o cualquier otro método de transporte de datos, que comparten información (archivos), recursos (CD-ROM, impresoras, etc.), servicios (acceso a internet, e-mail, chat, juegos), etc. incrementando la eficiencia y productividad de las personas.

*TIPOS DE RED

Red de área Personal (PAN): (Personal Area Network) es una red de ordenadores usada para la comunicación entre los dispositivos de la computadora (teléfonos incluyendo las ayudantes digitales personales) cerca de una persona. Los dispositivos pueden o no pueden pertenecer a la persona en cuestión. El alcance de una PAN es típicamente algunos metros. Las PAN se pueden utilizar para la comunicación entre los dispositivos personales de ellos mismos (comunicación del intrapersonal), o para conectar con una red de alto nivel y el Internet (un up link). Las redes personales del área se pueden conectar con cables con los buses de la computadora tales como USB y FireWire. Una red personal sin hilos del área (WPAN) se puede también hacer posible con tecnologías de red tales como IrDA y Bluetooth.

Red de área local (LAN): una red que se limita a un área especial relativamente pequeña tal como un cuarto, un solo edificio, una nave, o un avión. Las redes de área local a veces se llaman una sola red de la localización. Para los propósitos administrativos, LAN’s grande se divide generalmente en segmentos lógicos más pequeños llamados los Workgroups. Un Workgroups es un grupo de las computadoras que comparten un sistema común de recursos dentro de un LAN.

Red de área metropolitana (MAN): una red que conecta las redes de un área dos o más locales juntos pero no extiende más allá de los límites de la ciudad inmediata, o del área metropolitana. Las rebajadoras múltiples, los interruptores y los cubos están conectados para crear a una MAN.

Red de área amplia (WAN): es una red de comunicaciones de datos que cubre un área geográfica relativamente amplia y que utiliza a menudo las instalaciones de transmisión proporcionadas por los portadores comunes, tales como compañías del teléfono. Las tecnologías WAN funcionan generalmente en las tres capas más bajas del Modelo de referencia OSI: la capa física, la capa de transmisión de datos, y la capa de red.

*MEDIOS DE TRNSMICION

Cable de par trenzado: Formado por dos cables enrollados. Se emplea en telefonía y en las redes de ordenadores (conectores RJ45)

Cable coaxial: Cable de cobre rodeado por una capa de material aislante. Esta capa, esta rodeada por una malla metálica que ayuda a reducir las interferencias.




Fibra óptica: Consiste en un núcleo y filamento, de vidrio o de plástico, con propiedades ópticas diferentes.Las señales que viajan por ellos son luminosas y proceden de un transmisor, situado al comienzo del circuito, que se encarga de convertir las señales eléctricas en pulsos de luz.

*TOPOLOGIA

La topología de una red de cable coaxial es una línea, una cadena de Computadores unidos a un único cable mediante unas piezas en forma de T que salen de éste. Si el cable se rompe se interrumpe la comunicación en toda la red, lo cual no ocurre si lo que se ha desconectado es sólo el extremo de la T que une al computador con el cable, en cuyo caso sólo ese Computador pierde la comunicación con la red.

Topología de anillo: Una topología de anillo se compone de un solo anillo cerrado formado por nodos y enlaces, en el que cada nodo está conectado solamente con los dos nodos adyacentes.

Ventajas: Simplicidad de arquitectura.Facilidad de configuración.Facilidad de fluidez de datos

Desventajas: Longitudes de canales limitadas.El canal usualmente degradará a medida que la red crece.Lentitud en la transferencia de datos.

Topología en estrella: La topología en estrella tiene un nodo central desde el que se irradian todos los enlaces hacia los demás nodos. Por el nodo central, generalmente ocupado por un hub, pasa toda la información que circula por la red.La ventaja principal es que permite que todos los nodos se comuniquen entre sí de manera conveniente. La desventaja principal es que si el nodo central falla, toda la red se desconecta.

Ventajas: Tiene los medios para prevenir problemas.Si una PC se desconecta o se rompe el cable solo queda fuera de la red esa PC.Fácil de agregar, reconfigurar arquitectura PC.Fácil de prevenir daños o conflictos.Permite que todos los nodos se comuniquen entre sí de manera conveniente.El mantenimiento resulta mas económico y fácil que la topología bus

Desventajas: Si el nodo central falla, toda la red se desconecta.Es costosa, ya que requiere más cable que las topologías bus o anillo.El cable viaja por separado del hub a cada computadora

Topología en árbol: La topología en árbol es similar a la topología en estrella extendida, salvo en que no tiene un nodo central. En cambio, un nodo de enlace troncal, generalmente ocupado por un hub o switch, desde el que se ramifican los demás nodos.El enlace troncal es un cable con varias capas de ramificaciones, y el flujo de información es jerárquico. Conectado en el otro extremo al enlace troncal generalmente se encuentra.

Ventajas de Topología de Árbol: • El Hub central al retransmitir las señales amplifica la potencia e incrementa la distancia a la que puede viajar la señal.• Se permite conectar más dispositivos gracias a la inclusión de concentradores secundarios.• Permite priorizar y aislar las comunicaciones de distintas computadoras.• Cableado punto a punto para segmentos individuales.• Soportado por multitud de vendedores de software y de hardware.

Desventajas de Topología de Árbol: • Se requiere más cable.• La medida de cada segmento viene determinada por el tipo de cable utilizado.• Si se viene abajo el segmento principal todo el segmento se viene abajo con él.• Es más difícil su configuración.

Red en bus: Red cuya topología se caracteriza por tener un único canal de comunicaciones (denominado bus, troncal o backbone) al cual se conectan los diferentes dispositivos. De esta forma todos los dispositivos comparten el mismo canal para comunicarse entre sí.

Ventajas: Facilidad de implementación y crecimiento.Simplicidad en la arquitectura.

Desventajas: Longitudes de canal limitadas.Un problema en el canal usualmente degrada toda la red.El desempeño se disminuye a medida que la red crece.El canal requiere ser correctamente cerrado (caminos cerrados).Altas pérdidas en la transmisión debido a colisiones entre mensajes.
Es una red que ocupa mucho espacio.

Páginas básicas

Partiendo de la página que hemos creado, vamos a crear un par de páginas sencillas. La idea es tener páginas con algunos elementos, como texto, para poder comenzar con el diseño.

Otra opción podrá ser crear la páginas con un texto de prueba. En este caso, como ya sabemos lo que queremos poner podemos adelantar trabajo.

Como básicamente se trata de introducir texto, lo haremos mucho más rápido utilizando el editor de KompoZer.

Vamos a comenzar por la página index.html.

Como tenemos una página que nos sirve de plantilla (base.html) vamos a utilizarla. La abrimos, y en menú Archivo seleccionamos Guardar como, y le damos el nombre index.html. De este modo tenemos una página con la misma estructura que la página base. Sólo nos queda cambiar el contenido de la división central.

Comenzamos por el título de la sección. Como estamos en la página inicial, y trata de ser una web amistosa, vamos a darle la bienvenida al usuario. Por ejemplo, lo cambiamos por ¡Bienvenidos a la web de Floramics!

Al estar en la página inicial, vamos describir brevemente qué puede encontrar el usuario en nuestra página. Recuerda que la idea principal es que los usuarios visiten nuestra galería de fotos, que pensábamos dividir en cuatro categorías. Por lo que sería una buena idea poner enlaces directamente a esas categorías, así remarcamos que es el contenido principal del sitio. De momento, crearemos el enlace, utilizando una lista como con el menú. Como aún no sabemos que categorías tendremos, vamos a dejar el enlace provisional, enlazando sólo con # (Enlace).

Por ejemplo, esto es lo que hemos introducido en el contenido del index.html, viéndolo en el modo de edición de etiquetas de KompoZer:

















La otra página que vamos a crear es nosotros.html. En ella hablaremos un poco de nuestra asociación.

Como antes, partimos del archivo base.html, que guardaremos como nosotros.html, y cambiaremos el contenido:














Una vez editado el contenido, guarda la página.

Ahora ya puedes probar los enlaces del menú, para ir de inicio a nosotros y viceversa.

Estructura de la página

En nuestro ejemplo, como norma general todas las páginas mantendrán la misma estructura. Por ejemplo, tendrán el mismo logo o título, el sistema de navegación en la misma posición, el mismo pie, etc. Sólo iremos cambiando el contenido.

Una excepción a esto puede ser la página de inicio. Pensemos que esta página es la presentación de nuestro sitio, y el visitante se hará una idea de qué puede encontrar en nuestro sitio a partir de ella. Por eso no es extraño que tenga más enlaces que el resto de páginas. Esto, como siempre, dependerá del tamaño del sitio.

Pero pensando en el resto de páginas, no es una mala idea comenzar creando una página base, con esos elementos comunes que podamos utilizar a modo de plantilla.

Vamos a ver qué elementos necesitamos en nuestro ejemplo:

• Un título, para lo que podemos utilizar un encabezado h1. En el se mostrará el nombre de la asociación, Floramics.
• Un menú. En este caso pondremos un enlace a las siguientes secciones:
  • Inicio (index.html)
  • Flores (flores/index.html)
  • Nosotros (nosotros.html)
  • Contacto (contacto.html)
  • Noticias (noticias.html)
  Como son sólo cinco elementos, vamos a ponerlo en la parte superior, ya que en un lateral desperdiciaríamos espacio.
• Un área para el contenido. Cambiará en cada página, pero tendrá un título para la sección.
• El pie, por ejemplo para poner el copyright de la página. Podemos utilizar un elemento de bloque como un párrafo o un div. También existe una etiqueta específica, <address>utilizada para contener información sobre el autor de la página.

Para que nos quede mejor estructurada la página, vamos a utilizar divisiones en las tres secciones diferenciadas:

Encabezado
Título y menú

Contenido

Pie

De esta manera, entre páginas prácticamente sólo cambiaremos el contenido.

Con esta estructura en mente, vamos a escribir el código:

Creamos una nueva página, con el Doctype, head, body, etc... como ya hemos visto.

Dentro, creamos tres divisiones.

• En la primera, colocamos un

  con el nombre de la asociación. También una

  , con un elemento y un enlace para cada una de las secciones.
  • La división central la dejamos en blanco, ya que será la que iremos cambiando.
  • En la tercera división, introducimos el texto del pie. Por ejemplo, © Todos los derechos reservados.

  Y no hemos de olvidar, que en un futuro contendrá un enlace a la hoja de estilos. Por lo que es conveniente que lo pongamos ya, decidiendo un nombre para la hoja, por ejemploestilo.css.

  Una vez creada, guardamos la página comobase.html.

  La página tiene pocos elementos, y te recomendamos que intentes hacerla escribiendo directamente el código fuente. De todas formas, puedes seguir esteejercicio paso a pasopara realizar la página con KompoZer, y comprobar el código generado.

  Una vez creada, visualiza la página con un navegador. Puedes pulsar F5desde KompoZer o hacer doble clic directamente sobre el archivo.

Estructura del menú

El uso de menús es muy habitual en las páginas web. Un menú no es más que una lista de enlaces relativos a nuestro sitio, llamados elementos del menú.

• Por lo general el menú se suele colocar en la parte superior de la página, junto al logo o debajo de él, o en un lateral, normalmente el izquierdo.

• El menú no debe de ser demasiado extenso. En un sitio grande no podemos pretender enlazar con todas las páginas, y no sería útil hacer buscar al usuario entre cincuenta enlaces.

• Normalmente, aparecerán las secciones de nuestro sitio web. Y por ejemplo, podemos utilizar diversos métodos para que el usuario pueda expandir cada sección y ver enlaces a los apartados de la sección, o utilizar menús desplegables. También podemos mostrar los enlaces a las distintas partes de la sección en que se encuentra el usuario, ya que si está en esa sección es probable que le interesen los apartados relacionados.

• Los elementos del menú deben de ser descriptivos. Por ejemplo, no es útil poner una imagen, por bonita que sea, si puede que el usuario no entienda qué significa o a dónde lleva. O que para saberlo tenga que poner el cursor sobre él.

• El menú debe de ser ligero, y no ocupar demasiado espacio, ya que se repetirá en todas las páginas.

En lo que se refiere al código, el menú suele tener estos elementos:

• Los menús se suelen basar en listas
  . Dentro de cada elemento de la lista, colocaremos un enlace. Si no sabes qué son las listas, puedes verlo en este básico .

• El aspecto del menú se consigue por CSS.

• Suelen tener código javascript, por ejemplo para mostrarlo, producir efectos más o menos avanzados, o en vez de los enlaces.

Por lo tanto, comenzaremos creando nuestro menú como una lista, a la que más adelante le iremos dando estilo hasta convertirla en un atractivo elemento de navegación.

Navegación

Antes de comenzar a definir la navegación, debemos de tener una idea de cómo va a ser el sitio web, es decir, debemos tener una idea formada de la estructura y extensión del sitio. Así podremos decidir qué sistema de navegación es el más adecuado.

Si construimos un sitio sobre la marcha, sin planificación, según vaya creciendo, se irá complicando la navegación y al final no nos quedará más remedio que hacer modificaciones que resultarán más costosas que haberlo pensado un poco mejor con anterioridad.

Existe una regla que dice que un usuario no debería de necesitar más de tres clics para llegar a la página que busca. Por eso lo primero que hemos de pensar es en facilitar a navegación.

El usuario debe de ser capaz de moverse de forma intuitiva por nuestro sitio sin perderse, para ello:

• Debe de saber dónde está. Debemos de dejarle claro en qué parte del sitio se encuentra. Para esto es muy útil el título de la página y utilizar un encabezado que identifique la sección. También debe de distinguir si sigue en nuestro sitio, o si ha pulsado un enlace que le lleve a un sitio distinto.

• Debe de saber dónde ha estado. Debemos de evitar que el usuario pase una y otra vez por la misma página para buscar algo. Por ejemplo, distinguiendo los enlaces ya visitados.

• Debe de saber dónde puede ir. Una página web se basa en enlaces, y estos deben de ser claramente identificables. Además, no deben de ofrecer dudas de a dónde llevan, por ejemplo con nombres de páginas entendibles, que se muestran en la barra de estado, o con textos de información emergentes.

• Debe de poder seguir navegando. No le enviaremos a una página sin enlaces, desde la que no pueda continuar recorriendo el sitio. Piensa que puede acceder directamente a esa página, por ejemplo a través de un buscador, por lo que no podría utilizar ni el botón Atrás del navegador.

La forma de navegar por nuestro sitio, debe de ser constante. Así, con visitar unas pocas páginas aprenderá a moverse por nuestro sitio, y le resultará más cómodo.

La forma más habitual de solucionar todo esto es utilizar un menú, que se mostrará en todas las páginas.

Organizar los archivos

El sitio web se encuentra alojado en un servidor, que no es más que un ordenador conectado a internet, capaz de "dar" archivos a quien se lo solicita.

Por lo tanto, cuando accedemos a un sitio web, realmente accedemos a una carpeta de ese ordenador, que funciona como raíz del sitio. Internamente, dentro de esa carpeta, encontramos archivos y subcarpetas que nos permiten organizar el sitio, igual que organizamos los documentos en las carpetas de nuestro equipo.

Entonces ¿cómo organizamos los archivos del sitio? No existe una regla exacta, ya que depende de muchos factores: número de páginas, cómo queremos navegar entre ellas, cómo se organiza el contenido, etc.

Pero por lo general, y sin entrar en mucha teoría, tendremos en cuenta una serie de cosas:

En la raíz del sitio, tendremos como mínimo la página de inicio, a la que llamaremos index.html (o .htm). Esto se debe a que cuando a un navegador le indicamos que abra una carpeta, busca el archivo index de la misma.

Organizaremos los tipos de archivo en carpetas. Por ejemplo, una carpeta para las imágenes que forman parte del diseño de la página. Si a parte tenemos fotografías de una galería, o de productos, es mejor ponerlas en otra carpeta, ya que no tienen relación con el diseño. Otra carpeta para los archivos javascript, etc.

Si tenemos secciones claramente definidas, podemos guardar sus páginas en subcarpetas. Por ejemplo, en aulaclic.es tenemos una carpeta para cada curso. Recuerda que es conveniente incluir en cada carpeta que contenga páginas htm, un archivo index.html, más que nada para que no se produzca un error si se accede directamente a la carpeta.

Por otro lado, daremos un nombre descriptivo a los archivos. Nos resultará mucho más sencillo si nuestros archivos se llaman contacto.html y noticias.html que si los llamamos pagina_1.html y pagina_2.html. A no ser que se trate de páginas del mismo tipo en las que es muy importante el orden, como páginas de un manual.

Es conveniente planificar cómo va a ser el sitio, y partir de las carpetas iniciales. Lógicamente, no vamos a tenerlo todo en cuenta, por lo que a medida que vaya creciendo nuestro sitio, iremos creando las carpetas que nos hagan falta.

En nuestro ejemplo pensamos crear un sitio pequeño, de menos de 10 páginas.

Primero crearemos el sitio en nuestro equipo, y cuando lo acabemos ya los subiremos a un servidor Web.

Comenzamos por crear la carpeta raíz. En este caso, la hemos llamado sitio_flores, y la hemos ubicado en la carpeta de ejercicios del curso.

¿Qué tendremos dentro de esta carpeta? A priori, contendrá las páginas, entre las que incluimos un index. También tendremos una hoja de estilo, e imágenes del diseño de la página, como logos, imágenes para el fondo, etc. Por lo que será mejor si agrupamos estas imágenes en una carpeta, que podemos llamar imagenes (omitimos el acento porque no conviene incluir caracteres especiales en los nombres de archivos y carpetas). Si más adelante tenemos otros elementos, como archivos javascript, archivos para descargar, etc, ya nos preocuparemos por crear más carpetas para ellos.

Vamos a echar un vistazo a las secciones que queremos crear:

• Una sección sobre las flores, con fotografías.
  


• Una página sobre la asociación.
  


• Un formulario de contacto.
  


• Una página con noticias sobre el tema.

A excepción de la sección de flores, las otras serán páginas simples, que podemos dejar en la carpeta raíz.

Pensemos en la sección de flores. Queremos mostrar una amplia galería de fotografías. Para que el visitante pueda encontrar una flor en concreto, es importante que las clasifiquemos. Por eso crearemos in índice alfabético con las flores. En otra página, mostraremos las fotos de las flores. Como no conviene crear una página muy grande, con muchas fotografías, la dividiremos en las distintas categorías, que en principio serán cuatro.

En resumen, para la sección de flores, necesitamos 5 páginas y fotografías, que estarán mejor recogidas en una carpeta, que podemos llamar fotos. No son muchos elementos, pero podemos pensar en agruparlos todos dentro de una carpeta. Esto se hace necesario cuando hay muchos archivos, pero con tan pocos puede resultar molesto, porque tendremos que tenerlo en cuenta a la hora de crear enlaces o utilizar las imágenes del diseño. De todas formas, como el fin de este curso es didáctico, vamos a crear una subcarpeta para esta sección, a la que llamaremos flores, para aprender así a manejarlas.

Por lo tanto, la estructura de archivos que planteamos para nuestro sitio quedaría así:

Comenzaremos por crear las carpetas, y si ya tenemos las imágenes, guardarlas en ellas. Las páginas y hoja de estilos, las iremos creando cuando nos hagan falta.

KompoZer dispone de un administrador de sitios, que nos permite ver los archivos del sitio y abrirlos directamente. En este tema avanzado te explicamos cómo hacerlo.

La temática del sitio

La idea de crear un sitio web nace porque tenemos algo que comunicar con el mundo. Y un tema que puede resultar interesante. Porque, por ejemplo, aunque crear una página Web con nuestros hobbies y aventuras cotidianas puede ser un buen ejercicio como aprendizaje, a la hora de la verdad a poca gente le resultará interesante leerlo. Para esto, obtendremos mejores resultados creándonos una cuenta en una de las numerosas redes sociales.

El tema también debe de ser concreto. Si dominamos la informática y la jardinería, no resultará serio si creamos un sitio en el que encontremos las dos cosas. Es mejor crear un sitio independiente para cada una.

No sólo debemos de elegir un tema que resulte atractivo para un grupo de usuarios, si no que debemos de tener información sobre él. No tiene demasiado sentido crear un sitio para escribir un sólo artículo de media página.

El tema elegido determinará el diseño de la página. No es lo mismo si pensamos mostrar fotos de animales para los amantes de las mascotas, una web para niños, una empresa de informática, etc.

Una vez elegido la temática, debemos de distinguir cuales son las categorías en las que vamos a dividir nuestro sitio. Estas serán más genéricas o menos, dependiendo del tamaño del sitio.

En nuestro ejemplo vamos a crear la web de una asociación de aficionados a las flores. Principalmente, a esta ficticia asociación le interesa exponer sus fotografías de flores en la web, pero también crearemos las páginas que den a conocer la asociación y que permitan ponerse en contacto con ella.

¿Qué es un sitio web?

• Un sitio web o website, es un conjunto de páginas web, más o menos extenso, agrupadas bajo un dominio, como puede ser www.aulaclic.es o www.elpais.com.

• Lo normal, es que el sitio web parta desde una página inicial, o home, desde la que podemos acceder, de forma jerárquica a todo el contenido del sitio, a través de hiperenlaces. A su vez, podemos encontrar enlaces hacia otros sitios distintos, ya que cada sitio tiene una URL única que nos permite acceder a él.

• En conjunto de los sitios publicados en Internet forman la WEB o WWW.

• El contenido de las páginas del sitio, puede estar escrito directamente en HTML. Esto genera un sitio estático, que sólo recibe actualizaciones de vez en cuando, ya que hay que hacerlas manualmente sobre el código.

• En cambio, existen otros lenguajes, como PHP, ASP o JSP que generan en HTML a partir de datos, como contenidos de bases de datos, datos introducidos por el usuario, información global, etc. Esto origina sitios dinámicos, ya que los cambios se producen frecuentemente y son generados desde la propia página. Por ejemplo, una página que muestra la fecha del día actual sería un contenido dinámico. Otro ejemplo sería un foro.

Elementos Entorno Kompozer

El entorno de KompoZer

El aspecto general es el siguiente:

En la parte superior encontramos la barra de título, donde se ve el título de la hoja.

Debajo, encontramos una barra de menús, desde la que podemos acceder a todas las opciones del programa. Las opciones más comunes, como Guardar, Nuevo, o insertar Enlaces o Imágenes las encontramos en la llamada barra de redacción:

Debajo de esta barra, encontramos las barras de formato, pensadas para formatear el documento.

Normalmente no utilizaremos estos formatos, ya que todo lo referente al estilo lo trabajaremos directamente sobre la hoja de estilos. Pero si encontramos dos desplegables muy interesantes. El primero, que en la imagen muestra Texto en el cuerpo, nos permite elegir el elemento que contienen el texto que escribimos, por ejemplo un encabezado o un párrafo. El segundo, que en la imagen muestra (sin clase) nos permite asignar una clase al texto. Si seleccionamos un fragmento de texto, y le asignamos una clase, encerrará el texto en una etiqueta con la clase dada.

En la parte central, encontramos el área de edición, donde podemos editar el contenido de nuestra página. Podemos tener varias abiertas en distintas pestañas.

La forma en que podemos ver y trabajar con la página, depende del modo de edición, de las cuatros disponibles en la parte inferior:

*Normal. Con este modo, vemos el diseño de la página como se mostraría en un navegador. Aunque aparecen algunas marcas más, como información de la ubicación de algunas etiquetas especiales, como comentarios y scripts, y líneas rojas punteadas en los bordes de tablas y divisiones.

*El modo Etiquetas HTML funciona como el anterior, pero mostrando en cada etiqueta un cuadradito amarillo con su identificador.

*El modo Código fuente nos permite trabajar directamente sobre el código fuente de la página.

*El modo Vista preliminar, muestra la página como se vería en un navegador, sin ninguna marca adicional.

También podemos ver el resultado en nuestro navegador predeterminado pulsando la tecla F5.

En la parte inferior, en la barra de estado, encontramos una barra que muestra la jerarquía de etiquetas que hay sobre el lugar donde está el punto de inserción.

Es decir, lo que aquí vemos son todas las etiquetas que contienen a lo que tenemos seleccionado, desde la más inmediata a la derecha del todo, a la primera, que suele ser el .

Esto nos permite seleccionar cualquier etiqueta y todo su contenido sólo haciendo clic sobre ella.

Si hacemos clic derecho sobre una etiqueta, aparece un menú con opciones muy útiles:

*Seleccionar hace lo mismo que la hacer clic sobre la etiqueta

*Eliminar etiqueta borra la etiqueta, pero no su contenido. Muy útil, por ejemplo, para quitar un span

*Cambiar etiqueta, sustituye una etiqueta por otra sin lateral si contenido. Por ejemplo, podemos cambiar un párrafo por un encabezado

*ID muestra una lista de los ID que utilicemos en nuestros estilos, y nos permite asignárselos a un elemento.

*Clases, como con ID, muestra las clases disponibles y nos permite asignarlas al elemento. Además, nos muestra la clase ya asignada a un elemento, pudiendo quitarla.

*Estilos en línea. Nos permite definir el estilo del elemento, para lo que creará el atributo style.

*Propiedades avanzadas. Accedemos a una ventana en la que podemos ver todos los atributos del elemento y sus valores, editarlos, eliminarlos o añadir nuevos. También podremos definir el estilo incrustado.

Podemos mostrar u ocultar todas estas barras a través del menú Ver → Mostrar / Ocultar.

Imagenes ISO

Qué es un archivo ó imagen ISO?

Imagen ISO es un archivo donde se almacena una copia o imagen exacta de un sistema de ficheros, normalmente de un disco compacto (como un CD o un DVD). Se rige por el estándar ISO 9660 de la Organización Internacional para la Normalización. (fuente: WIKIPEDIA)


Qué podemos qué hacer con una imagen ISO?

Podemos hacer dos cosas quemar (grabar) en un CD/DVD para tener nuestro “lo que sea” a buen recaudo y portable ó guardarlo en nuestro disco duro y cuando lo necesitemos montarlo en una Unidad Virtual para usarlo.


Unidad Virtual es un espacio creado por un programa dentro de nuestro Disco Duro qué emula a un lector CD/DVD, cuando montamos un ISO en la Unidad Virtual es como si metiéramos un disco original en el Lector/Grabador de nuestro PC.


Existen varios programas con los que podemos crear una Unidad Virtual: Alcohol 120%, UltraISO, Daemon Tools, Nero, PowerISO, etc …, dependiendo del programa también nos sirven para crear, editar, convertir y grabar archivos ISO.


Al mismo tiempo cada programa tiene su propio formato nativo de imagen que se pueden considerar y se manejan como ISO.



• NRG: Es el formato del programa Nero
• CIF: Es el formato del programa Adaptec Easy CD Creator.
• CCD: Es el formato del programa Clone CD.
• BWI: Es el formato del programa BlindWrite.
• MDF: Es el formato del programa Alcohol 120%.
• CSO: Es el formato del programa Daxter Creator. También conocido como Imagen CISO o Compressed ISO.
• UIF: Es el formato del programa MagicISO. Es el acrónimo de Universal Image File.
• ISZ: Es el formato del programa UltraISO (ISo Zipped).
• DAA: Es el formato del programa PowerISO



Cómo decía en otro tutorial los archivos ISO pueden tener diferente aspecto (icono que lo representa) según al programa que estén asociados, pero se identifican fácilmente por su extensión “.iso"

Contenido tematico

Unidad I Diseño web



1.1- Introducción
1.1.1- Puesta en común
1.1.2- Alternativas
1.1.3- Url
1.1.4- Paginas y sitios web
1.2- Html básico
1.2.1- Etiquetas
1.2.2- Etructura básica de la página
1.2.3- Estructura del texto
1.2.4- Imágenes
1.2.5- Direcciones absolutas y relativas
1.2.6- Enlaces
1.2.7- Divisiones o capas
1.3- Editor web
1.3.1- Eleccion e instalacion del editor
1.3.2- Entorno del editor
1.3.3- Opciones de configuración
1.3.4- Preparacion del sitio web
1.3.5- Diseño y usabilidad
1.3.6- Menús y formularios





Fecha de evaluación 28 de febrero



evaluación prácticas 50%

pruebas evaluativas 5%

participación 5%

exámen 40%




Unidad II

2.1- Fundamentos de red
2.1.1- Concepto de red y ventajas
2.1.2- Clasificaciones (tamaño, medio, ancho de banda, ubicación y topología)
2.1.3- Componenetes de red fisica (tarjeta, concentrador, encaminador y conmutador)
2.1.4- Redes wi-fi
2.2- Web 2.0
2.2.1- Introducción
2.2.2- Conversación distribuida y sindicación
2.2.3- Marcadores sociales
2.2.4- Wikis
2.2.5- Podcast
2.2.6- Multimedia
2.3- Seguridad en redes informaticas
2.3.1- Definición
2.3.2- Tipos de seguridad informatica
2.3.3- Amenazas humana
2.3.4- Amenazas lógicas y otras
2.3.5- Medidas preventivas
2.3.6- Bloqueo de ventanas emergentes


Unidad III Sistema operativo para movil y lenguaje phyton

3.1- Sistema operativo para movil
3.2- Instalar aplicación
3.3- Sistema operativa para desarrolladores
3.4- Terminales
3.5- Lenguaje phyton
3.6- Valores y tipos
3.7- Variables
3.8- Nombres de variables
3.9- Palabras reservadas


Prácticas 60%

exámen 40%