Web Designer & Web Developer WordPress, SEO, HTML5, JQuery e molto altro. Piccoli articoli per grandi progetti!




Atom un editor hackable

Atom non solo un editor

Atom non chamatelo solo editor!

Editing multipiattaforma

Atom funziona su sistemi operativi. Si può usare su OS X, Windows o Linux.

Gestore di pacchetti integrato

Cercare e installare nuovi pacchetti o iniziare a creare il vostro proprio-tutto all'interno di Atom.

È possibile scegliere tra migliaia di pacchetti software open source che aggiungono nuove caratteristiche e funzionalità di Atom-o costruire un pacchetto da zero e pubblicala per tutti gli altri per l'uso.

Intelligente completamento automatico

Atom consente di scrivere codice più veloce con un intelligente, completamento automatico flessibile.

Browser file system

Facilmente sfogliare e aprire un singolo file, un intero progetto o più progetti in una sola finestra.

lastre multiple

Dividi la tua interfaccia Atom in più riquadri per confrontare e modificare il codice attraverso i file.

Trova e sostituisci

Trova, anteprima, e sostituire il testo durante la digitazione in un file o su tutti i tuoi progetti.

Temi

Atom viene pre-installato con quattro UI e otto sintassi temi a entrambi i colori chiari e scuri. Se non riesci a trovare quello che stai cercando, è possibile anche installare temi creati dalla comunità Atom o creare il proprio.

Personalizzazione

E 'facile da personalizzare e Atom stile. È possibile modificare l'aspetto della vostra interfaccia utente con i CSS / Meno e aggiungere caratteristiche principali con HTML e JavaScript. Guarda il video sulla creazione di Atom .

Sotto il cappuccio

Atom è un'applicazione desktop costruito con HTML, JavaScript, CSS e l'integrazione Node.js. Funziona su Electron , un framework per la creazione di applicazioni multi-piattaforma che utilizzano tecnologie web.

undefined

 

Open source

Atom è open source. Se vuoi far parte della comunità Atom o contribuire a migliorare il vostro editor di testo preferito, ci trovate su GitHub , Discutere e Slac!

 Insomma un editor fanatastico Free e sopratutto molto completo in tutte le sue forme!!!!!!

Adesso no ci resta che provarlo!: link https://atom.io/

 

undefined

Newsletter templates Cerberus

Cerberus-newsletter-templates

 

 

Creare newsletter non è stato mai cosi semplice

Creare newsletter non è stato mai cosi semplice, grazie a Cerberus.
Sono una serie di Template HTML responsive già fatti e pronti all'uso.
Ottimo per lo sviluppo di Newsletter e in continuo aggiornamento link: Cerberus

 

  

undefined

 

 

 

 

Gestire una Newsletter a livello di compatibilità fra i vari client di posta è il vero dramma per uno sviluppatore o web designer.
Ma la vera forza di Cerberus e la compatibilità come si può vedere dalla lista: 

  • Desktop
  • Outlook 2000/02/03/07/10/13/16 (Windows)
  • Outlook 2011/16 (Mac)
  • Apple Mail
  • Thunderbird
  • Web
  • Gmail
  • Outlook.com
  • Yahoo
  • Aol
  • Office 365 Web (Desktop)
  • Comcast
  • Web.de
  • GMX.de
  • freenet.de
  • T-Online.de
  • Mail.ru
  • Mobile
  • Mail (iOS)
  • Gmail (iOS, Android)
  • Inbox (iOS)
  • Mail (Android)
  • Mailbox (iOS)
  • Yahoo (iOS)
  • Outlook (iOS)

link: Cerberus

 

free wordpress template

undefined

I migliori primi 3 Free Responsive WordPress Themes 2017

WordPress è indiscutibilmente la piattaforma CMS più preferito sul web.
A causa della popolarità e lo sviluppo del CMS WordPress, molto temi  sono gratuiti e di ottima fattura.

Sarà per la loro semplicità e facile utilizzo questo CMS si nutre di Themes (Temi)

La maggior parte di questi temi includono caratteristiche sorprendenti;  ecco l'elenco dei migliori temi WordPress gratuiti che è possibile utilizzare per il vostro prossimo progetto... ↓

 

 

 

undefined

Brilliance

