#diseño interfaces web

[gaussmultimedia]

Máster Diseño UX-UI y Programación Web 2023-24. Proyecto final de Sergio Barea Arroyo: diseño responsive para web Frame:

[jeidsgn]

Este es una pagina web personal que uso para estudiar y explicar conceptos “básicos” de geometría euclideana. todavía está sin terminar pero ya se puede usar, dejo el link abajo

[equipo]

Cambia, todo cambia

🌟 Novedades

Hemos lanzado un diseño nuevo para la página «Explorar» en la aplicación para Android que divide cada sección en pestañas.

Hemos eliminado el experimento que permitía activar la función de envío rápido de publicaciones a la cola del Laboratorio de ideas de Tumblr en la versión web para móviles. La opción para añadir contenido a la cola ahora se muestra en el nuevo menú de opciones de reblogueo que se abre al pulsar el botón de las dos flechas en una publicación.

Al programar una publicación en la versión web, el editor te mostrará un aviso si no indicas la hora además de la fecha.

Hemos intercambiado el icono de TumblrMart por el de la cuenta en la nueva versión de la aplicación para iOS: este último vuelve a incluirse en el menú de navegación principal. Puedes leer más sobre este cambio aquí.

A partir de ahora, tendrás que iniciar sesión para poder enviar preguntas anónimas. Mantendremos en secreto tu identidad de cara a la persona que las reciba, pero, de esta forma, podremos actuar ante cualquier situación de abuso cuando alguien denuncie una interacción no deseada.

Hemos incluido un nuevo menú de reblogueo en la versión web para móviles que incluye varias opciones al pulsar el icono de las dos flechas en una publicación: «Rebloguear» (se compartirá en tu blog sin abrir el editor), «Rebloguear con comentario» (tendrás la opción de añadir contenido en el editor) y «Enviar a la cola». Esperamos que este cambio os permita rebloguear y añadir publicaciones de otras personas a la cola de una forma mucho más cómoda en esta versión, aunque suponga pulsar una vez más la pantalla.

Hemos modificado la ruta /blog/[nombredelblog]/gifts por /settings/gifts en la versión web y hemos incluido un menú para seleccionar el blog que quieras consultar en la parte superior (se mostrará solo si tienes más de uno).

🛠️ Mejoras y solución de problemas

Hemos resuelto un error que causaba que la atribución de la autoría de los gifs no se mostrara en algunos temas.

El botón para seguir un blog incluido en la cabecera de las publicaciones saltaba a otra línea cuando había demasiadas insignias arcoíris en la versión web, pero ya está arreglado.

También en esta versión, hemos cambiado el icono para ocultar o mostrar las opciones de tus blogs en el menú de la cuenta. En lugar de la silueta humana con tres líneas horizontales, hemos usado el símbolo del carón, que suele ser habitual en otras interfaces.

Además, hemos solventado varios fallos gráficos e inconsistencias en los elementos de la página de actividad y la ventana emergente con los datos de tu actividad que se muestra al pulsar el icono del relámpago (⚡️).

En la versión web, algunas páginas de etiquetas muestran una descripción de la etiqueta en el menú lateral, pero este texto estaba desapareciendo de forma repentina cuando se cargaban totalmente. ¡Ahora se queda donde debe estar!

Hemos resuelto un error que causaba que los formularios para enviar preguntas directamente no aparecieran en la versión web cuando la opción «Permitir las preguntas anónimas» estaba desactivada.

Los enlaces de las etiquetas de la sección «Ver otras publicaciones parecidas en Tumblr» que se muestran en algunas páginas estaban dirigiendo a las páginas de etiquetas incorrectas cuando incluían espacios. ¡Arreglado!

Hemos solventado una incidencia de la página que incluye tus «Me gusta» que hacía que el sistema interpretara que había más contenido por cargar en algunas ocasiones cuando en realidad no era así.

Los elementos de la página de actividad correspondientes a las respuestas enviadas en privado ahora muestran el avatar correcto (el del blog que contestó tu pregunta) en lugar del tuyo.

Cuando uses la versión web para móviles y veas vídeos cortos en bucle, las opciones de reproducción no volverán a mostrarse al volver a empezar.

🚧 En curso

Nada que contar por hoy.

🌱 Próximamente

No hay novedades en el horizonte.

¿Tienes algún problema? Envía una solicitud al equipo de asistencia y se pondrán en contacto contigo lo antes posible.

¿Quieres hacernos llegar tus comentarios o impresiones sobre alguna función? Echa un vistazo a nuestro flamante blog Work in Progress y empieza a compartir tus ideas y sugerencias con la comunidad.

¡Y no olvides que puedes consultar todos estos cambios en cualquiera de los idiomas disponibles en Tumblr en los blogs oficiales de los equipos internacionales!

[mary-graphics]

Creando un foro

