CSS Come sviluppate il design del sito (JS e CSS)? [Best Practices]

[SyncroIT]

Ciao. Non ho bisogno di sapere le tecniche o le funzioni, ma volevo curiosare sulle pratiche migliori che usate per sviluppare il design di un sito. A parte i gusti e tutto, cosa fate? Che framework usate?
Io per JS uso solo jQuery e per CSS uso Bootstrap o Foundation (dipende), poi uso qualche cosa presa da GitHub che può servirmi e non riesco a fare io in persona. Il problema è che nell'ufficio in cui lavoro, mi vengono spesso chieste modifiche che apparentemente non sono collegate tra loro per il semplice fatto che mi vengono chieste certe cose prima e certe cose dopo, e di conseguenza vado a scrivere una marea di codice e di righe.. ripetizioni ecc.
Il sistema sul quale lavoro non utilizza alcun framework PHP (quindi parliamo di programmazione, ma su questo non c'è problema), più che altro si ripetono tante cose nel front-end..

Comunque, anche per le singole cose.. vorrei chiedere a voi, come fate, che metodi usate ecc..
Vi faccio un esempio..

Io per scrivere una richiesta POST in jQuery che in base alla risposta cambia il colore di un alert fatto con Foundation e ne cambia il testo, faccio cosi..

<script type="text/javascript">
function request() {
    var alert = $('#form #alert');
    $(alert).hide();
    $.post('url.php', { index: 'value' }, function(r) {
        if(r.err > 0) $(alert).removeClass('success').addClass('warning').html('Si è verificato un errore!').show();
        else $(alert).removeClass('warning').addClass('success').html('Processo effettuato con successo!').show();
    }, 'json').fail(function() {
        $(alert).removeClass('success').addClass('warning').html('Si è verificato un errore!').show();
    });
}
</script>

Il codice l'ho fatto al volo per farvi capire, uso sempre tecniche del genere. Voi quali usereste e come fareste operazioni simili? Raccontate

 

[Dazorn]

Io faccio tutto a mano, parto dall'html, costruendo una mappa mentale del sito.
Da lì inizio a dar grafica ai tag html, partendo dall'alto verso il basso.
Dopodichè implemento alcune funzioni jquery che ho fatto o feci (messe da parte) come il tasto per tornare in alto, slider o menu mobile.
Infine lavoro sul lato responsive del sito. Nel caso ci sia anche php, lo faccio in contemporanea con html.

 

[TheSeeker]

1. Progetto su carta
2. Struttura HTML
3. Applico CSS
4. Applico JS
5. Correggo le schifezze fatte nei 4 step precedenti.

 

[Utente cancellato 210785]

L'approccio indicato precedentemente e' un classico approccio di chi deve realizzare una pagina Web, fondamentalmente un cartellone pubblicitario.

Tutt'altro discorso se uno deve realizzare un'applicazione che richiede interazione con l'utente: i web developer la chiamano SPA (Single Page Application), ma non e' altro che una normale applicazione con interfaccia come Word, Outlook, Internet Explorer, ecc...

In questo caso le tecnologie base sono sempre le stesse:

1) il linguaggio di programmazione e' Javascript invece che C++
2) l'interfaccia utente viene realizzata con HTM+CSS invece che con MFC, Qt, wxWidgets,

invece, l'applicazione va realizzata seguendo uno dei diversi patterni che si usano di solito per applicazioni del genere:
MVC (Model, View, Controller), MVP (Model, View, Presenter), MVVM (Model, View, ViewModel).

A seconda del pattern e della filosofia scelta, ci sono librerie che supportano lo sviluppo:

AngularJS / Polymer
Backbone.js / Knockout.js
Ember.js
React.js / Riot.js / Mithrill.js
... ce ne sono un'infinita' di altre, ma sono troppo recenti o sono state abbandonate o hanno poca documentazione ...

A questo vanno aggiunte librerie di componenti gia' pronti come

jquery-ui e relative estensioni
jquery-easyui
jqwidgets
.. ecc ...

oppure librerie come bootstrap.js, ...

Poi, volendo, se uno vuole utilizzare nello sviluppo un approccio alla programmazione funzionale (ideale per Javascript, visto che al contrario di quanto fa pensare il nome, Javascript e' piu' simile al Lisp che a Java, esclusa la sintassi), ci sono un paio di simpatiche librerie da conoscere:

underscore.js / lodash.js

e, ovviamente, l'intrammontabile jquery.js

E queste sono appena le informazioni base per fare dello sviluppo Web un'attivita' piu' evoluta che non la banale paginetta HTML.

Poi c'e' lo sviluppo lato server, sempre in javascript, con node.js, ...

