Sei sulla pagina 1di 100
econo kate See Bp Ee SGiSs 2 XS TECNICHE SEGRETE Spiegato in dettaglio dai nostri esperti i| nuovo algoritmo usato dai pirati per impossessarsi dellADSL altrui Telefonini & PC: II codice sorgente per scovare le password Wep, WPA e WPA2 dei router forniti dai grandi provider lr Barc Meee te Ted | i=] Re UN Pe ECS aK) Con la nostra guida impari a usarli per creare elementi dinamici e animate di grande impatto [Fy fe etm Creare tabelle con righe e colonne a scomparsa eee - Applicare facilmente ombre e sfumature ty cy areca Be ae f ORocnamno PHP: utilizzare ba tere fet Wr iu Herik A a {OL per Cro ANDROID BLUETRIS Sfrutta la tecnologia bluethoot e crea tun'app per giocare con gii amici ILNUOVO IPAD ORA TIRICONOSCE Con le nuove classi di iOS 5 siamo in grado di analizzare immagini incerca di volti umani UN’APP CROSSPLATFORM CHE CONTROLLA ILMETEO Cone librerie QT interroghi le API Yahoo e prevediil tempo che fara SCOPRIAMO WebMatrix iE Le piattaforma Free 7 diMicrosot per creare complessisitiWeb STA TUTTO IN UN METRO Srluppa iltuo primo software con Microsoft Visual Studio 11 JAVA SPRING BATCH Lapotenza dei process ETL per elaborare file di grosse dimensioni ii FAI UN SALTO NEL POSTO GIUSTO. Mee i030 A SUG MIU sere Sa D IODC Ss x 3 GB DI SPAZIO x Fauste tay ee SORT RIs, ee) UA DTT . x EASYAPP tlt = ands Sas Mi ay DT Tat Siete sicuri che la protezione Wi-Fi della vostra rete, sia essa aziendale o soltanto casalinga, sia abbastanza forte? Questo mese ci spinglamo un po’ oltre, lo rico- nosciamo. L/articolo principe di giugno, Infatti, vi spieghera come giostrarvi alla scoperta del funzionamento degli algorit mi utilizzati dai grandi provider italiani per creare le complesse password di pro- tezione per le reti Wi-Fi. E un argomento border line” @ vero, ma siamo sicuri che lo troverete molto interessante, Alla fine della lettura sarete in grado di creare una vostra personale applicazione in grado di recuperare le informazioni necessarie per testare la sicurezza del vostro router. & sottinteso che vi raccomandiamo di fare “i bravi bambini", ed utilizzare questo tuto. ial soltanto per motivi accademici e legati al vostro uso personale. Se invece volete hacke- non meno appassionanti, ¢ Wi piace la programmazione orientata ai sistemi mobile, vi segnalo un interessante mantenervi su argomenti meno Aiiniaio di ogni arco, troverete un simbolo che indicher di codice e/o software allegato, che saranna presenti sia sul CD (neta posizione di sempre sot codice\e \sottools') sa sul Web, af indrizo hep//edrom.joprogramma it Questo mese su ioProgrammo Y Leggere attentamente le avvertenze. tutorial del buon Carlo Pelliccia, che vi guidera per mano alla scoperta del fun. zionamento dellinterfaccia Bluetooth su Android, dal pairing con un altro disposi tivo fino alla sgioco da giocare con un altro “Androide" creazione di un vero e proprio nelle immediate vicinanze. Vi interessate, Invece, di sviluppo Web, ma ancora non avete ben capito come funzionano i fami geratl Iquery, CSS & C.? Troverete un esau. stivo articolo che vi insegnera a trasforma: re le “vecchie” e nostalgiche tabelle HTML in “oggetti” dinamici. Corposa anche Ia sezione per coloro che si interessano alle basi di dati, visto che questo mese vi pro. poniamo Oracle, MySQL (usato con PHP), el potente IBDC di Java per interface un DB utilizzando il linguaggio di Sun? nsate sia finita qui? Ci sono ancora molte cosa da scoprize in questo numero ma... Mica posso dirvi tutto io! Girate pagi na e... buona programmazione! Piero Manel Pla presenza / Spiegato in dettaglio dai nostri esperti il nuovo algoritmo usato dai impossessarsi dell’ADSL altrui ‘Telefonini & PC: II codice sorgente per scovare le password Wep, WPA e WPA2 dei router forniti dai grandi pro SERVIZIO CLIENTI ‘servizioclientiGedmasterit +199.50.00.05 190.50.50.51 aragorn TRASFORMIAMO VITE DIFFICILI IN STORIE PIENE DI SPERANZA. AIUTACI A DARE A TANTE MAMME IN DIFFICOLTA LA POSSIBILITA DI ESSERE MAMMA. Quando arrivano, hanno alle spalle storie difficili: una violenza, una malattia, una di- pendenza, uno sradicamento. Quasi tutte combattute tra l'amore per il loro bambino ¢ la vogia di scappare. Nella nostra Casa Accoglienza inizia- no un percorso che le aiuta a riprogettarsi, dentro e fuori Moltissime ce la fanno. Quando escono, mamma e figlio camminano insieme, su una strada di autonomia. E tu puoi essere accanto a loro, con il pit: semplice dei gesti d'amore. Dal 2 al 20 maggio wwwaarche.it dona 1€ con SM personale vodafone Gap © win me\y/, COREY tiscali: ndverca Dona 2/5€ con chia SS TELECOM c rasTyveB tiscali: Dona il tuo 5 per mille ad Arché: C.F. 9710: 0156 Questo mese su ioProgrammo HTMLS5 + CSS3 + JQuery = Lanti-Flash Con la nostra guida impari a usarli per creare elementi dinamici e animate di grande impatto TABELLE PARTICOLARI CON HTMLS, CSS3 E JQUERY. Uevoluzione del Web Design: vediamo come costruie tabelle accessbili e dina- riche utilizzando le pi recenti tecniche offerte da HTMLS, CSS3 e Jquery. inseria ‘mo sfumature, ombre e creiamo una strut tura a colori alternati 18 SITI WEB CON MICROSOFT WEBMATRIX 26 Per svluppareil nostro sito non ce niente «di meglio che partire da un prodotto gi sviluppato, distribuito con licenza open source e che dispone di una gran quantita di template pronti da utilizzare e__ we oG os CONTROLLARE IL METEO DALLO SMARTPHONE . 332 Usiamo qtquick per creare una applicazione che gira su smartphone, tablet, e computer prelevando le informazioni metereologiche dda un servizio web: scopriremo che possiamo usare la classica XMLHTTPREQUEST IL GIOCO DEL TRIS CON ANDROID IN BLUETOOTH .. Le tecnologia bluetooth permette di instaurare connessioni fra due device che sono a distanza ravwicinata. Si possono osi scambiare file o fare cose anche pit complesse, come giocare in multiplayer. scopriamo insieme come fare 38 IL FACE RECOGNITION APPLICATO AL NUOVO IPAD. .. .49 ‘Adoperando le nuove classi fornite con iS 5 siamo in grado i analizzare approfondi- ‘mente immagini alla ricerca di volti umani, creiamo insieme un’ applicazione che com Pia tutte le operazioni necessarie PROGRAMMO DA ZERO UNA BASE DI DATI PER MEMORIZZARE ARTICOLI .... ..58 [Mysql e PHP sono il connubbio perfeto per un realizzare pagine e siti Web davvero dinamicie funcional. Cerchiamo di capi (e Pu} ite 3 Allegati di ioProgrammo 6 Ui software ei libro in allegato alla rivista Attualita Le pi important novita el mondo della programmazione Dal Forum Le pid interessant discussion dal sito web di ioProgrammo 94 Tips & Tricks Una raccolta di truchi da tenere a porta di. mouse Software [contenuti del CD-Rom allegato 7 Posta Le domande dei nostri lettri sruttare) insieme i linguaggio dei database relazionali: SQL PROCEDURE, FUNCTION E PRIME QUERY IN ORACLE CCreiamo il nostra DB completo con il potente ROMBS Oracle, addentrandoci pit profondamente nel linuaggio PUSAL, imparando a effettuare{ primi insert utili zando la transizioni 64 RESULTSET E STATEMENT SENZA SEGRETI IN JAVA... ..68 Estendiamo la nostra form di gestione della base dati articoli con un completo navigatore, e con la possibilita di modifica delle relative tabelle. Scopriamo anche ‘come usare le statement di tipo prepared di tipo callable Beam VISUAL STUDIO 11: IN UN METRO CI STA TUTTO! . 74 Analizziamo insieme linstallazione della huova piattaforma di sviluppo Microsoft «© occupiamoci anche, con un primo esem. pio, degli aspetti principali dello sviluppo di applicazioni Metro UN PROCESSO ETL CON SPRING BATCH ss Spring Batch é la risposta agli scenari Batch all'interno dei quali & necessario elaborare e trasformare grandi quantita di dati in modalita non interattiva e schedu lata nel tempo Tras PHP 5.4; L’EVOLUZIONE DELLA OBJECT OP. . sae 86 A Febbraio di quest’anno é stata rilasciata la RCB di PHP 5.4. Sembra ormai prossimo il rilascio dela versione stabile. € dunque il momento giusto per dare un‘occhiata alle principali funzionalita di cui si arti chisce il linguaggio _ httpu/www.ioprogrammo.it 82 Ce ua aan PROGRAMMARECON Java 7 Je @ sicuramente uno dei linguaggi di programmazione pid diffusi del panorama informatico mondiale, apprezza- to e utilizzato per la realizzazione di applicazioni sia desktop che web-based. Java, infatti, prevede il supporto alla concorrenza, I'utilizzo di file multimediali, i componenti grafici, la gestione degli eventi e delle eccezioni, il networking, la connessione ai database. La versione 7 del jinguaggio ne rappresenta l'evoluzione pil recente e, in questo libro, viene illustrata con l'ausilio di esempi pratici, listati di codice completi e l'implementazione software di un vocabolario in tre modalita differenti: applica- zione stand-alone, applet e web application. TRA GLI ARGOMENTI TRATTATI: 2 I linguaggio Java e la progettazione, lo sviluppo e il rilascio di applicazioni software To Larealizzazione ai interfacce utente 2D e 3D e I'utilizz0 cco ret SER di contenuti multimediali 8 Laconnessione ai database e I'implementazione di applicazioni per il web con Java 6 EE STP tap sftare cel nese ndvidto dal edazone lence del software Cente nele ategaie — IS La dimers el cotare sul CO scare da na comoda ete (hc par stallore 0 Una acura recensione salvar software sal wo PC ‘content Toma ala pagina nile coROM resavone conte we ns bbc ds Pogamne, Se er ae Seg reat Adbonamentinforazon een S me hitp:/www loprogrammoit DISPONIBILE SRA Google, piu soldi per i cacciatori di bug IgG promette taglie pit sostanziose per i cac ciatori di bug. In palio fino a 15mila euro per chi smaschera gli errori. Per celebra- re il successo del Vulnerability Reward Program, © per sottolineare il proprio impegno rispetto alla sicurezza, Google hha deciso di aggiornare le regole det programma che offre una ricompensa a tutti { cacciatori di bug. In sostanza, BigG chiede a tutti gli utenti del Web di sco- vare nel suo stesso codice le imperfezioni e | punti deboli, cosi da ridurne la vulnera- bilita e gli errori. In base al nuovo tariffario, Google promette fino a 15mila euro a chi sara In grado di segnalare le pitt grandi lacune nella sicurezza. “La ricompensa é li per loro” hanno seritto in un post sul blog di Mountain View ‘Adam Mein e Michal Zalewski, del team dedicato alla sicurezza. Un'altra novita introdotta consiste nel dare la possibilita ai vincitori di donare l'importo in bene ficenza. Lanciato nel novembre 2010, il Vulnerability Reward Program ha ricevuto oltre 780 segnalazioni di vulnerabilita ha ricompensato 200 cacciatori di bug con circa 350mila euro, “Siamo sicuri, al di la dt ogni dubbio, che il programma ha reso gli utenti di Google pitt sicuri” sostengono Mein e Zalewski Android (ma anche iOS) e il trojan che spia il tocco |W eager tate in inert eases re Faery ee Eatin ae rain Sear! Peet oe erent cern rene Peer ey Poeun ent een Penni err ra Pen nt en ee ree Cee es eee) Pe een een ee eects Vutente viene invitato « completare 30 percorsi con 400 Co eeanernis Per eerie Pennsylvania State University in co Peron a eee ee ec ee eae ier Sere ps Pee eee Re eran ree ees aera en en See ey Ree aay Per eae nnn eee aon nemo Soneeet oes taro eee eee os Pome as Pree Serer poeta pecs eee eerenmeeTits oe eet Pere a segno d erred erro eerie Pen one cae Rene et nen nue ee Rey oe ty ioe re Perey Perea erect anche per le app non dotate di privilegi di access Peer Nasce BIOM, i | Delonge ii Peers ee See CE ae een COT em e880 eee roves Varto, eens Crome ee Pee ee a Pern ety Sere ee eerie pee en ore PTC tele cii tat Pec en ete See ae een a Pret eee ee eee eee) Seer en Sree et een Co eg eens teat ea dichiarato Jourdan Smith, un ed eer Neen dele ee ee rer eee eons se parole di entusiasmo Se eco ts er es Tim McCarthy promette: anche ce eee a cons UE, legittimo rivendere software fa corte tedesca aveva rinviato alla Corte di Giustizia dell'Unione Europea un caso sulla legitimita della vendita di un softare usato rispetto al principio del cosiddetto “esaurimento del dirto di distribu zone’ e al dirt di prima vendita previsto dalla Diretiva 2001/29/CE. I ‘aso vede Oracle denunciare il sto commer ale usedSof che fa della compravendita di software usato il suo business, € questo sito ifendersi appelandosi al principio del sau Fimento del dirto di distibuzione in base al quale Iacquirente pu regalare o vendere un prodotto proteto da proprieta intlletuale 11 problema, infat, sorge nel momento in cul la distrbuzione avviene senza supporto fisico: condizione che rende potenzialmente infinita la redisrbuzione di un opera da parte elutente, condizione che i detentori dei iriti hanno cercato di limitare con clausole alle licenze sempre pi imitative e sempre meno lete, spesso acetate inconsapevolmente dal utente al momento dello spacchettamento del programma o del prodoto preso in licenza (o comunque senza pos- sibilitdi scegiee). Ora YAvvocato Generale della Corte di Ghustizia dell'Unione europea Yves Botha rilevato che, per valutare i dito 0 ‘meno a rivendere il software, occorre guardare ala natura della Hoeniza con cui stato originariamentedistrbuito. Labase delsuo ragionamento é simile a quella che ha portato un giudice staunitense ad esprimers st luna questione simile in favore dela dotrina del ist sale (corrspettivo a stele estrisce delesaurimento del drito di dstribuzione): in que caso era da valutare a portata del contratoofferto da Autodesk con lalicenza legata al software AutoCAD, ei gdice ha tlevato che, nonostante la forma, sidovesse parlare di una “licenza che wasferisce proprieta" edn ‘que assimilabile alla vendita e alle sue tue, ‘che comprendono, appunto,anchela doarina del fistsale, Come nel caso statunitense inf ti, se lalicenza, oferta in cambio di un prezzo stabilto, ® senza limit i tempo e con dio utlizzo pleno allora presenta “le carate tistiche della vendita". Diverso @ il discorso della copia ulteriore, conseguente alla ven: dita successiva a quella originale: mentre i acquirente pud godere della dotrina esaurimento del drto di distribuzione Jnsomma i dscorso non genera una catena venti potenzialmente infinita. I giudicesileva tal proposito che “Tesaurimento che pud conseguire ala vendita della copia del programma per elaboratore, ha necessariamente una porata limitata, poiché riguarda solo i dirto di distribuzione di una copia det programma incorporata in un supporto materiale” e quindi che “in caso dirivendita del dito di utlizzazione della copia di un programma per laboratore il secondo acquirente non pud invocare Fesaurimento del iro di distribuzione di tale copia per procedere alla riprodusione del ‘programma realizzando una nuova copia, nemmeno qualora il primo acquirente abba cancellato la propa o nom la utiliza pi o> ATTUALITA_} Report sull’evento che riunisce i professionisti del codice LINGUAGGI E TECNOLOGIE: IL CODEMOTION 2012 IL 23 E IL 24 MARZO SI E TENUTO A ROMA IL CODEMOTION, L'EVENTO CHE E OCCASIONE DI STUDIO, DI APPROFONDIMENTO, Di PRATICA E INCONTRO PER | PROFESSIONISTI E GLI AMANTI DEL CODICE. CI SIAMO ANDATI ANCHE NOI, E VI FACCIAMO UN RESOCONTO DI QUELLO CHE SI E DETTO >10 lita di scambiate lunghe chiacchiere a proposito di codice e tecnologia, abbiamo avuto anche la Leauledelia Facolta 6! ngegneria sono state per due gir invase dagliamanti del codice di ogni etd soddisfazione di notare tanti volti nuovi, soprat tutto di studenti universitatle liceali, segno che la passione per la programmazione non si sta affievolendo nelle nuove generazioni, ma anzi é pli diffusa che prima. Come sempre, l'attrattiva principale dell’evento sono stati gli innumerevoli talk che, per due glor nate intere, dalla prima mattina fino al pomeriggio inoltrato, hanno occupato le nove aule a disposi zione, Gi interventi sono stati suddivisi per canali tematici: “hor”, ‘open’, “web*, “mobile", “gaming’ “security & hardware’, "languages", “methods Innovation" e “enterprise”. Le piattaforme ed | linguaggi trattati sono stati di conseguenza ‘moltissimi, Ci sono stati Java, .NET, Objective-C, Scala, Python, JavaScript ed altsi ancora. | topic affrontati nelle manifestazioni di questo tipo, cltre che un’occasione di approfondimento, sono sspesso anche un metro che permette di misurare lo stato di interesse intorno ad un argomento 0 ad una particolare tecnologia. Quest’anno i temi caldi, come ci aspettavamo, sono stati soprattutto il mobile (Android, 10S, Windows Phone e Bada) & le applicazioni Web di nuova generazione (leggasi HTMLS). Anche il tema Smart TV ha fatto capolino tra le aule ed i cortidel, e @ nostro awiso @ un ‘qualcosa da tenere in considerazione per gli anni 2 venire, Molti sono stati i talk che, pur non trat tando direttamente un linguaggio, una libreria 0 tuna soluzione, hanno approfondito aspetti inte ressanti per i programmatori professionisti o asp anti tal, In alcuni canall tematici come “methods* “innovation”, ad esempio, si sono approfonditi diversi aspetti che, pur non riguardando diretta- mente il codice, uno sviluppatore deve conoscere per avere successo. Diversi anche gli ospiti inter nazionali che hanno tenuto talk in lingua inglese. Parallelamente ai talk si sono tenuti dei labora: tori pratici, che hanno attratto numerose perso- ne, Venerdi & stata Microsoft ad organizzare un laboraterio pratico di programmazione Windows Phone e Windows 8, mentre Sabato @ stato il turno di Samsung con il suo Bada. C’é stato add Poe eau eae reac ko ELL LN rittura un laboratorio per bambini organizzato da Mozilla, per imparare a programmare giocando! Gli appassionati di videogiochi, invece, hanno ppotuto intrattenersi nell'area gaming della mani festazione, Non ci si@ riposati neanche la notte trail primo ed. Il secondo giorno, per via deli’hackathon che, in collaborazione con WhyMCA, @ stato organizzato In notturna nel laboratori della facoktd. Per chi rnon lo sapesse, un hackathon @ una sorta sfida- loco che consiste nell organizzarsi in team e rea- lizzare un hack su una delle tecnologie indicate rel regolamento. | partecipanti si sono misurati ‘hackaton ches tenuto nella notte havsto gli appassio- ‘ati cimentarsicon epi disparate tecnologie con le Lego Mindstorms, con Arduino, Inte! AppUp, Kinect ed altte tecnologie Microsoft. | migliori hhack sono stati premiati con licenze software, con dispositivi hardware e con dei buoni sconto. SPAZIO ALLE STARTUP La novita pit interessante di questa edizione del Codemotion & stato 'ampio spazio dedicato alle startup informatiche, cio® a quelle imprese appena nate, spesso costituite da ragazzi con idee innovative, che cercano di farsi spazio con la sola forza delle proprie capacita E sentire comune che, in Italia, le startup abbiano ‘ancora troppe poche possibilita di raccogliere i fondi e la fiducia necessari per emergere. [casi di successo americani, invece, ci insegnano che chi ha idee e capacita pud in poco tempo cambiare il mondo, se adeguatamente supportato dal mondo imprenditoriale e da quello finanziario. Bisogna pretendere che anche in Italia sia cosi, ed & doveroso aiutare le startup di casa nostra. I Codemotion, in collaborazione con InnovactionLab, ha dato il proprio contributo alla ‘causa, dedicando ampio spazio agli startuppers. Giascuna delle startup presenti ha avuto uno stand dedicato lungo i corridol della facolta, con Vanessa possibilita di far conoscere la propria attivita e di fare recruiting fra gli sviluppatori pre- senti, La mattina del sabato, inoltre sié tenuto un Incontro durante il quale sono state presentate le neo-Imprese vincitrci del concorso “Stortup In Action”. Sono state anche diffuse informazioni utili per che, nei tempi a venire, avesse voglia di vedere Il proprio sogno realizzato ed avesse biso- {gno dell'aluto necessario per far. Per il resto, lungo I corridot deluniversita, oltre alle startup e agli sponsor, é stato possibile incon: tare molte aziende informatiche dell’area roma- ra. Come consuetudine, ha avuto luogo Vinizia- tiva della raccolta dei CV, che & sempre stata un fore all‘occhiello de! Codemotion e del suo ante- signano Javaday. Studenti alla ricerca di un primo Impiego e professionisti in cerca di un nuovo Impiego hanno potuto depositare i loro CV negli appositi box predisposti allo stand di ciascuna azienda. In alcune aule si sono anche tenuti dei veri e propri colloqui di lavoro. evento si € concluso nel tardo pomeriggio di Sabato con le premiazioni dei concorsi e con una cerimonia finale. Ancora una volta il Codemotion si confermato essere un evento di primo piano ello scenario dell'informatica del Centro Italia, divenendo ogni anno piu interessante ¢ ricco di stimoli. Ci saremo anche I'anno prossimo. ~, {eodemation} We hetpu/www soprogramme.it na codematin t ‘a imevaciona og a hye rg wp ec atin kid WI-FI HACKING TECNICHE SEGRETE SFRUTTIAMO LE POTENZIALITA DI IOS 5 PER ANALIZZARE GLI ALGORITMI DI PROTEZIONE WPA DEI ROUTER PIU DIFFUSI, E USIAMO XCODE PER CREARE UN’APP PER IPHONE CHE PROVA (E RIESCE) A INDIVIDUARE LE FALLE DI SICUREZZA a aceD rien (WEB a sicrezza @ un conceto labile, specalmente ne! | campo del. Proprio in questo settore_ gi “atacch ngono giomalmente da parted centinala se non miglaia dl ment che affrontano con dversiapproccecono- scenze quello che potremimo defnre un ‘problema’: questa “intelgenza global" spesso consente dl rvelare flle che ‘permettono di evideniare afer cficimente denna favorendo un miglloramento del servizio, oppure suggerisce |a sosttuzione con uno pil adatt. La sicureza é anche sipendente dal fattore tempo: maggior sono Himpegno e le ore dedicate pit vino sara momento in cul si vilera la seratura 0 la s aggreraforzando i cain. Addtare chi ceca difeti o eri in un sistema di scurezza come un hacker, nelferataaccezone negativa, un errore.Quello che ™uove la magaior parte di queste personal é a semplice curiositaesete di conoscenza, e anche il sot desidero di _arvate per primo in una gara su scala mondiale la comunita online &mertocratica, chi resce entra "nla stoi’, anche se {relegate in un sottoscala di un paese sconoscivto, Sistemi ‘come aPS3 hanno resisito anni prima che una sola persona _alivello mondiale riuscisse a vila 20enne "Geaho"perla ‘ronaca, mentr sistem operativi come 0S, ad ogni aggior: ‘namento consderato pi scuro non rescono 2 reggere pi i te-quatro mesi (05 5); anche i protocll di Knect non ‘esse neppure due setimane in urvawvincente gara conto i tempo, con relative premioin denaro, dela comurita hacker. Fig: Eco interac deltappcaxone che andremo a ealizare identifica se anestarete sca merit quind! di persone che passano nota intere dvan- tial computer sesstemi protocol tecrologie dl sicurezza, Server e sstemi operat sono sempre pil cur, quest “curls!” che agjscono in buona fede effetuano un lavoro i bug hunting gratuitamente, cui risultat poi miglorano iIrelatvo servizio. Adoperando, in buona fede quind, dele rion enon infrangendo la legge spud imparare molto e agar adoperareleproprieconoscenze in manieraproficun, ‘anche in ambiente lavorativo. Oa questeconsiderazion par tlamo per affrontare un dscoso gi trattatoalcuni nummer Addietro suile pagine di ioProgrammo, ma che vise le richieste rratiamo con un diverso approccioeadoperando la piattaforma ios. IL SSID, IL WEP ELA WPA Con S10 si indica il Service Set identifier, nome con cui una rete Whi viene identficatadagli utenti che sono nel suo rag- io cazione; WEP e WPAMWPA2 sono protocol i scurezza adoperati per criptare le comunicazion! via etre, sono acto- nimi i Wired Equivalent Privacy (WEP) Wi Protected Access (WPA) e Wi Protected cess WPA2) e rappresentano di fatto tre generazioni che, progressivament, hanno incre- rmentatola sicurezza dele et wif. questo perchela versione precedente aveva ivlato problemi fall, Attualmente i Protocolo WEP & praticamente in dsuso, sosttuito da WPA ‘dal pit sicuro WPA2, che perb sono anche esi vunerabi Inaleune particolar configuraziont * password debolt. adoperare password troppo corte eo che contengono termini comuni si soggett ac attacch di tipo brute force (forza bruta) che consistono nel ten- tare centinaia di password al second in cerca di quella corretta adoperare password dialmeno 13 caratte con maiuscole, minuscolee caratteri non solo alfanumeric {ad esempio -_£5%_) rende la propria rete dificimente attaccabile ‘SSID conoscuter molte case produttil adoperano uno stesso SSID pet un determinato modello di outer, que sto ha consentito la generazione di elenchi,chiamatt ‘rainbow tables, che contengono le password di default adoperate su tali modell, rendendo quind!vioabile in ore easter res alcune millesii di secondi la propria rete; cambiando SSID & quindi un ulteriote passo per incrementare la propria sicurezza: * adoperare WPA con TKIP: diversi studi sono ruscti a trovare fallen questa combinazione, in genere dsat- Vand i! Qo (quality of erie) dal proprio router rsolve i problema, oppure sostituendo TKIP (Temporal Key Integy Potoco) con AES (pi propriamente CMP) sei router loconsente; ‘WEF Protected Setup (WPS): nel dicerbre 2017 Stfon Viehbeck ha scoperto che questafurzionalit abiltata di default in numerosi model di router wi, consente in alcune ore dirsalire alla passnord WPAWPA2:per evit- teil problema éconsiglabile disattvarla, se posible dal ‘Pannell dconfigurazione del proprio modem. Nonostanteglsforz quinds una password deboleoutiiz20 Gi un servizio fomito dal router che ha dlle wlnerabita varifca la sicurezza della propria rete, spesso quind! csi trove vulnerabil anche senza aver alcuna conoscenza di vere questa oquela funciona abitate. ETUTTA UNA QUESTIONE DITEMPO Tutto nasce dalla curios, che insieme a une bucna dose di ‘conoscenze e un pizzico di fortuna consentono di ottenere ‘isltatl degni di nota: Kevin Devine e james67 ruscrono 2 identicare gi algortmi di generazioni dele chivi dei router Netopia © Netgear un hacker montenegtino, Muris urges rusci tramite reverse enginneing sul modem Piel Discus 0AG225, un modello molto comune nel suo paese, 2 tisalte ala password di accesso. Kevin Devin, speciaiz ato nla icerca di fale di sicurezza, nel 2006 ruse a fare ‘reverse anche sufalgoritmo adoperato sui router Thomson Speedtouch. A centinaa kr di dstanza un talano, Angelo Aig suile pagine del suo blog ini ad interessarsi di que- Sto argomento cerco di applicare questi stud al contesto italiano nel lontano 2009; Righi pubblicd sulle pagine del suo blog hrta_/iwww pillohacking nev/2009/04/20/racking- ‘Stantaneo-dichiavieynawpa2/ una serie di considerazione € cleo effettuati sul modello Teseycstributo da Fastweb, arivando per® a rsutati inconciudent. utente SaxDax, pparallelamente, pubbicd sul suo blog httpi//wpa-aice, ‘loospotit/2000/03/wps aicecercasihtml un aricolo in cui ‘ichiedeva di invirgl ISSID Alice e cchiareva che con una certa “sowenzione economica” avrebbe forito la chiave 10 12hox+S7hex = 68 “1OLI1 17hex= 23dec 17 > 10 17hex#57Thex = Ge ‘WOLLO L6hex= 2246 22 > 10 16hex+57hes La WeA ottenuta sard 6966647001. Pr lice AGPF:eqgendo varietal otenut peri model precedent face capite che gid studiando le tecriche adoperate in precedenza si iniza a pencare in mado diverso, si pensa a “Tvelio byte” i cerca di effettuare scambi e conversion semplc stu- land anche | val in formato bina, Le reti WiFi Alice sone caaterizzare da SSID aventela forma “Acesno00m0, abbiamo quind! un prefisso Alc: (li utimi mode invece adoperano Telecom @ non sono al momento vulnerabil) sequitoda una successone di8 ce. Le prime (2-3) fend: iano la see del router questo ci permet identificare tipo di route i fmware che dovebbe montare epermet- te dala sevale del moder If stale & impresso nels parte bassa del dspositv, ed @ nel formato ad esempio ‘67102X0012345 costtuto, quind, da sue serial concatenat al arattere x anaexbbobood Laprima pate, separata dalla seconda dala X dipende come _abbiame appena deto dala sri inviduabile dal SSID (ad esempio 69101, 67101, 69102...) La seconda si ottiene da 51D mediante operazioni matematche dipendenti dlls ‘sei, € stato scopesto dalla White Crew che la relazione che ussite tral Serial Number e SSID @ i atmetia maduiae: ‘esistono due costantchamate ke Q, dipendenti dalla serie el outer, tale che: SSID=K*SN+Q SN @ la seconda pare de serial, quella dopo la Xf prima porte & fsa per ogni see Da questa formula ricaviamo la formula finale: ‘SN=(S5I0-Q)/k ean nie fi Unvequszione a de incognite non amymette untunica solu zone, ma ceando un sistema che prende in consierazione {lath due router dla tessa sere siottiene ruta spe- rato, otteniamo sia Q che K Ortenut i due “numeri magic” & possibile rsale al serial stampati sotto l modem. Facclamo esempio dl avere due ret con SSID sie, notiamo come la relaionercorente si SERIALL = (SSID2-SSID1)/k +SERIAL2 conkche assume in genere valore 13 oppure vale & Da questa possiamo ottenere dei numeri che rsuteno a Cres eM AUC clk ROSES Ol a TABELLE PARTICOLARI CON HTML5, CSS3 E JQUERY U'EVOLUZIONE DEL WEB DESIGN: VEDIAMO COME COSTRUIRE TABELLE ACCESSIBILI E DINAMICHE UTILIZZANDO LE PIU RECENT! TECNICHE OFFERTE DA HTMLS, CSS3 E JQUERY. INSERIAMO SFUMATURE, OMBRE E CREIAMO UNA STRUTTURA A COLORI ALTERNATI fs aan cD ‘ae ap WEB [conscezerinte WE seine oN etree” Imettesse di gestire in modo corretto Vaspetto sdelle pagine web, ha diffuso trai web designer ‘abitudine di utizare le tabelle a scopi grafic (abitu: dine ormai da considerasi superata, anche se non da molto). Le possibltd offerte dai fogli di stile ora sconsi gliano fortemente il ricorso alle tabelle per finalita gra Fiche, ¢ restituiscono elemento al suo unico Implego: la corretta visualizazione di collezioni di dat L iniziale mancanza di un linguaggio che per LA STRUTTURA HTML DIUNATABELLA Le tabelle degli esempi che sequono, si basano su tuna struttura HTML completa di tutti gli elementi disponibil.lcontenuto sara suddivso ta intestazione , footer e corpo . Utiizzeremo elemento e . Tut i dati pert: enti latabella saranno, in questo modo, correttamen: te strutturati al suo interno, e quindi perfettamente fruibli anche dagli screen readers. _table id= Yable-one” summary=" Tpersonagoi “ -= - - “ti Luogo Bae <1d>Gandafefd> La proprieta padding stabilise la distanza tra il conte- ruto delle celle ei relativo bordo, La propieta empty «ells stabilise se debbano essere visulizzate © meno le celle prive di contenuto, evitando cos Tinserimento di spazi bianchi (Snbsp). E ora approfittiamo di una ‘nuova funzionalita di CSS3 per evidensiae intestazio ne e il footer della tabellarispetto ai contenu, asse- ‘gnando una sfuratura di colore allo sfondo: ‘Habie-one thead th, #table-one tect th { olor: FFF; backgroune-coor: #ce#20c; ‘e54c10, #263608); == Deckgroune:-Image: ~ms-tnear-radient(top, #5410, a = #903608); ‘ckgroung-image: o-tnear-radient(top, #5410, = #243608); ‘background-imape: linear. gracient(to bottom, ‘#05410, 4043608); eer dey — See pada: Bx padaeg Ste: 46H) boxshadow st 1x ox 00 FF; > [Abbiamo selezionato li elementi th discendenti di C= DISCLAIMER Giese duet page sone stat estas veo pid recent efx, Opera, Chrome Sat. est su xls soli ala vesine 8, che ‘on support pseudo ds GS, Sebbene su SEB a esa gic sia lita dt ‘appresetat ele tabele sono pecetanente acces 19> ry. ee ee ee any’ ILVALORE SEMANTICO DEL TAG
e individueremo le colonne gre ie agli elementi
Lafont quel pemetee al browser ere cometarete ‘contenu in eso rachis, Secondo questa log, slo sop delelementa
& ‘uel diconrssegrare ste di dat da visualize later dt Sale. La deta conseguena di tm tz appropri deh ele- ‘ment IML quel dave del «odie contre ah standard onto sot i profi del'c- esi, anent, do, saranopefetamente fb quan sia ser agent” del ent enerpretacoret- ‘amend mot rice, 20 ous thead e tfoot Applichiamo un colore al testo e proce- ‘diamo con lo sfondo, assegnando un colore uniforme peri browser meno evolu Utiiziamo, pol la proprieta ‘bockgroundtimage per generare un effettosfumnato, Qui si@fttorcorso.ad una sfumatura vertical, che parte a ‘una tonalits chiara e degrada verso una pid scura dello stesso color. La proprieta@ stata rpetuta con Faggiunta del prefiss specific del vai browser (si legga la nota al ‘iguardo) istemato lo sfonde, abbiamo allineato verti ‘almente il testo, elo abbiamo trasformato in caratter ‘maluscol, Dopo aver regoato gli spaz\ intern alle celle con la proprieta padding, abbiame fatto ricors alla pro- Drietabox-shadow per creare un effetto di luce di 1px in alto e a sinistra nella cella. La keyword inst (opzionale) genera Yombra altinterno delfelemento, invece che aifestero (impostazione predefnital. | successvi due ‘valor di 1px impostano la dstanza orizzontalee vertica- le dal bordo delfelemento. | due valor successiv impo- stano sfumatura e ampiezza delfombra (qui entrambi Pati a0). nfne viene impostat i colore (una descrizio- ‘ne esauriente della proprietd box-shadow & offerta dal ‘Mozilla Development Network https/developer mori {xora/En/CSS/Box-shadow). Non rimane che dichiarare lo stile dele righe de corpo dela tabela: UNA TAVOLA PITAGORICA Con particolari tipi di tabelle diventa opportuno evi- denziare al passaggio del mouse, non sololerighe, ma {anche le colonne. Un esempio potrebbe essere quello di una tavola pitagorica, dove ilvalore di ogni cela & costitulto dal prodotto dei valor corispondent a riga € colonna. Purtroppo CSS non permette di utlizzare la pseudo-classe :hover con elemento col Per questo. bisognerd assegnare dinamicamente la colonna ad luna classe: lo strumento da utlizzare, in questo caso, & JavaScript: per dare semplicita ed efcienza agi Setipt faremericors alla librera jQuery. I primo passo, ‘ome sempre, @ quello dl creare la strutture. Eccone un strato: _
~ —ethese> ‘Heable-one tbody tr:nth-cialeven) { Hi = background-color: rgb(252, 252, 203);) th seapes"eo> = ‘#able-one tbody tinth-ld(oda) { ‘th scope="cal>Onec/th> ‘background-color: tensparent;} Niente da dire, se non ricordare la pseudo-classe nthrchild, utilzzata per selezionare le righe pari (tenthichild(even)e dispar (temth:chllé(odd). Se i colo- ‘alternati hanno gia una notevole uilita nel feciltare la ettura dei dati, per una maggior cura del'accessibil {asi pud fornire al lettore una precisa Indicazione della Figa su cul si trova I cursore del mouse. Allo scopo si ‘th scope="row'>Onesith> 1 = St>2 Ficorre alla pseudo-classe hover: Ssetr eer ie ___thscope="Tow'>Two ‘table-one tbody trihover { tz background-color: r90(255, 226,181); std>4ita> ‘cursor: pointer;} LLeffeto finale & quello che appare in Fig 1. Fig. 1:Dlla gra soo evident gi eet dtumatr aggunt lfntestanone eal footer dea abel a olorazione aerate le tide ela maggie vdena grafic del rigs csi toa caso mouse La struttura @ identica alla tabella precedente: cam: biano solo i valor delle celle e in numero di righe & Colonne. I passo successivo consiste nella dichiarazio- re deli stil: _captionsid: top: text-align: centers ‘Su questeistruzioni non dovrebbero essere necessari ‘comment. Cambiano, ovviamente, le dimensioni com- plessive della tabellae dele singole colonne. Quelliche ‘equono sono gli stil delle singole celle border: 1px slid #DDB575; > Anche qui c poco da aggiungere. Manca un'uitima Istruzione: quella che consente di selezionare le celle corrispondenti alla colonna da eviderziare. A questo scope utlizziamo la classe over hover £ = ackground-color: r9b(255, 226, 181); > Si not il punto che precede la parola hover. punto Individua una classe (hover), mentre i due puntiindi- viduano una pseudo-classe (hover) Qui utiiziamo la classe over, cui assegneremo le celle della colonna da evidenziare. Se sritorna per un attimo alla struttura HTML, pero, ci sirendera subito conto che iniialmente nessuna cella apparterra alla classe hover. La tabella @ pronta ed é perfettamente frubile da qualsiasi brow- set, nel pieno rispetto di “progressive enhancement" € “unobtrusive javascript’. Offiame, perd, qualcosa in pil a chi dispone di un browser che supporti JS. ANIMIAMO LA TABELLA CON JAVASCRIPT E JQUERY {Query @ una delle pid popolarilibrerie JavaScript, formidabile per la semplctd con cui permette la sele Zioneegestione degl element del OOM. El problema che ci pone la gestione dinamica di una tavolapltago- fica @ proprio quello slexonaree gestive in modo feffiiente un numero imprecisato ai celle. 1 primo asso, owiamente, quello incorporae la liberia: htrpuswwwioprogrammoit src="ntp//ajax.goopleaps om/aanlibs/ Jauery/.7.ujqueryminss"> Qui abbiamo utlizzato fa versione 1.7.1 residente sul ‘Google CDN. Una votta disponibile la Wbreria, si trattera di utilzzarne lefunzioni. Ai nostri fini basteranno que- ste poche righe di codice: “S(eocurent ready funcion() « ‘atable-two) delegate th, te hover, ~fameionevent) ¢ (his). parent teggeCiessC hover; ‘(col eat sth) index) togleCassC hover; Di lsergt> I metodo readyi)aspetta il completo caricamento del documento prima di eseguitelo script. I metodo dee _gate), qui appicato all elemento #table.two, permette di assegnare un event handler in modo dinamico at ‘nod’ attualie futur di un documento. Cid significa che, se nel documento dovessero essere aggiunt elementi 2 seguito delesecuzione dl uno script AUAK, levent handle sarebbe assegnato dinamicamente anche a questi utimi. Al metodo delegate) vengono passat tre argomenti il selettore CSS (th, td, event handler da ‘associare e una funzione di callback da eseguire al veri- ficars dellevento. La callback esegue due istruzioni: |a prima agglunge e rimuove la classe hover alla riga, la seconda esegue la stessa operazione sulla colonna, Vediamo nel dettaglio: ‘(this) parent) togaleCasst hover’; Viene selezionato lelemento corrente sithis, che corrisponde alla cella su cui viene attivato leven 10; da questo si risale allelemento superire, ossia elemento trcorrspondente,individuato dal metodo parent): infine si aggiunge o elimina la classe hover (toggleClass(hover)). In sintesi abbiamo aggiunto/ rimosso la classe alla iga della tabella al passaggio det ‘mouse sulle sue celle La seconds istruzione esegue le stesse operazion sulla Colonna, risalendo al'elemento col cortspondente alla cella corrente: 'co}.©9($(this).ndex().toggleCassC hover’: (col) genera il riferimento alla colonna; eq) fornisce indice della colonna, che corrsponde alfindice della cella, ed & restituto da $(thislindex); toggleCiass) aagiunge e rimuove la classe hover. Leffetto com- plessivo @ che, al passaggio del mouse sulle celle della tabell, la riga e la colonna cortispondenti cambiano colore. (= PSEUDO-CLASSI EPSEUDO-CLASSI ‘STRUTTURALI ‘Una pend case un seletoe Sched gl element su araterstiche diverse dl ome, gait o dl conten ‘ine dl princpo no deduct dala struts del documents. Unesempodlapseudo dase hover, de preted sle- ‘nare un demeto quando un elemento viene puntat ad emp dal casore dl mows), mmanenattato thet appatiene a auppo el pees damien _guppo dre snole pseudo assist che pemetiono lasleion deal elementin base ala lo lacizavione lfintero dl DOM. Un eserpo etc), ce indi Trvesimo ned in un guppo agile nella gear agg ifomazii su ‘agp /aern.og TR 21> LE RIGHE A SCOMPARSA yi Sempre al fine di garantie la leggibilt del dat potrebbe essere utile raggruppare righ omoge- nee per visualizarle o geste in modo uniforme. Nelesempio che segue supporremo di dover generare tuna tabella contenente gli elementi HTML disponibil per la creazione de form. Molt! di questi element! ‘sono individuati da diversi tipi di input. Pr agevolare la lettura della tabela, si & pensato di ragoruppare i tipi di input e di visuaizzali o nascondeli su richiesta auibaabisa Fig. 2:Laigramostainteserone della riga quatre conla lama oto dunataelptagoria delutente. II nostro primo compito sara quello di -generare il markup completo di tuti i dati. Le celle “Candidate Recarmendatn’, ipedatat bee gun abe able” summaryer => gone wn prefsospedtoalle _< = = ‘oprita(SS Quest presi _ Table 4: HTML form elements suppor 2 sono spect dog bowsere ~ vegonotlizatiperpemet-—— col id="heefox” /> col id="errome" /> Ho cal cal Firefox ‘co'>Chrome "ol" Safarieth> col >Operas/th> ~ ettoot> ete Seore - -tho74/108¢/th> ‘At alts "Partial” /> jt title= "Supported! "Supported" /> Nessuna novita di silievo nella struttura, a parte il fatto che la tabella & stata inser nella div#contoiner. Facciamo notare solo che le icone del browser non sono presenti nel markup: saranno aggiunte nel foglio dstile come sfondo delle celle. Veniamo quindi agli stil sespre bene far segue ist ‘one pinadi peso. (Una detagiata dain sulfa omen dipole ind ao beter tepint, col ida"safan” /> ‘ea, S908 seni ons/vendorpectc a i com xix ialv La div che contiene la tabella viene dimensionata a ‘640px ealineata al centro della pagina, Vene previsto ‘un padding ai 20px, in modo che la tabella contenuta avra una larghezza di 60px. Passlamo, poi, alla tabella ‘alle colonne: sable-one( eth: 100%, erdercolpee olase eyo show Fig. 3a gra mosracameapparea vite a abel che ania 3 cose prima insect eet. Come sede ate pvfetarent bie acese rover utente non cee gig B22 / Givgno201 huepu/wwwioprogrammoit ecu uae ee cas Tae [Neente da agglungere, se non che la prima colonna ‘avid una larghezza del 40%, mentre le altre del 15%, Assegnamo, poi gi stil alle celle del ody: rain yt aban dy te et 2b ertea an: ile peng 0 25, border tx se #0, Socsiedor Ipc FT Vengono stabilite le dimensioni della linea del testo, ‘allineamento verticale, padding, bordi e ombreggia- tura esterna delle celle Passiamo poi alle celle delfin- testazione e del footer: ‘#table-one theed thy height: 96x; border: 0; vertical-align: bottom: ‘padding-bottom: 8px: ao ‘Fable-one foot th{ lineheight: 42px; border: 1px sold #160654; > Le proprieta sono le stesse ilustrate negli esempi precedenti. Proseguiamo, quindi, assegnando uniim- ‘magine di sfondo alle celle dellintestazione che indivi- 7 ‘table-one toot th:oth-chld(1}{ ‘Subito dopo, impostiamo i colori di sfondo delle righe: #table-one thogy trnth-chideven) { background-color: FFF; > ‘table-one tbody trshover { background-color: 190(190, 187, 212); > Prevediamo, poi, le classi group e .open, che saranno assegnate alla iga che sara agglunta successivamente al DOM via Javascript: ‘able-one tbody tegroup « = background-color: 2 ——— _#table-one thody tgroup th ( background: ur. /imgs/200min.png) 989% center no-repeat; ‘cursor: pointer; > ‘table-one tbody tr.aroup.open th{ background: un./imgs/2oomout.pn9) 98% center no-repeat: > Allariga viene dato un diveso colore dsfondo. Questa Figa conterra un unico elemento th. A quest ultimo viene assegnata un‘immagine di sfondo corrispon- dente ad una lente di ingrandimento, che rendera evidente che la cella @cliccabile. Tomeremo su questi Uultimi due element successivamente, Ora definiamo le tultime istruzioni CSS: ‘stable-one foot thnot(:nth-ci1)) { background-color: 1g6(190, 387, 212); —_ = “#table-one caption { caption-sie: bottom; text-align: rh; font-size: Sem: — padding: 6; pra (—— LAGESTIONE DEL COLOR! CON CSS3 ima delle inowanon appr tate aS, coo poterano sere dita in formato sadecmale dove #7000 ta perso, cana notaone GB, dove soi bare on 19825, 0,0. naga, cra possible uizare ina stan cl, come red ylow, ‘yen. (653 ofte maggior posta ‘lla diane dt cal ‘Olu ale precedent soluzon, ‘nat, or possibile uae le notion RGB, HSL SLA Lapimafraionesatamente ‘ome oacone RB, con Faginta dun quarto vale ‘he rapprseta lvl ‘pact (A taper), Quin a5 0,03) sca oso con epct al 3%. HSL staph, station € ‘ighmes, sa onl, sta- ‘zone eluminst. 350 pub essere dhiaat cen hl, 100%, 1008). Un ss paca 30% pu eserecichianatcon ‘st, 10%, 100%, 0.3) Sitenga present chee nuove retain color non sno s- porate cle vesioniobsolete explorer sempre bene trae uncolorealtenati wtizare un metodo callaudate peri ve hibrons ee ee eeeson. fan any’ PROGRESSIVE ENHANCEMENT “Progestin enhancement” slg garantie il ott fun- ‘oament dela versione base un sto ad gn user gen, ‘agiungendo progrssiamene funonnata pri browse pi volt, Un esempi &offeto al cnceto di ‘unobuse Joc, ia uta mod it seu d appcaions avait he, partend da ‘una conta progetacone del markup permet a tent accede 2d ur aplcazione anche senza i supporto ds appa fron pert, ma l tent dei browse pi nami godanno dua pi sca espera dnagaione. P24 / Giugno 2012 ee _vertial-aign:midale; y = Nel primo blocco si @ fatto rcorso alla pseudo-classe mot, che agisce come un operatore di esclusione (vengono selezionate le celle th che non sone i primi discendenti dellelemento superior). Nientaltro da ‘aggiungere: la tabella € completa e accessbile anche Ecol script: ‘staccument ready function) { var frsttow = $(th:contans( input) rs) parent) Var titeRow = $(-tr> -Sta per essere reinizato alto hp/fest. 5 get a a eee ee Se non sei endiizato eno 2 secondi “euCEAGU Incas Con at provider possono essercl problematichediferen- 1, Nel caso in cu le teeniche che vi abbiam illustrate in ‘questo capitolo non dovesserofursionare comettamente, vi consigliamo di consuitare la documentazione fornita dal provider odicontatarel seraio diassistenza del provider stesso. Fi, Sistadel file del tabs do publicare CONCLUSIONI LLutlizzo di software open source & una opportunita interessante di risparmio, Oggi, anche con Ventrata \{ festival, anteprim Tutto il cinema che vuoi tu OS mee er Rac eR an ok a CONTROLLARE IL METEO DALLO SMARTPHONE USIAMO QTQUICK PER CREARE UNA APPLICAZIONE CHE GIRA SU SMARTPHONE, TABLET, E COMPUTER PRELEVANDO LE INFORMAZIONI METEREOLOGICHE DA UN SERVIZIO WEB: SCOPRIREMO CHE POSSIAMO USARE LA CLASSICA XMLHTTPREQUEST BE Movers Garon a af eeee apigiomo le applicazioni (sano esse desktop, ‘oppure mobile) rappresentano sempre di pid un miscuglo i diverse tecnologe, integrate ‘una asiemealfaltra. Ed & probablimente anche il motivo per cui tendono ad assomiglirsi molto. Lesempio pid lampante sono servizi web quest non sono appannaggio cesclusivo delle applicazion! web, ma anche i programm realzzati per dispostivi desktop e mobile ne fanno uso. loro vantaggio @ evidente: possiamo accedere ad una ‘grande mole di informazioni, che qualcuno ci ha gent mente messo a dsposizione, serza dover reimplernen- tare un nostro sistema per ottenere quegl stessi dati. Per intenderc,non ha senso inventare un sistema per flevare la temperatura delle capital dele citta europee: ci basta leagere i dati da uno dei tant servizi web che offrono {questeinflormazioni, Tanto la temperatura & sempre la stessa,chiungue la misur (certo, pub variare di qualche ‘grado se siamo al sole o alfornbral. Vista importanza dei serial web, dunque, era possibile che gl sviluppatori Qt ‘non Implementassero un metodo semplce per accedere a quest servi con QtQuick? Owiamente la risposta& no, altimenti non staresteleggendo questo artcoo. I bello € che lo hanno fatto rendendo possibile usare lo stesso identico strumento che si usa nelle applicazioni web: aLttepRequest. Per chi non fosse abituato ad usar servic web, spieghia- ‘mo in poche parole come furzionano, In eats trata di empl pagine web, che possono essere raggiunte da un {qualungue browser, in cul vengono scrite le Informazioni dicul abbiamo bisogno sotto forma dl testo semplce. Per esempio, se andiamo alindizzo “hi/weatheryahor ‘apis comvorecasison?=24420474u=c" toveremo un testo de tipo: < eee “unit (*temperature""C speed": "Em\/h location”: (“location_id":"USCAOE3®™,“city":"Los ‘Angeles",state_abbrevition"!"CA""country_abbreviatio, 1:"US* elevation’:295,"attude”:34.05000000000000, ongitude":-118.23000000000000), “swind®: 'speed":0-00000000000000, : “atmosphere”: (humidity’:"6","visibilty™:16,0900000 (0000000, “pressure":1017,.00000000000000,"rising” *rsna">, ‘utp: VV weather. yahoo.com forecast USCAD636. fogo"*http:V/Viyime.comVaViVus\ntVma\/ma_nws- we Loi, *13,00000000000000),_ omorrow","condition":"Mostly Sunny”high_ ‘temperature”:25.00000000000000, 00) Notiamo immedkatamente due cose: la prima & che pos siamo stable del parametr (coe w=2442047 e unc di cul parleremo meglio tra poco). Quest ci consentono di pe: sonalzzarelarisposta del servizio web in base alle nostre csigenze. La seconda cose che dovrebbe stare allocchio {che testo che troviamo nella pagina, per fortuna seque cere regole che ci aiutano a geste tutte le informazioni In eso contenute. Serb, inftt inserito in una serie di parentes, come scatolecines& il formato ISON, che ‘ud facimente essere trasformato in un array usando Javascript i linguaggio di programmazione abbinato 2 ‘QML Ad esempio, Foggetto location contiene roggetto ‘ly, che ha valore “Los Angeles, coé i nome della cit. 1a Javascript potreroleggere questo valore usando fog: getto araylocationcity dove array & il nome delfoggetto in cul abbiamo regisrato la sposta del servizio web. Ora che abbiamo capito questo, non rimane che una cosa dda comprendere: come si pub fare in modo che la nostra ‘applicazione vada sila pagina web del senizio ene legge icontenuto? Semplice: si usa una XMLHttpRequest. In pratic, basta cre- are un oggetto di tipo XMLHttpRequest, cgi di andre 2 Fig: Laos aplialone mostra cima grasa Yahoo weather Jeggere una partcolare pagina web, e poi ottenere in una arable tuto il testo della rsposta (cloé tuto il testo con- ‘tenuto nella pagina web del servizio, che &o stesso testo ‘che possiamo vedere col browses). Quindli cote: var doc = new xMLHetpREQUeSt): ‘rea un nuovo oggetto XMLHttpRequest (chiamato doc), dicendogl di leagere la pagina che abbiamo visto poco fa. La richesta di lettura della pagina web viene viata, € possiamo leggeme la rsposta usando la strings doc. responseTet(che viene memorizatain una variabil) Poi basta usareilcodice var myObject = ISON parse(jsontet); pertrasformarelastringa ottenutadalla XMLHttpRequest nelt'aray myObject, € dora in poi potremo usare la stringa myObject.location.city per sapere di quale cittd stiamo leqgendo il meteo, LE API METEO DI YAHOO Vediamo di capire come funziona il servizio web di Yahoo weather. Abbiamo gia visto che @sufficiente andare aleg- _gere una certa pagina web pe ottenere tutte iformazio- ni che ci servono. Queste,perd devono essere trasformate in aay tramite Javascript (con la furvione JSON parse), @ poi dobbiamo conascereilloro nome per poterviaccedere. I bello del sistema di array a “matrioska’ & che possia- mo usar la dot notation per accedere al sotto-array. Per Intenderc, quando abbiamo fatto Fesempio di mObjet. cation. significava che andavamo a prendere a stin- ‘2 ity che appariene allarray location, ce a sua vos _appartene allaray myObject.noltre, & possibile accedere agi element! diun aray(equind anche ai suoisotto~aray) usando la notazione delle parentesi quadre con gf indi, per esempo myObject.ty, in quanto location él secon- delle risorse con config- urazione variabile Assistenza telefonica gratuita Genesys informatica SRL prima azienda italiana ad ottnere la certficazione ISO 900! perlaprogettazione ed erogaione di servi Hosting fort con i marchio Hosting Solutions. Con Datacenter a regola carte, connettivt ridondante, strumenti di controle e monitoraggi sl avanguardia ed un team ¢itecniiqualifcati pela igre gestione dei vost sii web. eee APARTIRE DA Seng © Data Center Primario a FIRENZE ~~~ Data Center Secondario a ROMA www.hostingsolutions.it S| Silents | oe oe | ee eee MoBILE J Realizzare applicazioni Android che utilizzano il Bluetooth IL GIOCO DEL TRIS CON ANDROID IN BLUETOOTH LA TECNOLOGIA BLUETOOTH PERMETTE DI INSTAURARE CONNESSIONI FRA DUE DEVICE CHE SONO A DISTANZA RAWICINATA. SI POSSONO COSI SCAMBIARE FILE © FARE COSE ANCHE PIU COMPLESSE, COME GIOCARE IN MULTIPLAYER. SCOPRIAMO INSIEME COME FARE Android WE 80a Anarid ete aU a ecoce >38 @ divenuto ormai un termine dso comune. La maggior parte delle persone sa che laconnettvita Bluetooth @ uno dei possiill optional dun cellulare 0 di uno smartphone, € che attraverso una connessione Bluetooth é possibile scamblare fotografie oppure utilz zare un auricolare. Davvero in pochi perd,sanno cosa sia csattamente i Bluetooth, ed ancorain meno sanno come questo funciona livelo hardware e software, Bisogna anaitutto notare come il termine Bluetooth denoti una tecnologia molto generica, nel senso che ® possibile trovarla applicata in ambit assai different anche apparentemente scolegat fra loro. 11 marchio Bluetooth appare nello smartphone come nel PC di casa rne'fauricolare come nel'automobile, nella stampante come nella fotocamera digitale. Anche alla domanda "a cosa serve Il Bluetooth” non @ face rispondere in rmaniera secca. Mediante una connessione Bluetooth si scambiano messaga), fotografie e ogni alto tipo di fie; com il Bluetooth si aggancia al celuare un auricalate 0 Un impianto vivavoce; sempre via Bluetooth & possibile stampare le fotografie semplicemente avvcinando la fotocamera alla stampante. C’é una sottile linea che collega tutt quest as: le connettvta wireless a corto raggio.Da questo punto divista il Bluetooth & molto simi- le alfUSB: entrambi rappresentano une manera difusa per mettere in collegamento due apparecchitecnoloaic Nel caso delf USB il colegamento avviene mediante un ‘avo, nel caso del Bluetooth atraverso le onde radio. In ambo | casi le applcazion! sono Innumereval. Le due tecnologie di fatto, descrivono come allacciare e geste la comunicazione tra le due part, me non Foggetto della comunicazione stessa Sulla base di questa connettivita sono stati concept innumerevol servi, Alcun, come lo ‘cambio di file 0 utlizzo deifauricolar, sono celebri e iff, © per questo sono rtenut parte integrante della tecnologia dbase. Alt, invece, possono essere deft e ‘reat ad hoc da nuove applicazioni In questo articolo scopriremo come programmare con Bluetooth in Android, concentrandod soprattuto sulla realizzazione di servizi custom. Lo studio presentera Durante la ricerca vengono propagat degli intent, le cui ‘ction sono riportate dalle costant: * BluetoothAdapter.ACTION_DISCOVERY_STARTED (valore della costante: “android bluetooth adopter action DISCOVERY_STARTED") Propagato quando la ricerca ha inizio. * BluetoothAdapter ACTION_DISCOVERY_FINISHED (valore della costante: “android bluetooth adapter action DISCOVERY_FINISHED") Propagato quando la ricerca a t * BluetoothDeviceACTION FOUND (valore della costante: ‘android bluetooth device action FOUND’) Propagato quando un dispositive viene individuato LVoggetto BluetoothDevice che rappresenta il disp0- sitivo @ incluso come valore extra delintent, elo si recupera facendo: BluctoothDevice device = intent. getParcelabletitra(Slve Pisco tel —— CHE NOME CURIOSO! nome lutoth stato pic todare Aldo Danmar, unable dplamatco che ng scandal intedeendo nla regan I istanesima. Ea onesdto con sopennome Deniebls (uetoeth, pura) och hit ml, ientr dela tecnologia ceo nave enue che fs un name ada per n protocol ‘apace d metre in omni: atone dps vers (os ome run pope ela pen: Sola anna con eon) Anche lsibale dea teolog Bluetooth sr alatadzone nei, quarto csiuto dalinrco di due rane Foc. Wikipedia 39> Cl Aira PVs lcol fe) enn’ UN PO’ DI STORIA {ostndar Buetoot rato sul nie deg ani 90 come volun dla tecnologia DA (fred Date Associaton, cok icallgaments a intros Alaefnione del standard hanno partecpato,eprtedpano tut, aleane fe again Indus itenloi, om de air Sony san, Noi, Motorola, intel IM Tesi. >40 Beale toothDevice.£XTRA_DEVICE); Gil oggett! android bluetooth BluetoothDevice contengo- 1 le coordinate e le Informazioni di massima sui dispo- sitvi appena individuat! o su quelli precedentemente associat. Fra metodi di pid frequenteutilzz0c sono: + public String getaddressO Restituisce lindrizzo hardware del dispositvo. * public String getName?) Restitusce il nome del dispositvo, nul sei dato non disponibile. public int getBondState) Resttusce lo stato di associazione del dispositi- vo. I valoti possibili sono riportati nelle costant (di ‘luetoothDevice) BOND_NONE (non associate), BOND ‘BONDING (sta venendo associato), BOND_BONDED (associato. * public android bluetooth BluetcothClass getBluetoo- thClass)) Restitusce a classe Bluetooth del dispostivo. Si trata «un paccheto dl Informazioni util per determinace che cosail dispostvo pub fare e quai servi espone. + public androids ParcelUuid getUuids)) Restitusce la lista con gli UUID dei servizi offer dal spositivo. Approfondiremo questo aspetto tra non mote Presentiamo di seguito una activity i cul codce & vio nabile nel file \BtuetoothDemo02\src\example\bluetoo- tademo0a\BluetcothDeviceSelectionActivityjava del file allegato) che vi tomer utile in qualunque applicazione ‘Bluetooth realizzeretein futuro. Sitratta dun componen- te che permettealfutente di selezionare un dispositivo Bluetooth tra quelli gid associat, oppure di awiare una scansione radio, alla ricerca di una nuova associazione: ancora da stile. Lactwvty sl accompagna a due layout. | principale éselectionxmt itp /scheras. android aaeane-a com/apk/res/andric” “android layout width="match parent” androlaayout_wioth="match_parent™ _ androig layout margin="3¢p" andrid:gravty="center* " android:text="Seleziona un dispositive" /> “ Lintefaccia utente & costtuita da una lista, alfinterno dolla quale vengono insert dispositvi associat o asco: abil, eda un bottone utile per awiare una nuova scan- sone radio. I secondo layout da utllzzare, selection list ‘emai reliza il madello per ali element che vengono dinamicamenteinserit nella lita “ et “ > Nel codice allegato alfarticalo trovate il progetto BluetoothDemo03", che mette in pratica quanto appena escrito, SAPERNE DI PIU SU BLUETOOTH ft /twhipeds ow Alt ht/en wipda val Ca INTENT PROPAGATI ‘SU ABILITAZIONE/ DISABILITAZIONE 41> ! ATTIVARE IL BLUETOOTH SENZA CONFERMA DELL'UTENTE Benché Fo venga saniglto ata documerasioe ufc rll AP Blototh i Andrid € ison un metedo che permet abit adapter ‘Huetooth utomatcament, ‘uando queso ¢dsabitat, senza che venga hist con fermaal utente Tale metodo enable) i lotothAdapter. Aralogament, faatatore Bluetoth pub essere sabato slenaosametee senza bisogna iconferma, hiamando i metodo date) Per acedee a ‘quest meta, over ichiedee ipemesso aogutio “nda. ermision BLUETOOTH ADM paz COME CONNETTERSI Una volta ottenute le coordinate di un altro dispositive Bluetooth, ¢ possibile connettersi ad esto attraverso i ‘metodo di luetoothDevice public BluetoothSocketcreateRfcommnSocketTaService Recordjava.uti.UUID wuid) throws javaie.OException Imetodo chiede in argomento un UID, con identifica tivo del servizio Bluetooth che si vuole sfruttar. Per fare Ln paralielo,lidentficativo richisto per le connessioni Bluetooth @ Fequivalente del numero di porta previsto nelle connessioni TCPAP. La tecnologia Bluetooth, di base, definisce un layer per stabilire connessoni senza fil tra piu disposi. Cosa poi corralungo le onde radio. “Uner.ayout aminsendroid="ntp//chemas andro. ae confaperes/anraic” ‘sndroiayou with" parent -
-99/108inut (cick to expand) the sit II problema da risolvere @ nascondere 0 visualizare le Fighe corrispondenti ai vari tipi delelemento input e _generare sopra di esse una nuova riga che, al click del mouse, le renda visibil invsibil.La variable irstRow tetra in. memoria la prima riga contenente una cella th con la stringa “input. Con jQuery & uno scherzo selezionare elemento corrispondente. Subito dopo, nella variable titleRow viene memorizzata una nuova riga, contenente un‘unica cella th, Manipoliamo ora la ‘nuova riga: Lariga tileRow viene assegnataalla dasse group einseita ‘ne! DOM, al disopra dela prima iga contenentelastringa input (frstRow: viene aggiunto pol event handle click. \Vengono, infne,selezionate le alte righe contenenti la stringa input siblings, che, sublto dopo, vengono nasco- ste (fodeOut(). Soffermiamoci sulfevent handler click), «essegnato alla riga memorizzata in tleRow. cick funtion Felse( sthis) _sibings(eontaine input) fadeln(rormal), ) (this) toggleclass( open) Al lick del mouse sulla ig, lo script verifica sla stessa appartine alla classe open. Ses, tutte le righe “sorele” Contenent la parola “input” vengono nascoste; al con- traro, se a riga non appartene alla classe open, lerighe ‘vengono visualizate in ultimo si aggiungelrimuove la classe con il metodo foggleClas). La rga & stata creata via JavaScript, per evtare di generare un elemento non utitzabile dai browser che non permettono Tesecuzione degli scripts ariga ha un utita solo per gi “user agents” che supportano JS, tanto vale crearla solo per questi Llti. Una volta creata, la riga diventa ciccabile: ad un primo click, il gruppo di rghe "input" viene visualizat. ‘Ad un altro cick viene nascosto, Una tabella i 25 righe, viene cosi ad essere compattata dinamicamente in 8 righe. €evidente rutiita di una tale soluzione in tabelle ‘costituite da centinaia di righe. Ci feria, anche se ali ‘esempi potrebbero proseguire con soluzion sempre pit ‘accessible interative. Al lettore il compito di provare ruove soluzion. Carlo Daniele ee -0 btp://wuwcioprogrammeit _Scarica l'App ufficiale for per il tuo Smarphone crea eosin ol coe 1000] ses di mano i consigli della 26 Doers sn tonne oihepos dati pete Open soe eSierea diet crepe duns rit Ene ankiea thirconauardorvacce dubs gece hee pe srr pc WEVA Ons fey eel nna crete Mb sbare sensed travuatairal eso pps od vet dstvac pets reenter Asenel poset pan not gc a ee “arg permet na range scree Pee epi ter compere reps une Inna ce cre hd pe dat opr sare dios gee opponrla dp pacts ena. poems fit eed cacao eee, ela dlearitcheorveumoxpomen Totoeapdeaseiwavoalscuend a Man Fig. Laschermatapinal i ebatrix Questo prodotto @ particolarmente interessante perché permette di gestre applicazioni web con una pratica e Potente console, nonché di creare applicazion web utilis zando alcuni template generici ma anche vere e propre _applicazoni complete in tut idettagl. INSTALLAZIONE DIWEBMATRIX Prima di poter instalare WebMatrix & necessario proce- dere alfnstallazione di Web Platform installer (in allan “installasone guidata Piattaforma Web 307, Potete instal lare dretiamente tale prodoto, scaricandolo dalla pagi a htaiwwaicrosof.com/weby/donnloads/platform, sD oppure potete aware Finstalazone di WebMatrx ‘rovate anche il percorso locale dela cartel in cui sono depositati ttt fle appartenenti alfapplicazione web, oy La soluzione Open Source di Microsoft per lo sviluppo web STUDIO aumy”’ LA RACCOLTA WEB. |i dea taceta we sono Sti complete coprno ui ampla ‘gunna d appiazen mato richest CS, frum, wi, log, ‘aco st eonmerce cosa Nor ermal nt a rt sono: WordPress, Orchard, napCommerce, Dott, Joo, Umbra, Kent, Saber, BlgEacine, VA, PB...Topi per ote een caret Gama: Mato De Geto un appssio- tod informatica 2360 ga, ‘na sopratut programm: ‘ve. ie aueat in ingegneria informatica al Univers Padova stat nominato “Wrosoft VP pera categoria sual asic autre dar ib (compres "stl Basic 2010 spiegatoamia nena’ appen ulate Edn FAG), artical vide calabora con a oommunity tecnica Dothetork. 1 Pubesereontatatoallind- raz maioadeghetat B30 / ciugno 2012 £89 selezionato, Ckchiamo ancora una volta il pusante Continua eattenciamo che venga terminatalafase di pub- blicazione dei fle delfapplcazione web. processo abba- stanza lungo, dato che vengono pubblcate anche nume- rose libre di supporta. Da quello che abbiamo vst, la ceazione di un sto da un modelo fornito da WebMatrix € la sua pubblicazione nel nostro spazio web sono estre- ‘mamente semplic, ma non @ detto che le cose possano andere sempre perl verso gusto. Vediamo perché. fi: Feta dig pra nfguason depron abl atone remit peristoweb PROBLEMI CONIL SERVIZIO DIHOSTING Prendendo sempre come esempio la nostra appli- ‘azione “Pasticceria, ci sono alcune cose che posso- no non funzionate. Per prima cosa, potrebbe essere rnecessarioabiltareil supporto al NET Framework 4.0, altrimenti anche Il sito pid semplice, svluppato con tale versione, non funzionerd. Per esempio un sito ‘ploadato in Register.it hala versione 20, di default ed quinci necessario modificare tale impostazione dal pannello di controllo. Un altro problema con Register. ite i fatto che non esiste la possibltd di indicare una “priors” su quale pagina debba essere visualizata per prima: la priorita& predefinita e non modificabile. Inoltre, nelfelenco dei documenti da aprire quando sciviamo Finditizo del sito (per esempio httpi/waw. Fig. La compat pubblicazionevisualzataafinetest omesitoit, senza specificare la pagina) non sono previste le pagine con estensione shtml, come quelle della nostra applicazione “Pasticceria™. Come possiamo risolvere, quindi? La cosa migliore da fare @ creare una pagina Default.htm con uno script JavaScript n grado di reindirizzare_II browser alla pagina principale del nostro sito, Il codice da utilizar é il seguente: chemi ‘nein dere) eat cine care lindas dela pagina ce si vl aggngere “rere e902 second = = “hest> coe es scentens