Ahora que ha surgido toda esta conversación alrededor de los foros y su nivel de actividad, y que di mi opinión sobre la creación de foros propios, quise compartir un poco mi experiencia. Crear foros es complicado. Es una inversión de tiempo estúpidamente grande, más si eres una sola persona haciendo todo el trabajo. Aunque he contado con el apoyo de dos personas para algunas cosas y mucho, mucho feedback de por medio. Llevo desde 2020 con la idea de crear mi propio foro. Es muchísimo tiempo, ¿No? Y la verdad es que yo soy una persona muy perfeccionista. Jamás he administrado un foro, jamás he tocado realmente el panel administrativo en foroactivo, pero me dije a mi misma: quiero hacer un foro, ¿cómo puedo hacerlo? En 2020 compré una skin que me salió a buen precio, tome algunas referencias de foros antiguos en los que había estado porque me gustaba la temática, me basé en lo que conocía para hacer los grupos y todo lo relacionado y medio empecé a hacerlo. Escribí ambientación, razas, grupos, historia. Ya saben, todo lo necesario. Estábamos en pandemia, así que tenía con que entretenerme. Pero entre más escribía, más me daba cuenta de que estaba llena de vacíos, errores y cosas que no me terminaban convenciendo. También quería un mejor diseño del foro. Deje todo lo que tenía, tomé solo algunas bases y me puse en marcha. En 2021 contraté a una persona que me diseñara una skin completamente personalizada para el foro. Me dio mucha ilusión, trabajamos meses en el diseño, pero al final la persona desapareció y todo lo avanzado se fue al caño. Esto me dio un bajón tremendo y me quede meses desanimada, pero dije: No quiero dejar morir esto, así que empecé a hacer yo misma el diseño del foro, lo que me llevó a adquirir una nueva pasión y, ¡Oh por dios! encontrar una nueva pasión que podía llevar profesionalmente: Diseño UX / UI Me empezó a apasionar el tema y bueno, ya estoy estudiando para convertirme en eso, un diseñador de experiencias e interfaces. Pero bueno, yo no sé programar, por lo que tendré que contratar después a alguien que se encargue de esa parte. Y cuando ya lo tenga todo montado buscar a personas que tengan interés en el proyecto para poder mantenerlo a flote. Pero a lo que voy: Empecé a diseñar el mockup de mi foro a finales de 2022. Y llevo desde entonces diseñando, aprendiendo, viendo como se hace esto y aquello. (Dato: Si quieren hacer mockups para interfaces web utilicen el programa de Figma. Es fácil de utilizar y puedes usarlo incluso en un navegador web.) Cierre de paréntesis, llevo tres años trabajando en un proyecto al que le tengo mucho amor. Le he cambiado de nombre, he cambiado un sin fin de cosas. No saben cuantas cosas del diseño se han modificado. Paletas de colores que van desde el color de grupo hasta decidir cual será el color principal del foro, cositas de la ambientación. Miles y miles de bocetos que terminaron en algo completamente diferente, escribir un montón, borrar un montón. Ha sido muchísimo trabajo y ni siquiera lo tengo listo, así que no sé cuando saldrá al aire este tan esperado proyecto que tanto quiero que vea la luz del sol. Pero a lo que voy es qué, tengámosle amor a nuestros proyectos y también paciencia. Mas adelante compartiré con ustedes todo el proceso, si quieren, pero me ha tomado tres años hacer este proyecto, muchos borradores, errores y mucho aprendizaje. Y aun me falta mucho más por aprender. Todo se va puliendo sobre la marcha. Todo se va perfeccionando. Y hay muchas cosas que sólo podemos aprender a través de las observaciones de otras personas. Así que recíbanlas con amor y, si van a darlas, también denlas con amor. Disfruten el proceso de crear algo, de ver lo mucho que sé a avanzado, y sean respetuosos con su propio trabajo y con el de los demás. Crear un foro toma mucho tiempo. Y está bien. Ahora eso es todo por ahora, sdjfai. Gracias por leerme.

[duo-disenos]

5 TIPS PARA TUS SITIOS WEB PROFESIONALES

El mundo del diseño web está en constante cambio de modas que van y vienen. Al momento de crear un sitio web profesional tenemos que tener en cuenta algunos puntos. Aquí van algunos tips que mantendrán tus diseños profesionales y frescos.

1) Limpio y de uso facil: Dale a tus usuarios un descanso de ruidos e interfaces repletas de botones, pop-ups, banners y anuncios y atrevete a diseñar con espacios blancos que den un aire y un descanso visual y mental a tus diseños. Procura ser minimalista con el contenido más relevante en el home de tu sitio.

2) Inspiración en el área: Toma inspiración de tu área, visita plataformas como pinterest o behance para echar a volar la imaginación e inspirate de lo que es tendencia en el diseño web. ¿necesitas crear una tienda online y te gustó la animación de algun sitio en particular?, puedes tomar inspiración y darle una funcionalidad especial a tu página.

3) Patrones: Jerarquiza la información y los elementos de tu sitio. Crea patrones reconocibles y que te ayuden a optimizar tu contenido. Por ejemplo, si creas un botón de “Regístrate ahora”, es posible que quieras que tantas personas como sea posible hagan click en él y continúen a través del proceso de inscripción.La jerarquía visual nos dice que los ojos se mueven de arriba a abajo, de izquierda a derecha (un tip: El cerebro humano lee este tipo de contenido en forma de Z).

4) Texto facil de leer: Asegurate que los colores combinen, no utilizar tamaños de fuente pequeños y no excederse con el uso de fuentes ayudará a mantener una imagen profesional y poco saturada.

5) Profesional en todos los dispositivos: Tu sitio profesional no estará completo si no optimizas tu sitio web en version mobile. Actualmente la tendencia dicta el diseño mobile first, siempre debes tener en cuenta el trafico a tu sitio web a través de dispositivos mobiles y el diseño adaptado a este medio.

Ya con estos 5 tips ya puedes comenzar a tener una imagen más profesional e inspirar confianza en tu público objetivo. Comenta otros tips que tengas!

[asistecno]

Microsoft Power Platform: todo lo que necesitas saber

¿Qué es Power Platform y para qué sirve?

Microsoft Power Platform es una plataforma SaaS de aplicaciones empresariales que ayuda a respaldar y ampliar Microsoft 365, Dynamics 365 y Azure, así como servicios y aplicaciones de terceros. Microsoft Power Platform ofrece automatización con poco código, aplicaciones prácticas basadas en datos y lógica empresarial personalizable que pueden mejorar los procesos, sistemas y flujos de trabajo empresariales. Además de la automatización de bajo código pensada para que los usuarios finales creen sus propias aplicaciones, los desarrolladores profesionales pueden usar código para ampliar aún más las capacidades de la plataforma.