Direi che come inizio puo' bastare

 

[TheSeeker]

Ovviamente c'è anche il fattore usabilità ma non penso sia questo il topic.

 

[SyncroIT]

Si @TheSeeker
E' questo il topic, voglio parlare anche di User Experience e concetti simili, comunque io non ho mai usato framework client-side, mentre per quanto riguarda il server-side ho sempre usato framework appartenente al pattern MVC, tra questi CodeIgniter (che non mi è piaciuto molto) e Laravel 5 (che ormai ne vado talmente matto che senza non faccio più nulla).
Per quanto riguarda l'interazione con l'utente (che ha citato @alynaa ) vorrei dire che secondo me è sbagliato, ormai non solo i programmi stand-alone offrono un'interazione con l'utente, ma anche le applicazioni web la offrono. Un chiaro esempio è Google Drive che è totalmente accessibile online con un browser (senza Flash Player) e nella maggior parte dei casi i strumenti sono totalmente client-side, solo le operazioni di salvataggio per quanto io ne sappia vengono fatte in server-side.

 

[TheSeeker]

Si @TheSeeker
E' questo il topic, voglio parlare anche di User Experience e concetti simili, comunque io non ho mai usato framework client-side, mentre per quanto riguarda il server-side ho sempre usato framework appartenente al pattern MVC, tra questi CodeIgniter (che non mi è piaciuto molto) e Laravel 5 (che ormai ne vado talmente matto che senza non faccio più nulla).
Per quanto riguarda l'interazione con l'utente (che ha citato @alynaa ) vorrei dire che secondo me è sbagliato, ormai non solo i programmi stand-alone offrono un'interazione con l'utente, ma anche le applicazioni web la offrono. Un chiaro esempio è Google Drive che è totalmente accessibile online con un browser (senza Flash Player) e nella maggior parte dei casi i strumenti sono totalmente client-side, solo le operazioni di salvataggio per quanto io ne sappia vengono fatte in server-side.

Quello di alynaa era solo un esempio :3

 

[TheSeeker]

Si @TheSeeker
E' questo il topic, voglio parlare anche di User Experience e concetti simili, comunque io non ho mai usato framework client-side, mentre per quanto riguarda il server-side ho sempre usato framework appartenente al pattern MVC, tra questi CodeIgniter (che non mi è piaciuto molto) e Laravel 5 (che ormai ne vado talmente matto che senza non faccio più nulla).
Per quanto riguarda l'interazione con l'utente (che ha citato @alynaa ) vorrei dire che secondo me è sbagliato, ormai non solo i programmi stand-alone offrono un'interazione con l'utente, ma anche le applicazioni web la offrono. Un chiaro esempio è Google Drive che è totalmente accessibile online con un browser (senza Flash Player) e nella maggior parte dei casi i strumenti sono totalmente client-side, solo le operazioni di salvataggio per quanto io ne sappia vengono fatte in server-side.

Prima di iniziare a scrivere codice inventò, su carta, due o tre persone, degli "utenti ideali" tutti diversi tra di loro e mi chiedo perche dovrebbero scegliere il mio sito, di cosa potrebbero avere bisogno, come spingerli ad entrare e, perché no, come farci qualche soldino.

Dopo, sempre su carta, creo una bozza di quello che sarà il sito, dipendentemente dal target la bozza rappresenterà o la versione mobile o quella desktop.

Passo poi alla realizzazione in HTML(5), creo la struttura completa e non una piccola parte.

Si passa poi al CSS, dipendemente dal progetto uso Bootstrap o un piccolo framework homemade oppure un framework fatto apposta.

Poi si passa al l'usabilità web, non sono un esperto ma cerco di rispettare le raccomandazioni della W3C, giusto per dire una cosa stupida, se ho un link non levo l'outline (che a me non piace proprio) perché so che gli screen reader lo usano per capire se quello sia un link, ripeto, esempio stupido ma penso che il concetto sia passato.

Evito il JavaScript finché posso, non perche non mi piaccia ma perché se se ne può fare a meno è sempre meglio.
Dipendemente dal progetto uso jQuery.

Lato server uso Python, o meglio l'ho iniziato a usare da poco e mi ci trovo bene, uso il microframework Flask.

Una volta ottenuto un prototipo o comunque un qualcosa di funzionante lo testo, lo raffino e, se ne vale la pena, lo riscrivo per bene.

Sono abbastanza perfezionista quindi riscrivo e riscrivo molte volte, per dirti, il framework homemade che uso l'ho riscritto 20 volte perché non mi piaceva com'era uscito e tra poco ho intenzione di riscriverlo.