{"id":255406,"date":"2022-12-30T11:56:00","date_gmt":"2022-12-30T08:56:00","guid":{"rendered":"https:\/\/inform.click\/15-strumenti-pratici-per-uno-sviluppo-web-fluido\/"},"modified":"2022-12-30T11:56:00","modified_gmt":"2022-12-30T08:56:00","slug":"15-strumenti-pratici-per-uno-sviluppo-web-fluido","status":"publish","type":"post","link":"https:\/\/inform.click\/it\/15-strumenti-pratici-per-uno-sviluppo-web-fluido\/","title":{"rendered":"15 strumenti pratici per uno sviluppo Web fluido"},"content":{"rendered":"

\n Non siamo quelli che aderiscono agli stereotipi, ma probabilmente \u00e8 passato un po' di tempo da quando uno (stereo) tipico sviluppatore web si \u00e8 rasato la sua dannata barba, o si \u00e8 cambiato i vestiti, o ha fatto un bagno, o si \u00e8 rasato quella dannata barba…\n<\/p>\n

\n Non puoi davvero biasimarli. Era da un po' che tutti gli sviluppatori non si prendevano una pausa. Il 2015 \u00e8 stato un buon anno con passi da gigante dei progressi nella tecnologia di sviluppo web, ma uno sviluppatore non pu\u00f2 pi\u00f9 semplicemente aprire il suo laptop\/MAC (come un capo) e codificare per una piattaforma a suo piacimento.\n<\/p>\n

\n Ora devi occuparti del responsive design con supporto multipiattaforma, HTML5, PHP7 previsto per il rilascio un po' pi\u00f9 avanti nel corso dell'anno, browser come IE che non smetteranno di infastidire tutto… Livelli simili a matrici dell'Internet of Things stesso.\n<\/p>\n

\n \u00c8 tutto ci\u00f2 che noi sviluppatori possiamo fare per tenere il passo. Ma lo facciamo, soprattutto grazie a questi ingegnosi strumenti.\n<\/p>\n

\n Guarda.\n<\/p>\n

\n 1 Komodo Modifica
\n<\/h5>\n

\n <\/a>\n<\/p>\n

\n Tutto nasce dal codice per uno sviluppatore, quindi \u00e8 naturale iniziare con il miglior strumento di modifica che puoi trovare. Komodo Edit \u00e8 abbastanza kosher per tutto questo e altro ancora. \u00c8 un simpatico editor di testo multipiattaforma e multilingue in cui scrivere e modificare il codice. Oh, ed \u00e8 gratuito.\n<\/p>\n

\n Lo strumento funziona su Windows, Mac, Linux\/UNIX, quindi non preoccuparti. Ci piace anche per la sua funzione di completamento automatico del codice per linguaggi come HTML, CSS, JavaScript, Java, PHP, Ruby, Perl (per circa 5 persone nel mondo), ecc. \u00c8 un editor di testo intelligente.\n<\/p>\n

\n Punti bonus per una maggiore comodit\u00e0 della funzione Project Manager per organizzare e tenere traccia dei file.\n<\/p>\n

\n 2 creatore di CSS 3.0
\n<\/h5>\n

\n \"\"<\/a>\n<\/p>\n

\n Siamo onesti, nonostante tutto ci\u00f2 che ami dei CSS3, non puoi fare a meno di odiarli un po' quando si tratta di scrivere la sintassi per cose come i dannati bordi arrotondati. \u00c8 un dettaglio cos\u00ec banale per cui perdere il sonno, ma lo fai comunque. Non puoi memorizzare pi\u00f9 di 100 nuove propriet\u00e0 e i rispettivi prefissi. Quindi, grazie al Signore per uno strumento come CSS 3.0 Maker.\n<\/p>\n

\n Questo piccolo strumento online ti consentir\u00e0 di copiare e incollare codice complicato nel tuo foglio di stile. Genera codice per dettagli di stile come raggi di riquadri, sfumature, ombre di testo e riquadri, trasformazioni, transizioni e rotazioni di tua scelta. Mostrer\u00e0 anche quali browser desktop e mobili supportano tali propriet\u00e0 di stile. Una piccola area di anteprima mostrer\u00e0 l'effetto, il codice pu\u00f2 essere copiato dalla finestra di visualizzazione o scaricato all'interno di un file HTML.\n<\/p>\n

\n Per quelli di noi che non possono dedicare troppo tempo a dettagli di stile apparentemente banali, questo strumento \u00e8 un salvavita.\n<\/p>\n

\n 3 \u2013 senza prefisso
\n<\/h5>\n

\n \"\"<\/a>\n<\/p>\n

\n “Liberati dall'inferno dei prefissi CSS!” \u2013 Pagina introduttiva senza prefissi.\n<\/p>\n

\n Questo \u00e8 uno strumento senza fronzoli, portato per liberarci dal “prefisso inferno” da un angelo di nome Lea Verou di Github. Aggiunger\u00e0 il prefisso del fornitore (da qualche parte che non puoi vedere) ai fogli di stile\n<\/p>\no agli elementi. Inoltre: non dovrai preoccuparti di nuovi\no elementi, prefissi di jQuery .css()<\/code>o eventuali modifiche apportate, perch\u00e9 coprir\u00e0 tutto.<\/p>\n

\n Cosa c'\u00e8 che non va?\n<\/p>\n

\n 4 libbre di blocco
\n<\/h5>\n

\n \"\"<\/a>\n<\/p>\n

\n “Lorem Ipsum” \u00e8 stato il testo segnaposto di riferimento per troppo tempo. Fortunatamente, ora abbiamo Blokk: il carattere per mettere a tacere il “dolore” del latino incomprensibile.\n<\/p>\n

\n Blokk ti offre un blocco di “testo” da utilizzare come segnaposto durante la creazione di prototipi e wireframe. Inutile dire anche che non confonder\u00e0 i clienti meno, uh, illuminati dal web durante le presentazioni.\n<\/p>\n

\n 5 Fontello
\n<\/h5>\n

\n \"\"<\/a>\n<\/p>\n

\n Prima che i caratteri delle icone diventassero una cosa, gli sviluppatori dovevano avvalersi dell'aiuto dei designer per creare icone scalabili. Il tempo necessario per svilupparli (che, tra l'altro, include la creazione, l'estrazione, l'implementazione e la personalizzazione) rasentava l'”assolutamente ridicolo”. Ma poi qualcuno ha trasformato le icone in caratteri e tutti sono vissuti felici… per il prossimo futuro.\n<\/p>\n

\n Fontello \u00e8 un ottimo generatore di font per icone. Ti consentir\u00e0 di scegliere tra migliaia di icone, personalizzarne la mappatura o modificarne i nomi e compilarle in un unico file di font. \u00c8 fantastico ed \u00e8 gratuito.\n<\/p>\n

\n Non possiamo ringraziare abbastanza Vitaly Puzrin.\n<\/p>\n

\n 6 Prove di tipo
\n<\/h5>\n

\n \"\"<\/a>\n<\/p>\n

\n Attiva il JavaScript del tuo browser e inizia a testare come apparir\u00e0 il carattere tipografico scelto su un sito reale.\n<\/p>\n

\n Typetester \u00e8 semplice. Ti consente di inserire e confrontare diversi caratteri e testarne l'aspetto. Puoi anche giocare con le dimensioni, il tracciamento, il colore, ecc. Fino a ottenere ci\u00f2 che desideri. Puoi confrontare fino a 36 caratteri tipografici diversi contemporaneamente. Immagina la quantit\u00e0 di tempo che puoi risparmiare con quello.\n<\/p>\n

\n \u00c8 molto bello.\n<\/p>\n

\n 7 Marcatura sporca
\n<\/h5>\n

\n \"\"<\/a>\n<\/p>\n

\n La programmazione pu\u00f2 essere un po' stancante a volte, ma la pulizia del codice esiste su Level: Utter Tedium. \u00c8 necessario, tuttavia, se si desidera prevenire errori e caricare pi\u00f9 velocemente.\n<\/p>\n

\n Dirty Markup aiuta a risparmiare il tempo che altrimenti potresti dedicare ad attivit\u00e0 pi\u00f9 interessanti (sandwich al bacon, chiunque?). Questo viene fornito con funzionalit\u00e0 combinate di altri strumenti di pulizia a sintassi singola. Stiamo parlando di HTML Tidy, CSS Tidy, JS Beautify e Ace Editor. Questo \u00e8 un detergente completo.\n<\/p>\n

\n \u00c8 un'app basata sul Web per la pulizia e la formattazione di HTML, CSS e JavaScript. Non possiamo chiedere di pi\u00f9.\n<\/p>\n

\n 8 Mandria di insetti
\n<\/h5>\n

\n \"\"<\/a>\n<\/p>\n

\n Potresti diventare un vigilante ammazza-insetti con questo potente strumento.\n<\/p>\n

\n BugHerd segue il vecchio adagio di “Keep it Short and Simple, Stupid”. Pu\u00f2 acquisire il feedback del cliente, risolvere problemi minori da solo, tenere traccia dei bug (da eliminare). Far\u00e0 anche il segretario e gestir\u00e0 i tuoi progetti.\n<\/p>\n

\n Un'interfaccia utente punta e clicca semplicissima sul tuo sito consente ai tuoi utenti di segnalare problemi. BugHerd li trasforma in report con tutte le informazioni di cui potresti aver bisogno (come la versione del browser dell'utente). \u00c8 facile da configurare, divertente da usare e dispone di funzionalit\u00e0 come screenshot automatici (estensione del browser), collegamenti diretti, file allegati, dati di selezione completi e discussioni.\n<\/p>\n

