Sei uno sviluppatore e vuoi scoprire come creare e guadagnare con la creazione di applicazioni per Iphone?

In questa serie di video, vedrai come fare e quali strumenti e consigli utilizzare per affrontare questo mercato con un occhio più informato.

Guarda di seguito i primi 2 video realizzati da me durante un evento dedicato proprio agli sviluppatori di applicazioni per Iphone.

Come creare applicazioni per Iphone?

Relatore: Omar Cafini – Video: Mirko D’Isidoro.

Sono stato invitato da Omar Cafini alla libreria Rinascita di Ascoli Piceno il primo dicembre scorso.
Ho filmato l’intervento in merito alla sua esperienza nello sviluppo e nella diffusione sul web di applicazioni per Iphone.

Oltre ad essere un mio amico (ho conosciuto questo bravo ingegnere informatico al primo barcamp di Ascoli Piceno, organizzato anche grazie al mio aiuto ), Omar è un consulente informatico.

Tra le sue varie attività, collabora con me nella gestione e diffusione di questo blog sulla salute e la farmacia (è uno dei 5 blog del mio piccolo network ), curato dal punto di vista dei contenuti dalla Dottoressa Catia Celani.

Non a caso, grazie a Omar e Catia, alcuni dei contenuti di questo blog salutistico, ora sono disponibili anche attraverso una semplice applicazione per Iphone, che ti permette di consultare alcune delle rubriche presenti nel blog, che via via aumenteranno nel corso del tempo.

Cosa vedrai in questa serie di video dedicati alla progettazione di applicazioni Iphone?

• Il fenomeno Iphone e i numeri del mercato;
• Le risorse per sviluppare;
• Consigli per iniziare e per progettare applicazioni.

Nelle prossime settimane, aggiungero al mio canale di youtube, gli altri interventi di Omar in merito allo sviluppo di applicazioni per Iphone.

Tutti i video verranno caricati nella playlist su youtube, creata appositamente per questo evento.

Ecco la presentazione di Omar che ci anticipa alcuni degli argomenti che sono stati trattati durante l’evento (mi scuso per la scarsa qualità video, non avevo a disposizione delle luci e quindi il risultato della registrazione è stato pessimo ma la qualità audio però è buona ).

Il fenomeno Iphone e i numeri del mercato

Come funziona il canale di vendita per le applicazioni Iphone

Le slide dell’intervento

[Affiliato] IProgrammatori.it e’ una grande community di programmatori, analisti ed esperti di informatica.

Il Servizio Job Manager di IProgrammatori.it e’ uno strumento che mette in comunicazione aziende alla ricerca di sviluppatori e gli informatici stessi.

Fare un sito mobile oggi non è complicato, basta conoscere un po’ di xhtml e diciamo che il 70% dei dispositivi possono accedervi senza difficoltà.
Ma c’è una bella differenza fare siti che si adattino alle capacità del dispositivo che vi accede, l’ostacolo per ogni web developer è risolvere la problematica della “device fragmentation”  cioè il caos dei dispositivi mobili.

Ogni singolo dispositivo ha centinaia di caratteristiche che differiscono l’uno dall’altro, per:

• grandezza di schermo;
• capacità grafica;
• formati multimediali differenti (video, imnaggini etc. etc.);
• modalità di navigazione (tasti/tastiera);
• capacità di leggere formati flash;
• capacità di rete;
• versione j2me supportata;
• etc. etc.

Esiste un progetto Open Source italiano che permette su qualsiasi piattaforma (Linux, Windows, OS X, Unix…) e con qualsiasi linguaggio (php,java, perl, python, ruby etc.) di poter identificare il dispositivo e sapere le sue caratteristiche tecniche, tale progetto è stato accettato da CPAN come modulo di Apache2.

Il progetto si chiama “Apache Mobile Filter”, un progetto partito nel Novembre 2008 ed è maturato con la versione 2 nel maggio 2009.

Apache Mobile Filter utilizza come device repository, il database che censisce i dispositivi nel mondo, WURFL.
Il progetto “Apache Mobile Filter” è scaricabile da Sourceforge al seguente indirizzo:

http://sourceforge.net/projects/mobilefilter/

richiede l’utilizzo di mod_perl2 e ovviamente di Apache (2.x.x).

Il pacchetto una volta scaricato contiene due moduli:

• WURFLFilter che permette l’identificazione del dispositivo mobile il reperimento delle sue caratteristiche (capability) e li espone come variabili di ambiente, quindi facilmente reperibili in qualsiasi linguaggio.

  

• ImageRenderFilter è il modulo che permette di renderizzare “on the fly” le immagini adattandole alle dimensioni dello schermo, in modo tale che lo sviluppatore crea solo un immagine ad alta definizione (meglio in formato png) e il filtro fa la trasformazione.Grazie a un raffinato meccanismo di cache la trasformazione avviene solo la prima volta per ogni classe di grandezza di schermo.

   

  Di seguito illustra l’architettura di come funziona il filtro.

   

  Il progetto sta avendo un suo discreto successo con oltre 600 download in 6 mesi solo da Source Forge, mentre non è disponibile il dato da parte di CPAN.
  La comunità opensource si è già accorta della valenza del progetto ed è stata menzionata sui seguente blog:

• http://robertogaloppini.net/2009/01/20/the-case-for-open-source-development-a-personal-case-study/
• http://mobilephonedevelopment.com/archives/854

In un web dove la quasi totalità delle pagine sono realizzate dall’accoppiata (X)HTML e CSS, Flash e simili a parte, viene di grande aiuto agli sviluppatori ed ai web designer la preziosa utility per Firefox “Firebug“ ad oggi giunta alla versione 1.3.

Grazie a Firebug, prelevabile direttamente dal sito ufficiale, lo sviluppatore avrà la possibilità di modificare in tempo reale una qualsiasi pagina visitata su Firefox.
Avremo infatti accesso diretto al codice HTML, CSS e Javascript, con possibilità di modifica e già in fase di battitura osservare l’effetto delle nuove istruzioni.
E’ facile rendersi conto quanto ciò possa facilitare la vita del web designer che non si troverà più a dover aggiornare decine e decine di volte la stessa pagina ma prima ancora di modificare realmente il file HTML, le sue regole CSS o quant’altro, potrà rendersi conto visivamente dell’effetto creato.

Tutto ciò che devi sapere per lavorare con Firebug

mini guida esaustiva in un unico articolo a cura di Attilio Fiumanò

• A chi può essere utile?
• Devo essere per forza esperto?

Assolutamente no, questa estensione per Firefox tornerà utile agli utenti più esperti quanto, se non di più, a quelli che sono ancora alle prime armi.

Il suo utilizzo è infatti consigliatissimo anche per chi vuole prendere confidenza con tag attributi classi html, regole CSS o codice Java Script.
Tornerà molto utile infatti, visitando un sito web qualsiasi durante la vostra navigazione, la possibilità di vedere le proprietà e le regole CSS di ogni singolo elemento e conseguentemente di imparare a fare web design semplicemente studiando il lavoro altrui.

Requisiti

• Firefox – Consigliata v.3.0.10;
• Mouse;
• Tastiera;
• Tempo per smanettare (non è esattamente un requisito ma più ne avete meglio è)

Insomma, requisiti decisamente alla portata di tutti.

Per inziare a lavorare con Firebug

Effettuare l’installazione del plugin direttamente dal sito ufficiale segnalato all’inizio dell’articolo.
L’installazione è semplice e veloce, basta seguire le istruzioni, riavviare Firefox al termine e siete pronti.

La scheda HTML

A primo impatto dopo l’installazione non sembrerebbe cambiato molto, salvo un piccolo “insetto” collocato nell’angolo in basso a destra del vostro browser.
Sarà proprio da questa piccola nuova icona che avremo accesso a tutte le potenzialità offerte da questa estensione.

Come è chiaro già dall’immagine sarà possibile visualizzare tutto il codice html della pagina in maniera ordinata, con la possibilità di “navigare” nei vari annidamenti dei tag all’interno di html, body e così via.

Scorrendo in profondità tra i vari tag html si noterà subito che al solo passaggio del mouse sul nome del tag l’elemento verrà evidenziato sulla pagina web con vari colori.
Il giallo identificherà il margine dell’oggetto, il viola ne identificherà il padding e in azzurro il contenuto.

Dall’immagine si evince come firebug fornisca una chiara rappresentazione dell’elemento selezionato e del suo box model.

Nella finestra di destra, sotto la scheda Stile, potremo verificare tutte le regole CSS che agiscono sull’oggetto in questione.

Verranno indicate le regole ereditate, quelle sovrascritte in base alla tabella delle priorità CSS e i file di riferimento da dove tali regole vengono caricate.
Come se non bastasse attraverso il doppio click su una regola specifica o attraverso il click destro avremo la possibilità di modificare, annullare o creare nuove regole specifiche per l’elemento selezionato e contemporaneamente verificarne gli effetti.

La stessa operazione può essere fatta in modo analogo nella finestra HTML dove potremo variare le classi, gli attributi, gli id o anche il testo o qualsiasi altro parametro con la corrispondente variazione dinamica della pagina.

Nella scheda Layout avremo un’altra rappresentazione grafica del box model.

Dalla scheda DOM (della finestra di destra) potremo invece accedere a tutta la “genealogia” dell’elemento secondo le regole W3C, molto utile anche per il debugging Java Script.

Le schede CSS e DOM

Com’è facile immaginarsi da queste due schede, avremo accesso rispettivamente all’intero CSS e DOM (Document Object Model) della pagina caricata.

Non mi soffermerò molto su queste due schede poiché il loro funzionamento oltre ad essere facilmente intuibile è analogo alle schede trovate sotto la scheda HTML sopradescritta.

Nella scheda CSS potremo disabilitare le istruzioni (semplicemente clickando sul divieto d’accesso a fianco alle regole), modificarle cliccando due volte sul valore di ogni singola regola, oppure aggiungerne nuove, inserendo manualmente le nuove istruzioni dopo aver cliccato col destro e aver selezionato “Nuova proprietà”.

Nella parte superiore della scheda potremo scegliere quale dei files di stile caricati vogliamo modificare (nel caso ve ne siano più d’uno).
Di default verrà visualizzato l’intero codice CSS caricato.

Come è lecito aspettarsi nella scheda DOM troveremo l’intero Document Object Model della nostra pagina a partire dall’elemento window per poi poter navigare nei vari document, html, body eccetera.
Per ogni elemento sarà possibile visualizzare tutte le proprietà, elementi figlio, padre, fratello e tutto ciò che prevede lo standard W3C.
Interessante anche la possibilità di accedere al contenuto di tutte le variabili globali usate in javascript, utilissimo in fase di debugging.

Anche in questo caso sarà possibile cambiare il contenuto dei vari campi delle variabili ma personalmente sconsiglio di agire direttamente dal DOM per modificare i valori degli oggetti.
Risulta invece molto utile verificare che tali valori corrispondano con l’effetto desiderato dal vostro codice Java Script.

La scheda Java Script

La scheda Java Script come le schede Console e Net sono di default disabilitate.

Questo accade perché potrebbero verificarsi dei cali di prestazione dovuti, in particolari contesti, alle ingenti risorse richieste per il caricamento di alcune pagine web dalle suddette schede.

Una volta abilitate le tre schede potremo accedere alla scheda Java Script come in immagine.

Anche in questo caso avremo la possibilità di muoverci tra i vari file .js caricati dalla pagina e selezionare il file che vorremo analizzare, analogamente a quello che accadeva nella scheda CSS.

Come nei migliori tool di programmazione avremo la possibilità di debuggare il nostro codice con l’inserimento di breakpoint nei punti chiave del nostro codice per analizzare a run-time l’effettivo valore delle variabili e il funzionamento della nostra applicazione Java Script.

Per chi non lo sapesse un breakpoint è un punto del nostro codice in cui noi faremo fermare temporaneamente l’esecuzione del programma, e dal quale potremo controllare istruzione dopo istruzione il suo comportamento con la corrispondente variazione delle variabili associate.

Per impostare un breakpoint nel nostro codice basterà effettuare un doppio click alla sinistra del numero di riga corrente.
Se hai impostato correttamente il breakpoint comparirà un cerchio colorato di rosso accanto alla riga selezionata.

A questo punto una volta che l’esecuzione del codice Java Script raggiungerà la linea selezionata, ammesso che ciò avvenga, l’applicazione andrà in pausa e avremo la possibilità di controllare i valori delle variabili, nella scheda di destra, e di procedere passo passo con le istruzioni successive attraverso l’uso dei pulsanti sulla barra superiore.

Le schede Net e Console

Da queste due schede potremo vedere come “lavora” effettivamente la nostra pagina Web.

Dalla scheda Net otterremo informazioni circa il caricamento dei vari files della pagina.
Con ciò ci riferiamo ad esempio ai file CSS importati per via esterna, oppure alle immagini caricate col tag <img src=”..”/> o ancora i file Java Script esterni, oggetti Flash e tutto ciò che viene caricato nella pagina e il cui contenuto non sia incluso nella pagina html richiesta.

Come da immagine anche questa scheda racchiude informazioni preziose.

Sarà facile rendersi conto se stiamo sovraccaricando il lavoro di acquisizione di files esterni da parte del browser rallentando così il caricamento della pagina stessa.
Il dettaglio dei millisecondi impiegati per ogni singolo file ci darà subito una chiara idea del carico di lavoro affidato al nostro browser.

Procedendo nel dettaglio per ogni singolo file potremo leggerne l’header http di richiesta e di risposta con tanto di cookie (che nell’immagine ho offuscato per motivi di sicurezza), variabili passate con metodo GET o POST, file non trovati, url che subiscono redirect e tutto ciò che il protocollo http prevede.

Nella scheda Console (l’immagine in alto), troveremo sempre informazioni riguardo a richieste fatte dal browser per l’acquisizione di informazioni o file esterni, ma in questo caso si tratta di richieste che vengono effettuate tramite Ajax e solitamente le informazioni scambiate saranno in formato XML o JSON.

Nello screen allegato è mostrato il risultato di una richiesta Ajax in formato JSON.
Anche qui si può entrare nel dettaglio visualizzando l’header di richiesta, di risposta e le variabili scambiate.

In aggiunta a tutto questo in questa scheda troveremo anche informazioni riguardo a eventuali errori rilevati nel codice Java Script (nell’esempio Firebug ci riporta nel dettaglio l’errore rilevato).

I pulsanti Analizza e Modifica

Per concludere vorrei spendere due parole sui pulsanti Analizza e Modifica che probabilmente avrai notato negli altri screen nella parte superiore della barra di Firebug.

Se da una parte il funzionamento del secondo possa essere facilmente intuibile, è dal primo che con molta probabilità cominceremo quando dovremo analizzare i vari elementi della nostra pagina.

Una volta selezionato il pulsante Analizza, infatti, non dovremo far altro che portare il mouse sull’oggetto che ci interessa all’interno della finestra di navigazione e dinamicamente comparirà un rettangolo attorno all’elemento puntato.

Prima ancora di effettuare il click verranno evidenziate nella scheda Html e Css le relative caratteristiche e regole.
Se quello è veramente l’oggetto che ci interessa allora effettuiamo un normale click col sinistro, l’oggetto verrà selezionato e tranquillamente potremo analizzarne i contenuti come già spiegato in precedenza.

Personalmente faccio un forte uso del pulsante Analizza perché permetterà in pochi passaggi di analizzare un determinato oggetto e studiarne le caratteristiche, evitando la perdita di tempo di navigare tra i vari annidamenti dei tag.

Il pulsante Modifica rappresenta un altro modo per modificare i contenuti HTML o CSS (a seconda della scheda in cui ci troviamo) di un determinato elemento.

Tuttavia consiglio di modificare tali contenuti tramite il doppio click o click destro nelle relative schede, poiché non correremo il rischio di snaturare la sintassi HTML o CSS.
In questo modo, infatti, nel caso dovessimo scrivere delle istruzioni scorrette Firebug sarà in grado di riconoscerle e semplicemente le ignorerà.

Dal pulsante Modifica noi potremo testualmente modificare ogni singola parentesi graffa o tag quindi, sebbene ciò aumenti il nostro “potere” di modifica, Firebug non sarà più in grado di riconoscere i nostri eventuali errori e quindi di correggerli.

Conclusioni

Come avrai dedotto leggendo questo articolo le potenzialità offerte da questo plugin sono veramente vaste.
Con tutta probabilità una volta installato non vi separerete più e lo terrete sempre a portata di mano ogni volta che vorrete studiare un layout, un codice Java Script o semplicemente per testare le vostre applicazioni Web.

Con ciò concludo il mio primo articolo su Blographik.it, e invito tutti i lettori a rilasciare nei commenti il loro parere sull’articolo, sulla sua utilità o per eventuali dubbi e chiarimenti.
Sono inoltre ben accette critiche costruttive a partire dalle quali possa migliorare la qualità dei miei articoli.

Un ringraziamento particolare a Mirko D’Isidoro che mi ha dato la possibilità di condividere questo argomento con voi.

Un saluto a tutti gli appassionati lettori di Blographik.it

Autore:  Attilio Fiumanò, studente di Ingegneria Informatica al Politecnico di Milano, appassionato di programmazione e sviluppo applicativi basati su C# e Java.
Ottime conoscenze di PHP, MySql, JavaScript oltre ai più tradizionali xHTML e CSS.

Saranno la nuova frontiera del web mobile?
Scopri in questo articolo cosa sono e come funzionano i mobtas.

E’ un argomento che non è stato mai trattato su Blographik, e grazie a Marco Ronchese, guest poster di questo blog, ora anch’io ho le idee un pò più chiare su questi nuovi servizi per il web mobile.

La nuova frontiera del web mobile

di Marco Ronchese

Cosa sono

Si chiamano mobtags sono l’evoluzione del tradizionale codice a barre e rappresentano la nuova frontiera del web mobile.

Al primo sguardo appaiono come dei curiosi “disegni”, monocromatici oppure di diversi colori, e possono essere “letti” ( o più precisamente “decodificati” ) dal vostro cellulare munito di fotocamera e un software apposito installato. Il contenuto di questi codici è vario: possiamo immettere del testo libero, un url, un biglietto da visita o altro ancora.

Ce ne sono di tantissimi tipi e ogni codice possiede il suo specifico lettore, tra i più diffusi vi è QR code ( Quick Response ) codice a barre bidimensionale, utilizzato inizialmente per la gestione del magazzino, e oggi uno dei più usati smartcode.

ShotCode ha avuto il suo discreto successo, utilizzato anche da Heineken e oggetto anche di un articolo su punto informatico in seguito alla commercializzazione di una linea di t-shirt con stampato il codice. Anche Microsoft ha fatto la sua entrata in questo mercato con HCCB ( o meglio conosciuto come Microsoft Tag ), codice ad alta capacità e dai colori vivaci.

Altri codici proprietari sono: BeeTag, EZcode, Aztec Code, ecc. Per maggiori informazioni vi rimando a wikipedia ( quella in lingua inglese e meglio documentata ) e ad un sito che tratta esclusivamente di quest’argomento: Codmmunity.com.

Contenuto

Come dicevo in precedenza, questi codici possono memorizzare svariati tipi di contenuto, starà poi al programma leggere il contenuto e svolgere l’azione più indicata.

Alcuni esempi possono essere:

• testo semplice: semplice testo, un qualsiasi messaggio
• url: un indirizzo web
• vcard/vcalendar: integrare un biglietto da visita
• smsto/mailto/tel: un link per l’invio di un sms/mail o per chiamare

Comodità

La comodità di quest’approccio è che l’utente, invece di dover digitare manualmente ( e se il dispositivo non è munito di tastiera qwerty è molto faticoso ) l’indirizzo della risorsa da lui cercata, basta una foto e un attesa di pochi secondi.

Si ottengono più vantaggi come ad esempio impossibilità di errore di digitazione e possibilità di inserire url ricchi di variabili senza doverci preoccupare.

Quindi ecco che possono nascere servizi rapidi ed intuitivi ( come ad esempio acquistare un biglietto aereo dal proprio cellulare ) che senza codici a barre non sarebbero possibili.

Generare i codici

Ma veniamo ora all’argomento che più interessa:

come si fa per collegare il nostro sito web mobile ( consiglio di dare una letta a questo articolo molto utile ) a uno di questi codici?

E’ molto semplice, dovete trovare un generatore di codici e inserire i vostro url.

Per una lista dei generatori e anche dei lettori vi rimando a: Codmmunity.com.
Il miglior generatore di codici QR ti trova tuttavia proprio su questo sito.

Il processo per la creazione dei codici è molto semplice e veloce.
Bisogna però stare bene attenti alle licenze dei generatori che spesso non permettono l’uso commerciale.

Inoltre è possibile utilizzare librerie per i diversi linguaggi di programmazione (come ad esempio zxing scritta in java) oppure, basta ricorrere al supremo google che con gcharts offre anche la generazione dei codici qr.

Conclusioni

L’uso dei codici bidimensionali in Italia è ancora limitato ( anche a causa delle tariffe piuttosto alte che esistevano fino a poco tempo fa ) ma in paesi esteri è molto diffuso, in primis in Giappone, dove il traffico generato da questi codici è pari all’80% di quello totale.

Questa tecnologia offre infinite possibilità, sta a noi ed alla nostra creatività sfruttarle.

Autore:  Marco Ronchese, giovane giovane studente e web designer/developer.

Ecco come pubblicizzare un progetto di qualità su blographik. La storia interessante di un CMS creato dallo sviluppatore Salvatore Vacante che ora è pronto per essere utilizzato.

Tempo fa, pubblicai una mia idea offrendo la possibilità tutt’ora valida (ma a pagamento ) di ottenere una recensione su questo blog, per coloro che creavano applicazioni per il web come cms, tools on line, prodotti o servizi utili a blogger, web designer, sviluppatori etc..

Poche persone hanno colto quest’ occasione (dal 2009 tutte le recensioni di questo tipo che saranno pubblicate su blographik, rivolte ad aziende saranno a pagamento), ma c’è stato chi invece chia ha saputo sfruttare questa mia idea.

Ecco quindi la recensione di MyFrame, dalle stesse parole dell’autore di questo CMS made in Italy.

Se utilizzerai questo software, o vuoi maggiori informazioni, sei libero di commentare l’articolo, Salvatore sarà felice di rispondere a tutti .

MyFrame: un nuovo CMS tutto italiano

di Salvatore Vacante

Ho conosciuto Blographik grazie alla sua iniziativa nel dare uno spazio ai nuovi progetti e commentando un articolo ho avuto modo di far presente il mio CMS, ricevendo una forte disponibilità.

Il progetto si chiama MyFrame frutto della mia esperienza si pone come obiettivo quello di rendere il più semplice possibile la creazione e la gestione di qualsiasi sito web.

Penso che possedere una base standard per affrontare nuovi progetti sia molto importante, molte porzioni di codice sono state usate nei mie progetti personali, infatti nel tempo ho espanso sempre di più il codice al fine di creare una base standard per me stesso, ma vista l’utilità che ne ho ricavato ho deciso di condividere questo mio lavoro con tutti.

Attualmente sto affrontando lo sviluppo da solo, e per quanto riguarda i test mi affido ad amici di questo settore, ma come vedrete più avanti è molto semplice espanderlo, intanto ringrazio Blographik.it dello spazio offerto.

Che cos’è e come funziona MyFrame

MyFrame nato come framework di lavoro, adesso è in grado di gestire anche i contenuti, i plugins, file css e javascript.

Le sue caratteristiche principali sono:

Gestione per tipi di contenuto, consiste nel creare tipologie di contenuto con template definiti, quindi i contenuti all’interno saranno visualizzati a seconda dei template definiti che sono due, un template per gli elementi in lista e quello per un elemento singolo, i template sono puro codice html che viene abbinato a del tag code che spiegheremo più avanti, inoltre abbiamo la possibilità di caricare plugins, files css e javascript in modo selettivo per il nostro tipo di contenuto.

Un tipo di contenuto può essere “Blog” che permette agli utenti autorizzati di postare articoli.

I tipi di contenuto

Gestione file css e javascript, il cms si preoccupa di comprimere i files css e javascript e segnalare l’errore nel caso in cui i files non vengano trovati.

Errore css

Gli errori javascript

Gestione dei plugins, i plugin per essere letti da MyFrame devono essere posizionati in questo modo ./plugins/nomeplugin/nomeplugin.php, il file nomeplugin.php può contenere del semplice testo, del codice php o del codice html.

Qualsiasi utente può cimentarsi nello sviluppo del proprio plugin.

I plugins di default (dichiarati dentro il file config.inc.php) vengono caricati in automatico, se un tipo di contenuto o una pagina richiama un plugin esso viene caricato insieme a quelli di default.

L’output di un plugin viene richiamato in qualsiasi parte della pagina attraverso un tag code di questo tipo {nomeplugin}.

Il pugin Carrello

Il tag code

Come abbiamo visto prima per i plugin MyFrame riconosce in automatico il tag code e lo sostituisce con i dati ad esso associati (plugin, testo e altro).
La funzionalità più curiosa è che MyFrame durante la creazione del form per l’inserimento di un contenuto, legge le occorrenze trovate ad esempio {Come ti chiami ?}, e genera per essa un campo di testo il quale prenderà il valore inserito dell’utente e lo conserverà sul database. Questo valore verrà riutilizzato nella visualizzazione del contenuto.

Il campo autogenerato da tag code

Ci sono altre funzionalità, da scoprire.

Ecco il link per una dimostrazione di MyFrame..

Ti ricordiamo inoltre che MyFrame è sotto licenza GNU/GPL, fa uso della libreria jquery, jqueryui e altri plugins javascript, i crediti vengono citati nei sorgenti degli stessi.

Per aiutare lo sviluppo puoi, effettuare dei test, consigliare, criticare, sviluppare plugins, sviluppare il core, creare un template oppure donare denaro attraverso paypal.

Visita il progetto MyFrame su sourceforge.net.

Cosa ne pensi di questo CMS?

Uso WordPress quotidianamente per tenere aggiornati i miei blog tecnici e personali.
Non ho installato WP sul mio spazio web, ma utilizzo i blog via web, nella configurazione classica di questa piattaforma di blog.
Mi sembrava corretto e interessante importare i feed del mio blog tecnico, dentro al mio sito personale, perchè anche questa è un’attività che un potenziale cliente e/o datore di lavoro dovrebbe considerare tra gli skills utili per una risorsa di alto livello.

A parte questa considerazione, molto personale, vorrei mostrarvi la mia soluzione per importare i feed di WP e risolvere un bug riconosciuto ma ancora non risolto alla radice.

Importare i feed su WordPress

di Alessandro D’agnano

Per l’importazione, abbiamo bisogno di un semplice script che va a leggere la url dei feed, fa il parsing dell’alberatura XML dei post, e ci restituisce i contenuti corrispondenti.

Grazie ad Asp “stampo” i contenuti dei feed e il markup Xhtml (che avevo pensato in versione statica della pagina) per poi dargli la presentazione voluta tramite Css.
Quindi il risultato non sarà un semplice porting di dati, ma grazie ai Css, i post saranno perfettamente integrati nel mio design, come se fossero presi da un Cms che gestisce il sito.

Innanzi tutto pensiamo al markup.

In situazione statica io voglio visualizzare solo alcuni contenuti del feed e non tutti (ricordo che il feed genera per ogni post diversi contenuti, a noi la scelta di “stampare” quello che vogliamo).

In particolare mi serve:

• Titolo del post (con relativo link al post originale su WP);
• Testo del post;
• Data del post;

In termini Xhtml avrò:

<div class="postBlog">
<h6>Data post</h6>
<h3><a href="Link post" title="Leggi: Titolo post
- Autore: Alessandro D'agnano">Titolo post</a></h3>
<p>Contenuto post</p>
</div>

Questo DIV sarà ripetuto per ogni post.

Posso impostare dal mio script quanti post devono apparire durante l’importazione (nel mio caso 3).

Volendo anche da WP si può impostare il numero di “record” che vengono inviati al feed.
Quindi in pratica devo popolare con i contenuti dei feed importati questi tag Xhtml.

Con Asp però oltre che a prelevare i contenuti del feed, creo, come stringhe, anche il markup.

Ecco il codice che importa e “cicla” sul feed:

'Utilizzo oggetto DOM per caricare il file xml (feed rss)
Set objXML = Server.CreateObject("msxml2.DOMDocument.3.0")
objXML.async = false
objXML.setProperty "ServerHTTPRequest", True
objXML.validateOnParse =false
objXML.preserveWhiteSpace = false
' Carico news di WebMasterPoint.org
caricoFile = objXML.Load
("http://freedance.wordpress.com/feed")

' Controllo se e' stato caricato il file
If Not caricoFile Then
' In caso di errore avviso quale errore si e' verificato
Response.write "<p><strong>Errore</strong><br>:
" & objXML.parseError.errorCode & "<br>"
Response.Write "Linea: " & objXML.parseError.line & "/"
Response.Write "Colonna:
" & objXML.parseError.linepos & "</p>"
Else
' In caso non vi sia nessun errore,
proseguo e carico le info del file xml (feed rss)
Set Nodo = objXML.getElementsByTagName("item")

dim cont
cont = 1
For Each objNodi In Nodo
' Sfoglio i nodi
For Each objNodo In objNodi.childNodes
Select Case objNodo.nodeName
Case "title"
titolo = objNodo.firstChild.nodevalue
Case "link"
link = objNodo.firstChild.nodevalue
Case "description"
descrizione = objNodo.firstChild.nodevalue
Case "pubDate"
data = objNodo.firstChild.nodevalue
dataIt=mid(data,6,11)
End Select
Next

In queste righe c’è da evidenziare il link alla url che genera i feed.
Poi “item” che sarebbe ogni post del feed. Di seguito vado ad assegnare delle variabili associandole ai tag Xml generiche per ogni post.

Quindi alla variabile “descrizione” associo il tag “desctiption“.

Per la data faccio un doppio passaggio.
Associo alla variabile “data” il tag “pubDate“.
Siccome vi viene restituito un formato che non mi piace, creo la variabile “dataIt” a cui applico un “mid” per estrarre una porzione di stringa.
Quindi ora la variabile da utilizzare durante la “stampa” del post sarà “dataIt” e non più “data”.

Ora ho tutti i contenuti che mi interessano disponibili.

Ecco il codice che stampa contenuti e markup.

Il tutto fatto per 3 volte, ossia il numero di post che voglio far vedere nel mio sito.

response.Write("<div class=""postBlog"">")
response.Write("<h6>"& dataIt &"</h6>")
Response.write
("<h3><a href="""& link & """
title=""Leggi: " & titolo & "
- Autore: Alessandro D'agnano"">"&titolo&"</a></h3>")
Response.Write ("<p>" & descrizione & "</p>")
response.Write("</div>")
if cont = 3 then exit for
cont = cont + 1
Next
set Nodo = Nothing
End if

Come potete notare, stampo tramite Asp sia il markup che ricrea quello statico mostrato prima, che i contenuti del post associate alle variabili (si vedono evidenziate in grassetto).

L’istruzione condizionale if, cicla per 3 volte.
Arrivata la variabile “cont” a 3 si esce dal for iniziale (primo pezzo di codice).

Ora se testate la pagina nel browser (ricordate che la pagina deve apere estensione Asp e vi serve IIS per testarlo, oppure caricate la pagina sul vostro hosting remoto), vedrete i 3 post perfettamente importati nel vostro sito o pagina personale.

Noterete che nel markup il post è racchiuso da un div con classe “postBlog“.
La classe mi serve come aggancio per i Css e per formattare i miei post a piacimento, integrandoli con la grafica del sito.

Potete vedere il risultato finale nella spalla destra del mio sito www.alessandrodagnano.com

C’è però un problema che ho facilmente risolto grazie all’aiuto e al suggerimento di un mio amico/collega pogrammatore, ossia Raffaele Fazio.

In pratica WordPress, esporta i feed inserendo dentro il tag “description” quindi dentro il contenuto del nostro post, un tag <img>.

Questo tag ha come sorgente dell’immagine un link riferito al sistema di statistiche di WP.

Dal pannello di controllo di WP non sono riuscito a eliminare questa impostazione, ma sono certo che non si possa fare.

Questo tag <img> ha come codice esattamente questo:
<img alt=”" border=”0″ src=”http://stats.wordpress.com/b.gif?host=freedance.wordpress.com&blog=2607179&post=119&subd=freedance&ref=&feed=1” />

Il mio sito è stato pensato per essere validato Xhtml Strict, ma a causa di questo tag mi venivano segnalati diversi errori, con il risultato di invalidare il codice e rendere vano tutto il mio lavoro.

Ho cercato sui forum italiani e inglesi di WP, ho chiesto al supporto, ma nessuna soluzione.

Ingenuamente tramite Jquery pensavo di risolvere la cosa, ma javascript funziona lato client, quindi la rimozione era solo apparente.

Il markup presentava cmq questo tag, e il validatore W3C mi dava un bel “cartellino rosso”.

Unica soluzione possibile era tramite codice server side.

Siccome lo stript è in Asp, bisogna intervenire in questa direzione sulla variabile “descrizione”.
Ho chiesto aiuto e consulenza a Raffaele.

Un programmatore esperto ha la soluzione pronta in 2 minuti.

Sostituiendo:

Response.Write ("<p>" & descrizione & "</p>")

con

Response.Write
 ("<p>" & left
(descrizione, instr(descrizione,"
< img alt="""" border=""0"" src=")-1) & "</p>")

si va ad intercettare nel contenuto “descrizione” (che ricordo a tutti che Asp in questo caso vede come stringa), il testo “<img alt=”"”" border=”"0″” src=” ignettato da WP.

Con le funzioni stringa “left” e “instr“, Raffaele pulisce la stringa generata dentro “descrizione” dandomi cosi solo il contenuto del post.
La pagina, potete testarla, è finalmente tornata ad essere XHTML Strict VALID !
EVVIVA !!!

Possibili implementazioni

Ho già utilizzato gli Rss per tenere aggiornati diversi siti contemporaneamente.
Un sistema come quello descritto, può permettere a chi non mastica molta programmazione di struttare WP come Cms per aggiornare le proprie pagine personali.
Immaginate di dover gestire un portfolio lavori.

Possiamo utilizzare i feed per mostrare i nostri lavori sulla pagina personale.

Voi che ne pensate?

Ajax è una tecnica di programmazione che consente lo sviluppo di RIA (Rich Internet Application).
Le RIA sono applicazioni web caratterizzate da grande interattività e velocità di esecuzione.
L’elaborazione dei dati avviene a livello client (browser) e le chiamate al server avvengono in “background” in modo asincrono (Ajax sta per Asynchronous JavaScript and XML).

Cosa significa in parole povere che lo scambio dati tra client e server avviene in background?

Vuol dire che lo scambio dati tra client e server permette l’aggiornamento dinamico della pagina web senza che quest’ultima venga ricaricata e senza dover richiamare una nuova pagina ma, soprattutto, è da sottolineare che non bisogna attendere che sia stata ultimata la richiesta per poterne effettuare altre.

Ajax non è un linguaggio di programmazione ma un insieme di tecnologie, vediamo quali sono:

Creare delle applicazioni interattive con Ajax

di Emanuele Calì

Tornando a parlare delle varie tecnologie di cui Ajax è composto ecco quali sono:

1. HTML/XHTML/CSS per il markup;
2. DOM (Document Object Model) manipolato attraverso un linguaggio ECMAScript come JavaScript;
3. XMLHttpRequest per lo scambio asincrono dei dati tra client e server;
4. XML come formato per lo scambio dati. Non è obbligatorio e al suo posto si può scegliere un altro formato come JSON o anche semplice testo.

Le applicazioni web che fanno uso di Ajax necessitano di browser di ultima generazione che supportino tale tecnologia.

Tutti i principali browser come FireFox, Internet Explorer, Google Chrome, Opera e Safari supportano Ajax ma è buona norma testare i propri applicativi per verificare la compatibilità.

Abbiamo detto che le chiamate Ajax avvengono in background e, ottenuta la risposta, viene modificata solo una porzione della pagina (di solito un elemento HTML come il DIV).
Questo potrebbe anche rappresentare un problema per l’utente che, una volta effettuata la chiamata, vede la pagina web “immobile” ignaro che la richiesta di informazioni è comunque stata inviata al server.

Per ovviare a questo problema è opportuno dedicare un elemento della pagina (un div è sicuramente indicato) alla descrizione dell’interazione. Questo si può realizzare con un semplice testo o con un loader (magari una GIF come quelle scaricabili da ajaxload.info) che “visivamente” mostra all’utente che è in corso uno scambio dati.

Vediamo tecnicamente come possiamo modificare dinamicamente il contenuto di una pagina web tramite il metodo innerHTML del DOM.

Supponiamo che nella nostra pagina web ci sia un div con ID univoco “content”:

<div id=”content”>
Mio div
</div>

Possiamo modificare il contenuto del div utilizzando la seguente funzione:

function modifica() {
document.getElementById(“content”).innerHTML =
“Contenuto del div modificato”;
}

Richiamiamo la funzione tramite un button:

<input type=”button”
value=”Modifica” onclick=”javascript:modifica()” />

Modificando dinamicamente lo stile del div possiamo inventarci una funzione che mostri o nasconda il suo contenuto:

function hideshow() { 

var element = document.getElementById("content");

if (element.style.visibility == 'hidden') {

element.style.visibility = 'visible';

element.style.display = 'block';

} else {

element.style.visibility = 'hidden';

element.style.display = 'none';

}

}

Richiamiamo la funzione con un altro button:

<input type="button" value="Hide/Show"
onclick="javascript:hideshow()" />

Adesso vediamo come realizzare una interazione “avanzata” inviando una richiesta ad una pagina server-side (nel nostro esempio scritta in PHP) ed ottenendo una risposta in formato testo.

Vediamo prima la pagina PHP (file.php):

<?php

$utente = $_GET['utente'];

if ($utente=="rossi") echo "Salve sig. Rossi";

else echo "Non ti conosco";

?>

La pagina riceve una variabile “utente” in modalità GET e controlla che il suo contenuto sia “rossi”. In caso affermativo stampa la frase “Salve sig. Rossi” altrimenti la frase “Non ti conosco”. La risposta verrà inserita nel div con ID univoco “content” tramite Ajax:

var ajax = initAjax();

if (ajax) {

ajax.open("get", "file.php?utente=" + utente, true);

ajax.setRequestHeader("connection", "close");

ajax.onreadystatechange = function() {

var response="";

if (ajax.readyState == 0) response =
"Inizializzazione in corso..."; 

if (ajax.readyState == 1) response =
"content","Connessione avviata...";

if (ajax.readyState == 2) response =
"content","Invio dati in corso..."; 

if (ajax.readyState == 3) response =
"content","Ricezione dati in corso..."; 

if (ajax.readyState == 4 && ajax.status==200) {

response = ajax.responseText;

} 

else response =
"Operazione fallita! Errore numero " + ajax.status;

document.getElementById("content").innerHTML = response;

} 

ajax.send(null);

} 

else alert('Ajax non supportato!');

Dopo aver inizializzato l’oggetto Ajax (potete visionare il codice completo nei files a corredo dell’articolo) che, tra l’altro, ci permette di verificare che Ajax sia supportato dal browser, abbiamo effettuato la chiamata asincrona inviando il contenuto della variabile utente e ricevendo una risposta che abbiamo scelto di memorizzare nella variabile response.

Tutto questo servendoci del metodo Open (il cui terzo parametro impostato su true specifica che la chiamata è asincrona) e successivamente del metodo Send.

Niente di troppo complicato ma soffermiamoci un attimo sulla funzione onreadystatechange.

Questa funzione si preoccupa di controllare lo stato dell’interazione restituendo un numero intero (readyState) che identifica in ogni istante lo stato della richiesta.

Nel caso avessimo voluto effettuare la richiesta in POST avremmo dovuto modificare lo script nei metodi Open e Send e specificare tramite headers i valori da inviare.

ajax.open
("post", "file2.php", true);

ajax.setRequestHeader
("content-type", "application/x-www-form-urlencoded");

ajax.send
("utente=" + utente);

Richiamando il file PHP file2.php:

<?php

$utente = $_POST['utente'];

if ($utente=="rossi") echo "Salve sig. Rossi";

else echo "Non ti conosco";

?>

Se hai delle domande o curiosità lascia pure un commento

Scarica i files dell’articolo

Articolo pubblicato per blographik da Emanuele Calì di EmaWebDesign.com.

Scopri quali sono i migliori tutorial dell’anno appena trascorso, consigliati dai fedeli lettori di questo blog.

L’iniziativa è tutt’ora in pieno svolgimento, se vuoi partecipare leggi l’articolo per suggerire quali secondo te, sono stati i migliori tutorial del 2008.

Ecco la prima parte della lista che verrà aggiornata ogni volta che riceverò nuovo materiale che sarà filtrato e valutato da me.
Nelle prossime settimane offrirò agli abbonati delle newsletter di Blographik, un eBook con tutti i link divisi per categorie .

In quest’elenco la cui pubblicazione è divisa in più parti, sono presenti anche articoli autocitati dallo stesso blogger che li ha pubblicati.

Ho deciso di pubblicarli ugualmente anche se reputo che sia meglio non autocitarsi, se il tutorial è valido, altri lo segnaleranno per te, infatti così è stato per le seguenti risorse da aggiungere ai propri preferiti .

Programmazione e Blog

01. WordPress 2.7 e commenti nidificati, quello che c’è da sapere

Autore: Francesco Gavello

Descrizione e motivazione della scelta di questo tutorial:

Un tutorial che spiega come adattare il proprio tema per poter usufruire dei commenti nidificati, la nuova opzione introdotta con la versione 2.7 di WordPress.

Questo tutorial mi ha subito colpito perché ho pensato “questa è davvero una cosa che devo provare, non appena passerò a WP 2.7.”.

Credo, come afferma anche Francesco, autore dell’articolo, che i commenti nidificati rendano molto più facile ed intuitivo partecipare alle discussioni e seguire gli interventi.

Il tutorial mi è sembrato chiaro e anche semplice da mettere in atto: spiega come adattare il proprio tema per poter usufruire dei commenti nidificati.
Secondo me il tutorial di Francesco dovrebbe essere presente nella lista dei migliori tutorial del 2008 anche per la sua attualità e modernità:  si riferisce ad una caratteristica della versione 2.7 di WordPress, versione, come sappiamo, molto attesa e molto ricca di novità.
Questa dei commenti nidificati è appunto una di quelle novità, forse la più interessante di tutte, e forse destinata a diventare molto popolare.
Tra poco si vedrà!

Tutorial suggerito da:
Elisa di Nosatispassion.altervista.org

Grafica Vettoriale

02. Come creare un’ arancia in vettoriale

Autore: Alejandro Zuñiga

L’uso del vettoriale è il segreto per un’ottima qualità e per un forte impatto visivo dato dall’effetto di un disegno di buona fattura.

In questo tutorial si approccia l’uso del vettoriale per copiare il reale, in questo caso una mezza arancia.
Passo per passo si spiega la scelta del colore con i valori numerici da impostare sulla paletta RGB.

Si passa poi alla definizione di forme e trame con relative trasparenze e sfocature.
La spiegazione su come impostare le sfumature create appositamente con i relativi cursori termina la spiegazione per arrivare a creare un oggetto simile alla realtà.

Naturalmente solo solo i primi passi per prendere confidenza con un mezzo così potente senza spaventarsi eccessivamente.
Una costante applicazione di tali tecniche porta naturalmente ad ambire di ricreare oggetti in maniera assolutamente realistica come ho dimostrato in un mio post sul fotorealismo in vettoriale.

Tutorial suggerito da:
Serena Chiatante di Photoxgraph.blogspot.com

Questa serie dei migliori tutorial selezionati dai lettori di blographik, continuerà nei prossimi giorni.
Se non vuoi perdertela, iscriviti al feed rss di Blographik.

Il quinto ed ultimo articolo della mini serie di 6 post dedicati ad ASP.
E’ stata realizzata la guida con questo linguaggio che seppur obsoleto, è comunque utile per chiunque voglia iniziare ad affrontare un percorso di programmazione.

In quest’ultima puntata vedremo come interagire, grazie ad ADO, con un database Access.

Al termine del post, potrai scaricare in formato zip tutti i file originali, per testare e studiarti al meglio questo tutorial.

Come interagire con un database Access

di Emanuele Calì

Per prima cosa realizzeremo lo script di connessione al database:

<%

var connessione = “driver={Microsoft Access Driver (*.mdb)};”;

connessione += “dbq=” + Server.MapPath(“utenti.mdb”);

%>

A questo punto possiamo interrogare il database per ottenere gli username degli utenti:

<%
var sql = “SELECT username FROM utenti ORDER BY username”;

var ADOCon = new ActiveXObject(“ADODB.Connection”);

ADOCon.Open(connessione);

var rec = ADOCon.Execute(sql);
while (!rec.EOF) {
var username = String(rec(“username”));

Response.Write(username + “<br>”);

rec.MoveNext();
}
rec.Close();

ADOCon.Close();
%>

Vediamo ora come inserire un nuovo record:

<%

var connessione = “driver={Microsoft Access Driver (*.mdb)};”;

connessione += “dbq=” + Server.MapPath(“utenti.mdb”);
var ADOCon = new ActiveXObject(“ADODB.Connection”);

ADOCon.Open(connessione);
ADORec = new ActiveXObject(“ADODB.Recordset”);

ADORec.Open(“utenti”,ADOCon,0,3);
ADORec.AddNew();

ADORec(“username”) = “nuovo username”;
ADORec.Update();

ADORec.Close();

ADOCon.Close();
%>

Per modificare il record utilizzeremo le stesse istruzioni appena viste, ovviamente richiamando la query opportuna:

var query = "SELECT username FROM utenti WHERE
username='nuovo username' ";
ADORec.Open(query,ADOCon,0,3);

ADORec(“username”) = “modifica username”;

ADORec.Update();

ADORec.Close();

Come anticipato all’inizio dell’articolo, puoi scaricarti gratuitamente un file zippato con tutti i file per utilizzare questo tutorial.

Articolo pubblicato per blographik da Emanuele Calì di EmaWebDesign.com

Articoli pubblicati su blographik dallo stesso autore:

• Ecco come progettare e realizzare un carrello virtuale per un e-shop in PHP (parte 1);
• Realizza un carrello virtuale per un e-shop in PHP e scarica i file originali (parte 2);
• Come realizzare pagine in ASP (parte 1);
• Guida ASP: Come scrivere la tua prima pagina (parte 2);
• Guida ASP: Come funzionano i metodi dell’oggetto Request (parte 3);
• Guida ASP: Come utilizzare l’oggetto Server per interagire con il web server (parte 4);
• Guida ASP: Come leggere e scrivere un file di testo (parte 5).

Sei uno sviluppatore, un grafico, un web designer, un esperto SEO o un blogger?
Vuoi partecipare anche tu come guest poster su blographik per accrescere la tua visibilità in rete?

Scrivimi dal modulo contatti per ricevere tutte le informazioni al riguardo.

Il quinto articolo della mini serie di 6 post dedicati ad ASP.
E’ stata realizzata la guida con questo linguaggio che seppur obsoleto, è comunque utile per chiunque voglia iniziare ad affrontare un percorso di programmazione.

In questa puntata scoprirai come interagire come leggere e scrivere un file di testo.

Al termine del post, potrai scaricare in formato zip tutti i file originali, per testare e studiarti al meglio questo tutorial.

Come leggere e scrivere file di testo

di Emanuele Calì

Per leggere un file di testo apriremo uno stream attraverso l’oggetto FileSystemObject e utilizzeremo il metodo OpenTextFile():

<%
var file_da_leggere = Server.MapPath(“file.txt”);
var oggetto = new ActiveXObject(“Scripting.FileSystemObject”);
var stream = oggetto.OpenTextFile(file_da_leggere);
Response.Write(stream.ReadAll());
stream.Close();
%>

Per scrivere un file di testo possiamo utilizzare i metodi Write() e WriteLine().
Si intuisce che il secondo metodo introduce un carattere di nuova riga dopo il testo.
Ecco un esempio:

<%
var file_da_scrivere = Server.MapPath(“file.txt”);
var oggetto = new ActiveXObject(“Scripting.FileSystemObject”);
var stream = oggetto.CreateTextFile(file_da_scrivere);
stream.WriteLine(“Contenuto del file di testo”);
stream.Close();
%>

Per aggiungere testo in coda al contenuto esistente nel file, utilizziamo il parametro ForAppending contrassegnato dal valore 8.
Modifichiamo quindi, la terza riga dello script in questo modo:

var stream = oggetto.OpenTextFile(file_da_scrivere,8);

Come anticipato all’inizio dell’articolo, puoi scaricarti gratuitamente un file zippato con tutti i file per utilizzare questo tutorial.

Al prossimo ed ultimo articolo su questa mini rubrica dedicata ad ASP.

Se non vuoi perderti la mini serie di articoli dedicati a questo linguaggio di programmazione, ti consiglio di abbonarti alla newsletter gratuita di questo blog (avrai anche un corposo omaggio come benvenuto ) oppure puoi iscriverti al feed rss di blographik .

Articolo pubblicato per blographik da Emanuele Calì di EmaWebDesign.com

Articoli pubblicati su blographik dallo stesso autore:

• Ecco come progettare e realizzare un carrello virtuale per un e-shop in PHP (parte 1);
• Realizza un carrello virtuale per un e-shop in PHP e scarica i file originali (parte 2);
• Come realizzare pagine in ASP (parte 1);
• Guida ASP: Come scrivere la tua prima pagina (parte 2);
• Guida ASP: Come funzionano i metodi dell’oggetto Request (parte 3);
• Guida ASP: Come utilizzare l’oggetto Server per interagire con il web server (parte 4).

Sei uno sviluppatore, un grafico, un web designer, un esperto SEO o un blogger?
Vuoi partecipare anche tu come guest poster su blographik per accrescere la tua visibilità in rete?

Scrivimi dal modulo contatti per ricevere tutte le informazioni al riguardo.

Il quarto articolo della mini serie di 6 post dedicati ad ASP.
Nella prima parte di questa guida su ASP, è stato ha introdotto il linguaggio che seppur obsoleto, è comunque utile per chiunque voglia iniziare ad affrontare un percorso di programmazione.
In questa puntata scoprirai come interagire con il web server tramite l’oggetto Server.

Al termine del post, potrai scaricare in formato zip tutti i file originali, per testare e studiarti al meglio questo tutorial.

Come utilizzare l’oggetto Server

di Emanuele Calì

Vediamo in questa parte della mini guida su ASP come utilizzare l’oggetto Server per interagire col web server.
Utilizzeremo, negli esempi che seguiranno, FileSystemObject per interagire col file system ed effettuare operazioni con le cartelle.

Per creare una cartella utilizzeremo il metodo CreateFolder():

var new_folder = Server.MapPath(“nome_della_cartella”);
var oggetto = new ActiveXObject(“Scripting.FileSystemObject”);
oggetto.CreateFolder(new_folder);

Con DeleteFolder() possiamo invece eliminare la cartella. Vediamo, inoltre, come controllare se la cartella esiste:

var folder = Server.MapPath(“nome_della_cartella”);

var oggetto = new ActiveXObject(“Scripting.FileSystemObject”);

if (oggetto.FolderExists(folder)) Response.Write
(“La cartella esiste”);

else Response.Write(“La cartella non esiste!”);

Vediamo ora come copiare un file da una cartella ad un’altra:

var file_da_copiare = Server.MapPath(“file.txt”);

var new_file = Server.MapPath(“subfolder/file.txt”);

var oggetto = new ActiveXObject(“Scripting.FileSystemObject”);

oggetto.CopyFile(file_da_copiare,new_file);

Come anticipato all’inizio dell’articolo, puoi scaricarti un file zippato con tutti i file per utilizzare questo oggetto,  i file saranno:

• create_folder.asp;
• copyfile.asp;
• delete_folder.asp;
• exist_folder.asp.

Al prossimo post di questa mini rubrica dedicata ad ASP.

Se non vuoi perderti la mini serie di articoli dedicati a questo linguaggio di programmazione, ti consiglio di abbonarti alla newsletter gratuita di questo blog (avrai anche un corposo omaggio come benvenuto ) oppure puoi iscriverti al feed rss di blographik .

Articolo pubblicato per blographik da Emanuele Calì di EmaWebDesign.com

Articoli pubblicati su blographik dallo stesso autore:

• Ecco come progettare e realizzare un carrello virtuale per un e-shop in PHP (parte 1);
• Realizza un carrello virtuale per un e-shop in PHP e scarica i file originali (parte 2);
• Come realizzare pagine in ASP (parte 1);
• Guida ASP: Come scrivere la tua prima pagina (parte 2);
• Guida ASP: Come funzionano i metodi dell’oggetto Request (parte 3).

Sei uno sviluppatore, un grafico, un web designer, un esperto SEO o un blogger?
Vuoi partecipare anche tu come guest poster su blographik per accrescere la tua visibilità in rete?

Scrivimi dal modulo contatti per ricevere tutte le informazioni al riguardo.

Il terzo articolo della mini serie di 6 post dedicati ad ASP.
Nella prima parte di questa guida su ASP, è stato ha introdotto il linguaggio che seppur obsoleto, è comunque utile per chiunque voglia iniziare ad affrontare un percorso di programmazione.

In dettaglio, nella prima puntata è stato descritto come comunicare all’interprete il linguaggio di scripting, nell’articolo successivo è stato introdotto come creare la tua prima pagina in ASP, mentre in questo appuntamento potrai consultare, con file scaricabili a fine pagina, come scrivere il codice della tua prima pagina ASP.

Come funzionano i metodi dell’oggetto Request in ASP

di Emanuele Calì

Dopo aver visto all’opera i metodi dell’oggetto Response, vediamo quelli dell’oggetto Request:

• Form;
• QueryString;
• ServerVariables.

Con i metodi Form e QueryString possiamo recuperare i dati inviati da un form in modalità post o da querystring. Per recuperare dati da un form in modalità post:

 <%

var miaVar = new String(Request.Form("username"));

if (miaVar!="" && miaVar!="undefined") {

%>

Ecco il tuo username:

<% Response.Write(miaVar); %>

<%

}

%>

In modalità querystring avremmo recuperato il contenuto della variabile in questo modo:

<% var miaVar = Request.QueryString("username"); %>

Con il metodo ServerVariables possiamo recuperare informazioni sul server e sullo script o anche sul client, ecco degli esempi:

IP del server

<% var ip = Request.ServerVariables("LOCAL_ADDR"); %>

Nome dello script

<% var script = Request.ServerVariables("SCRIPT_NAME"); %>

IP del client

<% var ip_client = Request.ServerVariables("REMOTE_ADDR"); %>

Nome del client

<% var name_client = Request.ServerVariables("REMOTE_HOST"); %>

L’oggetto Session consente la gestione delle sessioni utente.
Ecco un esempio di variabile di sessione:

Session("mia_sessione") = "utente";

E’ possibile impostare il ciclo di vita di una sessione nel seguente modo:

Session.Timeout = 10;  // 10 minuti

Per eliminare le variabili e liberare le risorse utilizzeremo il metodo Abandon:

Session.Abandon();

Al prossimo post di questa mini rubrica dedicata ad ASP.

Se non vuoi perderti la mini serie di articoli dedicati a questo linguaggio di programmazione, ti consiglio di abbonarti alla newsletter gratuita di questo blog (avrai anche un corposo omaggio come benvenuto ) oppure puoi iscriverti al feed rss di blographik .

Articolo pubblicato per blographik da Emanuele Calì di EmaWebDesign.com

Articoli pubblicati su blographik dallo stesso autore:

• Ecco come progettare e realizzare un carrello virtuale per un e-shop in PHP (parte 1);
• Realizza un carrello virtuale per un e-shop in PHP e scarica i file originali (parte 2);
• Come realizzare pagine in ASP (parte 1);
• Guida ASP: Come scrivere la tua prima pagina (parte 2).

Sei uno sviluppatore, un grafico, un web designer, un esperto SEO o un blogger?
Vuoi partecipare anche tu come guest poster su blographik per accrescere la tua visibilità in rete?

Scrivimi dal modulo contatti per ricevere tutte le informazioni al riguardo.

Il secondo articolo della mini serie di 6 post dedicati ad ASP.
Nella prima parte di questa guida su ASP, è stato ha introdotto il linguaggio che seppur obsoleto, è comunque utile per chiunque voglia iniziare ad affrontare un percorso di programmazione.

In dettaglio, nella prima puntata è stato descritto come comunicare all’interprete il linguaggio di scripting, in questo articolo potrai consultare, con file scaricabili a fine pagina, come scrivere il codice della tua prima pagina ASP.

Come scrivere la tua prima pagina in ASP

di Emanuele Calì

Vediamo adesso il codice della nostra prima pagina ASP dove includeremo un semplice messaggio testuale:

<%@ LANGUAGE = JScript %>
<html>
<head>
<title>ASP Page</title>
</head>
<body>
<% Response.Write(“<h1>Questa è la mia prima pagina ASP</h1>”)
; %>
</body>
</html>

Adesso vediamo come stampare il messaggio 5 volte avvalendoci di un ciclo FOR:

<%@ LANGUAGE = JScript %>
<html>
<head>
<title>ASP Page</title>
</head>
<body>
<%
for (i=0;i<5;i++) {
Response.Write(“<h1>Questa è la mia prima pagina ASP</h1>”);
}
%>
</body>
</html>

Per stampare il messaggio a video abbiamo utilizzato il metodo “Write” dell’oggetto Response.
Per effettuare un redirect, invece, possiamo utilizzare il metodo “Redirect”:

<% Response.Redirect(“altra_pagina.asp”); %>

Vediamo quali sono, oltre a Response, gli altri oggetti che il server mette a disposizione:

• Application, per la gestione delle variabili di applicazione;
• Request, permette agli script di ricevere un input dall’esterno;
• Response, permette agli script di stampare output;
• Server, permette l’interazione col web server;
• Session, permette la creazione e gestione di variabili di sessione.

Non perdere la prossima puntata in cui scoprirai come utilizzare l’oggetto Request in ASP.

Puoi scaricarti gratuitamente tutti i file funzionanti, riguardanti questa parte della guida.

Se non vuoi perderti la mini serie di articoli dedicati a questo linguaggio di programmazione, ti consiglio di abbonarti alla newsletter gratuita di questo blog (avrai anche un corposo omaggio come benvenuto ) oppure puoi iscriverti al feed rss di blographik .

Articolo pubblicato per blographik da Emanuele Calì di EmaWebDesign.com

Articoli pubblicati su blographik dallo stesso autore:

• Ecco come progettare e realizzare un carrello virtuale per un e-shop in PHP (parte 1);
• Realizza un carrello virtuale per un e-shop in PHP e scarica i file originali (parte 2);
• Come realizzare pagine in ASP (parte 1).

Sei uno sviluppatore, un grafico, un web designer, un esperto SEO o un blogger?
Vuoi partecipare anche tu come guest poster su blographik per accrescere la tua visibilità in rete?

Scrivimi dal modulo contatti per ricevere tutte le informazioni al riguardo.

Una nuova mini serie di 6 articoli dedicati ad ASP, scritta come guest poster da Emanuele Cali di EmawebDesign.com.

Oggi possiamo dire che il linguaggio PHP è il preferito dagli sviluppatori, basti pensare che le principali piattaforme (vedi WordPress) sono scritte in questo linguaggio.

Imparare a programmare sappiamo bene che non significa diventare padroni di un linguaggio di programmazione, quindi, un bravo “developer” deve sapersi muovere in qualsiasi ambito, scegliendo gli strumenti più opportuni per il lavoro che deve svolgere.

Come comunicare all’interprete il linguaggio di scripting

di Emanuele Calì

Lasciamo da parte la nostra amata piattaforma LAMP e diamo uno sguardo alle pagine ASP, che girano su server web IIS (anche se esiste un “emulatore” per Apache) e al linguaggio JScript con cui realizzeremo le nostre pagine.

Perché, nei prossimi articoli dove ti parlerò di ASP, utilizzero JScript e non VBScript che è il linguaggio di “default” per le pagine ASP.

Ecco i motivi:

Ogni web developer ha familiarità con JavaScript.

La sintassi JScript è più facile da comprendere per chi già programma in PHP o JSP.

Per realizzare le nostre pagine ASP partiamo dalla cosa più importante, tutti i nostri file .asp, avranno come prima riga:

<%@ LANGUAGE = JScript %>

Con questa direttiva comunichiamo all’interprete il linguaggio di scripting che abbiamo scelto di utilizzare.

Se non vuoi perderti questa mini serie di articoli dedicati a questo linguaggio di programmazione ti consiglio di abbonarti al feed rss di blographik .

Articolo pubblicato per blographik da Emanuele Calì di EmaWebDesign.com

Articoli pubblicati su blographik dallo stesso autore:

• Ecco come progettare e realizzare un carrello virtuale per un e-shop in PHP (parte 1);
• Realizza un carrello virtuale per un e-shop in PHP e scarica i file originali (parte 2);
• Come realizzare pagine in ASP (parte 1).

Sei uno sviluppatore, un grafico, un web designer o un esperto SEO?
Vuoi partecipare anche tu come guest poster di blographik per accrescere la tua visibilità in rete?
Scrivimi dal modulo contatti per ricevere tutte le informazioni al riguardo.

La seconda ed ultima parte della mini serie dedicata alla realizzazione din un carrello elettronico per un ecommerce utilizando php come linguaggio di programmazione.

In questo articolo che Emanuele Calì ha realizato per blographik come guest poster, entra nel vivo, con esempi pratici del codice da  utilizzare.

inoltre al termine del post troverai il link diretto da cui potrai scaricare gratuitamente il file della classe “cart”, utilizzata in questo tutorial.

Progettare e realizzare un carrello virtuale per un e-shop in PHP
(parte 2)

di Emanuele Calì di EmaWebDesign.com

Nella prima parte dell’articolo abbiamo iniziato a scrivere la classe “cart”, vediamo adesso le funzionalità da includere.
La funzione add, che nel nostro e-shop, verrà richiamata dal pulsante “aggiungi al carrello”:

function add($id,$qt,$vt) {

//Ottengo la lunghezza dell'array
$position=count($this->id);
$trovato=0;

for ($i=0;$i<count($this->id);$i++) {
//Verifico se il prodotto è presente nel carrello
if ($this->id[$i]==$id) $trovato=1;
}

//Se il prodotto è già presente aggiorno quantità e variante
if ($trovato==1) $this->update($id,$qt,$vt);
else {//altrimenti aggiungo il prodotto al carrello
$this->id[$position]=$id;
$this->qt[$position]=$qt;
$this->vt[$position]=$vt;
}

}

La funzione update che ci permetterà di modificare la quantità dei prodotti o, eventualmente, delle varianti:

function update($id,$qt,$vt) {

$position = -1;

for ($i=0;$i<count($this->id);$i++) {
//Prelevo la posizione del prodotto nell'array
if ($this->id[$i]==$id) $position=$i;
}

//Aggiorno le informazioni del prodotto
$this->qt[$position]=$qt;
$this->vt[$position]=$vt;

if ($position==-1) echo "Impossibile aggiornare il prodotto,
prodotto non trovato!<br><br>";

}

La funzione delete che ci permetterà di eliminare prodotti dal carrello:

function delete($id) {

$position = -1;

for ($i=0;$i<count($this->id);$i++) {
if ($this->id[$i]==$id) $position=$i;
}

if ($position!=-1) {

$cont=0;

for ($i=0;$i<count($this->id);$i++) {

if ($this->id[$i]!=$id) {
$app_id[$cont]=$this->id[$i];
$app_qt[$cont]=$this->qt[$i];
$app_vt[$cont]=$this->vt[$i];
$cont++;
}

}

unset($this->id);
unset($this->qt);
unset($this->vt);

for ($i=0;$i<count($app_id);$i++) {
$this->id[$i]=$app_id[$i];
$this->qt[$i]=$app_qt[$i];
$this->vt[$i]=$app_vt[$i];
}

}
else echo "Impossibile cancellare il prodotto,
prodotto non trovato!<br><br>";

}

Ed aggiungiamo, infine, una funzione che stampa il contenuto del carrello. Questa funzione ci permetterà di testare la classe ed avere un output a video:

function printcart() {

for ($i=0;$i<count($this->id);$i++) {

echo "<b>ID:</b> " .$this->id[$i] ."<br>";
echo "<b>QT:</b> " .$this->qt[$i] ."<br>";
echo "<b>VT:</b> " .$this->vt[$i] ."<br><br>";

}

}

Vediamo come includere la classe in un nostro progetto ed effettuiamo un test:

<? php

include("cart.php");

//Inizializziamo la classe
$cart = new cart();

//Aggiungo l'elemento con id 1
$cart->add(1,1,0);

//Aggiorno la quantità dell'elemento 1
$cart->update(1,2,1);

//Aggiungo l'elemento con id 2
$cart->add(2,1,0);

//Aggiungo l'elemento con id 3
$cart->add(3,1,0);

//Elimino l'elemento con id 2
$cart->delete(2);

//Stampo il contenuto del carrello
$cart->printcart();

?>

Puoi scaricare gratuitamente i files della classe “cart” e dell’esempio.

Articolo pubblicato per blographik da Emanuele Calì di EmaWebDesign.com.

Nella prima parte di questo articolo (la seconda verrà pubblicata domani) vedremo come progettare e realizzare, utilizzando PHP come linguaggio, un carrello virtuale per un sito di commercio elettronico.

E’ possibile creare“shopping cart” avanzati che offrono molteplici funzionalità ma in questo post, ci preoccuperemo di realizzarne una versione “base”.

Con questo primo articolo  inizia una nuova serie di appuntamenti dedicati esclusivamente allo sviluppo di siti web o comunque alla programmazione in genere.

Grazie ad Emanuele, web developer e web designer di EmawebDesign,  questa sezione si arrichirà pian piano con articoli dedicati al mondo dello sviluppo, che fin’ora è stato trattato poco su blographik.

Se qualcun’altro vuole partecipare come collaboratore  con tutorial ed articoli di qualità da pubblicare esclusivamente su blographik, può contattarmi tramite l’apposito modulo su questo blog.

Ecco la prima parte del tutorial: per discutere di questa utile risorsa, vi invito a commentare l’articolo.

Progettare e realizzare un carrello virtuale per un e-shop in PHP
(parte 1)

di Emanuele Calì di EmaWebDesign.com

Dopo un’analisi del problema, realizzeremo senza difficoltà che, il nostro carrello virtuale, dovrà permettere all’utente dell’e-shop di aggiungere prodotti, modificarne quantità ed eventuali varianti di prodotto (come taglie, colori, misure ecc.) e di eliminare prodotti dal carrello.

Come tenere traccia di queste informazioni?

Utilizzeremo tre array:

• il primo conterrà l’ID (chiave univoca) dei prodotti;
• il secondo conterrà le quantità dei prodotti;
• il terzo l’ID delle varianti.

Questo ci basta per tenere traccia delle informazioni necessarie ma, adesso, vediamo quali dovranno essere le funzionalità del nostro carrello:

• Aggiunta del prodotto al carrello;
• Modifica della quantità (o variante) di un prodotto;
• Cancellazione di un prodotto;
• Stampa del contenuto del carrello.

A questo punto, editor di codice alla mano, passiamo alla realizzazione del nostro carrello, scrivendolo da zero in PHP.
Scriveremo una classe ad hoc che chiameremo “cart”:

class cart {

var $id = array();
var $qt = array();
var $vt = array();

}

In questa classe dichiareremo i tre array che conterranno le informazioni dei prodotti id (ID dei prodotti), qt (quantità dei prodotti) e vt (ID delle varianti).

Termina qui la prima parte di questo tutorial, la seconda ed ultima parte completerà la classe “cart” mostrandone anche il suo funzionamento.

Articolo pubblicato per blographik da Emanuele Calì di EmaWebDesign.com.