Su objetivo generalmente es optimizar las operaciones automatizando tareas rutinarias y proveer un rango de soluciones que habilitan la transformación digital de una organización.

Es capaz de abordar escenarios y casos de uso que habitualmente nacen dentro de las unidades de negocio, aunque también el ámbito puede ampliarse a toda la organización, o como parte de arquitecturas combinadas con otros servicios, generalmente en la nube.

Según el estudio de agosto de 2022 Total Economic Impact™, lanzado por Forrester, las empresas que apuestan por funciones premium de Microsoft Power Platform obtienen un ROI del 140% en tres años. Además, la consultora Gartner nombró a Microsoft líder del 2023 Gartner® Magic Quadrant ™ for Enterprise Low-Code Application Platforms.

Virtudes de las soluciones Power Platform

Soluciones desarrolladas con low-code

Time To Market

Seguridad integrada

Capacidades de movilidad

Posibilidad de utilizar un sistema de información propio, aunque extensible a otros orígenes de datos

Integración con la mayoría de las herramientas comerciales

Capacidad de incluir modelos de IA

Extensibilidad

ALM (Application Lifecycle Management). Mediante soluciones, es posible paquetizar y publicar los desarrollos, facilitando el ciclo de vida del software. Integración con Azure DevOps.

Cómo funciona Power Platform: herramientas

Las herramientas que componen Power Platform abarcan todas las partes de las que se compone cualquier arquitectura de software, datos, procesos de negocio y servicio e interfaces de usuario.

En función de la idiosincrasia del proyecto, se podrá hacer uso de las herramientas necesarias para integrar también con la mayoría de los servicios en la nube, sistemas on premises, soluciones custom o legacy o la mayoría de los productos comerciales empresariales.

Estas herramientas son las siguientes:

Dataverse

Como sistema de información o base de datos. En ella se almacenan los datos que usan las aplicaciones empresariales. En concreto, se almacenan en tablas estandarizadas, aunque se pueden crear otras personalizadas. Estas tablas son fáciles de gestionar y segurizar.

Power Apps

Interfaces de usuario en versiones app y web, ya que se adaptan a cualquier dispositivo y navegador. Al formar parte del ecosistema Power Platform, no es necesario escribir código o tener grandes conocimientos de este para crear y lanzar una app. Power Apps cuenta con inteligencia artificial y conexión a Dataverse para facilitar el trabajo de creación. También se puede integrar con otras tecnologías de la empresa como Azure, Microsoft 365 y Dynamics 365.

Existen dos tipos de Power Apps:

Canvas o de lienzo, cuyas características más destacables son:

Control absoluto del diseño.

Capacidad de conectarse a centenares de productos o servicios mediante conectores específicos.

Capacidad de aprovechar características de dispositivos móviles como cámara, micrófono o GPS, entre otros.

Model Driven

Diseño completamente adaptativo o responsive.

Utiliza Dataverse como fuente de información principal.

Power Pages

Para crear sitios web corporativos seguros con low-code.

Diseño completamente adaptativo o responsive.

Utiliza Dataverse como fuente de información.

Da visibilidad de la información a personas ajenas a la organización o anónimas, con lo que puede funcionar como una extranet.

Power Automate

Power Automate es un potente motor de flujos, con tres tipos diferenciados:

Cloud flows:

Alta capacidad de integración mediante conectores, con otros productos comerciales o servicios, además de con el resto de las herramientas de la plataforma.

Capacidad de orquestar procesos complejos.

Se pueden desencadenar de forma automática, instantánea o mediante una programación.

 Flujos RPA (Robotic Process Automation):

Capacidad de automatización de procesos de escritorio en VMs Windows, enfocados principalmente a soluciones custom o legacy, o acciones manuales en web, como web scraping.

La ejecución de los flujos de escritorio puede ser atendida o desatendida.

Flujos de proceso de negocio:

Ofrecen una guía para que los usuarios realicen su trabajo, dirigiéndolos a través de procesos definidos para llegar a un resultado deseado.

Reducen la necesidad de entrenamiento de los usuarios y ofrecen un indicador visual que especifica en qué parte del proceso empresarial se encuentra.

Power Virtual Agents

Herramienta de creación de chatbots, que pueden publicarse en múltiples plataformas o servicios, tales como:

Microsoft Teams

Power Pages

Aplicaciones web

Aplicaciones móviles o aplicaciones custom

Facebook

Cualquier canal compatible con Azure Bot Framework

Power BI

Herramienta de business intelligence:

Potentes cuadros de mando e informes

Puede combinar datos procedentes de múltiples orígenes

Capacidades de transformación, modelado y visualización

Publicación en la nube

AI Builder

Mediante este complemento, es posible dotar a Power Platform de forma sencilla con capacidades de inteligencia artificial. Para ello, AI Builder dispone de instrucciones paso a paso, plantillas y componentes prediseñados, lo que ayuda a las personas con menos conocimientos técnicos a desarrollar estas herramientas.

Existen múltiples modelos IA disponibles que pueden utilizarse directamente o bien realizando un proceso sencillo de entrenamiento previo. Entre los más destacados se encuentran:

Procesamiento de facturas

Detección de texto en imágenes

Detección de objetos en imágenes

Detección y traducción de idiomas

Clasificación de texto e imágenes

Análisis de sentimiento

¿Por qué debes apostar por la Power Platform?

Como hemos visto en este artículo, la plataforma low-code de Microsoft Power Platform nos habilita como usuarios a automatizar procesos de negocio, crear aplicaciones personalizadas y analizar los datos empresariales, lo que nos permite en nuestra compañía agilizar nuestros procesos, incrementar la productividad y tomar decisiones basadas en datos, además de integrarnos sin problemas con otros productos y servicios de Microsoft y de terceros.

Desde Plain Concepts te podemos ayudar a implementar proyectos de Power Platform de una forma global en tu empresa. Ofrecemos un modelo de gobierno y adopción sobre el uso de la plataforma, así como orientación y desarrollo de automatización de procesos y operaciones dentro de la organización.

Igualmente, ofrecemos nuestros servicios especializados en consultoría y desarrollo de proyectos low-code y pro-code sobre la plataforma, para ayudarte a implementar casos de uso departamentales y funcionales con las herramientas de automatización, creación de aplicaciones corporativas y/o procesos de gestión documental. También te ofrecemos la posibilidad de extender la funcionalidad estándar de la plataforma e integrar las herramientas de Power Platform con otros servicios corporativos de Azure y M365 y de proveedores como ServiceNow, Google, Oracle, Salesforce, SAP o JIRA, entre otros.

[ismaverde]

Apps que uso como artista

Cuando hablamos de qué preferimos los artistas (del tipo que sea) tenemos distintas preferencias debido a que cada uno es distinto en este mundo, por eso te voy a mostrar mis apps favoritas para el teléfono móvil.

Google Drive

La uso para almacenar todo tipo de archivos y es una nube virtual muy accesible, ya que la mayoría de personas disponemos de una cuenta de Google y viene con casi todos los modelos de celulares Android; se pueden cargar muchos tipos de archivos. También tiene 15 GB de almacenamiento gratuito y puedes pagar una suscripción llamada Google One para tener más espacio en Drive, Gmail y Fotos.

Compatibilidad: Android, iOS, Web, Windows, MacOS.

Web: https://drive.google.com/

Canva

Es muy versátil debido a que puedes diseñar un montón de cosas: desde presentaciones hasta publicaciones para las redes sociales. Yo lo uso principalmente para editar fotos y hacer presentaciones para mis tareas escolares, cabe destacar que funciones como redimensionar, exportar con fondo transparente y el quitafondos son funciones Pro que requieren pagar una suscripción, y creo que no es para nada mala aplicación, sino la mejor para diseños rápidos no tan elaborados como en Adobe Illustrator.

Compatibilidad: Android, iOS, Web, Windows, MacOS.

Web: https://www.canva.com/

Figma

Esta app a diferencia de Canva es un poco más compleja de usar y está pensada para el diseño de interfaces, pero yo la uso para hacer logos y ese tipo de cosas. Cabe mencionar que tiene versión gratuita que no es para nada limitada para lo que yo hago y tiene solamente para una persona. Si quieres tener un equipo en Figma si necesitas pasarle (por ejemplo) el diseño de una interfaz a un desarrollador para que codifique al convertir el diseño en una aplicación/programa. Y lo que tiene de bueno es que hace poco lanzó una función para codificar un diseño.

Compatibilidad: Android, iOS, Web, Windows, MacOS.

Web: https://www.figma.com/

Instagram

Esta app sería la "infaltable" en esta lista debido a que me encanta publicar mis dibujos/pinturas en esta red social, ya sea como videos y fotos, detrás de eso hay un trabajo que me hace feliz, los números no son sólo un número, sino personas a las que les gusta tu arte; y los haters, son personas que tiran comentarios ofensivos por nada.

Compatibilidad: Android, iOS, Web.

Web: https://www.instagram.com/

Como pudiste ver, yo tengo mis preferencias y a otro artista (por ejemplo) no le guste Canva, a mí la verdad, me encanta esa herramienta.

Y eso es todo, gente, nos vemos en el próximo post.

[psicologia07]

Cómo puedo relacionar la informática con la psicología?

La informática y la psicología se relacionan en varios campos y aspectos, ya que ambas disciplinas se complementan para comprender mejor los procesos mentales y conductuales humanos. Aquí te menciono algunas formas en que la informática y la psicología se conectan:

1. Sistemas Expertos: La informática se utiliza para desarrollar sistemas expertos que pueden tomar decisiones y realizar tareas complejas en áreas como la medicina, la psicología clínica y la educación.

2. Inteligencia Artificial: La informática ha permitido desarrollar sistemas de inteligencia artificial que pueden imitar ciertas funciones del cerebro humano, como el procesamiento de imágenes, el reconocimiento de voz y el lenguaje natural.

3. Psicología de la Salud y la Informática: La informática ofrece herramientas para mejorar la salud mental y física. Las aplicaciones móviles para el seguimiento de hábitos saludables, los sistemas de telemedicina, y los juegos serios con fines terapéuticos son ejemplos de cómo la informática puede ser utilizada para ayudar a los usuarios a mejorar su bienestar. En estos casos, la psicología es esencial para el diseño de interfaces efectivas y para determinar la eficacia de las intervenciones.

4. Psicología del Consumidor y el Comercio Electrónico: La psicología del consumidor se aplica al diseño de sitios web de comercio electrónico para maximizar las ventas. Se utilizan principios psicológicos como la persuasión, el comportamiento de compra y la toma de decisiones para influir en el comportamiento de los usuarios online.

5. Psicología Forense y la Ciberseguridad: La psicología juega un papel importante en la investigación de crímenes cibernéticos. Se utiliza para entender la motivación de los ciberdelincuentes, analizar el comportamiento online de los sospechosos, y evaluar la vulnerabilidad psicológica de los usuarios a las amenazas digitales.

6. Modelado y Simulación: Tanto en la psicología como en la informática se emplean modelos y simulaciones. En psicología, se usan modelos computacionales para simular procesos cognitivos y emocionales. En la informática, los modelos son fundamentales para comprender y diseñar sistemas complejos. La intersección permite una validación cruzada de los modelos y un mejor entendimiento de los fenómenos estudiados.

[fernando-arciniega]

Crea un carrito de compras con PHP, MySQL y Bootstrap

