 Sesión 1: Introducción y herramientas Presenta: José Miguel Gómez Ingeniero de Sistemas – Universidad de Los Andes

Plan de trabajo  Introducción al curso “Tecnologías Para Desarrollo Web”  Herramientas a usar en el curso  Introducción a redes, esquema cliente-servidor, funcionamiento de paginas web.  Modelo DOM  Introducción a HTML básico

Tecnologías para desarrollo web  Masificar el uso de internet: generación de empleo. Además de masificar el uso, vamos a CREAR internet.  Toda la industria de productos y servicios esta volcada o eventualmente se va a volcar a canales de ventas basados en TIC (Tecnologías de Información Y Comunicaciones)  Las posibilidades de conseguir empleo aumentan, las posibilidades de CREAR empleo son infinitas.

Tecnologías para desarrollo web CREAR  EMPLEO  Mejorar la vida de los demás  Mejorar mi propia vida

Tecnologías para desarrollo web

 En el año 2000, los 500 mas ricos del mundo según FORBES provenían de la industria de productos y servicios, menos del 1% de industrias relacionadas con TIC.  En el ano 2014, ese porcentaje ha aumentado a cerca del 20%, y creciendo!  De esos 20%, la gran mayoría tienen alguna relación con uno o muchos sitios web.

Herramientas GOOGLE (la herramienta mas importante de este curso)  Google es mucho mas que una pagina con una casilla de texto para buscar.  La casilla de texto tiene muchos trucos escondidos  Explotar los trucos de la casilla de Google es la clave del exito

Herramientas GOOGLE (la herramienta mas importante de este curso)  Comillas: busca frases exactas (ej. “por que los sueños sueños son” busca la frase en ese orden exacto y no una pagina con las 4 palabras en alguna parte de su texto)

Herramientas GOOGLE (la herramienta mas importante de este curso)  Site:url obliga a la búsqueda en un sitio web especifico y no en todos los sitios web (ej. site.wikipedia.com computadores para educar)

