[JS/HTML] Telefoonnummers in HTML

[xilent_xage]

Hoi,

Ik wil graag klikbare telefoonnummers op mijn website plaatsen. Nou heb ik me al een beetje ingelezen, en de discussie tuusen tel:/phoneto: gevolgd. Als standardista wil ik met tel: gaan werken. Dit werkt opzich prima (android, iphone, geen skype) maar ik loop tegen een kleine lelijkheid aan: Als de browser niks met de link kan verschijnt er een lelijke foutmelding dat de browser het protocol niet ondersteunt (firefox) of zelfs een lelijke "de pagina kan niet worden weergegeven" (ie).

Jammer, want uiteraard gebruikt 99% van mijn bezoekers een gewone browser. op deze manier wordt deze techniek nooit gebruikt.

Ik zou dus graag met javascript eerst testen of de browser iets met de link kan, en zoniet deze verwijderen (of evt andersom). Iemand enig idee of/hoe dit kan?

Alvast bedankt!

[RaZ]

Dat komt omdat je tegen de browser zegt, pak een ander protocol.. Over het algemeen kunnen browsers niet veel meer dan http en ftp.

Je zou kunnen kijken met js of er een applicatie is geinstalleerd, maar dat zegt nog niets over de koppeling naar aan ander protocol.

Misschien dat je eens moet zoeken richting MicroFormats, met name de hcard. Met classes geef je dan aan wat er in staat. Lijkt me juist dat mobiele browsers daar mee werken, gezien die microformats daarvoor zijn bedacht.

[xilent_xage]

Ik ben bekend met microformats, maar vind het nog te complex om ze in mn CMS te stoppen. Vooral omdat gebruikers de data soms behoorlijk verspreid over een artikel verstoppen. Iets als:

"Welkom op de site van bedrijf A van mijnheer Jansen. Wij werken vaak samen met mijnheer Pietersen en verkopen product 1, 2 en 3. Wij zijn bereikbaar onder nummer xxx of via bedrijf B van mijnheer Pietsersen."

Doordat de gegevens van de gebruikers zo door elkaar heenlopen is het lastig om mooie HTML te parsen, en wordt ook de interface van de RTE erg lastig. Overigens bouw ik microformats wel hard in de HTML-templates op bijv de contactpagina.

Mocht iemand hier een goed voorbeeld/idee hebben om microformats in het CMS te stoppen dan hou ik me aanbevolen, maar voorlopig zet ik mijn kaarten op de tel-link.

[xilent_xage]

RaZ schreef op dinsdag 21 december 2010 @ 19:27:
Dat komt omdat je tegen de browser zegt, pak een ander protocol.. Over het algemeen kunnen browsers niet veel meer dan http en ftp.

Je zou kunnen kijken met js of er een applicatie is geinstalleerd, maar dat zegt nog niets over de koppeling naar aan ander protocol.

Is het met javascript niet mogelijk om te testen of de browser iets met het protocol kan?

[Japius]

Waarom voeg je niet aan alle telefoonnummers een class toe, die je daarna met javascript parset en voorziet van het juiste protocol? Je kunt dan de useragent afvangen en vervolgens het best passende protocol erbij zoeken.

[xilent_xage]

Japius schreef op dinsdag 21 december 2010 @ 19:40:
Waarom voeg je niet aan alle telefoonnummers een class toe, die je daarna met javascript parset en voorziet van het juiste protocol? Je kunt dan de useragent afvangen en vervolgens het best passende protocol erbij zoeken.

Zou kunnen, maar ik ben niet zo'n fan van browserdetectie. Bovendien kun je aan de useragent niet zien of het protocol wordt ondersteund. Firefox kan prima het protocol ondersteunen als er een 3rd party app is geinstalleerd.

Ik lees net dat het niet mogelijk is om de ondersteunde protocollen te controleren met javascript.

[X-Lars]

Ook niet ideaal, maar wellicht het overwegen waard: gebruik media queries in CSS om deze links in niet-mobile browsers visueel als gewone tekst weer te geven.

