by Emanuele B.19. maggio 2013 17:32Ieri si è svolto con un discreto successo l'evento "Windows 8 e Windows Phone: tutto quello che avreste voluto sapere sull'accesso ai dati" a cui ho preso parte anche io come membro dello staff della community DotNetToscana.
Nell'attesa che tutti facciamo l'upload del proprio materiale sul sito, io condivido le slide che ho usato per parlare di SQLite.
Una breve overview che mette a disposizione questo database embedded, con un occhio di riguardo a Windows 8, ovviamente. :)
A breve anche il video del mio intervento.
Approfitto per ringraziare chi è venuto all'evento e gli altri membri dello staff.
8f708dd8-5632-424b-a092-81a0c1ff3640|0|.0|96d5b379-7e1d-4dac-a6ba-1e50db561b04
Tags: win8, sqlite
Windows 8
by Emanuele B.21. aprile 2013 10:08In questo breve articolo farò vedere come è possibile creare un layout responsive in meno di 10 minuti.
So che può sembrare strano e un obiettivo un pò ambizioso, ma posso assicurare che è possibile.
Negli ultimi mesi sono usciti molti framework css e javascript che semplificano la vita agli sviluppatori web per realizzare layout e soprattutto per gestire le diverse risoluzioni dei vari device su cui può essere visualizzato il sito internet in questione. Possiamo andare da uno schermo full HD di un pc a uno smartphone o un display retina.
Uno di questi framework si chiama Foundation. Potete trovare tutte le features e la documentazione a questo link http://foundation.zurb.com/
Di solito io utilizzo Foundation perchè è molto semplice da usare e per la mia esperienza fino ad adesso mi ha sempre coperto tutte le esigenze.
Il risultato finale di questo articolo sarà simile a questo: link demo.
Per prima cosa scaricate l'ultima versione dal sito ufficiale e decomprimete lo zip in una cartella a vostro piacimento.
Create in questa cartella un file html e nominatelo con un nome a vostro piacimento.
Apritelo con un editor di testo (io consiglio Notepad++) e iniziamo a mettere nel tag head della pagina html le reference agli script javascript e ai file css.
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Foundation Demo</title>
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/custom.modernizr.js"></script>
</head>
Per prima cosa bisogna capire come funziona Foundation per quanto riguarda il disegno delle pagine.
Foundation per definire la larghezza di ogni sezione usa 12 colonne con una lunghezza complessima di 1000px. In questo modo se scriviamo il codice qui sotto, verrà renderizzata un div largo 1000px.
<div class="row">
<div class="large-12 columns">
</div>
</div>
Se invece scriviamo il codice qua sotto, viene renderizzata un div largo 1000px con al suo interno due div larghi il 50% della larghezza del div contenitore.
<div class="row">
<div class="large-12 columns">
<div class="large-6 columns">
</div>
<div class="large-6 columns">
</div>
</div>
</div>
Come si può capire da questo esempio i div possono essere annidati l'uno dentro l'altro, per poter creare qualsiasi tipo di layout.
Il codice subito sotto è stato semplificato per far capire come creare un layout simile a quello della demo all'inizio dell'articolo.
<div class="row">
<div class="large-12 columns">
<h2>Header Twelve Columns</h2>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<div class="row">
<div class="large-7 columns">
<h3>Body Seven Columns</h3>
</div>
<div class="large-5 columns">
<h3>Sidebar Five Columns</h3>
</div>
</div>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<h2>Footer Twelve Columns</h2>
</div>
</div>
A questo punto non resta altro che aggiungere i contenuti e provare a ridimensionare la finestra del vostro browser preferito. Foundation è compatibile con tutti i browser anche più datati come IE7 e IE8. Ovviamente funziona benissimo con tutti i browser che supportano Html5 e Css3.
Se volete partire a creare layout responsive vi consiglio questo framework e di guardare il link della demo che avevo messo all'inizio dell'articolo oppure scaricate l'esempio a questo link.