Brilliance è un tema WordPress professionale, molto creativo, flessibile e propositivo, moderno e robusto.
Brilliance è una piattaforma luminosa e intuitiva per la creazione di siti web accattivanti, dinamici e altamente efficaci per lo più ad applicazioni professionali e di business, con capacità abbondante per il successo commerciale e professionale costruito a destra in questo potente tema. 

SCARICA IL TEMA

 

 

undefined

Allegiant

Le aziende amano il tema Allegiant, perché include  abbondanti risorse che sono ideali per accelerare lo sviluppo del propio sito web aziendale, come ad esempio una funzione integrata dell'inserimento "membro del team" e molto altro.
Elegante presentazione e completamente fuori del solito standard, adatto a lavori professionali.

SCARICA TEMA

 

 

undefined

Auberge

Auberge è un impressionante tema WordPress semplice ma molto di moda, merita almeno di vederlo.
Ha un 5 su 5 stelle, ed è stato scaricato più di 30000 volte. Questa popolarità dimostra la sua schiacciante qualità e l'utilità.

SCARICA TEMA

 

 

Rimuovere formattazione automatica di wordpress

undefined

Togliere codice html generato dagli shortcode di Wordpress

Quando andiamo a generare delle pagine custom come la home page spesso a causa della formattazione automatica di wordpress, il codice html generato dagli shortcode nel frontend viene fastidiosamente annidato nei paragrafi e negli accapi, <p>, <br/> questo, oltre ad invalidare il codice html della pagina spesso causa degli errori di visualizzazione gravi!

Un ottimo rimedio è rimuovere il filtro wpautop dalla funzione the_content() che si occupa di stampare il contenuto principale delle pagine e dei post di WordPress.

Inserire dentro il file functions.php

remove_filter('the_content', 'wpautop');//elimina la formattazione automatica

Senza il filtro wpauto, viene disabilitata del tutto la formattazione automatica del testo, impedendo a WordPress l’aggiunta <p>, <br/>
in corrispondenza delle interruzioni di riga così come erano stati disposti nell’editor visuale.

 

Free Bootstrap HTML Template per agenzie

undefined

X-Corporation presenta Bootstrap HTML Template per agenzie

X-Corporation è ben progettato estremamente leggero, il caricamento veloce e migliore modello HTML gratuito bootstrap. L'interfaccia frontend è pulito, colorato, elegante, e infinitamente personalizzabile sarà decentemente partita con nicchie come azienda IT, avvio tech, società di consulenza, studio creativo, le imprese, e siti web aziendali.

Scopri subito link: downloads

Google speed & think with Google testing tool

undefined

Google speed & think with Google

Perchè testare il propio sito?
A breve Google integrerà uno Speed test nei risultati di ricerca...scienza o fantascenza?
Già da tempo si sapeva che la vellocità di apertura delle propie pagine web non fosse solo utile a chi naviga...

Grazie a una collaborazione con Measurement Lab, società fondata per monitorare le prestazioni di internet a livello globale, Google potrebbe presto integrare nei risultati di ricerca anche un test della velocità della connessione.

Vedremo cosa succede...

 

Newsletter o Dem creazione in HTML con l'uso delle tabelle.

undefined

Come creare una semplice Newsletter o Dem nel vecchio metodo usando le Tabelle

Prima Parte

Prima di tutto dobbiamo fare una precisazione su cosa sia una Newsletter e una Dem.

NEWSLETTER
La Newsletter è uno strumento di informazione e fidelizzazione. La definizione preventiva
dell’obiettivo da raggiungere è importante: tutte le scelte di comunicazione, inerenti gli aspetti
organizzativi e di gestione, dipenderanno dal vantaggio e dallo scopo che l’azienda desidera ottenere.
La grafica, lo stile del testo, i contenuti inseriti, la periodicità, sono elementi variabili da adattare
alle proprie esigenze e non possono prescindere dallo scopo fissato e dall’immagine che l’azienda
desidera trasmettere.

