A history of violence: aka faccio un sito web da 0

css
html

#1

Tutto inizia con me che parlo ad un amico pittore, che mi chiede se gli faccio un sito web per le sue opere, “nessun problema” gli dico io, pensando di cavarmela buttando su un host qualche tema wordpress e smanettandoci un poco a livello grafico. I casini sono iniziati quando ha iniziato a richiedere un sito esattamente come lo voleva lui.

Così decido di partire da 0 e di farlo tutto. E’ un sito tutto sommato semplice, ma il mio html è parecchio arrugginito e col css combatto come fosse una zanzara.

Qui scriverò la storia del sito, se interessa a qualcuno, altrimenti la scrivo comunque.

-fine prima puntata-


#2

E’ quello che faccio da anni… a volte riesco anche a farmi pagare :slight_smile:
Ma con gli amici…
Credo sia il modo migliore per rovinare un’amicizia :zip:


#3

Hai proprio ragione… comunque…

Dopo aver scritto un po’ di codice, messo uno sfondo, cercato guide improbabili sul www… Bam! bum! Sbatto contro il css che sembra non rispondere alle leggi della fisica, l’approccio metafisico e quantistico, invece, pare funzionare.

Così resomi conto che il risultato faticava a venir fuori, chiedo aiuto in chat. :meme_surprised_open_mouth:

Il mio lavoro ricomincia da qui http://codepen.io (grazie @dax per la dritta) scelgo una base responsive da adattare alle mie necessità (o meglio, a quelle dell’artista). Piazzo il menù, come piace a lui, stile e font sono abbastanza facili, aggiungo codice qua e là, uno sfondo, un po’ di padding, i suoi disegni e finalmente la pagina acquista una visuale anche nel mondo fisico.

La strada è ancora lunga, ma vedere coi propri occhi del codice che prende vita dà una certa soddisfazione.

Non sono convinto dell’idea di base dell’artista che, in quanto tale, sa esattamente cosa vuole a livello visivo. Ma se ciò cozzasse contro tutti i “canoni estetici” di un sito web?

Pare che ci sia dell’abilità politica da mettere in gioco, o forse no, in fondo, bene che vada mi regala un quadro…

Torno al codice…

-fine seconda puntata-


#4

Il sito viene fuori piano piano, ma ogni idea che mi viene o che mi viene proposta, viene cassata dal titolare…

che strazio! è anche un po’ frustrante, ma contento lui…

Certo, io che volevo liberare la mia creatività da pianista… l’unico dettaglio che sono riuscito a ficcargli in testa è l’“effetto polaroid” (mio copyright 2016) in una singola galleria (tra l’altro nemmeno in quella delle foto… :meme_questioning: ): quella degli schizzi su foglio. Chissà se lo vorrà sui quadri… che per ora mancano (e sono la parte più importante, ma non avendomeli ancora dati…), più o meno tutto il resto c’è, con qualche mancanza e modifiche che ho in mente, ma che tanto mi casserà.

Evviva la creatività senza baletti! (per citare la Guzzanti imitante la Annunziata) .

Altre modifiche fatte alleggerendo il sito (essendo praticamente solo immagini) creando le mitticche thumbnails per le foto, altrimenti esplodeva il cellulare ogni volta che aprivo una pagina.
#####a proposito: memento: gran comando: - mogrify -resize 300x300 *.png *.jpg - e voilà.

A sito concluso vi fornirò un link per insultarmi, così, per puro autolesionismo.

Finisco questa puntata con un grazie @dax che mi guida e dà consigli, è facile perdere la retta via della luce! (Ossia cercare soluzioni impossibili a problemi che invece sono risolvibili banalmente sciacallando il lavoro degli altri).
Thanks!

-fine terza puntata-


#5

E certo, perchè sbattere la testa a fare qualcosa che nemmeno ti pagano e che poi manco gli va bene? Soluzioni semplici a problemi difficili è la mia filosofia e se altri hanno già risolto gli stessi problemi e hanno condiviso i loro lavori perchè non usarli (e modificarli)? :meme_happy_smile:


#6

Ben detto!

Stamattina dovrei focalizzarmi sull’aggiunta del javascript per ingrandire i quadri al click. Le immagini, in generale, dovrebbero aprirsi nella stessa pagina e mostrare quindi una descrizione (titolo, descrizione, autore della foto…).

Bel casino.

Seguendo la filosofia daxxiana, pensavo di partire da qui http://codepen.io/mglissmann/pen/zxXvpq , ma forse per come è scritto il mio sito meglio da qui http://codepen.io/loumontano/pen/HgdAm.

A tutto ciò devo aggiungere le scritte descrittive.

Intanto allego due screen…


Spero che un caffè mi dia l’ispirazione giusta per continuare. :meme_dude_come_on:


#7

La prima immagine mi sembra molto larga per un normale schermo, che succede su uno smartphone?
L’effetto polaroid col bordo a destra… perché? Come lo utilizzi quello spazio bianco?

P.S.- ricordati che sia i quadri che le foto possono anche essere orizzontali, o quadrati :wink:


#8

La prima immagine è tagliata. In uno schermo grande ci sono 4 foto in linea orrizzontale, che si riducono e vanno sotto man mano che lo schermo si rimpicciolisce. Fino agli schermi tipo ipad va tutto bene. Su uno smartphone non riesco fargli capire di zoomare tutto (mi manca sicuramente qualche passaggio da inserire in @media ) se hai qualche dritta, spara pure, è ben accetta.

Per quanto riguarda i quadri orrizzontali, funzia tutto, si mettono sdraiati e via, l’effetto polaroid funziona, in caso di disegni quadrati, riempono tutto lo spazio bianco fino al margine :wink:


#9

