Clase sábado - 08 - César Esquivel

Vista previa del material en texto

Funcionamiento de la web:
Clientes y servidores 
A las computadoras conectadas a la web, se les conoce como clientes y servidores. Los clientes hacen solicitudes a los servidores y estos a la vez transmiten respuestas. 
Clientes envían solicitudes → Servidores
Clientes ← Servidores envían respuestas
· Los clientes son los dispositivos conectados a internet. Esto puede ser tu celular conectado al WiFi de tu hogar y que accede vía una herramienta de software al sitio web, como lo puede ser un navegador (ej: Google Chrome). 
· Por otro lado, los servidores son las computadoras que almacenan sitios web, aplicaciones u otras páginas. Cuando un cliente hace una solicitud al servidor, se descarga una copia del sitio web desde el servidor para ser transmitida al dispositivo (cliente) y su navegador.
Detalle
1. Se resuelve la URL del sitio que quieres visitar con tu navegador.
2. Se manda la solicitud y esta es analizada y confirmada por el servidor DNS para posteriormente transferir esta solicitud al servidor de la página web que quieres visitar.
3. El servidor envía una respuesta al navegador quien la analiza.
4. De acuerdo al código enviado por el servidor, el navegador muestra la información en pantalla. No necesariamente tiene que ser un sitio, puede ser un archivo.
Herramientas para el desarrollo web:
El desarrollo web es el proceso de creación, diseño y mantenimiento de páginas y aplicaciones web a través de distintos programas y softwares, en este caso, nuestras siempre confiables herramientas de desarrollo web.
Cabe mencionar que, el diseño y el desarrollo web son asuntos distintos, pero muy ligados entre sí. El primero, cuida la funcionalidad, mientras que, el último, se enfoca en la apariencia.
Tipos de desarrollador web
Tipos de programador web al referirnos al desarrollo web. Esta información es de interés para aquellos que desean desenvolverse en este ámbito. 
1. Front-end
Es el programador que trabaja con lenguajes, frameworks  y bibliotecas. Debe tener la capacidad de trabajar en conjunto con el diseñador para poder llevar a cabo un proyecto.
Este desarrollador no trabaja de forma directa con data ni con servidores complicados de aplicación. En otras palabras, trasladan el diseño web al lenguaje de programación.
 
2. Back-end
Es el programador que trabaja con códigos, banco de datos y funcionalidades del servidor. Garantiza que las funciones sean ejecutadas adecuadamente y es primordial su especialización en lenguajes de programación como: C#, PHP, Python y JavaScript. 
 