Cómo crear una tienda en línea paso a paso: guía completa para estudiantes (Frontend y Backend) En esta guía detallada, te explico cómo construir una tienda en línea paso a paso utilizando PHP, MySQL y Bootstrap. Incluye tanto la interfaz de usuario (frontend) como la interfaz de administración (backend). Es importante seguir cada paso cuidadosamente y mantener la estructura de archivos organizada. PHP es un lenguaje de programación del lado del servidor ampliamente utilizado para desarrollar aplicaciones web dinámicas e interactivas. Es conocido por su facilidad de uso, integración con bases de datos y flexibilidad, lo que lo hace ideal para gestionar formularios, sesiones de usuarios y otros elementos de sitios web. MySQL es un sistema de gestión de bases de datos relacional que permite almacenar, organizar y recuperar grandes cantidades de datos de forma eficiente. Se utiliza en conjunto con lenguajes como PHP para crear aplicaciones web que requieren almacenamiento y manejo de datos, como tiendas en línea, foros y sistemas de gestión de contenido. Bootstrap es un framework de código abierto para el desarrollo de interfaces de usuario responsivas y móviles en la web. Facilita la creación de páginas y aplicaciones con un diseño atractivo, gracias a su conjunto de componentes prediseñados y sus sistemas de grillas flexibles, haciendo que el desarrollo sea más rápido y uniforme. Requisitos previos: - Conocimientos básicos de PHP y MySQL. - Servidor local como XAMPP o WAMP. Paso 1: Crear la estructura de carpetas y archivos Crea la siguiente estructura de carpetas y archivos en tu proyecto. Nota: No es necesario incluir carpetas de CSS ni JS ya que se utilizan archivos en línea. tienda-en-linea/ │ ├── incluir/ │ ├── conexion.php │ ├── encabezado.php │ └── pie.php │ ├── recursos/ │ └── imagenes/ │ ├── admi │ ├── inicio_sesion.php . . . (backend) │ ├── panel_control.php . . . (backend) │ ├── gestion_productos.php . . . (backend) │ ├── agregar_producto.php . . . (backend) │ └── editar_producto.php . . . (backend) │ └── cerrar_sesion.php . . . (backend) │ ├── index.php . . . (frontend) ├── carrito.php . . . (frontend) ├── pago.php . . . (frontend) └── pago_exitoso.php . . . (frontend) Paso 2: Configurar la base de datos - Crea la base de datos en MySQL llamada comercio_electronico e inserta un usuario de ejemplo: CREATE DATABASE comercio_electronico; USE comercio_electronico; CREATE TABLE productos ( id_producto INT AUTO_INCREMENT PRIMARY KEY, nombre VARCHAR(100) NOT NULL, descripcion TEXT, precio DECIMAL(10, 2) NOT NULL, imagen VARCHAR(255), stock INT NOT NULL DEFAULT 0 ); CREATE TABLE usuarios ( id_usuario INT AUTO_INCREMENT PRIMARY KEY, usuario VARCHAR(50) UNIQUE NOT NULL, password VARCHAR(255) NOT NULL ); -- Insertar un usuario de ejemplo INSERT INTO usuarios (usuario, password) VALUES ('administrador', '12345'); Paso 3: Crear la conexión a la base de datos Crea el archivo incluir/conexion.php: Paso 4: Crear el encabezado y pie de página

En esta sección se diseñó el logotipo, el nombre de la tienda y el menú con el siguiente código: Archivo incluir/encabezado.php Tienda en Línea Tienda en Línea Inicio Carrito Pagar Este código es una estructura básica de una página web en HTML con Bootstrap para darle estilo y funcionalidad: - Estructura HTML: - Define la estructura básica de la página con elementos como , , , y . - Meta y Título: El define la codificación de caracteres como UTF-8 para acentos y el lenguaje español. - asegura que el sitio se vea bien en dispositivos móviles. - define el título de la página. - Enlaces a CSS: Se incluyen un archivo de estilos CSS de Bootstrap para usar componentes prediseñados. - Barra de navegación: - : Contiene la barra de navegación. - Logo y enlace: Un logo de Bootstrap es mostrado con . - Botón de menú colapsable: Permite que el menú se colapse en dispositivos móviles. - Enlaces de navegación: con - que dirigen a diferentes páginas (inicio.php, carrito.php, pago.php). El uso de Bootstrap proporciona un diseño responsivo y una presentación uniforme. Archivo incluir/pie.php

Al visualizar este archivo de manera individual, no se ver+an los estilos, ya que están siendo llamados desde el archivo index.php © Tienda en Línea. Todos los derechos reservados.

Creación del Frontend para la tienda en linea

Paso 5: Crear la interfaz de usuario Archivo index.php (Página de inicio): Inicio - Tienda en Línea

Bienvenido a nuestra tienda en línea

Hasta este punto, tu tienda deberá tener la siguiente apariencia:

Nota: no debe mostrar ningun tipo de error, ya que el mensaje de "No hay productos disponibles en este momento" hace una conexión a la base de datos y verifica si hay registros en la tabla productos Archivo carrito.php (Carrito de compras): Este archivo es un script PHP para gestionar un carrito de compras de la tienda en línea. - Conexión a la base de datos: Incluye un archivo externo (incluir/conexion.php) que establece la conexión con la base de datos. - Gestión de la sesión: Inicia la sesión con session_start() y verifica si existe un carrito en la sesión, creando uno vacío si no existe. - Lógica de carrito: - Agregar producto: Incrementa la cantidad del producto si ya está en el carrito; si no, lo agrega con cantidad 1. - Eliminar producto: Elimina un producto específico del carrito y reindexa el array. - HTML y Bootstrap: - Muestra la interfaz del carrito de compras con una tabla que detalla los productos, sus cantidades, precios unitarios, subtotales y opciones de acción (eliminar). - Calcula y muestra el total del carrito. - Enlaces y navegación: - Un botón para proceder al pago (pago.php). - Scripts y estilos: - Incluye estilos CSS y enlaces a las bibliotecas de Bootstrap y jQuery para un diseño y funcionalidad responsivos. El archivo combina lógica de servidor (PHP) y estructura de presentación (HTML/CSS) para gestionar y mostrar un carrito de compras interactivo en una página web.