\n Con un abbonamento standard di $ 29 al mese, \u00e8 un problema.\n<\/p>\n

\n 9 Schermata
\n<\/h5>\n

\n \"\"<\/a>\n<\/p>\n

\n Il responsive web design \u00e8 pi\u00f9 di una nuova moda, in quanto \u00e8 qui per restare. Ma per ora, troverai i layout fluidi nella migliore delle ipotesi complicati. Ti ritroverai anche su una rabbia violenta cercando di testare il tuo layout su schermi di varie dimensioni.\n<\/p>\n

\n Fortunatamente, Screenfly \u00e8 una piccola e simpatica app web che metter\u00e0 alla prova le tue query @media per te. Inserisci il tuo URL e mostrer\u00e0 come le tue query gestiscono le dimensioni del dispositivo su cui stai facendo clic nel pannello superiore.\n<\/p>\n

\n Non tiene conto della differenza di rendering tra i browser, ma puoi utilizzare Browser Shots per questo. Altrimenti, \u00e8 un modo semplice e ben assemblato per vedere come appare il tuo sito su diverse risoluzioni.\n<\/p>\n

\n 10 Fondazione
\n<\/h5>\n

\n \"\"<\/a>\n<\/p>\n

\n Dato che stiamo parlando di RWD, potremmo anche iniziare a parlare di framework per svilupparlo.\n<\/p>\n

