TagTagWeb

Chrome: Salvataggio automatico di modifiche CSS e JavaScript locali su Strumenti di sviluppo

admin — Sat, 25 Feb 2012 19:52:35 +0000

Con l’installazione di alcuni plugin è possibile semplificare notevolmente alcune fasi di sviluppo web.

Molto spesso ci si trova davanti a osservare la pagina web creata o di testare alcuni script in javascript sul browser, in fase di debug i passaggi più comuni sono:

Sperimentare alcuni cambi di stile o di script nel web developer tools del browser,
Si passa poi al proprio editor per applicare le modifiche e salvarle
Si ritorna al browser e si fa il refresh della pagina per verificare i cambiamenti
Si continua con il debugging

Vi suggerisco quindi un estensione di Chrome chiamata Chrome DevTools Autosave (di Nikita Vasilyev).

Chrome DevTools Autosave permette di fare modifiche dal vivo ai css o javascript direttamente dal browser e queste verranno salvate in automatico nei file corrispondenti. Quello che si nota al primo utilizzo è un gran risparmio di tempo!

Setup

Il processo di installazione del plugin richiede dai 3-5 minuti

Instare l’estensione

Apri chrome://flags/ e abilitare Experimental Extension APIs
Riavviare il browser
Scaricare l’estensione e installarla

Installare il server

Il plugin utilizza in server locale a cui si appoggia per salvare le modifiche nei propri file corrispondenti. Questa è la procedura da seguire:

Installa Node.js se non l’hai già fatto.
Edita nel terminale
npm install -g autosave
se ritorna un errore di permetti utilizza l’istruzione:
sudo npm install -g autosave
Per verificare editare:
autosave
come risposta dovrete ottenere
DevTools Autosave 0.3.1 is running on http://127.0.0.1:9104

Non resta che utilizzare il plugin aprendo un file html e provando a modificare css o javascript dagli strumenti di sviluppo del browser

Mostrare file nascosti su Mac

admin — Sun, 09 Oct 2011 09:39:49 +0000

Aprire il terminale:

#per far visualizzare i file nascosti

defaults write com.apple.finder AppleShowAllFiles TRUE

#per riavviare finder

killall Finder

#per nascondere

defaults write com.apple.finder AppleShowAllFiles FALSE

Web Wireframe Kit

admin — Sun, 12 Sep 2010 15:16:02 +0000

Psd, contententi gli elementi presenti all’interno di una pagina web, dai testi al calendario, piuttosto che tabelle bottoni, audio player video player e molto altro, sicuramente utili per risparmiare tempo al web designer.

Sito web: http://www.emazekraker.biz/projects/webWireframeKit/

imgAreaSelect – selezione di un area dell’immagine

admin — Sat, 11 Sep 2010 18:54:41 +0000

imgAreaSelect è un plugin di jQuery che permette all’utente di selezionare un’area rettangolare di un immagine. In questo modo il web developer può implementare le funzioni di taglio di un immagine.

Caratteristiche del plugin:

Altamente configurabile
CSS personalizzabile
possibilità di mantenere le proporzioni di un immagine
Supporto della tastiera per lo spostamento della selezione
Supporto del callback di una funzione
Dispone di Api per l’integrazione con altri componenti
Dimensioni leggere meno di 8Kb

Il plugin funziona con la maggior parte dei browser compresi Firefox 2+, Opera 9.5+, Google Chrome, Safari 3+, and Internet Explorer 6+.

Richiede: jQuery Framework
Demo: http://odyniec.net/projects/imgareaselect/
License: MIT, GPL License

Full Page Image Gallery con jQuery

admin — Fri, 10 Sep 2010 06:39:17 +0000

Tutorial su come creare una galleria fotografica full screen, con scroll delle miniature e delle immagini visualizzate.

Vengono utilizzate alcune regole di CSS3 per esaltarne il look e jQuery per la funzionalità.

Demo: http://tympanus.net/Tutorials/FullPageImageGallery/

Tutorial: http://tympanus.net/codrops/2010/09/08/full-page-image-gallery/

28 Social Media Icon Badges

admin — Thu, 09 Sep 2010 13:53:09 +0000

Le icone includono: Bing, Blogger, Delicious, Designer Float, deviantART, Digg, Facebook, Feedburner, Flickr, FriendFeed, Google Buzz, Linked In, Live Journal, Mixx, MySpace, Newsvine, Ning, Reddit, RSS, Squidoo, Stumble Upon, Technorati, Tumblr, Twitter, Vimeo, WordPress, Yahoo, and YouTube.

Licenze: Utilizzabili solo per uso personale
Sito web: http://www.peachpops.com/

Come creare bottoni BonBon con CSS3

admin — Wed, 08 Sep 2010 13:24:53 +0000

BonBon Buttons sono dei carinissimi bottoni realizzati con CSS3/HTML5, quindi solamente supportati dalle versioni correndi ti Firefox, Safari e Chrome

Richiede: CSS3 / HTML5 Support
Demo: http://lab.simurai.com/css/buttons/
License: License Free

Spritely – animazioni con jquery

admin — Tue, 07 Sep 2010 13:15:28 +0000

jQuery.spritely è un plugin jquery creato da Artlogic per la creazione di personaggi dinamici o animazioni del background utilizzando semplicemente javascript e HTML, E’ un semplice e leggero plugin con una serie di metodi è possibile creare animazioni di oggetti come i corvi presenti nella pagina di presentazione o uno scroll dinamico del background.

Sito web e demo: http://www.spritely.net/

Colortip – a jQuery Tooltip Plugin

admin — Mon, 06 Sep 2010 13:06:07 +0000

In questo tutorial viene semplicemente spiegato come utilizzare jQuery per realizzare un plugin per la creazione di tooltip .

Questo script permette di convertire l’attributo tittle degli elementi presenti all’interno della pagina in una serie di tooltip colorati.

Sito web: http://tutorialzine.com/2010/07/colortips-jquery-tooltip-plugin/

Demo: http://demo.tutorialzine.com/2010/07/colortips-jquery-tooltip-plugin/colortips.html

Blockster

admin — Sun, 05 Sep 2010 13:02:30 +0000

Blockster è un effetto di transizione Javascript progettato per feature content o slideshow.
Il suo concetto di base è quello di creare un effetto di transizione tra un elemento all’altro, non solo tra immagini ma anche tra blocchi di codice.
E ‘altamente personalizzabile è possibile decidere quanti sono i blocchi che intervengono alla transazione, l’ordine di apparizione che può essere anche casuale o decidere se i blocchi devono solamente apparire o dissolversi.

Sito web: http://www.mitya.co.uk/scripts/Blockster-transition-effect-122