Carrito de Compras

Carrito de Compras

Producto Cantidad Precio Unitario Subtotal Acciones Total: $ Proceder al Pago Archivo pago.php (Proceso de pago): Este código es un script PHP que gestiona un proceso de pago simulado de la tienda en línea, verificando que haya productos en el carrito y calculando el total. Se incluye el archivo conexion.php para establecer la conexión con la base de datos y se inicia una sesión con session_start() para gestionar el carrito de compras. Si el carrito está vacío (empty($_SESSION)), el script redirige al usuario a carrito.php y finaliza la ejecución (exit()), impidiendo que se acceda al proceso de pago sin productos en el carrito. Cuando el formulario es enviado ($_SERVER === 'POST'), se ejecuta un bucle que recorre los productos en el carrito. Se consulta cada producto en la base de datos usando su id_producto para verificar que existe y obtener su precio, y se calcula el subtotal multiplicando el precio por la cantidad de cada producto y sumándolo al total. La página muestra un encabezado y un formulario con un botón que simula la confirmación de compra y utiliza estilos CSS propios y los de Bootstrap para un diseño responsivo y atractivo. Se incluyen scripts de Bootstrap y jQuery para proporcionar funcionalidad y estilo a la página. Nota: Si el carrito está vacío, el script no realiza ninguna acción relacionada con el procesamiento de pago. En lugar de eso, verifica si el carrito está vacío y, de ser así, redirige al usuario a carrito.php y termina la ejecución del script con exit(). Esto evita que se procese un pago o se muestre la interfaz de pago si no hay productos en el carrito.

Pago

Proceso de Pago

Este es un proceso de pago simulado. Haz clic en "Completar Compra" para finalizar tu compra. Completar Compra Archivo pago_exitoso.php (Confirmación de compra):

Este archivo es una página HTML que muestra un mensaje de confirmación de compra exitosa al usuario. Incluye un encabezado (incluir/encabezado.php) y un pie de página (incluir/pie.php). El cuerpo de la página contiene un contenedor con una alerta de Bootstrap que muestra un mensaje de agradecimiento por la compra y notifica que el pedido ha sido procesado con éxito. También se proporciona un enlace con un botón que redirige al usuario de vuelta a la página de inicio (index.php). La página utiliza estilos CSS personalizados y de Bootstrap para un diseño atractivo y responsivo, y se complementa con scripts de jQuery y Bootstrap para funcionalidad adicional. Compra Exitosa

¡Gracias por tu compra!

Tu pedido ha sido procesado exitosamente. Pronto recibirás un correo con los detalles de tu pedido. Volver al Inicio Nota para los estudiantes

Hasta este punto, ya hemos creado la parte frontend de la tienda en línea. Con los archivos desarrollados, deberían poder probar la tienda y comprobar que todo funcione sin errores. Esto incluye la visualización de productos, el carrito de compras, y el proceso de pago simulado. Cómo probar la tienda antes de completar el backend Para probar las funcionalidades de la tienda, deberán ingresar un registro de producto directamente en phpMyAdmin: - Accede a phpMyAdmin y selecciona la base de datos comercio_electronico. - Selecciona la tabla productos. - Haz clic en la pestaña "Insertar" y añade un nuevo producto con la siguiente información de ejemplo: - nombre: Sudadera - descripcion: Sudadera de algodón unisex - precio: 250.00 - imagen: sudadera.png (asegúrate de que la imagen esté en la carpeta recursos/imagenes/) - stock: 10 - Guarda el registro y vuelve a tu navegador para probar la tienda en línea. Tienes que ver algo así:

Qué puedes hacer ahora: - Navegar por la página de inicio (index.php), verificar que los productos se muestren correctamente. - Agregar productos al carrito (carrito.php) y simular una compra completa (pago.php y pago_exitoso.php).

Creación del Backend para la tienda en linea

En esta sección, desarrollaremos la interfaz de administración (backend) de la tienda en línea. Esto permitirá gestionar productos de manera sencilla a través de un panel de control. La administración incluirá funcionalidades para iniciar sesión, agregar, editar y eliminar productos. Estructura de archivos del backend La estructura del backend estará contenida dentro de la carpeta admin/: tienda-en-linea/ │ ├── admin/ (backend) │ ├── inicio_sesion.php │ ├── panel_control.php │ ├── gestion_productos.php │ ├── agregar_producto.php │ └── editar_producto.php │ └── cerrar_sesion.php Paso 1: Crear el archivo de inicio de sesión (admin/inicio_sesion.php) Este archivo permitirá a los administradores acceder al panel de control.

Recuerda que los datos para acceder se insertaron al inicio al crear la base de datos: Usuario: administrador Password: 12345

Código para inicio_sesion.php: Usuario: Contraseña: Iniciar Sesión Paso 2: Crear el archivo del panel de control (admin/panel_control.php) Este archivo será el punto de acceso principal después de iniciar sesión.

Código para panel_control.php: Panel de Control - Administración

Panel de Control - Administración

Cerrar Sesión Gestionar Productos Agregar, editar y eliminar productos de la tienda. Ir a Gestión de Productos Paso 3: Crear el archivo para gestionar productos (admin/gestion_productos.php) Este archivo mostrará una lista de productos y permitirá editarlos o eliminarlos.

Código para gestion_productos.php: Gestión de Productos

