Esempi per Webmaster: codice free e risorse per imparare

Scritto da il . Articolo aggiornato il: 2014-11-24.
Loghi di alcuni moderni linguaggi di programmazione e tool di sviluppo per il web.

Con questo post inauguro un contenitore di Esempi per i Webmaster: linguaggi di programmazione, software, cms, best practices e codice libero da riutilizzare in progetti commerciali.

Formazione e condivisione sono i due obiettivi di Esempi per Webmaster, la sezione di questo sito destinata a raccogliere risorse utili a web designer, sviluppatori e webmaster.

Esempi pratici e codice pronto uso

Nel web ci sono luoghi fantastici per confrontarsi e condividere, ma chi cerca esempi facili per imparare un linguaggio o fare delle modifiche a un'applicazione incontra difficoltà a reperirli, soprattutto se è alle prime armi. Chi non è ancora esperto ha bisogno di esempi pratici che funzionino al primo tentativo, quindi di codice pronto uso per fare il copia e incolla. È quello che offro su Esempi per Webmaster, dove lo stile è volutamente spartano per favorire il riutilizzo dei contenuti.

Licenza Creative Commons (CC BY-SA 3.0 IT)

In internet sono in tanti a parlare di condivisione e open source, ma alla conta dei fatti quasi tutti condividono e chiedono di condividere solo quello che interessa loro a fini promozionali. Io ho deciso di abbracciare la cultura della condivisione e dell' open source senza esitazioni: i contenuti di Esempi per Webmaster sono infatti rilasciati con licenza Creative Commons BY-SA 3.0 IT, ovvero possono essere liberamente condivisi e modificati, anche a fini commerciali, purché:

  • sia attribuita la paternità dei contenuti;
  • venga fornito un link alla licenza;
  • sia indicato se sono state effettuate modifiche;
  • i contenuti, anche se modificati, vengano redistribuiti con la stessa licenza dell'originale.
In alcuni limitati casi sarò costretto a limitare l'accesso ad alcune risorse restringendolo ai partecipanti di un corso (per rispetto agli stessi che pagano la quota d'iscrizione), oppure a distribuire estensioni e codice "non open source" (per salvaguardare i clienti che hanno finanziato il progetto). Cercherò di limitare questi casi, pur nella consapevolezza che non potrò eliminarli completamente, visto che lo sviluppo dietro compenso costituisce la principale fonte di reddito di un developer.

Coerententemente con il proprosito di rispettare la cultura open source, HtmlAfterP, il primo plugin free pubblicato su questo sito, viene distribuito con licenza GNU GPL 2.0.

Esordio con RegExp in PHP

Nella prima risorsa disponibile si trovano tre esempi per illustrare la sintassi delle regex (espressioni regolari) in PHP. Le Regular Expressions sono un argomento fondamentale per tutti i webmaster; quelle in PHP sono inoltre essenziali per coloro che sviluppano in WordPress e Joomla.

Realizzare Web Forms

La seconda risorsa per webmaster è dedicata ai Web Forms in HTML5, JavaScript e PHP. Questo esempio della raccolta è incentrato sulla realizzazione di un form in HTML5 con campo di input di tipo testo. Il codice (file html e php) è disponibile per il download gratuito.

Web Form con validazione jQuery per i campi vuoti

Nuovo esempio di creazione di un web form in HTML5: jQuery per prevenire campi vuoti nei Web Forms illustra come realizzare una validazione in jQuery per prevenire i campi vuoti. Disponibile per il free download un pacchetto zip completo di codice HTML, PHP, jQuery e CSS.

Web design: animare le immagini con le transizioni CSS

Con CSS transition: zoom e opacity effect su image hover inizio un nuovo filone di esempi per Webmaster tutto dedicato al Web Design. Le transizioni CSS sono straordinarie perché consentono di rendere la pagina più dinamica e piacevole, il tutto con poche righe di codice e senza il ricorso a librerie esterne. Questo esempio è dedicato agli effetti sulle immagini ed è alla portata anche di webmaster e web designer principianti.

Social widget responsive

Le piattaforme social mettono a disposizione degli amministratori delle pagine i cosiddetti pulsanti di condivisione e altri tipi di widget che, inseriti nelle pagine web, aiutano a promuovere gli account social. Il widget che Facebook dedica alle sue pagine si chiama Like Box e può integrare non soltanto il pulsante "Mi piace" ma anche le faccine dei gli amici e persino il feed dei post. L'equivalente di Google+ si chiama badge e può comprendere l'immagine di copertina e del profilo, il motto e il pulsante con l'indicazione del numero di follower. Entrambi questi widget non sono responsive, cioè non si adattano ai siti web moderni che redimensionano i contenuti a seconda dello schermo. Per ovviare a questo problema ho pubblicato una guida facilissima che mostra come trasformare i Facebook Like Box e i badge di Google Plus per adattarli a un design responsivo.

Matematica di base con JavaScript

Math è un JavaScript object che comprende metodi e proprietà di base per affrontare problemi matematici. In pratica, Math permette di usare le funzioni e le costanti matematiche, il tutto con la solita sintassi semplice e intuitiva. L'articolo include esempi con funzioni trigonometriche, arrotondamenti, generazione di numeri casuali, valore assoluto.

Calcolatrice Flat Design con JavaScript

Altro esempio di sviluppo e design per il web: Come creare una Calcolatrice Flat Design con JavaScript è un concentrato di occasioni buone per imparare il meglio dei linguaggi del web: dai web forms HTML5 a Schema.org, dalle potenzialità dei diversi selettori jQuery all'uso di una libreria specifica come Math.js, che ci consente di fare dei calcoli mostruosi con una semplicità incredibile. Mi sono davvero divertito a dare uno stile flat alla mia calcolatrice, il tutto senza caricare immagini e con il solo potere del CSS3.

Array multidimensionali: chiavi, ciclo foreach e ordinamento

Questo articolo spiega come dichiarare e ordinare array annidati. Si parte dalle operazioni di base sugli array come l'aggiunta e l'eliminazione di elementi, quindi si passa agli array multidimensionali e all'uso del ciclo foreach. Attraverso cinque esempi sono illustrati i modi alternativi per archiviare dati in un array, con e senza chiavi alfanumeriche, e l'uso della funzione array_multisort per ordinare gli elementi.

Torna alle novità