\n Il dibattito su Internet infuria su quale framework front-end sia migliore: Bootstrap o Foundation? Puoi usare l'uno o l'altro. Ma Foundation \u00e8 leggermente pi\u00f9 in primo piano quando si tratta di sistemi a griglia, unit\u00e0 proporzionali per la progettazione (sebbene Bootstrap 4.0 Alpha sia passato alle unit\u00e0 em e rem), supporto da destra a sinistra, tabelle dei prezzi, tour e navigazione fuori tela .\n<\/p>\n

\n \u00c8 ovvio che preferiamo il Foundation. Funziona con SASS e CSS, \u00e8 ricco di un'intera gamma di funzionalit\u00e0 e generalmente pi\u00f9 conveniente e flessibile.\n<\/p>\n

\n Siamo d'accordo con Zurb su questo: \u00e8 “pazzo veloce”.\n<\/p>\n

\n 11 Adobe Edge
\n<\/h5>\n

\n \"\"<\/a>\n<\/p>\n

\n Dopo un decennio di software che antepongono il design al codice, Adobe offre finalmente ai programmatori un vantaggio.\n<\/p>\n

\n Questa gamma francamente sorprendente di strumenti e servizi \u00e8 realizzata tenendo presenti le nuove tendenze di codifica front-end. Ci hanno fatto una bella sorpresa. Edge Animate per aiutare i programmatori a creare animazioni eliminando contemporaneamente ogni traccia di Flash. Mi dispiace Adobe, Flash \u00e8 stato fantastico. Ma Animate utilizza HTML e JavaScript standard e, sai, taglia unica…\n<\/p>\n