DEM
La DeM (Direct email Marketing) è uno strumento fondamentale del marketing mix per l’azienda
che intende puntare sul mercato dei media digitali. A differenza della newsletter la DeM punta
ad uno scopo più preciso, portando con sé un argomento o un’informazione mirata ad un target
esclusivo, selezionata nel Data Base aziendale. Viene utilizzata come biglietto da visita referenziato,
su un’utenza già acquisita, conosciuta e ben selezionata (addetti ai lavori, architetti, opinion leader,
press, etc.); essa può veicolare una particolare promozione, un Save the Date o invito ad
un evento, una comunicazione mirata sui punti vendita o una riunione con la forza vendita.

Detto ciò la programmazione e semplice per entrambi le combinazioni.
Oggi vedremo solo il vecchio metodo di scrittura HTML con pochissimo CSS, visto che viene interpretato diversamnte  dai vari client di posta elettronica e spesso causa di non pochi problemi.
Visto anche la situazione di digitalizzazione Italiana rimasta in molte realtà al sistema operativo XP molto buono per l’epoca ma oggi obsoleto.

Quindi per evitare problemi di compatibilità andremo a strutturare il codice HTML come si faceva nelle sue primissime edizioni:
XHTML 1.0 Transitional.
(questo dare la massima compatiblità)

In un secondo momento andremo a verificare tutta la nuova struttura in DIV e Responsive, più moderna e coplessa.

Procederemo quindi a usare le tabelle non i div, usando le proprietà delle tabelle stesse, facendo attenzione alla compatibilità nel mobile. (useremo una misura standard di 650px di larghezza)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Fac - simile</title>
</head>
<body>
<table width="650" border="0" align="center" cellpadding="0" cellspacing="0">
  <tbody>
  <!-- Menu -->
    <tr>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
   <!-- Fine Menu --> 
    <!-- Immagine -->
    <tr>
      <td height="353" colspan="5"></td>
    </tr>
     <!-- Immagine -->
    <tr>
     <!-- Footer info -->
      <td> </td>
      <td colspan="3"></td>
      <td> </td>
    </tr>
  </tbody>
</table>
</body>
</html> 

Premetto questa è una piccola struttura per piccole promozioni, possono essere molto più complesse.
Il concetto però rimane sempre lo stesso, scrivere meno codice per avere il massimo risultato, anche perchè più il file di invio sarà pesante e più il servizio di spedizione sarà contro producente.

TUtto questo oggi sembra obsolote visto i vari servizi che offorno il tutto è servito, Template Responsive, nussuna conoscenza di codice e tanto altro.

Ma è giusto sapere e conoscere sempre prima la Storia e poi l'evulozione per comprendere al meglio il tipo di lavoro che si andrà a strutturare.

Continua...

 

Salva

meta tag Safari telephone=no

undefined

Meta tags utili per il mobile iPhone / iPod / iPad

I Meta-tag sono dei tag Html volti a fornire informazioni aggiuntive (meta-informazioni) non visibili all’utente ma solo al browser, posso servire non solo per la SEO, ma oggi anche per funzionalità aggiuntive per il mobile.

Nel browser Safari per iOS (iPhone / iPod / iPad) come sappiamo rivela in automatico i numeri di telefono e gli indirizzi e-mail per convertirli in link.

Spesso però questa funzionalità potrebbe procurarci dei problemi e confondere l’utente.
Se non si desidera questa funzione, è necessario utilizzare il seguente meta tag.


Safari (iPhone / iPod / iPad):

<meta name="format-detection" content="telephone=no">

Salva

HTML5 sintassi in ottica SEO

undefined

HTML5 la giusta sintassi in ottica SEO

Google ci insegna che scrivere una buona sintassi HTML5 sia di struttura (giusto codice html) che di logica (rispettare le regole esempio h1 a seguire h2 h3 ecc) è una predominante vincente per posizionarsi bene.

Questo perché Google oggi tende a non classificare più nelle prime posizioni siti programmati in maniera non consona al suo standard.

Oltre alla nostra personale conoscenza di programmazione, spesso ci può succedere per vari motivi, di generare errori che potrebbero compromettere il nostro lavoro, per questo motivo sono nati molti strumenti che ci vengono in aiutano, uno di questi e w3c validator, ottimo per capire e correggere eventuali errori.

Con il passare degli anni l’HTML5 sarà sempre più alla portata di tutti anche senza nessuna conoscenza tecnica, grazie ai numerosissimi software che nascono ogni mese per la creazione di siti web, più o meno accattivanti, che vorrebbero prendere il posto di web designer e developer.