Io ho utilizzato questo:
@media only screen and (min-device-width:100px) and (max-device-width :1024px) {
all’interno ho messo tutte le specifiche per gli schermi a bassa risoluzione.


#10

Fatto siti we per 12 anni anche per grandi compagnie (Voda****, Alfa R****, Neg***, Pane***) e altri.
Sempre smadonnato in aramaico antico tanto che per destino o fortuna ora faccio videogiochi.
Mai più siti internet per gente che non capisce nulla e ti dice. Cosa ci vuole a cambire… 5 minuti? Ma vaff*****+


#11

Parole sante, lo sto provando sulla mia pelle!


#12

Tornando da qualche giorno al fresco del lago maggiore, mi ributto su ciò che manca del sito: la presentazione dei suoi lavori. Una gallery sfogliabile, insomma.

Sono quasi sicuro (dopo diverse altre soluzioni vagliate - grazie @FastFede) che la soluzione corretta sia usare questo http://codepen.io/leemark/pen/Ddgsx, aprendo una pagina html dedicata alla galleria (fullscreen). Ma mi sento un pirla, non riesco a farlo nemmeno creando una pagina e copiando paro paro il codice dal sito e mettendolo su una pagina in locale :frustrato:.

Posto qui i codici, sperando in un aiuto.

E, in attesa di una illuminazione umana o divina, leggo e studio, studio e leggo. Eppure sto cavolo di javascript non ne vuole sapere di partire.


Sicuramente sarà una scemenza, ma non capisco dove sta l’inghippo.
Ecco il codice, così come l’ho copiato dal sito.

Html:

<!DOCTYPE html>
<html lang="en">
  <head>
        <meta charset="UTF-8">
        <script src="jquery-3.1.0.min.js"></script>
         <script type="text/javascript" src="slideshow.js"></script> <!--js slideshow-->
        <script type="text/javascript" src="backlink.js"></script> <!--backlink-->
    </head>

    <body>
        <header>
           <title>Prova</title>
            <link rel="stylesheet" type="text/css" href="style.css" /> <!-- link a foglio di stile -->
        </header>
      <div class="page">
          <div class="cols">
                <FORM><INPUT Type="button" VALUE="Back" onClick="history.go(-1);return true;"></FORM>  <!--bottone backlink-->
                <main>
                    <div class="diy-slideshow">
                        <figure class="show">
                            <img src="http://themarklee.com/wp-content/uploads/2013/12/snowying.jpg" width="100%" /><figcaption>"Snowying" by <a href="http://www.flickr.com/photos/fiddleoak/8511209344/">fiddleoak</a>.</figcaption> 
                        </figure>
                      <figure>
                        <img src="http://themarklee.com/wp-content/uploads/2013/12/starlight.jpg" width="100%" /><figcaption>"Starlight" by <a href="http://www.flickr.com/photos/chaoticmind75/10738494123/in/set-72157626146319517">ChaoticMind75</a>.</figcaption> 
                        </figure>
                        <figure>
                            <img src="http://themarklee.com/wp-content/uploads/2013/12/snowstorm.jpg" width="100%" /><figcaption>"Snowstorm" by <a href="http://www.flickr.com/photos/tylerbeaulawrence/8539457508/">Beaulawrence</a>.</figcaption> 
                        </figure>
                      <figure>
                            <img src="http://themarklee.com/wp-content/uploads/2013/12/misty-winter-afternoon.jpg" width="100%" /><figcaption>"Misty winter afternoon" by <a href="http://www.flickr.com/photos/22746515@N02/5277611659/">Bert Kaufmann</a>.</figcaption> 
                        </figure>
                      <figure>
                            <img src="http://themarklee.com/wp-content/uploads/2013/12/good-morning.jpg" width="100%" /><figcaption>"Good Morning!" by <a href="http://www.flickr.com/photos/frank_wuestefeld/4306107546/">Frank Wuestefeld</a>.</figcaption> 
                        </figure>
                      <figure>
                            <img src="http://themarklee.com/wp-content/uploads/2013/12/driving-home-for-christmas.jpg" width="100%" /><figcaption>"Driving home for Christmas" by <a href="http://www.flickr.com/photos/22746515@N02/5292186041/">Bert Kaufmann</a>.</figcaption> 
                        </figure>
                      <span class="prev">&laquo;</span> <!--bottoni navigazione-->
                      <span class="next">&raquo;</span> <!--bottoni navigazione-->
                    </div> <!--diy-slideshow-->
                </main>
      </div> <!--cols-->
        </div> <!--page-->
    </body>
</html>

css: (solo la parte relativa allo slideshow in esame, aggiunta al mio foglio di stile)

.diy-slideshow{
  position: relative;
  display: block;
  overflow: hidden;
}
figure{
  position: absolute;
  opacity: 0;
  transition: 1s opacity;
}
figcaption{
  position: absolute;
  font-family: sans-serif;
  font-size: .8em;
  bottom: .75em;
  right: .35em;
  padding: .25em;
  color: #fff;
  background: rgba(0,0,0, .25);
  border-radius: 2px;
}
figcaption a{
  color: #fff;
}
figure.show{
  opacity: 1;
  position: static;
  transition: 1s opacity;
}
.next, .prev{
  color: #fff;
  position: absolute;
  background: rgba(0,0,0, .6);
  top: 50%;
  z-index: 1;
  font-size: 2em;
  margin-top: -.75em;
  opacity: .3;
  user-select: none;
}
.next:hover, .prev:hover{
  cursor: pointer;
  opacity: 1;
}
.next{
  right: 0;
  padding: 10px 5px 15px 10px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.prev{
  left: 0;
  padding: 10px 10px 15px 5px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

js: (il misterioso codice che non vule funzionare):

var counter = 0, // to keep track of current slide
    $items = $('.diy-slideshow figure'), // a collection of all of the slides, caching for performance
    numItems = $items.length; // total number of slides

// this function is what cycles the slides, showing the next or previous slide and hiding all the others
var showCurrent = function(){
    var itemToShow = Math.abs(counter%numItems);// uses remainder (aka modulo) operator to get the actual index of the element to show  
   
  $items.removeClass('show'); // remove .show from whichever element currently has it
  $items.eq(itemToShow).addClass('show');    
};

// add click events to prev & next buttons 
$('.next').on('click', function(){
    counter++;
    showCurrent(); 
});
$('.prev').on('click', function(){
    counter--;
    showCurrent(); 
});

// if touch events are supported then add swipe interactions using TouchSwipe https://github.com/mattbryson/TouchSwipe-Jquery-Plugin
if('ontouchstart' in window){
  $('.diy-slideshow').swipe({
    swipeLeft:function() {
      counter++;
      showCurrent(); 
    },
    swipeRight:function() {
      counter--;
      showCurrent(); 
    }
  });
}

Probabilmente la mia non conoscenza di js mi mette in crisi. Ho bisogno di una pausa, :muro:
-fine dell’ennesima puntata-


#13

Guarda il sorgente della pagina, manca un bel po’ di codice rispetto a quello che mette come esempio. Credo che tu debba trovare il pacchetto completo, Ma forse è disponibile solo agli iscritti


#14

Carissimi e assidui lettori di questa avvincente rubrica (:rolling_eyes:) oggi è un triste giorno.
Sono impazzito più e più volte, rischiando l’internamento, ho combattuto valorosamente e sono stato sconfitto.

Ho studiato e chiesto aiuto, ho scritto codici, sono ripartito con bootstrap, ho cercato di capire i dannati js, ho pregato tutti gli dei dell’induismo, ma non ho trovato nessun figlio di Shiva dedito al codice. Purtroppo la data di consegna si avvicina, così non ho potuto far altro che abdicare.

In favore di chi? vi chiederete voi, non stando più nella pelle.

Beh, di wordpress, naturalmente.

Ho preso un tema semplice semplice, senza css, e mi sono messo a scartavetrare tutto. Dopodiché, avendo già un foglio di stile e le pagine html, in un’oretta ho trasferito il codice e fatto i template. Poi ho trasferito tutto e caricato i media.

Tutta colpa di quella dannata gallery, mi stavano venendo i capelli grigi. La soluzione è: un plugin e via. E basta sbattimenti.

Sinceramente, dopo tutta la fatica fatta, è una mezza sconfitta, anche se alla fine il risultato è identico. Certo, avere un bello strumento che facilita la vita è una meraviglia. Forse avrei dovuto fare così sin da subito, ma che ne sarebbe stato di questo emozionante racconto!?

Vorrete vedere il risultato, nevvero?

Ci vuole ancora un giorno o due, il tempo di ricevere approvazione (o meglio, richieste di modifiche…) dal magnate.

Stay tuned.

-fine penultima puntata-


#15

L’importante non è vincere una battaglia ma la guerra!
Quella col codice è vinta, ora devi superare il supremo giudizio del Magnate… e sai come sono questi ricconi :fear:


#16

E allora?
Il magnate ti ha magnato?
Com’è finita?


#17

Hai ragione. È finito. Ora dovrò solo aggiungere dei quadri man mano. Il risultato è discreto a mio parere, non tenendo conto dei canoni del “buon sito web” che gli ho consigliato. Lui ha ovviamente voluto fare di testa sua, ed è venuto - a quanto dice - esattamente come voleva.
Quindi mi ritengo soddisfatto per averlo reso soddisfatto. Nonostante i punti negativi (ad esempio, non è mobile friendly, ma, contento lui…)


enjoy!


#18

quindi il sito lo voleva esattamente cosi…:muro::muro::muro::muro::omg::omg::omg:


#19

eh sì, artisti… Non credo che lo farò mai più.


#20

io sono giunto alla conclusione che un sito debba essere per prima cosa mantenibile facilmente.
wordpress sempra perfetto a prima vista ma poi si rivela un lavoro immane tra la scelta di centinai di plugin indispensabili tra migliai del market.
Sono piu’ portato ad usare dei generatori mono pagin di siti usando js css. ce ne sono molti ed alcuni usano markdown come qui per i post. maè ovvio che non ci sono gallery elaborate come su wordpress.