Conceptos Básicos Conceptos Básicos Contenido ❖ Interfaz de una Web .................................................................................................................................................... 2 Tipos de aplicaciones de una interfaz de usuario............................................................................................................. 2 ❖ Etiquetas ...................................................................................................................................................................... 3 ❖ Formularios ................................................................................................................................................................. 3 ❖ Cuadro de Dialogo ....................................................................................................................................................... 3 ❖ Menús .......................................................................................................................................................................... 4 ❖ Barras de Herramientas .............................................................................................................................................. 4 ❖ W3C ............................................................................................................................................................................. 4 ❖ Validador W3C ......................................................................................................................................................... 5 ❖ Framework .................................................................................................................................................................. 5 ❖ Bootstrap ..................................................................................................................................................................... 6 ❖ Hojas de Estilo ............................................................................................................................................................. 7 ❖ Sintaxis ........................................................................................................................................................................ 7 Webgrafía ............................................................................................................................................................................ 8 Conceptos Básicos Introducción al Diseño de Interfaz Web ❖ Interfaz de una Web Interfaz web es el nombre que se utiliza para referirse a la estructura diseñada en cualquier aplicación web y que le permite al usuario acceder contenidos de dicha web cuando esté navegando. También se puede designar como interfaz de usuario o por sus siglas en inglés como GUI (graphical user interface). La interfaz utiliza un conjunto de componentes visuales (imagen o texto), interactivos (botones, casillas, cuadro de desplazamiento, controles) y de diseño para representar la información y acciones disponibles. Su principal uso consiste en proporcionar un entorno visual sencillo para permitir la comunicación con el sistema operativo de un ordenador o a los Ilustración 2. Apropiar conceptos básicos Haga clic aquí para ver fuente dispositivo móvil. Tipos de aplicaciones de una interfaz de usuario Navegador web: Cuando el usuario visita la url del sitio web al que quiere acceder, éste se abre en un navegador que carga las instrucciones creadas en un lenguaje de programación lo que genera los elementos visuales de la página que permitirán al usuario interactuar con los contenidos de esta. Software: conjunto de programas que permiten el desarrollo de ciertas funciones orientadas a satisfacer necesidades del usuario. En este grupo ingresan productos muy diversos, Como por ejemplo las interfaces que se utilizan para aplicaciones de correo electrónico como Microsoft Outlook, un navegador de Internet hasta una hoja de cálculo. Elementos más comunes de la GUI • Controles de entrada: permiten introducir información en el sistema por parte de los usuarios. • Componentes de navegación: ayudan a los usuarios a moverse. • Componentes informativos: brindan información a los usuarios. • Contenedores: mantienen el contenido organizado, como paneles, ventanas, marcos, etc. Conceptos Básicos ❖ Etiquetas Las etiquetas son segmentos de código que proporcionan los proveedores de analíticas, marketing o asistencia para ayudarte a integrar los productos que ofrecen en los sitios web o las aplicaciones móviles que tienes. ❖ Formularios Ilustración 3. Apropiar conceptos básicos Haga clic aquí para ver fuente Un formulario es una interfaz gráfica de usuario, GUI, que permite la inclusión de botones de diferentes tipos, áreas de texto, listas de selección, etc. Cuando se escribe un elemento del formulario, cada uno de ellos tiene un par de atributos: NAME y VALUE, de modo que cuando el usuario pone información en ese elemento del formulario, esa información se asocia al nombre del elemento. Los elementos pueden tener valores iniciales. Cuando el usuario presiona un botón indicando que el formulario debe ser enviado, submitted, la información en el formulario es mandada al servidor para ser procesada por un script CGI. Los datos se envían como pares nombre=valor, separados por ampersands, , donde nombre es el dado en el atributo NAME y el valor es el dado en el atributo VALUE o el dado por el usuario. ❖ Cuadro de Dialogo En interfaces gráficas de usuario, un cuadro de diálogo es una ventana especial para mostrar información al usuario o para obtener de éste una respuesta. Son llamados así porque permiten una especie de diálogo entre el sistema y el usuario. Existen diferentes tipos de cuadros de diálogos para diferentes interacciones. tipos de El más simple es el tipo "alerta", que solamente muestra un mensaje y el usuario sólo tiene que presionar un botón (generalmente "OK"). Luego están los cuadros de diálogos no esenciales, que permiten continuar operando el programa sin interrumpirlo. Estos cuadros de diálogos pueden saltar en forma de ventana o pueden acomodarse de otra manera dentro de la interfaz del programa (lo cual permite que puedan ser respondidos cuando el usuario lo decida). También existen los cuadros de diálogos esenciales, estos deben ser respondidos por el usuario de forma obligatoria. Estos cuadros de diálogos suelen abrirse automáticamente o con alguna acción del usuario, prohibiendo acceder a la ventana principal del programa y seguir trabajando. Estos cuadros deben obligatoriamente ser respondidos por el usuario porque el programa necesita realizar alguna crítica. Ilustración 4. Apropiar conceptos básicos Haga clic aquí para ver fuente acción Conceptos Básicos ❖ Menús Indica y presenta las opciones o herramientas de una aplicación informática, dispuestas en menús desplegables. Están presentes principalmente en aplicaciones con interfaz gráfica; sin embargo, también es posible verlas en programas con interfaz de texto, tales como las aplicaciones que usan Ncurses. En la mayoría de entornos de escritorio los diferentes menús presentes en estas barras pueden ser desplegados por medio de atajos de teclado, al mantener presionada la tecla Alt y la tecla correspondiente a la letra subrayada en la barra de menús. Por lo general, las aplicaciones con interfaz gráfica incluyen junto con la barra de menús una barra de herramientas, que contiene atajos a las funciones más utilizadas. ❖ Barras de Herramientas Una barra de herramientas (en inglés, toolbar) es un componente de la interfaz gráfica de un programa y es mostrado en pantalla a modo de fila, columna, o bloque, que contiene iconos o botones que, al ser presionados, activan ciertas funciones de una aplicación. ❖ W3C El World Wide Web Consortium, más conocido como W3C, es una internacional que tiene como objetivo crear estándares para la World Wide Web. Fue en 1994 por Tim Berners-Lee, uno de los creadores de la web, y está compuesta por miembros de diversas empresas, organizaciones y gobiernos de todo el mundo. Ilustración 5. Apropiar conceptos básicos Haga clic aquí para ver fuente organización fundada La importancia del trabajo del W3C radica en que sus estándares permiten la interoperabilidad y accesibilidad de la web para todos los usuarios, además de garantizar la calidad y seguridad de los sitios web y aplicaciones. Algunos de los estándares más conocidos del W3C son el HTML, CSS y XML, que son utilizados en la mayoría de los sitios web actuales. Funciones del W3C El W3C, como organización líder en la creación de estándares para la World Wide Web, tiene distintas funciones y objetivos. Entre ellos destacan: a. Desarrollar y promover estándares: La principal función del W3C es desarrollar y promover estándares universales y compatibles para la web. Estos estándares permiten que los usuarios puedan acceder a la información de manera rápida y eficiente, sin importar el dispositivo o diseño utilizado por el desarrollador. b. Garantizar la accesibilidad web: La accesibilidad es uno de los valores esenciales del W3C y se encuentra presente en todos sus estándares. La organización busca que la web sea accesible para todos, independientemente de su capacidad, edad, género o ubicación geográfica. Conceptos Básicos c. Mejorar la seguridad: El W3C trabaja constantemente en la mejora de la seguridad de los sitios web, ya que esta es una preocupación clave para los usuarios. Los estándares y directrices del W3C ayudan a los diseñadores y desarrolladores a crear sitios web seguros y a mantener la privacidad del usuario. ❖ Validador W3C Es una herramienta gratuita que está disponible online a través de una página web del W3C. Es específica para analizar la sintaxis del código fuente de las páginas que forman un sitio web. Permite: • • Comprobar que está bien formado el código fuente de una página de un sitio web. Ver el listado de errores detectados indicando la línea de código donde está situado cada uno, e indicando por qué se considera un error. ❖ Framework es un marco o esquema de trabajo generalmente utilizado por programadores para realizar el desarrollo de software. Utilizar un framework permite agilizar los procesos de desarrollo ya que evita tener que escribir código de forma repetitiva, asegura unas buenas prácticas y la consistencia del código. Un framework es por tanto un conjunto de herramientas y módulos que pueden ser reutilizados para varios proyectos. Uno de los frameworks más conocidos y utilizados es el .NET Framework de Microsoft para webs. Estos son algunos de los frameworks más conocidos: • .Net: es Framework de Microsoft y uno de los más utilizados. • Symphony: proyecto PHP de software libre. • Zend Framework: framework de código abierto para desarrollar aplicaciones web y con servicios web PHP. • Laravel: uno de los frameworks de código abierto más fáciles de asimilar para PHP. • Django: framework de desarrollo web de código abierto escrito en Python. • Ruby on Rails: framework de aplicaciones web de código abierto escrito en el lenguaje de programación Ruby. • Angular: framework de código abierto desarrollado en TypeScript y mantenido por Google. Ilustración 6. Apropiar conceptos básicos Haga clic aquí para ver fuente ❖ Front-End Conceptos Básicos El front-end o «desarrollo del lado del cliente» se refiere a la práctica de producir HTML, CSS y JavaScript. Estos tres elementos se encargan de dar forma a la parte frontal de un sitio web o aplicación. Esto incluye los fondos, colores, texto, animaciones o efectos. El front-end sirve para realizar la interfaz de un sitio web, desde su estructura hasta los estilos, como pueden ser la definición de los colores, texturas, tipografías, secciones, entre otros. Su uso es determinante para que el usuario tenga una buena experiencia dentro del sitio o aplicación. ❖ Bootstrap Bootstrap es un framework que permite a los desarrolladores web construir páginas web responsives de una forma más rápida y sencilla. En este sentido, proporciona un conjunto de componentes y plantillas CSS, HTML y JavaScript que cualquiera puede utilizar o modificar de manera gratuita. Su origen lo encontramos en las oficinas de Twitter, donde Mark Otto y Jacob Thornton lanzaron la primera versión en agosto de 2011 bajo el nombre Twitter Blueprint. Inicialmente, esta fue una herramienta interna que permitía que el diseño de esta popular red social fuera coherente y consistente. Sin embargo, meses más tarde, Twitter liberó el código y el framework en GitHub y lo renombró como Bootstrap. ¿Cómo funciona Bootstrap? La instalación de Bootstrap es sencilla y su librería de componentes es muy amplia. En este sentido, proporciona un gran conjunto de componentes web que pueden ser incorporados y personalizados en cualquier proyecto: botones, menú de navegación, galerías de imágenes, páginas de productos, etc. Con la ayuda de jQuery, una librería de JavaScript, los desarrolladores pueden todos sus componentes, los cuales funcionan gracias a estos tres archivos: • • • formularios, Ilustración 7. Apropiar conceptos básicos Haga clic aquí para ver fuente hacer uso de Bootstrap.CSS: contiene los estilos de los diferentes elementos de Bootstrap. Para utilizarlos o modificarlos, los programadores tan solo tienen que hacer referencia al componente que deseen. Bootstrap.js: contiene la lógica de funcionamiento del framework y es el responsable de la interactividad del sitio web. También, es el encargado de reinterpretar el diseño según el tamaño de la pantalla de cada usuario. Glyphicons: proporciona una galería de iconos gratuitos que los desarrolladores pueden utilizar, aunque también se pueden descargar iconos adicionales premium. Conceptos Básicos ❖ Hojas de Estilo Una hoja de estilo es un archivo de extensión *.CSS (CSS, Cascading Style Sheets = Hojas de estilo) que contempla definiciones de formato (tipo de fuente, tamaño, color de la fuente, color de fondo, párrafos, etc) de las distintas etiquetas que forman una página *.HTML. Su principal ventaja es definir un mismo aspecto para todas las páginas de un sitio web. Se crea una hoja de estilo y se vinculan todas las páginas del sitio web a este archivo. Cualquier cambio efectuado en la hoja de estilo afecta instantáneamente al formato de todas las páginas vinculadas a la misma. Cuando desde el editor HTML visual se asocia un formato a un fragmento de texto o bien se convierte en un enlace lo que realmente se está haciendo es situar ese texto entre etiquetas HTML para que el navegador lo interprete y visualice adecuadamente. ❖ Ilustración 8. Apropiar conceptos básicos Haga clic aquí para ver fuente Sintaxis La sintaxis de un lenguaje es el "conjunto de reglas que definen las secuencias correctas de los elementos de un lenguaje de programación". Aunque el HTML no es un lenguaje de programación, sino un lenguaje de marcas, en el HTML también existen una serie de reglas para que los documentos sean correctos. En general, la sintaxis del HTML está inspirada en la norma SGML (aunque no la cumple estrictamente). Si un documento contiene errores de sintaxis se dice que es un documento inválido. Aunque un documento HTML no sea sintácticamente correcto, los navegadores intentan mostrar el documento de la mejor manera posible. Aunque los navegadores a menudo consiguen mostrar correctamente documentos inválidos, se aconseja validar y corregir los documentos para asegurar que los navegadores puedan mostrarlos correctamente. Conceptos Básicos Webgrafía - ESIC Busiiness (2021). Diseño de Interfaz Web. Madrid. Recuperado de: https://www.esic.edu/rethink/tecnologia/que-es-el-diseno-deinterfaces-web#:~:text=Interfaz%20web%20es%20el%20nombre,GUI%20(graphical%20user%20interface). - Alejandro Lenis, (2023). Qué es la interfaz de usuario. Consultado a través del enlace: https://blog.hubspot.es/website/interfaz-usuario - G Suit, (2023). Etiquetas. Recuperado de: https://support.google.com/tagmanager/answer/3281060?hl=es#:~:text=Las%20etiquetas%20son%20segmentos%20de,las%20aplicacio nes%20m%C3%B3viles%20que%20tienes. - Jesús Vega, (2023). Formularios. Recuperado de: https://www.infor.uva.es/~jvegas/cursos/web/cgi- bin/tutcgi/node8.html#:~:text=Un%20formulario%20es%20una%20interfaz,%2C%20listas%20de%20selecci%C3%B3n%2C%20etc. - Alegsa, (2023). Cuadro de Dialogo. Recuperado de: https://www.alegsa.com.ar/Dic/cuadro_de_dialogo.php#gsc.tab=0 - Anjelino, (2023). Qué es y para que sirven las barras de herramientas. Recuperado de: https://www.harasdadinco.cl/que-es-y-para-quesirve-la-barra-de-herramientas/#google_vignette - Arimetrics, (2022). Qué es W3C. Recuperado de: https://www.arimetrics.com/glosario-digital/w3c - Arimetrics, (2022). Framework. Recuperado de: https://www.arimetrics.com/glosario-digital/framework - Hubspot, (2022). Frontend. Recuperado de: https://blog.hubspot.es/website/frontend-y- backend#:~:text=El%20frontend%20o%20%C2%ABdesarrollo%20del,%2C%20texto%2C%20animaciones%20o%20efectos. - Santander, (2023). Bootstrap. Recuperado de: https://www.becas-santander.com/es/blog/que-es-bootstrap.html - Ministerios de educación, (2008). Qué es una hoja de estilo. Recuperado de: https://www.uv.es/fragar/html/html0701.html#:~:text=Una%20hoja%20de%20estilo%20es,etiquetas%20que%20forman%20una%20p% C3%A1gina%20*.
