Repaso de Diseño Web PDF

REPASO DE DISEÑO WEB * Tim Berners-Lee es considerado el padre de la Web por desarrollar sus tres pilares fundamentales: - Lenguaje HTML (HyperText Markup Language), - Protocolo HTTP (HyperText Transfer Protocol) - Sistema de localización de objetos en la web URL (Uniform Resource Locator) * El p...

REPASO DE DISEÑO WEB * Tim Berners-Lee es considerado el padre de la Web por desarrollar sus tres pilares fundamentales: - Lenguaje HTML (HyperText Markup Language), - Protocolo HTTP (HyperText Transfer Protocol) - Sistema de localización de objetos en la web URL (Uniform Resource Locator) * El primer documento formal con la descripción de HTML se publicó en 1991 bajo el nombre “HTML Tags” Lenguaje de marcado: es un lenguaje de computadora que utiliza etiquetas para definir elementos dentro de un documento. Es legible para los humanos porque contiene palabras estándares, en lugar de la típica sintaxis. los dos más populares son HTML y XML. HTML5 provee tres características: Estructura, Estilo y Funcionalidad Es considerado el producto de la combinación de HTML, CSS y Javascript. HTML: sirve para dar estructura CSS: para dar estilo JAVA SCRIPT: para personalizar CSS (Cascading Style Sheets): Es un lenguaje de hojas de estilo que permite aplicar formato a elementos de un documento html. CSS es el lenguaje de estilos que hará que nuestras páginas web se vean estéticas. Para vincular una hoja de estilo a un documento html, se debe incluir la siguiente línea de código: HTML Semántico: Son elementos que tienen un significado y propósito para estructurar y describir el contenido de una página web de una manera comprensible para los desarrolladores y navegadores. Ejemplos: sección de navegación en una página web sección de contenido independiente se utiliza para agrupar contenido contenido relacionado a barras laterales o widgets define el contenido principal de una página web y debe ser único. Framework: Es una especie de plantilla que sirve como punto de partida para la organización y desarrollo de software. La arquitectura utilizada por la mayoría es conocida como MVC (modelo vista controlador). Sirve para realizar un proyecto con menos código de programación. El framework ofrece una estructura base que los programadores pueden complementar o modificar. Bootstrap Es un framework CSS desarrollado por Twitter en 2010. Inicialmente, se llamó Twitter Blueprint y en 2011, se transformó en código abierto y su nombre cambió para Bootstrap. Este framework combina CSS y JavaScript para estilizar los elementos de una página HTML. Proporciona interactividad en la página, como menús de navegación, controles de página, barras de progreso y más. Su principal objetivo es permitir la construcción de sitios web responsive para dispositivos móviles. Bootstrap está constituido por una serie de archivos CSS y JavaScript responsables de asignar características específicas a los elementos de la página. Básicamente, la estructura del framework se compone de dos directorios: CSS: contiene los archivos necesarios para la estilización de los elementos; JS: contiene la parte posterior del archivo bootstrap.js (original y minificado), responsable de la ejecución de aplicaciones de estilo que requieren manipulación interactiva. Características que ofrece. Diseño responsivo: funciona con tres tipos de contenedores (Container, Contaider-fluid, Container-{breakpoint}) Biblioteca de componentes (Alertas, Carrusel, Barras de navegación) * En una página web hay 12 columnas en las que se pueden colocar los elementos. Imágenes en la web -> Placeholder.com: es un servicio gratuito de marcadores de posición de imágenes personalizadas que pueden ser utilizadas durante el diseño. CMS: Content management System Sistema Administrador de Contenido: te permite crear, organizar, publicar y eliminar contenidos de tu sitio web Sistema de Gestión de Contenidos: Desde 2003, enfocado primeramente en la creación de Blogs. Se puede utilizar sin muchos conocimientos técnicos Diferencias entre páginas y entradas: Páginas: Son estáticas. No se dividen. No se ordenan. Entradas: Son dinámicas. Se dividen en categorías. Siguen un Orden Cronológico. Internet: Procede de las palabras en inglés “Interconnected Networks”. Es una red global en la que se conjuntan todas las redes que utilizan protocolos TCP/IP y que son compatibles entre sí. Se creó en los 60. Es un mecanismo para diseminar información y un medio para la colaboración y la interacción entre personas y sus dispositivos. Redes Globales: Es un conjunto de "hardware" y "software", con el cual podemos comunicar computadoras para compartir recursos y trabajo. A las computadoras conectadas a la red se le denomina un nodo. Una red es local si solo alcanza unos pocos kilómetros. Protocolos presentes en internet HTTP (Hypertext transfer protocol) FTP (file transfer protocol) POP (post office protocol) SMTP (simple mail transfer protocol) * Protocolo HTTP (HyperText Transfer Protocol): es el protocolo de transmisión de información de la World Wide Web. Diseño Web: Es una disciplina centrada en planificar, idear e implementar interfaces y plataformas digitales en internet. Tipos de diseñadores web: Diseñador UX: investiga las necesidades del usuario y diseña la arquitectura de la información. Diseñador Gráfico: diseña la identidad visual de una marca, creando flyers, banners, posters, etc. Diseñador UI: diseña la interfaz de usuario y crea guías de estilo. Tipos de páginas web Static website: no utilizan bases de datos. Tiene contenido fijo que no es modificado. Dynamic website: Requiere base de datos y son constantemente modificadas. Tipos de sitios web: Sitios institucionales, personales o portafolios, educativos, Blogs, Gubernamentales, de comercio electrónico, de noticias o revista, Plataformas educativas. TIPOS DE DESARROLLADORES WEB Front End: Es todo lo que vemos en la pantalla cuando accedemos a un sitio web o aplicación: Este conjunto crea la experiencia del usuario. Debe hacer que una interface sea sencilla de usar, atractiva y funcional. Un desarrollador front end debe conocer los siguientes lenguajes de programación: HTML5, CSS3, JavaScript, Jquery, Ajax. Back end: Es la parte interior de las aplicaciones. consiste en un servidor, una aplicación y una base de datos. Se toman los datos, se procesa la información y se envía al usuario. Un desarrollador Back end debe conocer los lenguajes: frameworks y los tipos de base de datos: PHP, Python, Java. Editor de HTML: HTML, o Lenguaje de Marcado de Hipertexto, es el código que hace funcionar Internet, utiliza etiquetas para definir elementos. Los editores de HTML pueden ser: Visual Studio Code, Sublime Text, Notepad++, Atom, etc. Características de un editor de HTML: Resaltado de sintaxis o codificación de color, Control de versiones, Autoguardado, Autocompletar y sugerencias, Búsqueda y reemplazo, Detección de errores, Soporte de FTP Partes de un Sitio Web: Cabecera o header, cuerpo o body, y pie o footer. Hosting web: es un servicio que permite almacenar los archivos y datos de un sitio web en servidores conectados a internet, para que sea accesible por cualquier persona en la web. Proporciona el espacio en línea donde se alojan páginas, imágenes, videos y otros contenidos que forman parte de un sitio web. ¿Para qué sirve? El hosting es esencial para que los sitios web existan y funcionen en Internet. Además de almacenar archivos, los servicios de hosting ofrecen soporte técnico, seguridad y acceso a herramientas adicionales, como gestores de contenido o dominios personalizados. Es fundamental para cualquier tipo de página que quiera estar accesible en la web. ¿Cómo funciona? El hosting funciona mediante servidores que almacenan los archivos de un sitio web. Cuando un usuario escribe la dirección de una página en su navegador, el servidor que aloja ese sitio procesa la solicitud y envía los archivos correspondientes al navegador del usuario, permitiendo que se visualice la página. Registro de dominio y hosting: Son dos elementos esenciales para que una página web funcione en Internet. Registro de dominio: El dominio es el nombre de tu sitio web. Registrar un dominio significa comprar el derecho a usar ese nombre en Internet durante un tiempo, sin que nadie más puede usarlo mientras esté registrado a tu nombre. El registro se hace a través de empresas llamadas "registradores de dominios". Hosting: El hosting es el espacio en un servidor donde se almacenan los archivos de tu sitio web. Cómo funciona: Cuando un usuario escribe el dominio (ej: www.miweb.com) en su navegador, este lo lleva al servidor donde está alojada tu página (hosting). El servidor responde mostrando el contenido del sitio al visitante. En resumen: Dominio: nombre de tu sitio web. Hosting: espacio donde viven los archivos de tu web