Giter Club home page Giter Club logo

buses's Introduction

web-buses: estructura de la página web

Cómo comenzar a programar: Developer setup (Comparte cualquier duda para mejorar la documentación)

Todas las páginas tienen dentro de base.html:

  • Encabezado: logo, íconos de las rutas, menú plegado
  • Pie: menú completo, otra información

Arquitectura de información (inventario de contenidos)

  • / : (index.html) : avisos, próximos buses, noticias, (publicidad)
    • /rutas/ : (rutas.html) : lista de rutas de la empresa
      • /rutas/sangabriel/ : (ruta.html) : próximo bus, horario, precios, mapas, (publicidad)
      • /rutas/acosta/ : (ruta.html) : próximo bus, horario, precios, mapas, (publicidad)
      • /rutas/… : (ruta.html) : otras rutas
    • /noticias/ : (noticias.html) : avisos, noticias (registro histórico de noticias)
    • /nosotros/ : (empresa.html) : reseña de la empresa, socios, patrocinadores
      • /nosotros/personal/ : (personal.html) : personal, cumpleaños
    • /comunidades/ : (comunidades.html) : reseña de la zona
      • /comunidades/sangabriel/ : (comunidad.html) : historia de San Gabriel
      • /comunidades/acosta/ : (comunidad.html) : historia de Acosta
      • /comunidades/… : (comunidad.html) : historia de otras comunidades
    • /contacto/ : (contacto.html) : correo y teléfono, formulario de contacto (varios opciones: objetos perdidos, para mejorar, denuncias, etc.)

Apps

  • Inicio
  • Rutas
  • Empresa
  • Noticias
  • Comunidades
  • Contacto

Modelos para cada app

  • Noticias —> informaciones temporales para desplegar en varias secciones

    • (class) Noticia: noticias generales que se muestran en inicio y en sección noticias
      • título
      • fecha
      • descripción corta
      • descripción larga
      • documento (opcional)
      • expiración
    • (class) Aviso: avisos urgentes que se muestran en contenedor especial en página de inicio y en la de noticias
      • título
      • fecha
      • descripción corta
      • expiración
      • urgencia (1, 2, 3, asociado con íconos)
      • ligar a una noticia (opcional, crear noticia, ahí agregar documento)
  • Comunidades —> páginas estáticas con reseñas de la comunidad que generalmente no va a cambiar

    • (class) Comunidad: información de las comunidades
      • nombre
      • url
      • historia
      • foto
  • Empresa —> información y actores relacionados con la empresa

    • (class) Empresa: información general de la empresa
      • descripción
    • (class) Personal: descripción de todos los colaboradores
      • nombre
      • apellido
      • puesto
      • foto
    • (class) Socio: descripción de todos los socios
    • (class) Patrocinador: descripción de todos los patrocinadores
  • Contacto —> página de contacto con la empresa

    • (class) Formulario: formulario de contacto
      • nombre
      • correo
      • asunto
      • texto
  • Rutas —> información del servicio según GTFS

    • (class) Agencia: (agency) información general de la empresa, según GTFS
      • agency_id
      • agency_name
      • agency_url
    • (class) Parada: (stops) información de las paradas autorizadas, según GTFS
      • stop_id
      • stop_code
      • stop_name
    • (class) Ruta: (routes) información general de la ruta, según GTFS
      • route_id
      • agency_id
      • route_short_name
    • (class) Viaje: (trips) cada uno de los viajes con su horario, según GTFS
      • route_id
      • service_id
      • trip_id
    • (class) Horario: (stop_times) la hora de partida de cada viaje
      • trip_id
      • arrival_time
      • departure_time
    • (class) Calendario: (calendar) días en que funciona con distintos horarios (entre semana, sábados, domingos)
      • service_id (“entre_semana”, “sabado”, “domingo”, “feriado”)
      • monday
      • tuesday
      • … (ejemplo: entre_semana,1,1,1,1,1,0,0,20200815,20200915)
    • (class) Feriado: (calendar_dates) excepciones a Calendario para los feriados del año
      • service_id
      • date
      • exception_type

Templates para cada app

  • Inicio

    • index.html: página principal del sitio
  • Rutas

    • rutas.html: lista de rutas
      • ruta.html: descripción de cada ruta
  • Noticias

    • noticias.html: lista de noticias
  • Empresa

    • empresa.html: reseña de la empresa
      • personal.html: lista de personal
  • Comunidades

    • comunidades.html: reseña y lista de comunidades
      • comunidad.html: descripción de cada comunidad
  • Contacto

    • contacto.html: información y formulario de contacto

buses's People

Contributors

anyelomijael avatar davidreta avatar fabianabarca avatar glorianamv avatar jeancahu avatar paulactrl avatar royerchq avatar silvionsky avatar solzc avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar  avatar

buses's Issues

Desplegar información de feed_info en GTFS

Como datos "técnicos" se pueden incluir en la página de GTFS, y las informaciones importantes son: contacto, período de validez, versión. Crear un "card" y jalar la información desde la base de datos con GTFS.

Crear colores para utilizar en Bootstrap

Actualmente el sitio utiliza colores genéricos de Bootstrap (primary, secondary, success, danger, warning, info...). Hay que crear otros como bg-sangabriel y text-sangabriel, y bg-acosta y text-acosta con los colores asignados a cada ruta en GTFS, para dar acentos en el diseño de cada página.

Versión imprimible (o "foto") de los horarios

