Pubblicato il 07/08/15 - aggiornato il  | 5 commenti :

Fast String per convertire XML in HTML, immagini in Base64 e per operazioni con le stringhe.

Come usare FastString una applicazione di Chrome che ci permette di convertire HTML in XML e viceversa, di convertire PNG in Base64, testo tutto in maiuscolo o tutto in minuscolo e altre operazioni con le stringhe.
Nel post precedente abbiamo visto come si possa usare una applicazione di Chrome per vedere in tempo reale se funziona un codice HTML, CSS o Javascript facendo a meno di tool offerti da servizi esterni e addirittura senza connessione internet. 

In questo articolo vedremo invece come con una sola applicazione di Chrome si possono convertire immagini in Base64, convertire codice HTML in XML per inserirlo nel modello di Blogger, convertire un testo tutto in maiuscolo o tutto in minuscolo o con le sole iniziali in maiuscolo, trovare i codici dei colori in HEX e in RGB, i simboli HTML delle Entità e molto altro ancora. 

FastString è appunto questa applicazione con un tool anche per generare un testo casuale del tipo Lorem Ipsum.  Si va su +Aggiungi per poi andare nuovamente su Aggiungi

faststring-app-chrome

I vari tool si aprono cliccando sotto Convert, Hashes, Web, Strings.

fast-string

Come vedete si tratta di molti strumenti alcuni dei quali mi sono del tutto ignoti. Mi limiterò quindi a fare degli esempi di tool che possono servire nella attività di blogging.

CONVERTIRE HTML IN XML


Quando si deve incollare il codice per inserire la pubblicità nel modello di Blogger questo va convertito in XML altrimenti non viene salvato. Si va quindi su Web > HTML encode e si incolla il codice da convertire 

parsare-codice-html 

Si va infine su Do it! in basso quindi su Copy nel campo adiacente per copiare il codice risultante.


CONVERTIRE XML IN HTML


Può essere fatta l'operazione inversa andando su Web > HTML decode

convertire-html-xml

per ritornare al codice originario.

CONVERTIRE IMMAGINE IN BASE64


Una immagine può essere pubblicata nel web tramite il suo URL e con il tag <img> ma lo si può anche fare senza postare nel web alcuna foto ma colo convertendo l'immagine in un codice. Si va su Convert > Image in Base64 PNG, si clicca su Scegli File e si seleziona la foto da convertire

base64

Si va su Do it! e si copia il codice che può essere inserito in una pagina web con questa sintassi

<img alt="nome-immagine" src="codice in Base64"/>


URL ENCODE


Come abbiamo visto nel post su come creare dei tweet preimpostati si può codificare un testo per convertirlo in un URL dato che un URL non può contenere spazi. Si va su Web >URL encode

url-encode  
si incolla il testo da convertire, si va in basso su Do it! e si copia il risultato a destra. Si può naturalmente anche fare l'operazione inversa con con Web > URL decode.

INSERIRE APOSTROFI E SIMBOLI SPECIALI NEL JAVASCRIPT


Se si incolla del testo con apostrofi in un javascript questo smette di funzionare. Lo si è potuto constatare quando abbiamo personalizzato il testo di Google nel Banner per i Cookie. Però si possono inserire dei caratteri denominati backslash ( \ )per impedire che questo accada. Si può far tutto in automatico andando su String > Add slashes e digitando il testo da convertire

aggiungere-slash

In sostanza vengono aggiunte \ prima degli apostrofi. Questo però non è sufficiente per rendere il testo digeribile dal javascript. Gli apostrofi fanno sostituiti con 47 in questo modo 
Questo sito utilizza i cookie per migliorare l\47esperienza d\47uso dei lettori.


TROVARE I CODICI DEI COLORI


In Web > HTML colors c'è una tabella con i codici dei colori accanto ai nomi inglesi

nomi-inglesi-colori

Conoscere i nomi inglesi dei colori può essere utile nel codice HTML. Invece di usare il codice

