L’utilizzo di video tratti da youtube è sempre più frequente, purtoppo il codice fornito automaticamente dal sito non è completamente w3c valido. Analizziamo il codice suggerito dal sito


<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/VsS4Tk-lrxo&hl=it&fs=1“>
</param>
<param name=”allowFullScreen” value=”true”>
</param>
<embed src=”http://www.youtube.com/v/VsS4Tk-lrxo&hl=it&fs=1″ type=”application/x-shockwave-flash” allowfullscreen=”true” width=”425″ height=”344″>
</embed>
</object>


Youtube fa uso del tag <object> con annidati alcuni <param>, e ed un <embed>. Purtroppo <embed> non è un tag valido per w3c.
Il corretto uso per l’embedding di video da youtube ed swf in generale consiste nel solo uso del tag object facendo attenzione a gestire gli url per il solito problema dei parametri:


<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/VsS4Tk-lrxo&amp;hl=it&amp;fs=1” width=”320″ height=”240″>
<param name=”movie” value=”http://www.youtube.com/v/ynL8BCXih8U&#038;hl=it&#038;fs=1″ />
<param name=”FlashVars” value=”playerMode=embedded” />
<param name=”wmode” value=”transparent” />
</object>


In rete c’è più di una soluzione per combinare GoogleMap ed Asp.Net ma spesso sono a pagamento oppure portano in dote fastidiose pubblicità. Ho quindi deciso di cominciare a scrivere un controllo tutto mio, il quale permette di sfruttare solo pochi aspetti del servizio in questione ma che spero di far evolvere nel tempo libero.

L’utilizzo del controllo è molto semplice, dopo averlo registrato è possible inserirlo nella pagina con il seguente codice di esempio.

<gmnet:map ID="mymap" runat="server" zoom="7" centerlat="40.6133"
centerlon="14.2525" />


L’attributo zoom rappresenta l’ingradimento della mappa e può variare da 0(massimo dettaglio ) a 12(Visione di tutto il globo), mentre centerlat e centerlon sono le coordinate geografiche del punto sul quale sarà centrata la mappa. Altri attributi possibili sono mapControl, che definisce i controlli di cui dotare la mappa, ed height e width che rappresentano la grandezza.
Le modifiche agli attributi possono essere fatte anche da codice come segue.


mymap.setSize(400,400);
mymap.setMapControls(map.GSmallZoomControl);

Nello spezzone appena mostrato viene settata la grandezza della mappa a 400×400 pixel con il metodo setSize, successivamente vengono inseriti i controlli SmallZoom, ovvero le frecce di movimento sulla mappa ed i tasti di zoom-in e zoom-out, tutti i possibili valori da passare a setMapControls sono definiti come membri statici nella classe map con nomi del tipo GxxxxxxxControl.

Delle tante funzionalità di GoogleMap i Marker sono la prima funzionalità complessa di lavoro sulla mappa implementata da questo controllo. Per creare un marker è necessario passare al costruttore le coordinate geografice della posizione in cui piazzarlo e una stringa che sarà visualizzata al click su di esso come in figura.


new Marker(14.4032, 40.8011, "Un punto nel Golfo")


Mentre per inserire dei marker è necessario creare un’ArrayList ed e passarlo al metodo setMarker. E’ quindi facile immaginare come sia semplice piazzare marker in base a dati letti da un database.

ArrayList markers = new ArrayList();
markers.Add(new Marker(14.2032, 40.9021, "A place..."));
markers.Add(new Marker(14.4032, 40.8011, "Another Place!"));
mymap.setMarkers(markers);


Spero in futuro di aggiungere buona parte delle funzionalità di GoogleMap, il prossimo step sarà quello di dare la posibilità di usare icone diverse per ogni marker e disegnare qualche polilinea. Per chi volesse divertirsi con le primisissime righe di codice scritte puo effettuarne qui il download.

Da quanche giorno nella sezione arts sono esposte le immagini caricate nel mio spazio flickr, più di una persona mi ha chiesto come faccia ad avere quel badge e contemporaneamente a mantenere la pagina valida per gli standard W3C.
Basta creare un badge HTML dalla pagina http://www.flickr.com/badge.gne ed estrarre il codice javascript, il quale sarà simile al seguente:

<script type="text/javascript"src="http://www.flickr.com/badge_code_v2.gne?...
</script>

Esso dipende dalle scelte fatte durante la creazione ma è semplice distinguere alcuni parametri. Ad esempio count è il numero di immagini da visualizzare, display indica se si vogliono avere solo le ultime immagini inserite (valore “latest”) o scelte casualmente (valore “random”) e cosi’ via. Per generare la stringa adatta alle proprie esigenze è bene provare le varie opzioni del wizard offerto da flickr ed infine se prorio non si è contenti del risultato andare a modificare la stringa manualmente.
In questo modo abbiamo cancellato lo stile creato in automatico, il risultato sarà qualcosa di simile alle quattro immagini disposte senza spaziatura nella figura.

Possiamo creare uno stile personalizzato per la disposizione nel seguente modo

<div id="myflickr">
<script type="text/javascript"
src="http://www.flickr.com/badge_code_v2.gne?…"></script>
</div>

ed aggiungere al css della pagina le definizioni per il box myflick e le immagini in esso contenute.

#myflickr {
background: #CCCCCC;
padding:10px;
}


#myflickr img {
float:left;
border-color:#666666;
padding:4px;
}

Adesso avete un box con sfondo grigio ed immagini distanziate di 4 pixel con bordo. In questo modo si sfruttano direttamente le immagini esposte da flickr, un vero tocco d’interoperabilità ma che ci lega ed un sistema gestito da yahoo.

ASP.NET è una delle tecnologie più avanzate per lo sviluppo web, a livello di programmazione
l’innovazione introdotta in questo campo è la gestione event-driven. La possibilità di usare controlli messi a disposizione dal framework ha un livello di astrazione maggiore rispetto agli altri linguaggi di scripting come php o asp ed è sicuramente più comoda.
In questo articolo vedremo come creare dei Web User Control personalizzati da poter usare in tutti gli aspx che vogliamo.
Read the rest of this entry »