[Bosmonster]

iOS maakt van telefoonnummers automatisch een bel-link als je het goede internationale format aanhoudt en het iOS-device het ondersteunt.

Android is helaas niet zo intelligent.

Edit: Schijnbaar kan Android dit ook, maar maakt deze er alleen geen link van. Je kunt nog steeds een telefoonnummer-format aanklikken en hem laten bellen.

M.a.w. maak er zelf geen link van, maar laat het device het afhandelen

De tel:-links zou ik alleen gebruiken bij mobiele sites, waarvan je dus al weet welke devices het gaan zien en welke niet.

[ Voor 79% gewijzigd door Bosmonster op 22-12-2010 12:24 ]

[RobIII]

Bosmonster schreef op woensdag 22 december 2010 @ 12:21:
iOS maakt van telefoonnummers automatisch een bel-link als je het goede internationale format aanhoudt

Mwah, mijn ervaring is dat iOS zo'n beetje alles in een link omturnt wat in de verste verte op een telefoonnummer lijkt. Ik heb zelfs IP adressen "gelinkt" gezien waardoor een klik erop (waar ik verwachtte naar onze monitoring te gaan) resulteerde in 't bellen van een nummer in verweggistan
Maar goed, dat komt natuurlijk ook omdat er (althans, voor eindgebruikers) een shitload aan mogelijkheden zijn om een nummer te noteren en iedereen 't anders doet...

0031 123 456 789
[phone]
(0123) 456 - 789
0123-456 789
456 789
etc. etc.

Echt standaardisatie is er niet (even los van 't feit dat je natuurlijk haakjes, streepjes en dat soort opsmuk gewoon kunt negeren in een nummer, behalve weer een plus ). Er zijn wel standaarden maar wereldwijd gezien geeft iedereen er z'n eigen draai aan of doet helemaal z'n eigen ding.

[ Voor 26% gewijzigd door RobIII op 22-12-2010 12:33 ]

[X-Lars]

Had het zojuist nog: een rekeningnummer (incl. punten) werd als telefoonnummer gezien in OS X.

Oftewel, het zou mijn voorkeur genieten om zelf aan te kunnen geven wat bepaalde content voorstelt (daarom bestaat er ook zoiets als markup).

[NMe]

xilent_xage schreef op dinsdag 21 december 2010 @ 19:44:
[...]

Zou kunnen, maar ik ben niet zo'n fan van browserdetectie. Bovendien kun je aan de useragent niet zien of het protocol wordt ondersteund. Firefox kan prima het protocol ondersteunen als er een 3rd party app is geinstalleerd.

Ik lees net dat het niet mogelijk is om de ondersteunde protocollen te controleren met javascript.

Klopt, en daarom zou je dus toch naar de user agent "moeten" kijken. Daarbij zou ik het inderdaad zoals al voorgesteld andersom doen dan jij suggereert in je startpost: beginnen met normale tekst zonder link en je link middels javascript aanpassen als de user agent daar support voor heeft. Graceful degradation ftw.

[X-Lars]

NMe schreef op woensdag 22 december 2010 @ 12:40:
[...]

Klopt, en daarom zou je dus toch naar de user agent "moeten" kijken. Daarbij zou ik het inderdaad zoals al voorgesteld andersom doen dan jij suggereert in je startpost: beginnen met normale tekst zonder link en je link middels javascript aanpassen als de user agent daar support voor heeft. Graceful degradation ftw.

Dat is progressive enhancement wat je nu beschrijft (normale tekst enhancen). In de startpost staat graceful degradation (met javascript downgraden).

[Bosmonster]

Daar is al een topic voor.

Het grote "Lach hier NMe uit"-topic!

[NMe]

offtopic:
Doe mij 's niet vastpinnen op mijn woorden een dagje na een bedrijfsfeestje.

[X-Lars]

offtopic:
Was je het lijdend voorwerp van progressive degradation?

[CrankyGamerOG]

lol pwnd