Få HTML5 til å jobbe på et enkelt nettsted

Jeg skrev nylig om 10 nye HTML5-koder som folk burde vite om. Et vanlig og veldig rettferdig spørsmål om dette emnet er, "hvordan er kompatibiliteten?" Jeg satte noen av kodene på prøve, og gjorde noen få fornuftige konverteringer til HTML5 på nettstedet som jeg nylig flyttet til statisk HTML. Selv om jeg ikke testet et stort antall funksjoner, er resultatene positive.

HTML5-utviklerens kokebok

La meg starte med å forklare bakgrunnen for dette prosjektet. En del av motivasjonen min for CMS-til-statisk-HTML-konvertering for en stund siden var å gjøre det lettere å eksperimentere med HTML5. For ikke lenge siden tilbød forleggeren av The HTML5 Developer's Cookbook (av Chuck Hudson og Tom Leadbetter) å sende meg en kopi av boken, og jeg godtok det. ( Ansvarsfraskrivelse: Jeg fikk boken gratis av utgiveren med det formål å gjennomgå den. )

Denne boken er en helt fantastisk måte for noen som allerede har kunnskap om HTML (men ikke nødvendigvis er en ekspert) å hente HTML5-teknologier, inkludert CSS3 og nye tillegg til HTML DOM som JavaScript kan få tilgang til. Det var lett å lese, forfatterne respekterte tiden min (dvs. at de ikke slo boka ned med meningsløse detaljer), og "kokebok" -formatet gjør det veldig enkelt å lære oppgavene som er tilgjengelig og ikke tvinge deg til å grave gjennom ting for å finne nugget i en høystakk.

Hvis du har jobbet med HTML tidligere og ønsker å bli oppdatert, anbefaler jeg denne boken. Etter at jeg hadde lest den, ble jeg virkelig opptatt av HTML5, og fant ut at jeg gjorde mye sjelesøk om min nåværende teknologimiks i prosessen; faktisk, Jeg bruker de neste månedene på å gjøre mye mer arbeid med ikke-NET-teknologier.

Testingen av HTML5-tagger

Jeg bestemte meg for å starte enkelt, siden nettstedet jeg jobber med er veldig enkelt (det er ingen interaktivitet, multimedia eller til og med JavaScript på det) - alt jeg ønsket å gjøre var å bringe det oppdatert ved å bruke,,,, og tagger. Det var lett for meg å bytte ut kodene med de nye semantiske kodene der det var passende, fordi HTML-en min allerede var gyldig HTML5-kode og CSS var tag-agnostisk. Dette tok meg bare noen få øyeblikk (maler fra Microsoft Expression Web gjør dette enkelt). Jeg åpnet det i IE 9 (hvis det kommer til å se galt ut, er IE der det vil være galt), og det så bra ut som forventet.

Så gikk jeg for den mye tøffere testen: IE 6. En av favorittfunksjonene mine i Expression Web er SuperPreview, som lar deg se hvordan en side ser ut i forskjellige nettlesere side om side. Selv om Microsoft dessverre har tillatt støtten for Firefox å falle sårt bak og aldri så ut til å legge til Chrome, Safari eller Opera, er det i det minste avgjørende å kunne se de forskjellige IE-versjonene ved siden av hverandre. Resultatene var forferdelig ( figur A ). Figur A

Opprinnelige resultater med IE 9 til venstre og IE 6 på høyre side. (Klikk på bildet for å forstørre.)
Det er ikke å plassere og-elementene på rett sted i det hele tatt, så hva skal jeg gjøre? Noe jeg husket fra boka var Modernizr-biblioteket. Jeg bestemte meg for å gi den en virvel, og jeg ble positivt overrasket. Nedlastingsdelen deres lar deg tilpasse en kopi av biblioteket for å være så minimalt som mulig. Jeg valgte en uten frills-versjon, uten å slå på noe, og fulgte instruksjonene for å legge den til på nettstedet. Og ... voila! Det fine du ser i figur B er resultatet. Den eneste synlige forskjellen mellom de to nettstedene er at jeg har IE 6-oppdagelseskoden for å sette opp det grusomme "go upgrade" -banneret. Figur B

Med et bare-ben Modernizr-skript lagt til, er IE 9 (venstre) og IE 6 (til høyre) nesten identiske. (Klikk på bildet for å forstørre.)

Dette er neppe en avgjørende test - det er tross alt statisk HTML. I løpet av de neste månedene skal jeg gjøre mye mer arbeid som er mye mer interaktivt (hint: Ruby on Rails, Haml, Sass, kanskje til og med CoffeeScript), og jeg vil bruke HTML5 til det. Følg med!

J.Ja

Hold dine tekniske ferdigheter oppdatert ved å registrere deg på TechRepublics gratis nyhetsbrev om Software Engineer, levert hver tirsdag.

Flere HTML5-ressurser på TechRepublic

  • Dann en læringsplan for en HTML5-fremtid
  • Modernizr JavaScript-bibliotek innvarsler neste generasjons webdesign
  • Få kodingsråd med HTML5
  • Fem online verktøy som forenkler HTML5-koding
  • Hvorfor HTML5 gjør det å vanskeliggjøre innfødte applikasjoner
  • HTML5 vs. Flash: Debattens tilstand
  • Hvordan erstatte Flash og Silverlight med HTML5
  • Avstemning: Vil IE10 endelig bryte HTML5-loggen?
  • Avstemning: Lærer du HTML5?

© Copyright 2021 | pepebotifarra.com