\n C'\u00e8 Edge Code per modificare i CSS dall'interno di un documento HTML. Inspect consolida il test del browser e i test di compatibilit\u00e0 del dispositivo per un design reattivo e li sincronizza tutti per un aggiornamento\/personalizzazione super veloce. L'immensamente popolare Typekit fa ora parte della famiglia Edge. Reflow deve ancora essere rilasciato, ma probabilmente far\u00e0 esplodere altri creatori di griglie CSS front-end. E c'\u00e8 ancora di pi\u00f9.\n<\/p>\n

\n Sappiamo. Abbiamo dovuto raccogliere anche le mascelle dal pavimento.\n<\/p>\n

\n 12 Vagabondo
\n<\/h5>\n

\n \"\"<\/a>\n<\/p>\n

\n Vagrant \u00e8 molto pi\u00f9 di un software di sviluppo virtuale.\n<\/p>\n

\n Questa bellezza ti consente di creare ambienti di lavoro portatili e facilmente riproducibili. Consolida il software di virtualizzazione, la scatola base del server e gli strumenti di configurazione in un unico potente pacchetto. Fondamentalmente, non devi pi\u00f9 avere VirtualBox + Ubuntu + Chef. Vagrant far\u00e0 il lavoro di tutti e tre e occuper\u00e0 meno spazio mentre lo fa. Gli utenti esperti ti diranno anche come ti consente di configurare facilmente reti multi-VM.\n<\/p>\n

\n \u00c8 scritto in Ruby, ma funzioner\u00e0 con PHP, Java, JavaScript, Python e C#. Puoi lavorare con Vagrant su Windows, Mac OSX, Linux e FreeBSD.\n<\/p>\n

\n \u00c8 super veloce perch\u00e9 non ha nulla di U-friendly, che sembra carino ma occupa lo spazio tanto necessario. Funziona bene come ambiente di test per gli sviluppatori.\n<\/p>\n

\n \u00c8 il pi\u00f9 vicino possibile al Santo Graal.\n<\/p>\n

\n 13 PageSpeed \u200b\u200bInsights
\n<\/h5>\n

\n \"\"<\/a>\n<\/p>\n

\n PageSpeed \u200b\u200bInsights di Google fa esattamente quello che dice. Ti fornisce informazioni dettagliate sulle prestazioni del front-end della tua Pagina. Sar\u00e0 una rivelazione per molti sviluppatori alti e potenti l\u00e0 fuori. Quindi organizza una risata e inizia la calvizie accelerata da tutti i capelli che verranno strappati.\n<\/p>\n

\n Tutto ci\u00f2 che fa \u00e8 misurare il tempo trascorso tra: richiesta e rendering del contenuto above the fold e richiesta e rendering a pagina intera.\n<\/p>\n

\n Verificher\u00e0 gli aspetti indipendenti dalla rete per calcolare le prestazioni della tua pagina: configurazione del server, struttura HTML, JavaScript, CSS e immagini.\n<\/p>\n

\n \u00c8 affilato come un rasoio e veloce senza piet\u00e0; quindi sicuramente ferir\u00e0 i tuoi sentimenti e molto probabilmente ti far\u00e0 piangere se ottieni un punteggio basso. Cercher\u00e0 anche di rimediare dandoti suggerimenti mirati per migliorare le tue prestazioni, come un genitore condiscendente.\n<\/p>\n

\n E lo adoriamo.\n<\/p>\n

\n 14 Git
\n<\/h5>\n

\n \"\"<\/a>\n<\/p>\n

\n La maggior parte degli sviluppatori moderni lo conosce gi\u00e0. Dopotutto, \u00e8 cos\u00ec che spieghi l'esistenza di comunit\u00e0 come GitHub.\n<\/p>\n

\n Git \u00e8 un sistema di controllo delle revisioni e di gestione del codice sorgente open source che tiene traccia della cronologia del progetto in un repository. \u00c8 fondamentalmente un PA super veloce e super efficiente.\n<\/p>\n

