HTML5 og CSS3 For Dummies Cheat Sheet - dummies

Av David Karlins, Judith Muhr

HTML og CSS er de grunnleggende byggeblokkene til nettsteder. Adventen til HTML5 og CSS3 representerer et dynamisk og kraftig evolusjonsstadium i utviklingen av webdesign. Maksimering av potensialet i HTML5 og CSS3 gjør det mulig å bruke styling og formatering, presentere lyd og video, og opprette animasjon og interaktivitet på måter som aldri har vært mulig uten å stryke sammen plugins, bildefiler og JavaScript.

Top Free Online Resources for HTML5 og CSS3

Du har hørt det gamle ordtaket, "ytringsfrihet er ikke ledig. "Det gjelder også webdesign, med mindre du taper inn de mest nyttige gratis ressursene. Her er en liste over de beste gratis ressursene du kan finne online for HTML5 og CSS3:

• Gratis web hosting er tilgjengelig fra 000webhost. com. Deres gratis nettsteder er gratis, støtter server-side scripting, og har en rimelig pålitelig oppetidspost.

• Du trenger bøker (som HTML5 og CSS3 For Dummies - for å ta et tilfeldig eksempel) for å gi en oversikt over hvordan du bygger nettsteder. Men detaljerte ressurser som supplerer den kunnskapen er tilgjengelige online, og den mest nyttige er W3schools. com.

• Du kan bygge en kraftig, fullt mobilvennlig webapp ved hjelp av verktøyene på jQuery Mobile.

• Mens du er på jQuery Mobile, sjekk ut gratis, egendefinert tema (stiler) fra ThemeRoller.

• Feilsøk og bekreft koden din med verktøy på W3C. Sjekk CSS på // puslesag. w3. org / css-validator / og HTML på // validator. w3. org /.

• Generer gratis fargeskjemaer på Adobes Kuler.

• Trenger du en pålitelig søkeboks for nettstedet ditt, men har null dollar i søkefeltets budsjett? Bruk FreeFind, som lager søkebokser til nettstedet ditt, uten å bruke eller selge data på hvem som søker etter hva på nettstedet ditt.

• Hva med en gratis blogg? Få en på Blogger.

• Til slutt hjelper folk å finne deg med et Google-kart som er innebygd på nettstedet ditt.

Verktøy for å forberede HTML5-video på nettet

Innfødt video som spilles uten plugin-moduler (som Windows Media Player eller QuickTime Player) er en av de mest spennende nye funksjonene i HTML5. Men hvor får du HTML5-kompatibel video? Hvordan presenterer du det? Her er noen verktøy for å løse disse utfordringene:

• Slå videofilene til Firefox-vennlig Theora Ogg.

• Microsoft har en fin opplæring om å bygge JavaScript-kontroller for innfødt video.

• Hvem kan holde styr på den stadig skiftende listen over hvilke nettlesere som støtter hvilke HTML5-innfødte videoformater?Svar: Wikipedia folkene sporer.

• En av de mest verdifulle online (gratis) ressursene for webdesign, enda mindre webvideo, er Miro Video Converter. Du plugger inn hvilken som helst video, og den produserer HTML5-vennlige videoformater.

• Trenger du å teste videoen din i forskjellige nettlesere? Saucelab. com-verktøy er ikke gratis, men de tilbyr gratis prøveversjoner som gir en forhåndsvisning av videoen din på en hvilken som helst enhet fra en Windows-stasjonær datamaskin med IE 6 til den nyeste versjonen av iPad-operativsystemet.

• Trenger du litt redigering på videoen din før du legger ut den? Loopster har gratis online videoredigeringsverktøy.

• YouTube og Vimeo vil være vert for videoene dine gratis, men for omtrent $ 60 om året tilbyr Vimeo en tjeneste som vert for videoen din, og gir deg full kontroll over hvem som kan se den, og presenterer videoen uten noen annonser eller reklamemateriell for vimeo.

Optimaliser bilder med store områder med fast farge Bruke GIF-formatet

Når du optimaliserer grafikk som har tekst overlaid på et fotorealistisk bilde, må du opprette separate skiver for områdene i bildet som er fotorealistiske, samt skape ekstra skiver for områdene av bildet som inneholder tekst. Eksporter områdene som inneholder tekst ved hjelp av GIF-formatet, og eksporter de bilderealistiske områdene av bildet ved hjelp av JPEG-formatet. Her er noen tips for å hjelpe deg:

• For høyverdige JPEG-bilder, bruk en kvalitetsinnstilling på 70 når du eksporterer. For mindre JPEG-bilder kan du komme med en kvalitetsinnstilling på 50.

• Hvis du lager et fotogalleri for et produkt, eller for en fotograf, eksporterer du bildene i JPEG-format med en kvalitetsinnstilling på 80.

• Når du komprimerer bilder ved hjelp av JPEG-formatet, må du være oppmerksom på kantene på objektene i bildet. Når du begynner å se piksler, eller kantene mangler definisjon, har du komprimert bildet for langt.

• Når du eksporterer bilder ved hjelp av GIF-filformatet, bruker du det minste antall farger som gir et skarpt bilde, og du vil ha et raskt lastbildebilde.

• Når du resampleer bilder for nettsteder, er den maksimale oppløsningen du trenger, 72 piksler per tomme.

Nettsteder uten video blir sjeldnere. Video er overalt på Internett: den brukes til underholdning, i annonser, og for å fremme rockstjerner og andre artister. Når videoen er godt utført, er det en ting med skjønnhet. Her er noen ting du må vurdere når du legger til video på en nettside:

• Video tar opp mye båndbredde. Hvis båndbredden for et nettsted overskrides, kan avgiften være ganske kostbar. I stedet for å hoste video på et nettsted, last det opp til YouTube, og legg deretter inn videoen på en nettside eller blogg.

• Ikke bryter opphavsretten. Ikke kopier video fra andre nettsteder eller andre folks YouTube-videoer og bruk dem på nettstedet ditt.

• Kontroller lisensen: Hvis du bruker en video fra en leverandør eller produsent på et kommersielt nettsted, må du sørge for at du er dekket av leverandøren eller produsentens lisens.

• Bruk et videokamera av høy kvalitet til å ta opp video: Nei, en iPhone er ikke et videokamera av høy kvalitet. Hvis du koder for dårlig video for Internett, får du dårlig kvalitet på video.Husk den gamle aksiom: Garbage i, søppel ut.

• Forsikre deg om at nettstedsprosessene har de nødvendige plugin-modulene for å vise videoen.

• Hvis du lager HTML5-sider med video, må du sørge for at målgruppen for nettstedet bruker HTML5-kompatible nettlesere.

• Ikke bruk overganger når du redigerer flere videoklipp for å lage en video for Internett. Videooverganger ser bra ut på HD-video, men ser ikke bra ut når du koder en video for nettet.