riguarda un simpatico menù con un fantastico effetto di rotazione ed espansione che rivela il contenuto testuale associato alla voce selezionata, realizzato su un esempio fornito da tympanus.net una demo del sistema montata su una comune pagina html è visibile qui:

http://tympanus.net/Tutorials/RockingRollingMenu/

mentre la demo del nostro plugin per il CMS è visibile a questo indirizzo:
http://www.joomlaskin.it/demowp/

DOWNLOAD

Installazione

Per installare il plugin, seguite questi semplici passaggi

1. Decomprimere il file zip e caricare il contenuto nella directory di WordPress Plugin.
2. Attivare il plugin nella pagina admin dei plugin.
3. Andare nella pagina widget e aggiungere nella sidebar.

L’utilizzo è molto semplice, le voci di menu vengono recuperate in modo automatico dalle pagine che sono presenti.
Per  aggiungere le icone utilizzare questo parametro in campi personalizzati della pagina
in nome: menu_(nome icona)
in Valore:  utilizzare questi parametri find, help, search, home, mail e photo
Esempio, per aggiungere l’icona home nella voce home:
In nome: menu_icona
in valore: home
cliccate su aggiungi e salvate la pagina

Molto semplice vero?
Ovviamente il sistema è personalizzabile a vostro piacimento,potrete aggiungere tutte le voci di menu che desiderate, con relative icone e testi.

Si ringrazia Lucazone per la preziosa collaborazione nell’implementazione di questo plugin

ho scelto il secondo menu partendo dall’alto come da figura allegata, è ovvio che il concetto è riferibile anche agli altri,come sempre l’importante è darvi uno spunto per l’approfondimento e lo studio.

vediamo dunque come è possibile implementare questa soluzione nel CMS wordpress, il tutorial è suddiviso in step e naturalmente forniremo une versione in pdf dello stesso oltre ad un pacchetto contenente tutti i file ed il plugin finale che potrete caricare direttamente sulla Vs piattaforma in wp.

Strumenti utilizzati:

• Pspad (editor gratuito scaricabile a questo indirizzo http://www.pspad.com/it/download.php
• Un minimo di pazienza da parte vostra……….

La prima operazione da fare è ovviamente recuperare il foglio di stile dalla pagina di codrops (unitamente alle immagini necessarie se presenti) uitlizzando il bottone download
Esempio pratico………..
Step 1
Apriamo con Pspad il file header.php presente nel tema di base twentyten (cartella wp-content/themes/twentyten)
E posizionandoci a riga 26, aggiungiamo il percorso relativo al foglio di stile del menù:

[cc lang="php" tab_size="2" lines="40"]

<link rel=”stylesheet” href=”<?php echo bloginfo(‘template_url’); ?>/menu.css”/>

[/cc]

step2
Prepariamo ora le funzioni di richiamo delle pagine di wordress con lo snippet di codice get_pages.
$pages = get_pages(“sort_column=menu_order&sort_order=ASC&parent=0″);
in termini semplici questa stringa di codice ha le seguenti funzioni
• sort_column, – ordinamento del menu, abbiamo usato menu_order, ordina il menu in base all’ordinamento della pagina

• sort_order, ordine ascendente o discendente, in questo esempio abbiamo usato ASC
• parent, si regola il grado di visualizazione del menu, se menu padre o figlio, impostato 0, verranno mostrati solo i menu principali

step2
ora passiamo al punto successivo, usando la funzione foreach
Il foreach nel PHP è uno degli strumenti interativi come while, while do o for.
L’utilizzo fondamentale che se ne fa è quello di analizzare un array e compiere determinate istruzioni per ogni elemento dell’array stesso. La sintassi di un semplice ciclo foreach è la seguente:

[cc lang="php" tab_size="2" lines="40"]<?php
$pages = get_pages(“sort_column=menu_order&sort_order=ASC&parent=0″);
if($pages) {
foreach ($pages as $page) {
?>[/cc]

Step 3

Recuperiamo le informazioni, i nomi del menu, la 2 voce del menu (in sostanza il sottotitolo che è visibile nella demo) e il link inserendo questa stringa
• get_page_link($page->ID), recupera il link della pagina
• $page->post_title; recupera il titolo della pagina
• get_post_meta($post->ID, ‘titolo2′, true), recupera la 2 voce, dal campo personalizzato ‘titolo2′ inserito nella pagina
Salviamo il file header.php ed se abbiamo eseguito tutto correttamente lo stesso sarà ora presente nel tema.
Il tutorial come indicato nel titolo dell’articolo è di tipo avanzato,ma abbiamo ovviamente realizzato un pacchetto completo che può essere caricato direttamente nella cartella plugin del Vs wordpress e usato direttamente,è altrettanto facile cambiare stile al menù stesso caricando uno degli altri esempi presenti sul sito di codrops.
Download del plugin per WordPress e step della guida

Si ringrazia lucazone per il supporto e l’implementazione della guida e del plugin

Download della guida in formato pdf e immagine di base del layout

Ma è davvero possibile gettare le fondamenta di un nuovo progetto con la sicurezza di rispettare dei parametri importanti come quelli già citati e nel contempo ridurre drasticamente i tempi di realizzazione?
Si e la risposta è nelle griglie di sviluppo.
Una griglia di sviluppo (framework) è formata da almeno due elementi distinti, un elemento grafico ed un elemento di codice. Insieme ci forniscono una struttura completa e versatile, adattabile a situazioni differenti, che rispecchia dei principi minimi di usabilità e soprattutto compatibile con tutti i browser, evitando il ricorso ai fix per internet explorer, e credo che ciò non sia da sottovalutare.
Vediamo come funziona il sistema
Esistono molti framework di sviluppo in giro per la rete, e magari forniremo un elenco più avanti,per il nostro tutorial utilizzeremo una reperibile a questo link:
http://www.gridsystemgenerator.com/
come si può vedere abbiamo la possibilità di impostare larghezza, numero di colonne di suddivisione e margini, e tenendo bene presente che la risoluzione media attuale dei monitor è almeno di 1024px (gli utenti con monitor da 800×600 sono davvero molto rari al giorno d’oggi) impostiamo come da figura, dando anche un margine di 10px.

cliccando sul bottone download ovviamente trasferiremo il pacchetto sul ns computer.
La base è dunque pronta per essere utilizzata!

STEP 1 – IL DESIGN

Come detto in precedenza il framework contiene codice xhtml e struttura grafica, noi cominceremo partendo proprio dal nostro editor di immagini per lo sviluppo del design del progetto.
Apriamo dunque in Photoshop un documento nuovo impostato per comodità a 1000px in larghezza e 1000px in altezza, per facilitare la comprensione ho creato una immagine di base che riporta anche una suddivisione visuale dei div che troverete all’interno della cartella di questa guida,il suo nome è griglia_base.JPG.

credo sia abbastanza intuitivo il funzionamento vero?
Ci troviamo di fronte ad una struttura di impaginazione precompilata certo, ma che ci offre ampi margini di intervento.
Tutto quello che dobbiamo fare è a questo punto, strutturarla impostando le guide in photoshop a seconda delle nostre necessità,facciamo un esempio:
Supponiamo di voler realizzare un design su due colonne con testata e footer,la colonna sinistra dovrà contenere una sidebar di 230px (un menù classico) in larghezza e la colonna destra (contenuti testuali) corrispondente avrà uno sviluppo in larghezza pari a710 px (considerando sempre il margin-left di 10px impostato a priori).
Quindi in photoshop impostiamo le guide corrispondenti come da figura:

Ammetto di aver esagerato un pò……ma è solo per cercare di spiegarmi meglio.
A questo punto il ns design verrà sviluppato proprio seguendo questi riferimenti (guide) impostate nel programma con diversi vantaggi immediati:
1. impaginazione coerente (non blocchi disordinati che rendono anche difficile ad esempio seguire la lettura di testi) e visivamente gradevole
2. la grafica può svilupparsi avendo dei riferimenti ben precisi (sempre di aiuto in situazioni particolari)
3. il layout lato codice…………..è già pronto!
E il terzo punto da solo vale molto ve lo assicuro, soprattutto perchè possiamo essere sicuri al 100% che sarà compatibile con i maggiori browser, è solo necessario procedere ad una pulitura dello stesso,per eliminare div e relative proprità css che non saranno utilizzate

STEP 2 – PULITURA DEL CODICE HTML E CSS

Anche questa fase non è particolarmente complicata, giacchè come mostrato in precedenza i contenitori sono marcati attraverso la loro larghezza in pixel, quindi è sufficiente cancellare tutto il resto.
Siamo partiti con l’idea di sviluppare una layout a due colonne rispettivamente di 230px e 710px, più una testata ed un footer, apriamo dunque il file html:
970_12_10.html con un editor testuale, ad esempio PSPAD, scaricabile a questo indirizzo:
http://www.pspad.com/it/download.php

non riporto per motivi ovvi tutto il listato relativo, basandomi sui nomi delle classi che dovremo mantenere
classe main (è il contenitore principale)
classe g720 (colonna destra o dei contenuti)
classe g240 (sidebar)
classe g960 (testata e footer)
classe clear (molto importante per la stabilità del sistema poiche contiene la proprietà clear: both che fissa i contenitori superiori con proprietà float.
Ecco il risultato sul browser:

Chiaramente si tratta solo di un esempio, una volta compresa questa metodologia di lavoro possiamo giocare su possibilità ampie ma ciò dipende sempre dalla nostra predisposizione ad intraprendere una strada che può rivelarsi, sotto molti aspetti, fruttuosa.

Download della guida in formato pdf e immagine di base del layout

Creazione siti web

Il CMS in questione (inutile nasconderlo) si trova un pò in difficoltà nel campo del SEO, soprattutto se viene usato per strutture predisposte alla pubblicazione di numerosi articoli, le varie extension quali:

* ARTIO

* SH404SEF

* JOOMSEF

* JOOMSEO

sono francamente alquanto instabili, anzi alcune creano in realtà maggiori problemi di quanti ne risolvano (vedi ad esempio la duplicazione assurda delle url, e per questo spiace dirlo, ma l’unica soluzione è un controllo e costante per arginare questo inconveniente).

Sul versante dell’indicizzazione invece, e prendendo spunto dalle migliori performance di WordPress, abbiamo sviluppato un plugin leggero e funzionale che sicuramente può essere utile. Certo già un grande aiuto viene fornito dai feed aggregator, ma esiste comunque una possibilità aggiuntiva che rende automatica una parte di lavoro e che permette la creazione di sitemap (in formato compatibile e senza errori) e l’invio della stessa ai motori di ricerca.

JSPING

L’installazione è molto semplice, basta effettuare il caricamento attraverso la gestione amministrativa ed attivarlo,

il sistema farà il resto, creando un file sitemap.xml nella root del sito ed inviando la stessa hai motori google, yahoo, bing.

In seguito sarà sufficiente effettuare una ricerca in google inserendo l’indirizzo della pagina creata e verificando la sua indicizzazione nel motore di ricerca.

Tra l’altro le funzionalità relative alla sitemap includono anche l’invio della stessa oltre che a BIG G anche a yahoo, bing, msnlive.

Il plugin come ns consuetudine viene rilasciato gratuitamente e potete prelevare il file di installazione a questo indirizzo:

Se poi riusciamo a ragionare in termini di web design gli spunti che possiamo averne sono notevoli.

• contrasto
• Pietre
• solitudine
• vita
• tempesta

Creazione siti web: Web Design, Sviluppo, Posizionamento sui Motori di Ricerca

• http://taenaron.deviantart.com/art/Omicron-Beta-62963315
• http://burning-liquid.deviantart.com/art/Aeon-WP-Pack-36473728
• http://dinyctis.deviantart.com/art/Cosmic-Daylight-Close-Up-1653829
• http://burning-liquid.deviantart.com/art/Terra-Nova-13224781
• http://dinyctis.deviantart.com/art/The-Last-Sunrise-3101878
• http://dinyctis.deviantart.com/art/Detritus-11275707
• http://dinyctis.deviantart.com/art/Cosmic-Sunrise-1026061
• http://gucken.deviantart.com/art/Sunrise-in-Space-56420137
• http://joejesus.deviantart.com/art/Smooth-Vision-98612258

Realizzazione siti web Brindisi – web design brindisi : creazione siti internet, ecommerce, web marketing, realizzazione siti web aggiornabili

• http://www.bainbridgestudios.com/
• http://www.aialex.com/
• http://bombers.deagostini.co.uk/
• http://www.bird-malaysia.com/
• http://www.atebits.com/
• http://www.macalicious.com/
• http://ideafoundry.info/
• http://www.studio7designs.com/
• http://yourwebjob.com/

Joomlaskin web agency è specializzata nella realizzazione e creazione siti web, posizionamento sui motori di ricerca

Una delle operazioni più importanti è l’indicizzazione delle pagine sia in riferimento alla scrittura di nuovi articoli, sia in
riferimento ad aggiornamenti delle pagine stesse, del resto visto il volume complessivo delle pagine presenti nei database non
possiamo certo non capire il motivo di questi ritardi.

Esistono però alcune risorse che possono aiutarci a superare quelo leggero gap e far diminuire i tempi di attesa, ultimo nato
tra gli strumenti online è Diphur.
Questo tool online vi permette di impostare la tracciatura delle url dei vs siti web impostanto diversi interessanti parametri
e effettuando in base alle vs specifiche dei pingback ai motori.

Testato con successo ha rivelato indicizzazione e aggiornamento delle pagine nell’arco di 24 ore (e parliamo di ricerche su google…..)

• http://www.31three.com/
• http://kzxtreme.com/
• http://www.mickevans.com/
• http://www.thisisaaronslife.com/
• http://www.ffranz.com/
• http://www.jamescharlick.com/
• http://patrickalgrim.me/
• http://sinopse.org/
• http://kennymeyers.com/

Joomlaskin è una web agency specializzata nella creazione di siti web, opera sia a Roma che a Milano.

Uscire dagli schemi si può, anzi si deve, anche se il più delle volte l’ostacolo più duro da superare non è la mancaza di motivazioni o spunti da parte nostra, bensì dalle idee del cliente.

Eccovi dunque una lista di siti web dedicati al commercio elettronico che si allontanano da questi schemi:

• talbots
• freepeople
• zingsale
• betweentheflags
• operationphoenix
• footlocker
• resisttoday
• crateandbarrel
• kallow
• anthropologie
• toobydoo
• rugby

Realizzazione sito web per imprese e privati. Realizzazione siti web con gestionale e backoffice. Sito Web creazione Siti internet realizzazione