Free PHP, HTML, CSS, JavaScript editor - Codelobster IDE

Released: March 26, 2020

In this article, we suggest you to get acquainted with the free editor of web languages - Codelobster IDE. It is presented on the software market for a long time already, and it wins a lot of fans.

Codelobster IDE allows you to edit PHP, HTML, CSS and JavaScript files, it highlights the syntax and gives hints for tags, functions and their parameters. This editor easily deals with those files that contain a mixed content.

If you insert PHP code in your HTML template, then the editor correctly highlights both HTML tags and PHP functions. The same applies to CSS and JavaScript code, which is contained in HTML files.

The program includes auto-completion function, which greatly speeds up the programmer's work and eliminates the possibility of errors.

Codelobster IDE provides contextual help on all supported programming languages, it uses the most up to date documentation at this moment, downloading it from official sites. So we can quickly get a description of any HTML tag, CSS attribute, PHP or JavaScript function by pressing the F1 key.

The built-in PHP debugger allows you to execute PHP scripts step by step, sequentially moving through the lines of code. You can assign check points, view the process of the work of loops, and monitor the values of all variables during the execution of the script.

You can view the HTML templates directly in the editor, highlight the interesting elements on the page and explore the associated CSS styles. HTML and CSS inspector works by the principle of all known FireBug

Other useful functions and features of the IDE:

• A pair highlighting of parentheses and tags - you will never have to count parentheses or quotation marks, the editor will take care of it.
• Highlighting of blocks, selection and collapsing of code snippets, bookmarks to facilitate navigation on the edited file, recognition and building of the complete structure of PHP projects - these functions ensure easy work with projects of any scale.
• Support for 17 user interface languages, among them English, German, Russian, Spanish, French and others.
• The program works on the following operation systems: Windows 7, Windows 8, Windows 10, Mac OS, Linux, Ubuntu, Fedora, Debian.

The professional version of Codelobster IDE provides the programmer with even more features.

For example, you have an opportunity to work with projects on a remote server with use of the built-in FTP client. You can edit the selected files, preview the results and then synchronize the changes with the files on the hosting.

In addition the professional version includes an extensive set of plug-ins:

• Fully implemented support for JavaScript libraries, such as jQuery, Node.js, AngularJS, BackboneJS and MeteorJS.
• A large set of extensions that help to work with PHP frameworks - CakePHP, CodeIgniter, Laravel, Phalcon, Smarty, Symfony, Twig and Yii plug-ins.
• Plugins for working with the most popular CMS - Drupal, Joomla, Magento and WordPress.

We can download and install any framework directly from the program without being distracted from the main tasks.

In general, for a year of work, our team had no complaints against the editor. Codelobster IDE works fast, does not hang and allows us to work even with large PHP projects.

You can download Codelobster IDE from the official website codelobsteride.com

IE non è ancora morto in Italia

Nonstante tutto il mondo abbia proclamato la morte del famoso Bug Browser IE... tra l'11 il 10 e il famigerato 9...
per chi dovesse fare cross-browsing diventa veramante drammatico implementare animazioni CSS3 e molto altro ancora.


Nel nostro paese ancora nonostante si parli di Digital ce molta ingnoranza e la cattiva abbitudine di non voler adeguarsi alle nuove tecnologie che non siano a stretto legame con il mondo social e il gico d'azzardo online.

Ma per chi volesse avere lamassima compatibilità e offrire una adeguata navigazione anche a coloro che sono rimasti all'inteno del mondo IE
possiamo implementare una soluziuone efficace via @media query:

Internet Explorer 10 & 11

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
 /* IE10+ CSS styles go here */
}

Microsoft Edge 12:

@supports (-ms-accelerator:true) {
  /* IE Edge 12+ CSS styles go here */ 
}

Richimare CSS per la versione IE11 IE10 e risolvere i problemi tramite @media query per il giusto cross-browsing e la soddisfazione di tutti gli utenti...

Più di una semplice raccolte di librerie JS

Questo progetto è indubbiamente una miniera d'oro per un web designer e developer.
Una suite di librerie e strumenti modulari che lavorano insieme o in modo indipendente per abilitare ricchi contenuti interattivi su tecnologie web aperte tramite HTML5.

EaselJS

Una libreria JavaScript che facilita il lavoro con l'elemento Canvas HTML5.
Utile per creare giochi, arte generativa e altre esperienze altamente grafiche.

EaselJS offre soluzioni dirette per lavorare con grafica ricca e interattività con HTML5 Canvas.
Fornisce un'API che è familiare agli sviluppatori Adobe Animate, ma abbraccia la sensibilità JavaScript.
Consiste in un elenco di visualizzazione completo, gerarchico, un modello di interazione core e classi helper per semplificare il lavoro con Canvas.

TWEEN JS

Una libreria JavaScript semplice ma potente per il tweening e l'animazione di proprietà HTML5 e JavaScript.
Funziona stand-alone o integrato con EaselJS.

