Domanda Mappa con bootstrap

[Valley]

Salve a tutti

Volevo realizzare una mappa della mia facoltà universitarià dato che non esiste (eh già..).
La mappa cartacea l'ho già fatta ora avevo pensato di farne una online, con un sistema di ricerca (lo studente scrive il nome del prof e la mappa indica dove è il suo ufficio).

Pensavo di usare per facilitarmi bootstrap ma sinceramente non so se sarebbe utile in questo caso.

N.b. non sono neanche un programmatore quidi pensavo di fare una cosa davvero easy con l'aiuto di qualcuno.
Chi potrebbe essere interessato?
@SpeedJack

 

[SpeedJack]

Puoi usare le API di Google maps. Basta che passi l'indirizzo è Google ti mostra la mappa.

 

[Valley]

Cioè?
Mi sono spiegato male scusami. Io parlo delle planimetrie (gli interni)

 

[TheSeeker]

Puoi usare le API di Google maps. Basta che passi l'indirizzo è Google ti mostra la mappa.

È una mappa interna, Google è invasiva si ma non così tanto.

Comunque, sinceramente penso sia fattibile anche senza Bootstrap se sai un minimo di HTML/CSS ma per esperienza, Bootstrap se usato con dovizia non fa mai male.

Parlando della meccanica, potresti implementare la mappa appunto in Bootstrap oppure creare un immagine, o meglio tante immagini ognuna con un ufficio evidenziato e, in base al prof scelto, visualizzare l'immagine giusta.

 

[Kolo93]

Effettivamente non è una cosa complicata, contattami in PM che facciamo una cosa veloce

 

[Valley]

È una mappa interna, Google è invasiva si ma non così tanto.

Comunque, sinceramente penso sia fattibile anche senza Bootstrap se sai un minimo di HTML/CSS ma per esperienza, Bootstrap se usato con dovizia non fa mai male.

Parlando della meccanica, potresti implementare la mappa appunto in Bootstrap oppure creare un immagine, o meglio tante immagini ognuna con un ufficio evidenziato e, in base al prof scelto, visualizzare l'immagine giusta.

Le immagini peserebbero un bel po'; con css sarebbe più leggero (i think).
Un qualche altro imput "logico" su come farlo con bootstrap? o cmq con css/html (che sono quelli che capisco meglio)

 

[Kolo93]

Non conosco bootstrap, sempre fatto tutto a mano. Per quanto riguarda le immagini puoi salvarle in png e ridimensionarle un po', fidati che non diventano poi tanto pesanti

 

[TheSeeker]

Le immagini peserebbero un bel po'; con css sarebbe più leggero (i think).
Un qualche altro imput "logico" su come farlo con bootstrap? o cmq con css/html (che sono quelli che capisco meglio)

Il peso è direttamente proporzionale ha come sono state fatte, o almeno così la penso io.

 

[Valley]

Non conosco bootstrap, sempre fatto tutto a mano. Per quanto riguarda le immagini puoi salvarle in png e ridimensionarle un po', fidati che non diventano poi tanto pesanti

Contate che parlo di un edifico a ferro di cavallo con 5 piani di 32.000 metri quadri eheh.
Non lo far dettagliato (all'inizio almeno) però cmq i prof, gli uffici e le aule sono tanti (quindi tante immagini)

 

[Kolo93]

Quindi mi stai dicendo che sarebbe più facile farlo per ogni singola persona di un paese con massimo 15000 abitanti che per il tuo fine?

 

[TheSeeker]

Contate che parlo di un edifico a ferro di cavallo con 5 piani di 32.000 metri quadri eheh.
Non lo far dettagliato (all'inizio almeno) però cmq i prof, gli uffici e le aule sono tanti (quindi tante immagini)

Allora ti conviene usare HTML/CSS.
Dai comunque un'occhiata in rete per vedere se esiste qualche libreria o template che fa a caso tuo.

 

[Valley]

Grazie del supporto; incomincio e vi farò sapere!

 

[Valley]

Informo che ho capito come farla con css e html; è lunghissimo ma sarà sicuramente (penso) più veloce rispetto a caricare contemporaneamente 50-100 immagini =)
Appena avrò finito la mappa base vi dico come ho fatto che mi date pareri !

 

[Kolo93]

Sono curioso di vedere che ne sta uscendo

 

[Valley]

Sono curioso di vedere che ne sta uscendo

Per ora sto facendo la mappa schematica (quella che avevo fatto cartacea). In un futuro "più lontano" farò quella più dettagliata

 

[Valley]

Un anteprima (clicca per ingrandire)

 

[Valley]

Piano zero finito (o quasi):


Comunque ho suddiviso tutto in quadri e rettangoli e ho fatto uno stile per ognuno.
Ho usato moltissimo copia incolla, io ho solo modificato le dimensioni.

Esempio di css utilizzato:

#piano1d64{
    position: relative;
    float:left;
    top: 0;
    left: 0;
    width: 14.5%;
    height: 65px;
    background: #E7D774;
    color: #FFF;
}

Richiamato in html con:

<div id="piano1d64"></div>

Questo piano zero contiene 77 rettangoli e quindi 77 stili (lol).
@Kolo93

 

[TheSeeker]

Sembra molto confuso, non sarebbe meglio fare uno stile unico, più sobrio e pulito?

 

[Kolo93]

Ma i rettangoli sarebbero gli uffici che poi dovrai andare a "zoommare" quando scegli il prof?

 

[</Singh>™]

Secondo me ti sei complicato la vita

 

[Kolo93]

Concordo in pieno

 

[Valley]

Eccomi tornato.

Non mi sento di essermi complicato la vita; il css è molto chiaro grazie anche ai commenti; non ci ho messo troppo tempo perchè è stato tutto un copia incolla e il sito è molto più veloce.
Ora posso gestirmi molto più comodamente la mappa dato che è css è anche responsive.

Vi terrò aggiornati se ho problemi, grazie!

p.s. sezione un po' vuota ma davvero ottima questa! Così tanto supporto non me lo aspettavo, grandi!

 

[Valley]

Una domanda l'ho già

Cosa devo usare per far si che al click di un bottone cambi il css di uno dei quadri?
Ho trovato :focus ma non so come associare la cosa all'evento click del bottone

 

[Kolo93]

Codice bottone:
<input type="button" id="pulsante"..... onClick=" funzione() " />
l'evento si chiama "onClick" e permette di aprire una funzione javascript.
Per cambiare il css ci sta la proprietà "style".
Tecnicamente il codice da mettere nella funzione sarebbe:

document.getElementById("pulsante").style.color="red";

 

[TheSeeker]

Una domanda l'ho già

Cosa devo usare per far si che al click di un bottone cambi il css di uno dei quadri?
Ho trovato :focus ma non so come associare la cosa all'evento click del bottone

#room1:focus, #room1:active {
background-color: #BLABLA;
}