3. Full-stack
Se trata del programador más completo, pues es capaz de realizar un proyecto en su totalidad ejecutando las tareas de un Front-end y un Back-end; en otras palabras, es un perfil muy valorado.
Dominios:
Cada servidor web es identificado por un código numérico único. La llamada dirección IP permite a los navegadores web comunicarse con el host de destino para solicitar los contenidos de una página web. Sin embargo, los usuarios de Internet no suelen enfrentarse a estas secuencias de números por una buena razón: direcciones IP como 93.184.216.34 son difíciles de memorizar y son muy propensas a errores tipográficos. Así, para facilitar el acceso a las páginas web, se estableció el método de identificación alfanumérico por dominios.
Un dominio es un nombre único e inequívoco a nivel mundial para una región de Internet delimitada de forma lógica como, por ejemplo, una página web. Los usuarios de Internet ven los dominios de la siguiente forma: 
www.example.com
Para visualizar el entrar a un sitio web mediante la IP hacer el ejemplo en el CMD con “ping www.google.com” y con la IP obtenida ingresar a la página.
Hosting:
Un hosting es un servicio de alojamiento online que te permite publicar un sitio web en Internet. Cuando contratas un servicio de hosting, básicamente alquilas un espacio en un servidor físico donde puedes almacenar todos los archivos y datos necesarios para que tu sitio web funcione correctamente.
Un servidor es una computadora física que funciona ininterrumpidamente para que tu sitio web esté disponible todo el tiempo para cualquier persona que quiera verlo. Tu proveedor de alojamiento es el responsable de mantener el servidor en funcionamiento, protegerlo de ataques maliciosos y transferir tu contenido (como texto, imágenes, etc) desde el servidor a los navegadores de tus visitantes.
Estas son las opciones disponibles más populares:
· Hosting Compartido
· Hosting VPS (Servidor virtual privado)
· Alojamiento en la nube (Cloud Hosting)
· Hosting WordPress
· Hosting con servidor dedicado
HTML:
Un documento HTML es un archivo con la extensión .html cuyo contenido es leído e interpretado por el navegador web. De esta manera, cuando abres una página web en tu navegador, éste hace una petición al servidor donde se encuentra el documento, lo lee e interpreta y te lo muestra en tu pantalla.
Etiquetas HTML: Construcción de elementos en HTML
Los elementos de HTML se construyen con etiquetas: por lo general, una etiqueta de apertura y otra de cierre entre las cuales va el contenido. Las etiquetas pueden contener una serie de atributos, que sirven para configurar o modificar aspectos y comportamientos de un elemento HTML.
Elementos en bloque y en línea:
· Elementos en bloque: Ocupan todo el ancho disponible, haciendo que el siguiente elemento se posicione justo debajo. Algunos elementos en bloque de HTML son: <address> <article> <aside> <blockquote> <div> <footer> <form> <h1>-<h6> <header> <hr> <li> <nav> <ol> <p> <pre> <section> <table> <ul> <video>.
· Elementos en línea: Ocupan solamente el ancho mínimo necesario, haciendo que el siguiente elemento se posicione justo a su lado. Algunos de los elementos en línea que existen en HTML son: <a> <b> <br> <button> <img> <input> <label> <script> <select> <span> <strong> <textarea>.
Anidamiento de elementos en HTML
Los elementos de HTML se pueden anidar, es decir, puedes introducir algunos elementos dentro de otros como en el siguiente ejemplo:
Comentarios en HTML
Atributos 
· Id - Permite asignar un nombre que identifica a un elemento concreto . El “id” debe ser único, es decir, no puede haber dos etiquetas con el mismo “id”.
· Class - El atributo class tiene un propósito muy parecido al id, pero en este caso sirve para asignar un nombre que identifica a varios elementos. La idea es identificar varios elementos con la misma clase para así poder aplicarle el mismo estilo a todos ellos.
· Style - El atributo style te permite añadir estilos CSS en línea a un elemento HTML.
Etiquetas estructurales
1. Lo primero que tienes que hacer es declarar el tipo de documento. Con esta instrucción, el navegador entiende que vamos a utilizar código HTML y la versión del mismo.
2. Después tienes que crear la etiqueta <html> que englobará todo el documento y, dentro de ella, las etiquetas <head> y <body>.
3. La etiqueta <head> es la cabecera de la página. Dentro de ella puedes incluir información para el navegador (título, descripción, etc.), enlaces a hojas de estilo CSS, a archivos JavaScript, etc. Todo lo que añadas aquí es totalmente transparente para el usuario. No se muestra visualmente en la página.
4. La etiqueta <body> es el cuerpo de la página. Aquí incluyes el contenido de la misma.
Editores de código:
Es una herramienta diseñada para desempeñar la tarea específica de escribir y modificar un código web. Los editores de código clásicos son una especie de solución intermedia entre editores de texto simples, y los de entorno de desarrollo integrado IDE por sus siglas en inglés.
Dentro de los mismos editores de código hay muchas diferencias, particularmente relacionadas con los diferentes lenguajes de programación y mercado; por ejemplo, hay editores especialmente adecuados para trabajar con C ++, Java o Phyton y otros lenguajes de programación, específicamente más adecuados para el desarrollo y diseño web.
6 opciones de IDE:
· Gratuitos:
· Notepad++ - www.notepad-plus-plus.org
· Visual Studio Code – www.code.visualstudio.com
· Atom – www.atom.io
· Brackets– www.brackets.io
· Con Licencia:
· Sublime Text - www.sublimetext.com
· Coda – www.coda.io