Herramientas GOOGLE (la herramienta mas importante de este curso)  Cache:url permite visualizar paginas que por algún motivo no funcionan en el momento. Google guarda una copia cercana del sitio para su consulta. (cache:

Herramientas GOOGLE (la herramienta mas importante de este curso)  AND, OR y NOT. Lógica booleana:  Carne AND asada: busca paginas que tengan obligatoriamente ambos términos  Carne OR asada: busca paginas que tengan uno o el otro termino (no los dos)  Carne NOT asada: busca paginas que tengan el termino carne pero elimina aquellos que tienen también el termino asada.

Herramientas GOOGLE (la herramienta mas importante de este curso)  Taller google: “Los zorros del desierto de Sechura aúllan como demonios”  De que libro hace parte la frase?  Escritor del libro  Pagina del libro?

Herramientas Editor de texto: Notepad (bloc de notas) o Notepad++

Herramientas Cliente FTP: FileZilla

Herramientas Servidor Web: WAMP

Herramientas Taller 1: Verificar la instalación de WAMP  Ingresar en su navegador a  Verificar el funcionamiento de la pagina principal de WAMP

Introducción a redes  Las redes permiten la comunicación virtual entre dos o mas equipos. De esta manera, permite que los equipos compartan recursos como archivos, impresoras, unidades…  En redes de computadores, es importante diferenciar entre la red física (cables y dispositivos) y la red virtual. Estos pueden incluso estar combinados entre si.  El tema de redes da para una carrera completa. En esta introducción, solo vamos a aprender lo necesario para nuestro trabajo.

Introducción a redes  estrella anillo árbol

Introducción a redes  La red que mas vamos a ver: CASCADA  La interfaz de red mas común: ETHERNET y WIFI (802.11)  Los dispositivos de red mas comunes: Routers, Switches y tarjetas de red  El protocolo de red mas común: TCP/IP

Introducción a redes SWITCH

Introducción a redes  Cada equipo en una red tiene un identificador (como un numero telefónico) llamado dirección IP.  Cada equipo en la red debe tener una dirección IP diferente.  Las direcciones IP pueden ser asignadas de manera manual o automático.  Puedo asociar un IP a una maquina en especifico a través de la dirección MAC.

Introducción a redes  Taller 2: Verificar la dirección IP de su equipo  Usar la herramienta IPCONFIG aprendida durante el desarrollo del curso  LOCALHOST y

Introducción a redes  IP Interna, red local y esquema de direcciones internas  IP Interna vs IP externa (IP de internet)  Internet, red interna pero de enorme tamaño y con muchos mas equipos  Diferencias entre redes internas e Internet.  Como conecto redes LAN con redes mas grandes e Internet?

Introducción a redes  Taller 2: Extensión. Verificar la dirección IP EXTERNA de su equipo  Usar la herramienta WHATISMYIP

Introducción a redes  Tablas de ruteo: los switch guardan tablas de la ubicación de los IP conocidos y la comparten con otros switches, de esa manera es posible encontrar cualquier IP por mas lejano que se encuentre.  DNS: para evitar tener que acordarse de números complicados, existe un “directorio telefónico” que permite asociar los IP (teléfono) a un nombre (dueño) y de ahí los NOMBRES DE DOMINIO.  Los nombres de dominio como los conocemos no son mas que asociaciones de un nombre a un IP  Los nombres de dominio se comercializan y se administran por una entidad central.

Introducción a redes  Debilidades de IP: la cantidad de direcciones es limitada  Hay muchos equipos conectados, cada día aparecen mas. (teléfonos, tablets…)  Enmascaramiento de IP, sub redes y IPV6

Esquema cliente - servidor  Llamamos cliente-servidor a dos equipos conectados a una misma red. El cliente es quien recibe los datos, el servidor es el que los proporciona.  Pagina web: en su versión mas simple, no es mas que la transferencia de un archivo HTML entre una maquina (servidor) y otra conectada a la misma red (cliente).

Esquema cliente - servidor  Taller 3: cuantos saltos hasta la pagina web?  Usar la herramienta TRACERT  Comparar si hay diferencias entre equipos  Asociar lo anterior con lo aprendido en redes, tablas de enrutamiento y nombres de dominio.

Esquema cliente - servidor  Paginas HTML: Hypertext Markup Language  Se transfieren por el esquema cliente-servidor aprendido  Son archivos planos, pueden abrirse en cualquier editor de texto  Cuando se abren con un navegador web, el navegador puede interpretar el lenguaje.

Modelo DOM  DOM (Document Object Model), define una estructura lógica para un documento.  Aplica a varios tipos de archivo, TeX, XML, HTML  Facilita enormemente la manipulación, búsqueda y modificación de archivos.

Modelo DOM a holamundo b

Modelo DOM  El modelo DOM permite estandarizar los documentos de manera que sea fácil para el código buscar elementos dentro de si mismo  Permite la estandarización de código y por lo tanto garantiza su funcionamiento en cualquier navegador que respete el modelo DOM (en el caso de HTML)  Todo nuestro trabajo sobre HTML se basa en el modelo DOM

Introducción a HTML  HTML: archivos en estructura según el modelo DOM, hechas en un editor plano de texto.  Los NAVEGADORES WEB interpretan las ETIQUETAS del archivo HTML y despliegan la información que se pretende desplegar (no el texto plano).  El estándar lo mantiene una asociación sin animo de lucro llamada W3C.

Introducción a HTML Nuestro primer archivo HTML:  Crear un nuevo archivo en notepad++  Escribir “HOLA MUNDO”  Guardar el archivo como “holamundo.html” (mucho ojo con la extensión del archivo, DEBE ser html o htm) en el escritorio de su equipo  Abrir archivo desde el navegador de su equipo.

Introducción a HTML Nuestro primer archivo HTML:  Crear un nuevo archivo en notepad++  Escribir “HOLA MUNDO”  Guardar el archivo como “holamundo.html” (mucho ojo con la extensión del archivo, DEBE ser html o htm) en el escritorio de su equipo  Abrir archivo desde el navegador de su equipo.

Introducción a HTML Nuestro primer archivo HTML (editar holamundo.html): hola mundo

Introducción a HTML ENCABEZADO Y TITULO (editar holamundo.html): Hola Mundo Hola Mundo

Introducción a HTML PARRAFOS (editar holamundo.html): Hola Mundo Esta es mi primera pagina web Hola Mundo Esta es mi primera pagina web

Introducción a HTML ITALICO, NEGRILLA, SALTO (editar holamundo.html): Hola Mundo Esta es mi primera pagina web Hola de nuevo

Introducción a HTML ENCABEZADOS (editar holamundo.html): Hola Mundo Esta es mi pagina web Hola de nuevo

Introducción a HTML LISTA CON VINETAS (editar holamundo.html): Hola Mundo Esta es mi pagina web Hola de nuevo

Introducción a HTML VINCULOS (editar holamundo.html): Hola Mundo Esta es mi pagina web ESTE ES MI LINK “

Introducción a HTML IMAGENES (editar holamundo.html): Hola Mundo Esta es mi pagina web

Introducción a HTML TABLAS (editar holamundo.html): Hola Mundo Esta es mi pagina web puedo incluir también la etiqueta que es igual a un pero le dice a la tabla explícitamente que esa celda corresponde a un encabezado

Introducción a HTML IDENTIFICADORES (editar holamundo.html): … … Puedo asignarle un ID a CUALQUIER etiqueta HTML

Introducción a HTML FORMULARIOS (editar holamundo.html):

Introducción a HTML FORMULARIOS (editar holamundo.html):

Introducción a HTML FORMULARIOS (editar holamundo.html): Hombre Mujer Indefinido

Introducción a HTML FORMULARIOS (editar holamundo.html): Opcion 1 Opcion 2 Opcion 3