Gestión de Productos

Agregar Producto Cerrar Sesión ID Nombre Descripción Precio Stock Acciones Paso 4: Crear el archivo para agregar productos (admin/agregar_producto.php) Este archivo permitirá al administrador agregar nuevos productos.

Código para agregar_producto.php Read the full article

[casasdeapuesta]

Caliente Apuestas: Líder en el panorama de las apuestas en México

Caliente Apuestas se ha establecido como un nombre destacado en el panorama de las apuestas en México, ofreciendo una amplia gama de opciones de apuestas que atienden tanto a los entusiastas de los deportes como a los amantes de los casinos. Fundada con la misión de brindar una experiencia de apuestas atractiva y segura, Caliente se ha convertido en una plataforma de referencia tanto para apostadores ocasionales como para jugadores serios.

Una amplia gama de opciones de apuestas

Caliente Apuestas destaca por su amplia selección de mercados de apuestas. Desde deportes populares como fútbol, ​​baloncesto y boxeo hasta eventos especializados, los usuarios pueden encontrar una variedad de opciones para realizar sus apuestas. Además, la plataforma presenta apuestas en vivo, lo que permite a los usuarios apostar en eventos a medida que se desarrollan, lo que agrega una capa adicional de emoción a la experiencia.

Plataforma fácil de usar

Navegar por el sitio web y la aplicación móvil de Caliente es sencillo, lo que facilita a los usuarios encontrar sus eventos preferidos y realizar apuestas rápidamente. El diseño limpio y el diseño intuitivo garantizan una experiencia de usuario fluida, ya sea que apueste desde casa o mientras viaja.

Promociones y Bonos

Para atraer nuevos usuarios y retener clientes leales, Caliente Apuestas ofrece una variedad de promociones y bonificaciones. Desde ofertas de bienvenida hasta promociones continuas, los apostadores pueden aprovechar estos incentivos para maximizar su potencial de apuestas.

Conclusión In a competitive market, Caliente Apuestas shines as a reliable and exciting choice for bettors in Mexico. With its vast array of betting options, user-friendly interface, and attractive promotions, it's no wonder that Caliente continues to grow in popularity among sports and casino enthusiasts.

[gaussmultimedia]

La Hauss. Máster Online en Diseño UX-UI y Programación Web 2022-23. Proyecto final de Pilar Cano Alcaide: diseño de web responsive para site Viva:

[nestorleont]

Diseño Gráfico como disciplina creativa

El Diseño Gráfico es una disciplina creativa que utiliza elementos visuales para comunicar ideas y mensajes. Su importancia radica en su capacidad para influir en la percepción pública, mejorar la comunicación y crear identidades visuales memorables. Ámbitos de Aplicación Publicidad: Creación de campañas visuales para promocionar productos y servicios. Diseño web: Desarrollo de interfaces…

[josegremarquez]

CSS3: Revolucionando el Diseño Web en Alicante y la Comunidad Valenciana

Las Nuevas Reglas: CSS3 se Vuelve Loco CSS3 ha traído consigo una serie de propiedades y características que han revolucionado la forma en que diseñamos y animamos nuestras páginas web. Estas nuevas herramientas nos permiten crear interfaces de usuario más atractivas, interactivas y personalizadas. Exploremos algunas de las propiedades CSS3 más populares y cómo se están utilizando en Alicante y…

[infotecaweb]

Descripción del curso Los temas incluyen diseño de bases de datos, escalabilidad, seguridad y experiencia del usuario. A través de proyectos prácticos, aprenderá a escribir y utilizar API, crear interfaces de usuario interactivas y aprovechar servicios en la nube como GitHub y Heroku. Al finalizar el curso, obtendrá conocimientos y experiencia en principios, lenguajes y herramientas que le permitirán diseñar e implementar aplicaciones en Internet. Este curso continúa donde lo dejó CS50, profundizando más en el diseño y la implementación de aplicaciones web con Python, JavaScript y SQL utilizando marcos como Django, React y Bootstrap. Lo que aprenderás HTML, CSS Git Python Django SQL, Models, and Migrations JavaScript User Interfaces Testing, CI/CD Scalability and Security Si es un entusiasta de los datos, un profesional de la informática experimentado o está interesado en ingresar a la industria de más rápido crecimiento, este programa de certificación profesional desentraña las complejidades del panorama de datos actual y lo equipa con las habilidades necesarias para crear datos eficientes, precisos y procesables. perspectivas. Este programa de certificación profesional beneficiará a cualquier persona que posea o aspire a los siguientes puestos de trabajo: científico de datos, analista de datos, ingeniero de software, analista de inteligencia empresarial, ingeniero de aprendizaje automático, consultor de análisis de datos. La demanda de especialistas en IA y ML crecerá un 40% entre 2023 y 2027. La programación R tiene una gran demanda entre los científicos de datos. La encuesta salarial de Dice Technology realizada en diciembre de 2022 mostró que el salario promedio de los programadores de R aumentó un 3,8% con respecto a 2019. Contáctanos para más información y comienza a transformar tu futuro ahora mismo! Previatura: para obtener el certificado profesional completo hay que realizar tambien el curso introductorio CS50: Introducción a la informática A partir de CS50: Introducción a la informática, los estudiantes completarán una inmersión intensiva y completa en los conceptos básicos de la informática desarrollados por el renombrado profesor de la Universidad de Harvard, David J. Malan. El curso cubrirá conceptos como abstracción, algoritmos y estructuras y gestión de datos, que servirán como base sobre cómo se utilizan los datos para mejorar la toma de decisiones y las habilidades de pensamiento crítico. Con nuestra ayuda, podrás dominar conceptos clave como Scratch, C, Python, SQL, algoritmos y estructuras de datos, preparándote para enfrentar con confianza las pruebas y proyectos prácticos.  