La differenza per Google fra i vari siti web si valuterà non solo sulla base del contenuto originale (articoli di un blog) ma anche lato codice!

Certo questo è un piccolo articolo che non ha la pretresa di insegnare nulla a nessuno ma solo di rendere consapevoli l'importanza di scrivere un codice senza errori.

Sarebbe da approffondire molto am molto di più... grazie per l'attenzione!

Yoast SEO plugin togliere commenti HTML

Yoast SEO plugin togliere commenti HTML WordPress

Spesso per ragioni di sicurezza abbiamo la necessità di nascondere e limitare i plugin di Wordpress;
Una prima soluzione è quella di disabilitare i commenti che vengono generati in questo caso di Yoast SEO.

<!-- This site is optimized with the Yoast SEO plugin v3.1.2 - https://yoast.com/wordpress/plugins/seo/ -->


- Andiamo a modificare il file class-frontend.php dentro la cartella plugin.

- nella riga 642 troveremo la stringa da modificare e la commenteremo fino alla riga 659 vedi esemio:

public function debug_marker( $echo = true ) {
		//$marker = sprintf(
			//'',
			/**
			 * Filter: 'wpseo_hide_version' - can be used to hide the Yoast SEO version in the debug marker (only available in Yoast SEO Premium)
			 *
			 * @api bool
			 */
			//( ( apply_filters( 'wpseo_hide_version', false ) && $this->is_premium() ) ? '' : ' v' . WPSEO_VERSION )
		//);

		//if ( $echo === false ) {
		//	return $marker;
		//}
		//else {
		//	echo "\n${marker}\n";
		//}
	}
 

Subito dopo andremo a commentare la riga 709:

(che fa riferimento a <!-- / Yoast SEO plugin. -->)
//echo '<!-- / ', $this->head_product_name(), ". -->\n\n";

Cosi toglieremo i commenti HTML nota bene una volta che aggiorni il plugin devi rifare la procedura.

URL Extractor

undefined

URL Extractor può essere utilizzato per estrarre migliaia di indirizzi e-mail o di altri URL, gli indirizzi web ad esempio, in modalità diverse:
Inserimento (o importare) un elenco di indirizzi di pagine web, l'applicazione utilizzerà le pagine web come un seme per iniziare a raccogliere i dati e visitare le pagine collegate, procedendo in uno sfondo di navigazione a livello profondo richiesto la raccolta di dati fino a che l'utente decide di smettere . (Fonte sito istituzionale)

Link:http://www.tensionsoftware.com/osx/urlextractor/

Screaming Frog SEO Spider Tool

Questo programma è un ottimo strumento per Testare il vostro sito, non sollo in ottica di Semantica SEO ma a 360°, laversione free non consente l'esportazione dei dati.

The Screaming Frog SEO Spider è un piccolo programma desktop è possibile installare in locale sul PC, macchina Mac o Linux che ragni siti web 'link, immagini, CSS, sceneggiatura e le applicazioni dal punto di vista SEO. Si recupera gli elementi chiave in loco per il SEO, li presenta in schede in base al tipo e consente di filtrare per le questioni di SEO comuni, o scomporre e analizzare i dati come si vede in forma esportando in Excel. È possibile visualizzare, analizzare e filtrare i dati di ricerca per indicizzazione come è raccolto e aggiornato continuamente l'interfaccia utente del programma.

The Screaming Frog SEO Spider consente di eseguire la scansione in modo rapido, analizzare e audit di un sito dal punto di vista SEO on-site. È particolarmente efficace per analizzare le medie e grandi siti, dove manualmente controllando ogni pagina sarebbe estremamente alta intensità di lavoro (o impossibile!) E dove si può facilmente perdere un redirect, meta refresh o duplicare problema pagina.

(Dal sito ufficiale www.screamingfrog.co.uk/seo-spider/ )

 

Comprimere CSS

min-css-link

Compressione CSS per ottimizzare gli intervalli di caricamento

Ottimmo strumento per comprimere il 'CSS' in 'min.CSS' ;-)
Grazie a questo tool puoi ottimizzare il contenuto dei tuoi fogli di stile (CSS) migliorando i tempi di caricamento del tuo sito web.
Attraverso questo strumento on-line potrai generare automaticamente la versione minimzzata dei tuoi file .CSS (min.css)

