RESUMEN PROGRAMACION POS PARA LENGUAJES DE PROGRAMACION, Resúmenes de Ingeniería

¡Descarga RESUMEN PROGRAMACION POS PARA LENGUAJES DE PROGRAMACION y más Resúmenes en PDF de Ingeniería solo en Docsity! Creación de sistemas POS 1. Preparación de entorno a. Eligiendo un editor de código e instalando plugins b. Instalación de XAMPP c. Descarga e instalación de AdminLTE 2. Conceptos básicos a. Bootstrap 4 b. MVC (Modelo Vista Controlador) Actualizar Brackets En caso de que se haya publicado una nueva versión, al iniciar Brackets se mostrará una ventana de aviso y un icono bajo el gestor de extensiones. Al hacer clic en el botón "¡Consíguelo ahora!" se abrirá en el navegador la página web de Brackets, desde la que se puede descargar e instalar la nueva versión. Interfaz de Brackets El árbol de archivos El árbol de archivos muestra todos los archivos y carpetas que contiene una determinada carpeta, normalmente la carpeta de trabajo que contiene nuestras páginas web. Al instalar Brackets se muestra la carpeta de ejemplo "Primeros pasos" (en Windows, C:\Program Files (x86)\Brackets\samples\es\Primeros Pasos). Los plugin son extensiones de nuestro editor de código que nos permiten realizar más funciones facilitándonos mucho más la Las extensiones ya instaladas pueden verse en la pestaña instaladas del gestor de extensiones. A continuación, mencionamos los plugins más útiles y recomendados que todo desarrollador debería instalar: Emmet Emmet es una colección de herramientas y atajos de teclados que pueden ayudarte a desarrollar más rápido tanto tus códigos CSS como la implementación de maquetas en HTML. Lorem Ipsum Generator ¿Necesitas algo de texto para rellenar el prototipo de un diseño? La extensión Lorem Ipsum Generator te ayuda convenientemente a generar texto de prueba. Este texto de prueba es el típico Lorem Ipsum, un texto en latín que se suele utilizar para rellenar huecos en documentos de diseño gráfico. Beautify Esta extensión te ayudará a mantener tu código HTML, CSS y Javascript siempre bien formateado, indentado y, lo más importante, legible. Una opción alternativa para esto es la extensión CSSComb, pero solo funciona para código CSS. En mi opinión, Beautify es más útil. Simple To-Do Asegúrate de no olvidar ninguna tarea relacionada con tus proyectos utilizando la extensión Simple To-Do, que te permite gestionar lista sobre cosas a realizar (to do) para cada proyecto. Todo esto sin salir de Brackets, claro está. b) Instalación de XAMPP Para poder ejecutar nuestra aplicación ya que esta estará escrita en php como lenguaje de programación Back End, necesitaremos de un servidor apache que pueda compilarla. Existen varias alternativas para integrar Apache a nuestra computadora y para este curso elegimos el más famoso y conocido programa llamado XAMPP, del cual, a continuación, indicamos su instalación y configuración. Una vez superados estos pasos, aparece la pantalla de inicio del asistente para instalar XAMPP. Para ajustar las configuraciones de la instalación se hace clic en “Next”. Con la aparición de la pantalla de inicio del asistente da comienzo la instalación de XAMPP Paso 6: Selección de los componentes del software En la rúbrica “Select components” se pueden excluir de la instalación componentes aislados del paquete de software de XAMPP. Se recomienda la configuración estándar para un servidor de prueba local, con la cual se instalan todos los componentes disponibles. Confirma la selección haciendo clic en “Next”. En el cuadro de diálogo “Select Components“ se pueden seleccionar o deseleccionar los componentes que se instalarán Paso 7: Selección del directorio para la instalación En este paso se escoge el directorio donde se instalará el paquete. Si se ha escogido la configuración estándar se creará una carpeta con el nombre XAMPP en C:\. En un siguiente paso, se selecciona el directorio donde se instalarán los archivos Paso 8: Iniciar el proceso de instalación El asistente extrae los componentes seleccionados y los guarda en el directorio escogido en un proceso que puede durar algunos minutos. El avance de la instalación se muestra como una barra de carga de color verde. Haciendo clic en "Finish" se cierra el asistente de instalación de XAMPP Panel de control de XAMPP En la diáfana interfaz de usuario del panel de control se protocolan todas las acciones y es posible activar o desactivar los módulos por separado con un simple clic. Además, se dispone de diversas utilidades como:  Config: para configurar XAMPP, así como otros componentes aislados.  Netstat: muestra todos los procesos en funcionamiento en el ordenador local  Shell: lanza una ventana de comandos UNIX  Explorer: abre la carpeta XAMPP en el explorador de Windows  Services: muestra todos los servicios en funcionamiento  Help: incluye enlaces a foros de usuarios  Quit: se usar para salir del panel de control Iniciar módulos En la parte superior se pueden iniciar o interrumpir los módulos de XAMPP por separado mediante los comandos “Start” y “Stop” bajo “Actions”. Los módulos que se activaron aparecen marcados en verde. Los módulos activos aparecen en el Panel de Control marcados en verde Si uno de ellos no pudiera ser iniciado por un error, se mostrará marcado en rojo. Las notificaciones de error protocoladas en la parte de abajo ayudan a encontrar las causas del error. En el Panel de Control el usuario puede iniciar o finalizar los diferentes módulos por separado una fácil integración en nuestros proyectos, se incluyen tablas, gráficos, formularios y más de una docena de componentes nuevos. Existen múltiples opciones de paneles de control en Bootstrap los cuales podemos encontrar aquí: https://themes.getbootstrap.com/product-category/admin- dashboard/ pero observamos que son de pago, así que, para usar una versión gratuita de un dashboard, accederemos al siguiente enlace: https://adminlte.io/ de ahí descargaremos “AdminLTE” Para instalarlo habrá que descomprimirlo primero y copiar las carpetas “dist” y “plugins” en la raíz del directorio de nuestro proyecto. Una vez copiado ya podremos hacer uso de todos sus estilos en nuestro código HTML convocando a los nombres de las clases e id si así lo requerimos, y para usar las vistas prediseñadas bastara con copiar el fragmento de código HTML de dicha vista. Por ejemplo, si quisiéramos usar una tabla: 1.- Abrimos el archivo “index.html” de la carpeta “AdminLTE” que descomprimimos, de esa manera podremos ver todas las vistas gracias a su panel de navegación lateral. 2.- Elegimos el tipo de tabla que quisiéramos usar y revisamos su código fuente. 3.- Por último, nos queda copiar ese código fuente en el código de nuestro proyecto. Las vistas son responsables de:  Recibir datos del modelo y los muestra al usuario.  Tienen un registro de su controlador asociado (normalmente porque además lo instancia).  Pueden dar el servicio de "Actualización ()", para que sea invocado por el controlador o por el modelo (cuando es un modelo activo que informa de los cambios en los datos producidos por otros agentes). El flujo que sigue el control generalmente es el siguiente: 1. El usuario interactúa con la interfaz de usuario de alguna forma (por ejemplo, el usuario pulsa un botón, enlace, etc.) 2. El controlador recibe (por parte de los objetos de la interfaz- vista) la notificación de la acción solicitada por el usuario. El controlador gestiona el evento que llega, frecuentemente a través de un gestor de eventos (handler) o callback. 3. El controlador accede al modelo, actualizándolo, posiblemente modificándolo de forma adecuada a la acción solicitada por el usuario (por ejemplo, el controlador actualiza el carro de la compra del usuario). Los controladores complejos están a menudo estructurados usando un patrón de comando que encapsula las acciones y simplifica su extensión. 4. El controlador delega a los objetos de la vista la tarea de desplegar la interfaz de usuario. La vista obtiene sus datos del modelo para generar la interfaz apropiada para el usuario donde se refleja los cambios en el modelo (por ejemplo, produce un listado del contenido del carro de la compra). El modelo no debe tener conocimiento directo sobre la vista. Sin embargo, se podría utilizar el patrón Observador para proveer cierta indirección entre el modelo y la vista, permitiendo al modelo notificar a los interesados de cualquier cambio. Un objeto vista puede registrarse con el modelo y esperar a los cambios, pero aun así el modelo en sí mismo sigue sin saber nada de la vista. El controlador no pasa objetos de dominio (el modelo) a la vista, aunque puede dar la orden a la vista para que se actualice. Nota: En algunas implementaciones la vista no tiene acceso directo al modelo, dejando que el controlador envíe los datos del modelo a la vista. 5. La interfaz de usuario espera nuevas interacciones del usuario, comenzando el ciclo nuevamente. b) Bootstrap 4 Bootstrap 4 es la penúltima versión de Bootstrap, el framework front-end utilizado para desarrollar aplicaciones web y sitios Mobile first, o sea, con un layout que se adapta a la pantalla del dispositivo utilizado por el usuario. El propósito del framework es ofrecerle al usuario una experiencia más agradable cuando navega en un sitio. Bootstrap es modular y consiste esencialmente en una serie de hojas de estilo LESS que implementan la variedad de componentes de la herramienta.  Grid - Sistema de Columnas