\n Ti permette di sperimentare liberamente senza paura di rovinare tutto per sempre. Puoi anche creare pi\u00f9 repository e utilizzare branching\/merging per lavorare con singole funzionalit\u00e0. \u00c8 uno strumento particolarmente utile per gli sforzi collaborativi.\n<\/p>\n

\n \u00c8 completamente distribuito, quindi non dovrai temere l'incubo senza rete quando sei offline (per progettazione o per caso). Puoi semplicemente aggiungere gli aggiornamenti nel tuo repository principale, che ti aspetter\u00e0 pazientemente di nuovo online.\n<\/p>\n

\n 15 Convalida del markup W3C
\n<\/h5>\n

\n \"\"<\/a>\n<\/p>\n

\n Questo \u00e8 l'ultimo rito di passaggio.\n<\/p>\n

\n La convalida del markup W3C \u00e8 piuttosto semplice e necessaria. Come afferma il W3C, la convalida pu\u00f2: aiutarti a eseguire il debug, rendere il tuo sito a prova di futuro (i browser sono costruiti secondo gli standard W3C) e aiutare nella manutenzione.\n<\/p>\n

\n Ti insegna anche come essere conforme agli standard mostrandoti gli “errori” dei tuoi modi.\n<\/p>\n

\n La convalida del markup non dovrebbe essere considerata repressiva, perch\u00e9 in realt\u00e0 non lo \u00e8. Ti aiuter\u00e0 a imparare a scrivere codice migliore…\n<\/p>\n

\n Come un professionista.\n<\/p>\n

\n Linea di fondo\n<\/p>\n

\n Ci sono, ovviamente, pi\u00f9 strumenti, plug-in, componenti aggiuntivi e risorse e comunit\u00e0 in generale che rendono lo sviluppo … beh, non esattamente pi\u00f9 facile, ma meno faticoso. E altri sono in fase di sviluppo in questo momento. C'\u00e8 il componente aggiuntivo Firebug per Firefox che ti consentir\u00e0 di monitorare e modificare HTML, CSS e JavaScript, dal vivo. PixelDropr \u00e8 un componente aggiuntivo di Photoshop che ti consentir\u00e0 di creare adorabili pulsanti e icone per il tuo sito con il minimo sforzo.\n<\/p>\n

\n Ogni sviluppatore professionista alla fine ha il proprio “kit di strumenti” di app e software su cui fa affidamento per lavorare in modo pi\u00f9 rapido ed efficiente. Alcuni sono gratuiti, altri dobbiamo pagarli.\n<\/p>\n

\n Ma poi, chi pu\u00f2 dare un prezzo alla convenienza?\n<\/p>\n<\/p>\n

\n Fonte di registrazione: instantshift.com<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

Non siamo quelli che aderiscono agli stereotipi, ma probabilmente \u00e8 passato un po’ di tempo da quando uno (stereo) tipico sviluppatore web si \u00e8 rasato la sua dannata barba, o si \u00e8 cambiato i vestiti, o si \u00e8 fatto un bagno, o si \u00e8 rasato quella dannata barba… Davvero non puoi biasimarli. Era da un po’ che tutti gli sviluppatori non si prendevano una pausa. Il 2015 \u00e8 stato un buon anno con passi da gigante dei progressi nella tecnologia di sviluppo web, ma uno sviluppatore non pu\u00f2 pi\u00f9 semplicemente aprire il suo laptop\/MAC (come un capo) e codificare per una piattaforma a suo piacimento. Ora devi occuparti del responsive design con…<\/p>\n","protected":false},"author":1,"featured_media":222323,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[121,199,56],"tags":[],"class_list":["post-255406","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-strumenti-web","category-web-design","category-web-e-wordpress"],"_links":{"self":[{"href":"https:\/\/inform.click\/it\/wp-json\/wp\/v2\/posts\/255406","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/it\/wp-json\/wp\/v2\/comments?post=255406"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/it\/wp-json\/wp\/v2\/posts\/255406\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/it\/wp-json\/wp\/v2\/media\/222323"}],"wp:attachment":[{"href":"https:\/\/inform.click\/it\/wp-json\/wp\/v2\/media?parent=255406"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/it\/wp-json\/wp\/v2\/categories?post=255406"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/it\/wp-json\/wp\/v2\/tags?post=255406"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}