Flettere o non flettere durante la creazione di un sito web
Flex è una tecnologia che ridimensiona e riposiziona automaticamente gli elementi web in modo che funzionino su dispositivi di qualsiasi dimensione e con qualsiasi forma. Questo si chiama responsive web design, utilizzando una funzionalità integrata di HTML5 chiamata “flexbox”. Non è necessario saperlo per usarlo. Al giorno d’oggi quasi tutti i siti web sono “reattivi” e la maggior parte utilizza Flex.
Probabilmente vedi immediatamente una delle insidie di questo: se il dispositivo ridimensiona e rimodella il sito Web, come fai a sapere che l’integrità del tuo design verrà preservata?
Ci sono due risposte a questo. Il primo è testare, testare e ripetere il test su una varietà di dispositivi. A volte potresti voler tracciare una linea e dire “solo smartphone, tablet e computer”. Il secondo è non utilizzare Flex ma piuttosto il metodo precedente per creare una serie di layout fissi. Puoi crearli in QuarkXPress utilizzando “fisso” anziché “flex”, per inserire script nel tuo sito Web affinché il dispositivo scelga automaticamente la dimensione più vicina. Anche questa è una forma di responsive web design.
In definitiva, se desideri il controllo assoluto sul tuo sito web, la creazione di una serie di layout utilizzando “fissi” ti darà il miglior risultato possibile, ma richiederà anche più tempo per la creazione e l’aggiornamento.
La maggior parte dei siti web sceglie Flex.
Come si usa Flex su QuarkXPress 2022?
Quando crei un nuovo layout, se fai clic su “digitale” anziché su “stampa”, ottieni l’opzione Fisso o Flex. Scegli Flex. Puoi entrare direttamente creando cose e specificandole come Flex, ma è meglio lavorare per fasi. Flex fa del suo meglio per sembrare stampato, ma non è stampato e si comporta in modo fondamentalmente diverso.
Essenzialmente, con Flex, e la maggior parte delle cose in HTML5, tutto è contenuto all’interno di qualcos’altro, invece di essere posizionato sulla pagina come avviene con la stampa. Se lo tieni a mente, il tuo viaggio Flex sarà più facile.
Il modo più semplice per vederlo è aprire Finestra>Flex Object Browser e Finestra>Flex Page Builder e trascinare uno dei modelli sul documento principale. Sebbene questi modelli possano sembrare un po’ specifici o addirittura pignoli, in realtà sono molto potenti e possono essere personalizzati utilizzando gli strumenti di Quark che conosci in un modo che i modelli di WordPress (ad esempio) generalmente non possono.
Fai clic su qualsiasi casella e vedrai il Flex Object Browser cambiare per mostrarti dove si trova. Al livello superiore hai il Root Container, e poi una serie di contenitori, righe, colonne e oggetti.
In questo momento, non hai bisogno di giocare con loro, sappi solo che sono lì. La personalizzazione del modello ti porterà molto lontano per produrre un sito web veloce quando deve essere fatto non solo velocemente ma anche correttamente.
Nozioni di base su Flex in QuarkXPress
Due tipi di design del sito web sono popolari in questo momento. Uno è il tradizionale layout strutturato con più pagine. L’altro è una singola pagina che scorri verso il basso. Questo tipo è in realtà più facile da creare perché devi solo progettare una pagina molto lunga con elementi posizionati in sequenza. Utilizzando i modelli di QuarkXPress Flex, puoi trascinare altri modelli uno dopo l’altro. Se ha un aspetto o un comportamento strano, controlla di non averne trascinato uno dentro l’altro: il browser degli oggetti Flex ti consentirà di vederlo.
Per il layout multipagina, crei diverse pagine in QuarkXPress, quindi, utilizzando il pannello del layout di pagina e facendo clic con il pulsante destro del mouse/ctrl-clic, utilizza Proprietà pagina per assegnare loro un nome Web e un nome visualizzato.
La tua home page deve essere chiamata index.html per il suo nome web. Altrimenti, il browser non lo troverà. Puoi dare alle altre pagine i nomi che preferisci, ma attieniti a lettere, numeri, trattini e strisce. La maggior parte dei server web distingue tra lettere maiuscole e minuscole, ma è meglio attenersi alle lettere minuscole.
Quando crei collegamenti ipertestuali, utilizzando il pannello dei collegamenti ipertestuali, scegli “pagina” anziché “URL”.
Per il resto, puoi applicare qualsiasi interazione che ti piace dalla tavolozza Finestra>HTML5, ma fai attenzione. I giorni dell’interazione multimediale sui siti Web sono ormai lontani e le persone sono abituate a una filosofia “less is more”. Il mio consiglio personale è di attenersi ai pulsanti e ai video di YouTube e lasciare tutto il resto.
Anteprima e pubblicazione
Puoi spostare la maniglia sulla destra del layout per vedere come cambierà al variare della forma, ma devi davvero controllare in un browser. Nella parte inferiore dello schermo, c’è un piccolo “globo” che ti offre l’anteprima della pagina HTML. Questo aprirà la pagina nel tuo browser predefinito e potrai vedere come apparirà. I collegamenti non funzioneranno: è una singola pagina. Per controllare i collegamenti, apri l’anteprima del layout. Questo lo aprirà effettivamente come una pubblicazione HTML5 piuttosto che come un sito web, ma andrà bene verificare.
Per pubblicare, avrai bisogno di uno spazio web, un URL (cioè un nome web) e un uploader FTP. Per l’uploader, puoi provare CyberDuck, che è gratuito per una donazione. È quindi solo una questione di File>Esporta come>HTML5 e quindi di trascinare i file sul tuo sito Web tramite CyberDuck (o qualunque cosa tu usi). Finché il tuo URL funzionava già, dovresti essere in grado di vederlo immediatamente. Se non puoi, controlla che la tua home page si chiami index.html e non Index.html o qualsiasi altra variante.
Se hai appena acquistato l’URL o l’hai appena indirizzato al tuo spazio web (chiedi istruzioni al tuo provider), in genere occorrono 24 ore prima che diventi disponibile.
Quando utilizzare Flex?
I modelli di QuarkXPress ti consentono di creare rapidamente un sito web semplice ed elegante.
Per un maggiore controllo, puoi creare il sito da zero utilizzando il pannello Flex Layout Blocks e lo strumento Contenitore, che si trova nella palette Strumenti. Un maggiore controllo, ovviamente, consente a più cose di andare storte. Probabilmente è meglio sperimentare prima con i modelli integrati. Quando costruisci con i blocchi di layout flessibile e lo strumento contenitore, utilizza il browser degli oggetti flessibile per assicurarti che tutto sia al posto giusto.
Tuttavia, quando stai sviluppando oltre una semplice singola pagina a scorrimento o un piccolo sito Web strutturato, spesso è il momento di ridefinire il progetto. Strumenti come PineGrow possono trasformare un layout QuarkXPress in un layout WordPress (un terzo di tutti i siti Web e metà di tutti i siti Web del sistema di gestione dei contenuti utilizza WordPress). A questo punto stai entrando in un grande progetto e probabilmente non è più efficace creare il codice finale in QuarkXPress.
Questa è la fase in cui QuarkXPress può essere utilizzato meglio per sviluppare un prototipo (i siti Web di grandi dimensioni passano attraverso mesi di prototipazione prima di essere pronti per il codice). I prototipi vengono spesso realizzati in PowerPoint, ma questo approccio produce solo wireframe piatti e può esserci un grande divario tra aspettativa e realtà. Consentendo di prototipare un sito web Flex con elementi interattivi, QuarkXPress può essere la tua arma segreta per comunicare ogni volta in modo efficace con il team di codifica.
Guarda il tutorial su come creare un file “Sito web di 10 minuti.”