<p style="color: #D2691E;"> Testo color cioccolata</p>

si può usare il codice equipotente

<p style="color: Chocolate;"> Testo color cioccolata</p>

Se invece si va su Web > Color Picker possiamo risalire al codice del colore selezionato

codici-colori

in esadecimali e RGBA.

RISALIRE AL CODICE DELLE ENTITÀ E DEI SIMBOLI


L'icona del menù che si vede nei dispositivi mobili ha questo aspetto  e si tratta solo di un simbolo e non di una immagine. Per postare in una pagina HTML questi simboli speciali dobbiamo conoscerne il codice. Si può usare FastString andando su Web > HTML symbols entities

simboli-entità-faststring

per trovare il numero corrispondente da postare in una pagina HTML.

LETTERE MAIUSCOLE E MINUSCOLE


Vediamo adesso in conclusione come con FastString si possa convertire un testo tutto in lettere maiuscole o tutto in lettere minuscole. Innanzitutto per un testo generico si va su Strings > Lorem Ipsum Generator e si imposta il numero di parole da generare quindi si va su Do it! quindi su Copy.

lorem-ipsum

Per trasformare il testo tutto in maiuscolo si va su String > String to upper

tutto-maiuscolo

Si va in basso su Do it! e si copia il risultato nel campo sulla destra. Per convertire tutto in minuscolo si opera nello stesso modo andando su String > String to lower. Si possono anche convertire solo le prime lettere di ogni parola in maiuscolo scegliendo String > Capitalize String.


5 commenti :

  1. Ciao,
    Sono Debora.
    E da molto che ti seguo.
    Volevo chiederti, essendo ignorante su questi argomenti, sapere di cosa si parlava poco fa sui cookie da aggiungere obbligatoriamente al proprio sito.
    Inoltre, quando hai un blog con un dominio personalizzato, (ho già un account vuoto su GoDaddy!), deve essere inserito nel reddito che tu sappia?, perdona tutte le mie domande, ma parlo per sentito dire e magari tu sai rispondere alla mie domande.
    Non avrei voluto scriverti qui visto che l'argomento del post non è attinente ma non sapevo dove farlo.
    Ti ringrazio,
    Aspetto tue risposte,
    Buona serata.
    :D

    RispondiElimina
    Risposte
    1. Per il reddito non sono la persona più adatta a risponderti però finché guadagni qualche decina di euro al mese non credo tu ti debba preoccupare. Informati meglio in qualche forum quando guadagnerai qualche centinaio di euro al mese. Tutti i blog su piattaforma Blogger hanno implementato da poco il banner per i cookie che è obbligatorio per tutti i siti con pubblicità, bottoni di Facebook, servizi di statistica, ecc. Per personalizzare il banner leggi qui
      http://www.ideepercomputeredinternet.com/2015/07/cookie-blogger-banner-customize.html
      @#

      Elimina
  2. Caro Ernesto, si tu potessi fare un post spiegando come fare links al interno dello stesso post in blogger, ti ringrazierei molto, ho provato alcuni codici che ho trovato nel web ma non funzionano, allora ho pensato a te che sempre ci dai una mano. Grazie mille. Ti auguro una giornata radiante.

    RispondiElimina
    Risposte
    1. L'ho già fatto e credo sia anche molto chiaro.
      http://www.ideepercomputeredinternet.com/2015/07/creare-link-interni-segnalibri-capitoli.html
      Per una demo sul funzionamento apri il seguente post e clicca sui titoli dei vari capitoli
      http://www.ideepercomputeredinternet.com/2015/07/blogger-responsive-template.html
      @#

      Elimina
    2. Ernesto grazie di vero cuore, prima non riuscivo a trovare il tuo post, leggendolo ci sono riuscita, anche se per me che sono inesperta non è stato facile http://messaggidivinamisericordia.blogspot.it/2014/02/crociate-di-preghiera-divise-per-i.html
      Grazie infinite

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy