Notepad++ selezionare parti interne di tags

Supponiamo di aver un documento Html come questo e volessimo selezionare parti del documento:

Il plugin Emmet deve essere installato in Notepad++.
Il comando che ci permette di scorrere il contenuto di tutti i tags all’interno di un documento è Plugins->Emmet->Match Pair Inward.
Ovviamente è scomodo fare tutto a mano ogni volta, creiamo quindi uno shorcut, per esempio impostando CTRL+-, che normalmente non è associato a nulla.
Per farlo andiamo nel menu  Macro -> Modify Shortcut, cerchiamo tale voce ed associamo i tasti Ctrl+-.

A questo punto basterà selezionare questi tasti per selezionare tutte le parti del documento in modo gerarchico.

Vediamo in questa immagine il risultato:
inware-caret-two

Emmet Plugin Python script did not accept the script – Alcuni tasti di scelta rapida della sintassi Emmet

Emmet è un plugin essenziale di Notepad++, per risolvere il problema scarica il full

https://sourceforge.net/projects/npppythonscript/files/latest/download?source=files
Chiudere Notepad++ ed installare il pacchetto aggiornato di Python.
Ora associa un tasto di scelta rapida per l’auto-completamento di Emmet.
Premi Macro->Modify Shortcut-> Plugin Commands,cerca CTRL+ALT+ENTER e modifica con CTRL+e

keys-emmetTesta se tutto funziona, premi Ctrl+n, scrivi : html>(head+body) e premi CTRL+e .
Dovrebbe crearci i tag in automatico:

Scriviamo html:5 e premiamo il tasto di scelta rapida:

Per creare un collegamento ipertestuale basta scrivere a seguito dal tasto di scelta rapida.
Scrivendo .class ci appare il seguente codice:

Per creare una struttura ad albero scriviamo div>ul>li

Scrivendo c ci appare un commento nella forma:

Scrivi Lorem per avere una nota di testo casuale:

Vediamo un altro esempio : div+div>p>span+em

Nell’esempio sopra crea un div affiancato ad un altro div con dentro un tag p che contiene due tag , uno span ed un em. Il maggiore significa che discende, mentre la croce affianca i tags.

Usando l’operatore ^ possiamo saltare un livello:

Vediamo che il blockquote esce dal tag P, salta un livello ma resta dentro il tag DIV. Se ne usiamo due salta due livelli.

Possiamo usare l’operatore asterisco: *, vediamo alcuni esempi.
ul>li*5

Crea cinque liste tags.
Vediamo un esempio articolato:
div#testata+div.pagina+div#footer.classone.classtwo.classthree

Usando il diesis crea un id, il punto una classe, tanti punti seguiti uno all’altro tante classi.
Numerazione incrementale:
ul>li.item$*5

Il dollaro è un indice che si incrementa ogni volta.

Più dollari quindi abbiamo un leading conteggio:

aggiungi un testo dentro tags:

Come vediamo i brackets servono per aggiungere del testo dentro i tags.

Sapere quali programmi usano la banda internet

Se abbiamo sul computer una rete a consumo, ci viene incontro un freeware che ci permette di capire quali programmi stanno usando la nostra banda internet.

NetBalancer è un programma che ci mostra quanta banda usano i programmi aperti; in questo modo possiamo limitare il consumo di banda o chiudere quei programmi che risultano particolarmente esigenti in termini di banda.

La cosa bella di questo programma è che ci mostra la colonna dei dati scaricati. Ordinando per dati scaricati possiamo sapere quale programma usa più banda come nell’immagine sottostante.

programmo-succhiano-banda

Il programma ha un periodo di prova di 15 giorni, ma è utile per scoprire all’occorrenza i programmi che sono nocivi per la nostra banda.

Non è un freeware però è indubbia l’utilità quando si vuole scoprire quali programmi usano la nostra banda.

 

Notepad++ Nuovi File da template

Vediamo come fare in modo che quando si crea un nuovo file, questo venga riempito con un modello di file in base all’estensione.

Supponiamo di voler creare un nuovo file Php, solitamente Php creare un file vuoto, ma esiste un plugin che ci permette di creare un template con i relativi tags e formattazioni.

Per supportare questa caratteristica molto importante, andiamo in Plugin Manager di Notepad++, ed installiamo NewFileBrowser.

Una volta installato ci basta premere CTRL + SHIFT + n .

In questo modo viene aperto un TAB con il seguente codice:

 

Notepad ++ Tasti di scelta rapida per lavorare più velocemente

Ctrl+O Apre un file, esce la maschera che invita a selezionare un file da aprire.
mask-open-file

Ctrl+ Apre un nuovo file completamente vuoto.
Ctrl+ Salva il file corrente con le ultime modifiche apportate.

Gestione Bookmark con Bookmark Manager Plugin

Ctrl+ Alt+ Sposta il cursore al bookmark 1.
Ctrl+ Alt+Shift+ Crea un bookmark nella riga corrente.

Gestione Bookmark con modalità nativa di Notepad++

Ctrl+F2 Crea un nuovo bookmark.
F2 Vai al prossimo bookmark.

Gestione Token Stiles

Gli stili Tokens sono un modo per evidenziare alcuni termini nella pagina; supponiamo volessimo evidenziare nella pagina tutte le parole “echo”, con pulsante del mouse selezioniamo il testo, e premiamo il destro del mouse, selezioniamo Style token -> Using first style, a questo punto la parola selezionata assumerà una formattazione diversa.

Ctrl+1 Il cursore si sposta al termine rappresentato dallo style token 1.
Ctrl+2 Il cursore si sposta al termine rappresentato dallo style token 2.Gli stili token sono 5. In questo modo possiamo spostarci nel documento per raggiungere tutte le righe che contengono quel termine evidenziato dai vari stili.

Eseguire codice Php dentro l’editor di WordPress

Se si vogliono eseguire pezzi di codice Php possiamo far uso di questo ottimo plugin in grado di eseguire il codice Php dentro il titolo, content, widget area del nostro sito WordPress.

A differenza di altri plugin il codice potrà essere eseguito praticamente ovunque.

Allow PHP Execute

Nelle opzioni possiamo decidere in quale luogo attivare la funzionalità.

Impostazioni Allow Php Code Plugin
Impostazioni Allow Php Code Plugin

 

Widget categorie avanzato – Collapsing Categories

Spesso chi ha un blog complesso con molti articoli e categorie non riesce a mostrare in modo facile ai propri utenti, tutto il complesso sistema di articoli e categorie.

per far fronte a questa esigenza vi è un plugin-widget che è davvero molto potente, permette infatti di mostrare categorie e posts in un blocco a ventaglio (accordion ) .

In questo modo l’utente potrà avere una nuova esperienza di navigazione nel vostro blog.

Ecco un esempio:

accordion-categories

Possiamo naturalmente settare i parametri di visualizzazione tra cui se far comparire solo posts o anche categorie.

accordion-categories-options

Dove scaricarlo

Collapsing Categories può essere scaricato dal seguente link.

Visualizzazione gerarchica delle categorie con conteggio articoli in WordPress

WordPress ha un widget che permette di personalizzare la visualizzazione delle categorie.

Chi ha molto categorie e subcategorie è bene che usi le varie opzioni che ci sono.

Il risultato sarà più o meno questo:

modalità gerarchica categorie
modalità gerarchica categorie

Come vediamo le sottocategorie sono visualizzate indentate, per una migliore navigazione dell’utente.

Come Visualizzare le categorie in modo gerarchico con conteggio

Andiamo nella home page del nostro sito, da loggati come amministratore , e clicchiamo su personalizza. Sulla sinistra, clicchiamo su widget -> area widget ->aggiungi un nuovo widget-> selezioniamo categorie-> spuntiamo


Widget categorie
Widget categorie

Effetto Zoom su prodotti Prestashop

In questo tutorial vediamo come creare un effetto zoom sui prodotti di Prestashop, utilizzando dei moduli che siano gratuiti.
Un ottimo modulo che permette di farlo è proprio il modulo Prestashop elevateZoom for Prestashop.

Questo modulo potrà essere scaricato dal sito stesso di Prestashop al seguente ElevateZoom for prestashop download .

Il modulo come detto è gratuito e per essere scaricato basta registarsi sempre gratuitamente al sito di Prestashop.
Nella pagina di download è bene selezionare, in base alla propria versione, ad esempio il nostro tutorial fa riferimento alla versione 1.6 di prestashop e quindi andremo a scaricare al versione modulo 1.0.4., chi usa invece versioni precedenti di Prestashop può scaricare la versione 1.0.3 che è compatibile con la versione di Prestashop 1.5

Come installare il modulo ElevateZoom for Prestashop

Come al solito andiamo nell’area amministrazione di Prestashop, come sappiamo è un link diverso, poiché prestashop rinomina la cartella per motivi di sicurezza.

Clicchiamo quindi su Moduli -> Moduli e Servizi .
Clicchiamo il pulsante in alto a destra, Aggiungi nuovo modulo.
Clicchiamo su Scegli un file -> selezioniamo il file scaricato -> clicchiamo su Carica. Una volta caricato procediamo a cliccare su installa modulo.
Se tutto è andato a buon fine, ci ritroviamo nella scheda di configurazione del modulo per poter settare i parametri principali di ElevateZoom for Prestashop.
Il modulo si autoconfigura, ma per poter settare diversi parametri toccherà a noi in base alle nostre esigenze.

Elevate zoom prestashop first configuration window
Elevate zoom prestashop first configuration window

Parametro Activate elevateZoom for product page: selezionando la freccia verde il plugin sarà attivo, viceversa verra disattivato.
Zoom Type: sono tre lens, inner e window, con lens si apre una lente tonda o quadra, al passaggio del mouse sull’immagine, window apre una nuova finestra, mentre inner effettua un effetto zoom al passaggio del mouse sull’immagine.
Fade in delay, determina il tempo prima dell’apparizione dello zoom.
Fade out delay, determina il tempo che passa alla chiusura dello zoom.
Window Position: determina la posizione della finestra, sono 16 posizioni.

window positions Elevator Zoom for Prestashop
window positions Elevator Zoom for Prestashop

Scroll with mousewheel: determina cosa fare con la rotella del mouse, di default usando la rotellina del mouse, viene ingrandito il livello di Zoom dell’immagine.

Cursor Type: crossair,pointer, moz-zoom-in, consigliato moz-zoom-in, che è l’immagine cursore più vicina al nostro caso.

Use tint: se usare un colore particolare sull’immagine ingrandita, di default non è attivo, ma attivarla se si vuole un colore particolare sull’immagine ingrandita.

Tint Color: il colore della tinta durante lo zoom

Tint opacity: l’opacità della colorazione tinta

Lens shape: la forma della lente, può essere square (quadrata),  o rotonda (round).

Lens Size: la grandezza della lente, inserire un valore in base alle proprie esigenze di layout, 300 potrebbe essere ok.

Extra parameters: parametri extra passati al Javascript di Elevator, esempio zoomWindowWidth:300, zoomWindowHeight:100, ma possono essere passati tutti i parametri di configurazione che questo Javascript include.

Additional Code: è il Javascript che fa partire lo Zoom, necessario per far funzionare la funzione lente, se si conosce Javascript si può inserire il proprio codice di avvio di Elevator.

Clicchiamo su Salva per confermare i nostri parametri.
Se il modulo funziona dovremmo vedere una cosa di questo tipo.

Zoom immagine Prestashop
Zoom immagine Prestashop

Possiamo provare diverse combinazioni, per capire la configurazione che calzo con il nostro sito Prestashop.