TweenJS è una libreria di tweening semplice da utilizzare in JavaScript.
È stato sviluppato per integrarsi bene con la libreria EaselJS, ma non è dipendente o specifico. Supporta il tweening di entrambe le proprietà degli oggetti numerici e le proprietà di stile CSS. L'API è semplice ma molto potente, facilitando la creazione di interpolazioni complesse concatenando comandi.

SOUND JS

Una libreria JavaScript che fornisce una semplice API e potenti funzionalità per semplificare il lavoro con l'audio.
Si collega facilmente il caricamento del file audio a PreloadJS.

SoundJS riassume l'implementazione del suono HTML5, rendendo molto più semplice l'aggiunta di suoni cross-browser coerenti ai tuoi giochi o esperienze ricche.
È possibile richiedere le funzionalità, quindi specificare e assegnare la priorità a quali API, plug-in e funzionalità vengono sfruttati per dispositivi o browser specifici. 

PRECARICO JS

Una libreria JavaScript che consente di gestire e coordinare il caricamento di risorse e dati.

PreloadJS facilita il precaricamento delle risorse: immagini, suoni, JS, caratteri, testo e altro.
Usa XHR2 per fornire informazioni di progresso reali quando disponibili, o ricade per taggare il caricamento e agevolare il progresso quando non lo è.
Consente più code, più connessioni, interrompendo code e molto altro.

Considerando che è sponsorizzato da Adobe, Microsoft, Mozzilla e Gskinner

Se ne vedranno delle belle!!!!

SVG animato durante lo Slide by Sencha

Questa demo è stata realizzata da Sencha (crea applicazioni web e mobile // Sencha Extjs.)

Una presentazione sperimentale che mostra un frame SVG animato durante la transizione dello Slide.
Possono essere utilizzate diverse forme per creare una varietà di stili creativi e molto emozionanti.

L'idea è di animare un frame SVG mentre passiamo da uno slide ad un altro.
Usando diverse forme possiamo creare una varietà di stili e di frame trasformando l'SVG.

Una delle cose molto importanti per usare bene questo plugin ehavere il Browser aggiornato visto sono stati usati delle nuove proprietà CSS moderne come CSS Flexbox e variabili varie.

Qui Trovate la Demo live
Qui Trovate il Download Source

Qui stiamo animando una semplice forma a scatola:

In questa demo è stato usato un modello per il riempimento a forma di rettangolo leggermente inclinato.
Il pattern è tratto da Hero Patterns:

In questo esempio possiamo usare qualsiasi tipo di forma, anche molto piccola.
Nota come i titoli sopra l'SVG in questa demo:

Non resta che testare e ancora una volta ringraziere Shota e Codrops! Grazie! Thank you! 感謝

Addio Firebug

Gli sviluppatori di Firebug abbandonano il supporto per l'estensione più famosa dagli sviluppatori e web designer.
Già dal 2016 si era intuito che sarebbe stato il declino inevitabile, implementando
Firefox Developer Tool.
Ma la vera rottura si avverte ora con gli aggiornamenti di Fire Fox che non rende più compatibile la bellissima e amata estensione Fire Bug.

Ovviamente tutto ha un lieto fine, Fire Fox implementa un secondo Browser Firefox Developer Edition ultra veloce con funzioni all'avanguardia per lo sviluppo web e nello supporto delle ultime tecnologie come le griglie CSS.

I nuovi strumenti di sviluppo di Firefox sono molto avanzati, flessibili e, soprattutto, ai tuoi ordini. Tra gli altri, il miglior debugger JavaScript in circolazione, realizzato utilizzando le librerie React ed Redux, in grado di gestire più browser contemporaneamente.

Questo strumento è molto valido, già testato da un mese.
Ottimo browser molto veloce e le funzioni di sviluppo sono ben articolate e funzionali, certo ci si deve un po abituare che il buon vecchio FireBug non ce più... ma come sappiamo nulla è eterno.


Scarica la versione di Firefox dedicata agli sviluppatori

Interactive Data Visualization for the Web, 2nd Ed.

Seconda edizione

Ottima guida arrivata alla seconda edizione, per lo sviluppo di animazioni 3d per il web.
Ideale per  chi vuole diventare un Web Developer,  tanti esempi: HTML, CSS, JavaScript , e SVG, ben 140 esempi!

La potenza di Bootstrap 4 + Ui Kit

Godetevi questo Template Free!

Link: now-ui-kit

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.

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/

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

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: 

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... ↓

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

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

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

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.

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

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...

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 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 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 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 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/

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/ )

Il servizio più popolare del Consorzio W3C, diventa ancora più veloce, utile e funzionale.

W3C certifica che un sito web è stato controllato per ben formato codice XHTML e non solo anche nel CSS, uno strumento sempre più importante...

Link esemipio

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

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

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>.

Verifica errori e otimizzazione SEO per il tuo sito web

Seo site checkup è uno strumenti molto utile per l'ottimizzazione dei motori di ricerca (SEO) del tuo sito, molto completo e veloce.
Link:
seositecheckup.com

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