Link:
tools.w3clubs
toolset.mrwebmaster

Meta Tag Open Graph di Facebook

undefined

ll protocollo open graph (ogp.me)

ll protocollo open graph (i dettagli su ogp.me) trasforma qualsiasi pagina web in un oggetto del grafico sociale, con delle informazioni che lo caratterizzano e che permettono a siti come Facebook di personalizzarne la sua visualizzazione quando, ad esempio, viene diffuso sul sito.

Attraverso la configurazione dei “nodi” dell’open graph è possibile ad esempio dire a Facebook qual è il titolo di una pagina web, qual è la descrizione, l’immagine da associare alla pagina, il tipo di contenuto visualizzato, ecc.


<meta property="og:title" content="Open Graph Protocol, Facebook" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.dominio-articolo.com"/>
<meta property="og:image" content="http://www.dominio-articolo.com/miaimmagine.jpg"/>
<meta property="og:site_name" content="Nome del mio Articolo"/>
<meta property="fb:admins" content="5555003294536287"/>
<meta property="fb:app_id" content="966242223397117"/>
<meta property="og:description" content="Descrizione dell'articolo in tutte le sue parti"/>

è molto importante definire fb:admins con il propio Facebook admins, ma per far funzionare corretamentela vostra visualizzazione dovete impostare anche fb:app_id inserendo 966242223397117 codice di defaul se non ne avete creato uno, in fine per testare tutto fate riferimento a questo link:

https://developers.facebook.com/tools/debug/

Salva

novità dall'HTML5 rispetto all'HTML4

HTML5 vs HTML4

Le novità introdotte dall'HTML5 rispetto all'HTML4 sono finalizzate soprattutto a migliorare il disaccoppiamento fra struttura, definita dal markup, caratteristiche di resa (tipo di carattere, colori, eccetera), definite dalle direttive di stile, e contenuti di una pagina web, definiti dal testo vero e proprio. Inoltre l'HTML5 prevede il supporto per la memorizzazione locale di grosse quantità di dati scaricati dal web browser, per consentire l'utilizzo di applicazioni basate su web (come per esempio le caselle di posta di Google o altri servizi analoghi) anche in assenza di collegamento a Internet.

In particolare:

vengono rese più stringenti le regole per la strutturazione del testo in capitoli, paragrafi e sezioni;
vengono introdotti elementi di controllo per i menu di navigazione;
vengono migliorati ed estesi gli elementi di controllo per i moduli elettronici;
vengono introdotti elementi specifici per il controllo di contenuti multimediali (tag <video> e <audio>);
vengono deprecati o eliminati alcuni elementi che hanno dimostrato scarso o nessun utilizzo effettivo;
vengono estesi a tutti i tag una serie di attributi, specialmente quelli finalizzati all'accessibilità, finora previsti solo per alcuni tag;
viene supportato Canvas che permette di utilizzare JavaScript per creare animazioni e grafica bitmap;
introduzione della geolocalizzazione, dovuta ad una forte espansione di sistemi operativi mobili (quali Android e iOS, tra i più diffusi);
sistema alternativo ai normali cookie, chiamato Web Storage, più efficiente, il quale consente un notevole risparmio di banda;
standardizzazione di programmi JavaScript, chiamati Web Workers e possibilità di utilizzare alcuni siti offline;
sostituzione del lungo e complesso doctype, con un semplice <!DOCTYPE html>.

Google PageSpeed Vs CloudFlare

undefined

Google PageSpeed va in pensione

Google PageSpeed doveva esssere sostituito o cancellato...
Dopo una presenza di 5 anni, Google PageSpeed lascerà posto ad altri progetti che il team di Google porterà alla nostra attenzione molto presto.

PageSpeed è stato il fedele compagno di molti amministratori di siti web che volevano ottimizzare e rendere più veloci le pagine dei loro siti, producendo come effetto un maggior “engagement” dei visitatori e quindi maggiori conversioni.
Mettendo a disposizione diverse buone pratiche garantiva un aumento delle performance.

Adesso Proviamo questo:

www.cloudflare.com

Home