Eddai! sembra un ossimoro, no? però devo dire che funzionano benino una volta capite.. ne parlavo quanche tempo fa in un post.. ovvero il fatto che le tabelle/griglie sono superate dall’html3.. ma ce le troviamo riapparire nell’html5.. come mai? perchè hanno un significato semantico.
Alcune cose non avrebbero lo stesso significato se non fossero rappresentate secondo una tabella. E questa non è una semplice scelta stilistica da racchiudere nei fogli di stile, ma è SIGNIFICATO e come tale deve essere nell’html, in modo che se la pagina viene vista solo come CONTENUTI, in ogni modo il messaggio viene trasmesso..
ovvero?!?!?!esempio in un comunissimo questionario Vero e FAlso o delle domande a risp multipla. Se i radio e check box, ovvero i quadratini o rotondini dove potete clikkare e spuntare la risposta non sono in qualche modo “associati” alla domanda..
iframe 600pxX480px
[iframe src=”http://carnevali.lilithstudio.it/jq-mobile/grid01.html” width=”600″ height=”480″]
come si fa?!?!
Se nel fare una pagina responsive.. poi a prima vista non riesco più a ricondurre quale risposte appartengono a quale domande…CAvolo!! Chissenefrega che è responsive.. non è più utilizzabile! Quindi veniamo alla pratica..
Da una settimana sto litigando con jquerymobile.. rimando ad un altro post le mie prime impressioni HARGGGHH!!!
Quindi se vogliamo una griglia responsive di due colonne sarà così
<div>
<div><div>a. Lucia invita Marco e suo figlio a una festa di compleanno</div></div>
<div><div><fieldset data-role=”controlgroup” data-type=”horizontal”>
<input type=”radio” name=”radio-choice-h-2″ id=”radio-choice-h-2a” >
<label for=”radio-choice-h-2a”>Vero</label>
<input type=”radio” name=”radio-choice-h-2″ id=”radio-choice-h-2b” >
<label for=”radio-choice-h-2b”>Falso</label>
</fieldset></div></div>
</div>
<div>
<div><div>a. Lucia invita Marco e suo figlio a una festa di compleanno</div></div>
<div><div><fieldset data-role=”controlgroup” data-type=”horizontal”>
<input type=”radio” name=”radio-choice-h-2″ id=”radio-choice-h-2a” >
<label for=”radio-choice-h-2a”>Vero</label>
<input type=”radio” name=”radio-choice-h-2″ id=”radio-choice-h-2b” >
<label for=”radio-choice-h-2b”>Falso</label>
</fieldset></div></div>
</div>
Ma in questo modo .. la tabella c’è e si vede!
a voi la scelta!
iframe 300pxX450px
[iframe src=”http://carnevali.lilithstudio.it/jq-mobile/grid01.html” width=”300″ height=”480″]
Category Archives: html5
Pubblicato Catalogo sfogliabile per tablet
Finalmente vedo pubblicata nel web una realizzazione tecnica TUTTA mia! in HTML5, CSS3 e JS
CATALOGO DIGITALE IDA
è ottimizzata per la visualizzazione su tablet e desktop, è responsive, ha una navigazione multipla:
– menu, – sfogliata touch, -frecce della tastiera, -al click
Non avete idea del sistema di fallback necessario per gestire le trasformazioni 3d dei CSS3 che non sono ben supportate..
Ovvero.. Firefox una pacchia, Safari bene, ma comincia a distanziarsi da Chrome e ti tocca fare tutto due volte.. e poi IE..
macchevvelodico affare!
Su IE dove non c’è possibilità di spostare nulla in 3d e qundi bisogna trasformare tutto in immagini scorribili.
hehehe.
Vi do un assaggio usando un iframe:
(attenzione, la navigazione è limitata ai primi 800px)
[iframe src=”http://www.edizionilalinea.it/ida/index.html” width=”600″ height=”800″]
Tabelle o non Tabelle?
Maccavolo.. uno ha passato diversi anni a stabellare decine di siti web fatti in html1 per passare a qualcosa che assomigli al 4.. e poi..
ti esce l’html5 e ti dicono.. <<AH, puoi di nuovo usare le tabelle!>>
SBAGLIATO!
vero che hanno reintrodotto le tabelle nell’html e c’è anche un nuovo corrispettivo nei CSS3..
ma come ricordano su STAckOverflow..
Simple rule – Use tables for tabular data, use other elements for designing layout.
Semplice regola – Utilizzare le tabelle per i dati tabulari, utilizzare altri elementi per la progettazione di layout.
Cioè ricordati sempre che l’html è per il contenuto, il CSS è per l’aspetto..
quindi se è per una questione estetica, non osare infilare delle tabelle nell’html, ma usa display: table;
table-cell,
table-row... etc
se proprio vuoi un layout preciso, marziale ed incolonnato…
se invece ti scopri pensare alle tabelle perchè hai proprio dei dati che non avrebbero senso se mostrati fuori da una tabella, allora, quella ha un significato diciamo contenutistico..
e quindi hai il via libera di metterlo nell’html..
Ok, l’ho fatto 😉
e mi son lavata la coscenza scrivendo questo post!
e quindi anche qui ripassino:
<table> <tr> <th>tabellina del 2</th> <th>tabellina del 3</th> </tr> <tr> <td>4</td> <td>6</td> </tr> <tr> <td>8</td> <td>9</td> </tr> </table>
Così:
tabellina del 2 | tabellina del 3 |
---|---|
4 | 6 |
8 | 9 |
i Form o "moduli / questionari" in italiano?
Ma come si traduce? mah..
Comunque belli i nuovi input che prendono i form nell’html5..
peccato che non funzioanino proprio ovunque..
HTML5 New Input Types
sarebbero questi, i diversi tipi ti input che gli potete dare:
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
Io sto provando NUMBER, che diciamo dovrebbe essere quello più scontato e facilino, ma purtoppo il mio browser firefox 24 non me lo sta proprio calcolando, Safari 6 e Chrome 32 invece sì, nel senso che fanno scrivere solo numeri e non lettere e che ti visualizzano due bottoncini per aggiungere e togliere unità, ma non prendono in considerazione i valori di max e min che gli ho dato..
<< Use the following attributes to specify restrictions:
- max – specifies the maximum value allowed
- min – specifies the minimum value allowed
- step – specifies the legal number intervals
- value – Specifies the default value >>
dai.. magari la prossima settimana.. hahaha 😛
Ah.. vi interessano gli attributi? tiè:
Attribute | Purpose | Notes |
---|---|---|
autofocus |
Focuses the input on the element when the page is loaded. | autofocus can be applied to input, select, textarea, and button. |
placeholder |
Gives the user a hint about what sort of data they should enter. | The placeholder value is displayed in light text until the element gets focus and the user enters some data. It can be specified on input and textarea. |
form |
Specifies one or more forms to which the input element belongs. | By using the form attribute, the input elements can be placed anywhere on the page, not just within the form element. Also, a single input element can be associated with more than one form. |
required |
A boolean attribute that means the element is required. | The required attribute is helpful for doing browser-based validation without using custom JavaScript. |
autocomplete |
For specifying that a field should not autocomplete or be pre-filled by the browser based on a user’s past entries. | The autocomplete attribute for fields like a credit card number or one-time password, which you don’t want autocomplete. By default, autocomplete is in the on state, so if you want to disable it, set it to off . |
pattern |
For validating an element’s value against a regular expression. | When using a pattern , you should also specify a title value to give the user a description of the pattern that’s expected. |
dirname |
For submitting the directionality of the control with the form. | For example, if the user entered text data with right-to-left directionality and the input element contained the dirname attribute, then an indication of the right-to-left directionality would be submitted along with the input value. |
novalidate |
For disabling form submission validation when specified on a form element. | |
formaction |
For overriding the action attribute on the form element. | This attribute is supported on input and button elements. |
formenctype |
For overriding the enctype attribute on the form element. | This attribute is supported on input and button elements. |
formmethod |
For overriding the method attribute on the form element. | This attribute is supported on input and button elements. |
formnovalidate |
For overriding the novalidate attribute on the form element. | This attribute is supported on input and button elements. |
formtarget |
For overriding the target attribute on the form element. | This attribute is supported on input and button elements. |
provenienti da qua: http://www.html5rocks.com/en/tutorials/forms/html5forms/
Dai, tanto che ci siamo spolveriamo anche le diverse tipologie,
ovvero, potete avere :
– campo di testo: text
– spunta tonda: radio
– spunta quadrata: checkbox
La sintassi del tutto verrà così.. non molto diversa da quello che si è abituati:
<div>A testo n. <input type=”number” size=”1″ name=”quiz1″ min=”1″ max=”6″ id=”A” >
<div>B testo n. <input type=”number” size=”1″ name=”quiz1″ min=”1″ max=”6″ id=”B” >
<div>C testo n. <input type=”number” size=”1″ name=”quiz1″ min=”1″ max=”6″ id=”C” value=”1″ >
Poi potreste avere il dilemma:
ma posso spuntare solo una, due, tre scelte, o tutte,… posso settare questa cosa?
bhe, W3Schools dice così.. ma a me risulta NON funzioni sempre… http://www.w3schools.com/html/html5_form_input_types.asp
Radio Buttons
<input type=”radio”> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices:
<input type=”radio” name=”sex” value=”male”>Male<br>
<input type=”radio” name=”sex” value=”female”>Female
</form>
How the HTML code above looks in a browser:
Checkboxes
<input type=”checkbox”> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices.
<input type=”checkbox” name=”vehicle” value=”Bike”>I have a bike<br>
<input type=”checkbox” name=”vehicle” value=”Car”>I have a car
</form>
How the HTML code above looks in a browser:
tag audio
E’ con piacere che confermo che funziona!!!
<audio controls>
<source src=”horse.ogg” type=”audio/ogg”>
<source src=”horse.mp3″ type=”audio/mpeg”>
Your browser does not support the audio element.
</audio>
Anche se con qualche remora:
Browser | MP3 | Wav | Ogg |
Internet Explorer 9 | Sì | NO | NO |
Firefox 4.0 | NO | Sì | Sì |
Google Chrome 6 | Sì | Sì | Sì |
Apple Safari 5 | Sì | Sì | NO |
Opera 10.6 | NO | Sì | Sì |
Bhè, qua è più aggiornato:
http://caniuse.com/#feat=audio
*Usage stats: | Global |
---|---|
Support: | 82.32% |
Partial support: | 0.03% |
Total: | 82.35% |
Il problema è che è supportato, ma in modi diversi.
Per sempio mi son trovata che Firefox 24, che è il mio browser preferito, non supporta l’mp3, cosa sana e giusta;
mentre IE al contrario non supporta gli ogg; quindi in ogni caso bisogna mettere pèer forza una doppia fonte;
Gli attributi di source possono comunque essere al massimo 3: wav, mp3 e ogg
Dei tre formati, il primo è non compresso e senzametadati e pure propietario.. quindi il peggio del peggio per il web;
i secondo è compresso e con una gestione dei metadati che fa schifo, rattoppata di anno in anno;
il terzo.. ovvero l’ogg , che è supportato e sviluppato dalla Xiph foundation, direi che è il più auspicabile dei tre 😉
Che a mio parere sono dei Grandi… finanziano Cdparanoia, icecast, vorbis, .. ed un sacco di media streaming, codec e formati OPEN!
Vediamo i problemi noti del tag audio html5… intanto..
Problemi noti ad ottobre 2013:
- Audio played from the element in iOS always plays in a full screen player.
- Playback rate not supported on the stock android browser
- Only one Audio file can be played at one time in iOS so forces you to use sprites for multiple audios
- Audio in iOS can not be auto played. It even starts downloading after a user triggered event
- Volume is read-only on iOS
hum.. adesso che cercherò di farlo entrare a mazzate in una web view dentro android scommetto che ne troverò altri 😉
poi mi metterò anche a litigare con IOS.. rimando al momento..
vi faccio un report più tardi..