[duo-disenos]

¿CÓMO ELEGIR LA MEJOR PALETA PARA TU SITIO WEB?

Al momento de diseñar un sitio web, siempre está la incognita de cómo definir la paleta de colores que este va a tener. En primer lugar, debemos considerar la psicologia del color y cómo queremos que nuestros usuarios perciban nuestra página y las emociones que queremos transmitir a través de ella. En el caso de tratarse de una marca, debemos mantener la misma consistencia en cuanto a colores y estética que tengamos ya definida en el caso de ya tenerla. A continuación te daremos algunos ejemplos de cómo darle una identidad a tu sitio con las mejores combinaciones de colores y que tu sitio web destaque entre la multitud.

1.- Chic Si lo tuyo es el lujo, la vanguardia y la moda, el sitio web de la diseñadora de interiores Veronica Solomon te puede inspirar con su uso de negros, grises y dorados que contrastan con un rosado dando una idea de la huella de Solomon en el diseño de interiores y su imagen "chic..

2.- Degradados Vibrante, moderno y minimalista. Así podemos describir el sitio web de Foodie Marketing, que con una paleta de degradados de colores calidos como anaranjados y rosados y botones blancos, da una sensación de profesionalidad, modernidad y minimalismo en su máxima expresión que por hoy es tendencia en el diseño web.

3.- Pop retro El sitio web de Dennis Krawec nos rebobina con un estilo muy atractivo y de moda, mezclando colores supuestamente opuestos para darnos una mirada al pasado con vibrantes colores rosados retro, el uso del neón en amarillos, verdes y anaranjados y con una perfecta coherencia entre sus elementos.

4.- Futurista Un vistazo hacia el mañana con fondos contrarrestados entre sí. Degradados de azul, amarillo y verde podemos ver en el sitio de Defne Kaynak, que a través de su interface, nos sumerge en una completa experiencia futurista que te brindará mucha inspiración.

5.- Minimalista El sitio del estudio de cerámica de Noni Sao Paulo expresa con precisión la identidad del estudio. Colores terrosos y pasteles fusionados con un diseño minimalista y efectos parallax, brinda una sensación de profesionalidad, modernidad y una interface delicada que te llama a navegar por el sitio viendo sobre su historia, sus creaciones y su identidad.

[bitacorajhairquevedo-4]

Bitacora Jhair Alejandro Quevedo

Las primeras clases avanzamos sobre los iconos las interfaces y como todo el mundo fue evolucionando y como el diseño ayudo a posicionar marcas enteras solo en como las empresas lograban evolucionar y lograr que podamos relacionar objetos de la vida real con lo digital, la relación entre estas ayudaron a la interfaz grafica de usuario, tenemos un trabajo de esta unidad de aprendizaje donde a lo que yo entendí es como desarrollar una aplicación.

Hoy me desperté y se me ocurrió un montón de funcionalidades

como algo que tenga que ver con los pedidos inmediatos algo como ropa o

Que es el pixel? definiciones bastante distintas de la clase conjunto de unidades donde cada cuadradito tiene informacion, y el tamaño de todo un conjunto es un monton de informacion que guardan los mapas de bits.

Hoy estado investigando unos videos donde hablan de nuevas aplicaciones alrededor de todas las redes sociales e incluso aplicaciones que funcionan con inteligencia artificial asi que pensando y considerando que la inteligencia artificial es una palabra que hoy en día da mucha seguridad sobre todo al publico juvenil que ene general quieren las cosas faciles rapidas , etc y una inteligencia artificial que tenga funcionalidades especificas que te ayudaran a poder explotar tu tiempo, es atractivo para cualquier personas, incluyendo a los adultos que se consideran un poco a la corriente de las nuevas tecnologias, poder facilitar funciones.

hoy dia consultando con la ia busque ideas y me dio una nueva funcionalidad e interfaz extra, pero yo le di personalidad de una nube flotando por los costados de la paaantalla en el inicio de la pantalla y que logre distraer a el usuario y busque la atencion para poder desbloquear nuevas funcionalidades < v

Hoy dia plasme un poco de la aplicación que estamos desarrollando, la metafora es el icono de una persona meditando que se refiere al autocontrol que es de lo que va tratar mas o menos de una funcionalidad que te ayuda a registrar las horas de estudio y cuantas vecesz enciendes el celular y te distraes, si bien ya hay aplicaciones asi el hecho de que ya venga en tu celular, ayuda mucho a poder acceder e esta nueva funcion y te dara reportes semanales y algunos consejos para que puedas reflexionar un poco sobre tu tema de aprendizaje.

empece a investigar hoy un poco temprano listo para exposición de hoy pero, me di cuenta que la metáfora esta bien plasmada y la ia me dio algunas ideas para el icono y la forma del stickman pero mi grupo aveces no me contesta y nose como hacer las cosas, y no me dan muchas ideas, pero espero que hoy en la exposicion lo que intente pulir salga bien cambie algunas cosas en el diseño y la explicacion.

abstracción e iconicidad pintura realista imagen natural imagen en blanco y negro,pictograma,esquemas motivados, esquemas arbitrarios,representacion no figurativa.

el año 2000 una burbuja de los punto com exploto el cual es un fenomeno economico, todas las empresas buscaban modernizarse mediante el punto com, y todos pensaban , necesito un espacio en internet que represente mi posicion,la web 1 .0 se creo en 1994 y en el 2000 se creo la web 2.0, y actualmente algunas empresas trabajan con la web 3.0 , en 1998 existio google, y blogspot,youtube tambien surgio, ese año.

wikipedia, es un sitio donde las personas pueden informarse por lo que los demas escriben lo que saben pero existe la incertidumbre si es verdad o puros datos no reales.

´todos somos dueños del internet´