Mucha gente prefiere compartir el horario o tenerlo para consulta como una foto (en lugar de visitar la página, quizá por consideración de consumo de datos, o lo que sea), así que sería buena poner esa versión a disposición también. Hay que diseñarla y/o generarla a partir de los datos con, quizá, LaTeX o alguna otra forma de transcripción.

Altimetría de las rutas

El ascenso y descenso es notable en estas rutas. Se puede representar con un gráfico de altimetría (y con las herramientas de visualización de JavaScript puede verse bonito). Para construirlo, se puede ampliar los datos de shapes.txt para incluir la altura (msnm) en cada coordenada.

Hospedaje de prueba en Heroku

Llevar el proyecto a Heroku de prueba. Documentar el proceso para hacerlo y habilitar credenciales para poder actualizarlo frecuentemente.

"Widget" con la información diaria sobre restricciones vehiculares

La información disponible en páginas oficiales o incluso en medios es críptica:

restricciones

Crucialmente, no hay información para el día específico en el que estamos, por ejemplo, un aviso que diga:

Hoy martes 8 de junio solo circulan las placas terminadas en números impares (1, 3, 5, 7, 9)

Que, es mi intuición, es la información puntual que la mayoría de la gente quiere. Incluso se puede traducir (es solo una frase) a N idiomas distintos, como ejercicio y porque puede ser importante para turistas.

Oportunidades: la información en La Nación, por ejemplo, no tiene ninguna sofisticación y podríamos mejorarla: https://www.nacion.com/el-pais/servicios/restriccion-vehicular-sanitaria-en-junio-2021/PQMQLN2AU5AZRFSEIC2DKKBKTU/story/

Algo relativamente sencillo: introducir la placa y que muestre en un calendario todos los días en que puede circular.

Consulta de tarifas

Con las tablas fare_attributes y fare_rules se puede determinar las tarifas según la parada y la zona de origen y destino. Es necesario crear un "widget" para que la gente haga esta consulta, según la ruta que está viendo. La plantilla de Bootstrap actual ofrece esta opción, por ejemplo: https://htmlstream.com/front/documentation/step-form.html pero se pueden buscar otras formas (ver referentes internacionales).

Páginas de error

Crear una página para el error 404 y 50x, esta página preferiblemente estática sería el sink al cual redireccionar desde NGINX en caso de solicitar cualquier dirección que esté prohibida o que no exista como tal, actualmente en el modo DEBUG se muestra la página de Django con todo el trace pero en producción se muestra el not found por defecto del navegador que es bastante feo y puede confundir, la página debería llamarse 404.html y 50x.html y estar en la raíz de el directorio de estáticos, no necesariamente tiene que ser estática pero si lo fuera sería mejor porque podría funcionar inclusive antes de preguntarle al WSGI

Convertir los horarios en un "look-up table" luego de ejecutarlo la primera vez

Los horarios se obtienen de una inspección de rutas, viajes, las paradas y tiempos de las paradas, pero luego resulta simplemente en una tabla, que no cambia hasta que no se haga un cambio en GTFS (que sucede pocas veces al año).

Debería hacerse una sola ejecución y guardarse el resultado en una tabla de la base de datos de Django (creadas para este fin) y cargar la página desde ahí, generando el mismo "contexto" con el que ya trabaja la plantilla ruta.html. Posiblemente la tabla generada se sube como un "fixture" con python manage.py loaddata horarios_sangabriel.json, por ejemplo.

Sería importante automatizar este proceso de creación cuando se actualiza el GTFS.

Imagen de fondo del sitio

Para crear un mayor contraste con algunos elementos, y para aprovechar que las "alertas" tienen transparencia, crear y aplicar una imagen de fondo tenue, en escala de grises para darle más "vistosidad" al sitio.

header nav de permanecer sin efecto es mejor con sticky

La barra horizontal de navegación en la parte de arriba de la página en su forma para desktop, originalmente viene con la siguiente clase de css.

.header-sticky-top-lg {
    position: fixed;
    bottom: auto;
    top: 0;
}

la position de tipo fixed no introduce un área en el documento, al igual que el absolute no se posiciona entre los otros elementos, lo que hace que todos los demás elementos ignoren su existencia.

el siguiente elemento en el documento es el main este elemento empieza desde arriba de la página, se traslapa con el topbar porque lo ignora y se muestra por debajo del esta barra. Para evitar esto el creador del tema introdujo un espacio vertical al inicio de main igual en alto al de la barra, esto normalmente no se hace así pero el diseñador lo hizo porque él quería que el tema tuviera un efecto en el que la barra se desaparece y aparece conforme se hace scroll hacia abajo o hacia arriba.

Actualmente el efecto ha dejado de funcionar o está desactivado, de dejarlo así entonces ya no tendría sentido mantener el fixed, para evitar tener que dejar ese espacio vacío en main lo mejor sería usar sticky el cual SI posiciona en el documento, obligando a los demás elementos a ordenarse respetando el área de la barra. para esto se podría hacer con la siguiente clase:

.custom-header-sticky-top-lg {
    position: sticky;
    bottom: auto;
    top: 0;
}

Actualización del README.md

Nuevo documento de presentación del proyecto, que tiene que ser bien explicado y diagramado para el lanzamiento del sitio (y posible visitas al repositorio de personas interesadas).

Puede incluir, al menos, las siguientes secciones (algunas de ellas obtenidas del sitio mismo):

  • Presentación (hecho por el TCU, etc.)
  • Tecnologías
  • Agradecimientos
  • Participantes
  • GTFS

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.