Frågor och svar - Diagnostisk prov ht14 - Webbutveckling 1 Bilder och optimering --- Vilken upplösning är lämplig för bilder som ska användas på Internet? Sträva efter korta nedladdningstider. 72 ppi/dpi eller 96 ppi/dpi fungerar i regel bra fortfarande. --- Vilka filformat är lämpligast att användas för bilder på Internet?.png.jpg.gif HTML och CSS ---Vilken version av html är standard just nu under 2013? HTML 5 --- Varför är det viktigt att följa webbstandarder? För att så många som möjligt kan ta del av informationen på webbsidan oberoende av webbläsare och hårdvara som används. --- Vad gör följande kodsnutt? Förklara <a href="http://www.w3.org"> <img src="images/w3c.png" width="120" height="30" alt="world Wide Web Consortium"/> </a> Html koden anger sökvägen till en bild och dess bredd/höjd anges i pixlar. Även alternativ text anges vilket gör att sidan/bilden kane hittas/indexeras av sökmotorer. Bilden är en länk och när besökaren klickar på den öppnas w3c:s hemsida.
--- Vad är fel i kodsnutten nedan? Förklara <html> <title>kalles blogg</title> <body> <h1>välkommen till min blogg!</h1> Här kommer jag att skriva om olika saker som råkar intressera mig. </body> <html> Avsluta html-märket korrekt </html>. Använd t ex märket stycke <p>.</p> för brödtexten. --- Vad gör följande kodsnutt? Beskriv varje del för sig Kod nr 1: body { font: 16px/24px Georgia, serif; Css-regel kopplas till body märket i html filen. Denna css-regel anger typ av font och storlek/radhöjd som ska visas på sidan. (font: 16px/24px är förkortning för font-size: 16px; line-height: 24px;) Kod nr 2: #wrapper{ width: 1000px; padding: 0px; margin: auto; background-color: #fff; color: #000; CSS-regeln är kopplad <div id= wrapper > i html koden. CSS-regeln påverkar bredd/höjd, bakgrunds/text färg. Margin: auto gör att boxen med id wrapper centreras. Kod nr 3:.small, small { font-size: 13px; line-height: 18px; CSS-regeln för 2 st grupperade selektorer: class = small och html element med märket small (liten textstorlek). Css-regeln anger storlek av font och radhöjd.
Kod nr 4: @media only screen and (min-width: 480px) and (max-width: 767px) { body { width: 436px; padding: 36px 22px 48px; CSS-regler som ska tillämpas ifall användarens skräm har vissa min-max mått som anges i media queries. CSS-regeln talar om att html märket <body> ska påverkas. Bredd och spaltfyllnad i pixlar anges. --- Varför bör man skapa separata filer för HTML och CSS kod? Effektivare kod (Kortare nedladdningstider) Lättare att uppdatera och förändra koden. Ökar tillgängligheten av webbsidan (Skärmläsare) Kompatibilitet av enheter (Lättare att anpassa koden) Sökrobotar / sökmotor (Lättare att hitta webbsidan) Best practice i webb/applikations utveckling Användarvänlighet/Visuell kommunikation --- Företaget har anlitat en webbyrå för att göra dess hemsida. Vem är sändaren för budskapet på företagets hemsida? A) Webbredaktören B) Projektledaren C) Företagets ledning --- Vad bör du tänka på för att kunna skapa en användarvänlig hemsida? Du ska nämna minst 2 saker per nedanstående område: Typsnitt och text - Tillräcklig kontrast mellan text och bakgrund - Textraderna bör vara relativt korta. (ca 50 tecken) - Sans-serif font ska användas för brödtext - Fontstorlek minst 9 punkter (för att kunna läsas på Mac) - Formulera textinnehållet så kort och tydligt som möjligt. - Brödtext ska struktureras i korta stycken Bilder - Lämplig upplösning: 72 dpi. (Beror på vad bilden ska användas till.) - Begränsa antalet bilder på hemsidan. - Inga stora och tunga bilder - Lämplig format: jpg, gif, png. - Undvik bilder som bakgrund för text. (framförallt bilder med hög kontrast.) -
Sidlayout och grafisk form: - Konsekvent layout - Enhetlig färgtema genom hela siten. - Begränsad antal färger. - Formelement som återkommer genom hela siten. - Förenkla. Ta med endast det som verkligen behövs för att ge det rätta intrycket och förmedla budskapet: Less is more och Kill your darlings. - Val av typsnitt. Ger karaktär för hemsidan. - Radavstånd och mellanrum mellan tecken. - Brödtext i korta stycken. - Brödtext: sans serif typsnitt (även läsbarhet) - Undvik scrollning - Använd hyperlänkar i brödtexten för att läsa mer. Struktur och navigation - Webbplatsens struktur och hur man styr navigationen ska avgöras av de uppgifter som besökarna antas utföra på webbplatsen. (köpa, spela, titta på bild/video, lyssna på musik, kommunicera med andra, läsa fakta och information,...) - Viktigt med tydlig struktur och att det är lätt att hitta det användaren söker. - Tydlig navigering: Huvudmeny hela tiden synlig genom hela siten. - Navigationskarta som separat sida. - Sträva efter enkelhet. Sökmotoroptimering --- Nämn minst 3 åtgärder du kan göra för att folk ska lättare hitta din hemsida? - Göra sidan optimerad för sökning (nyckelord, semantisk korrekt kod, etc) - Registrera sidan på olika sökmotorer / anlita söktjänster. - Berätta om sin hemsida. (muntligt, visitkort, brevpapper) - Annonsera om sin hemsida i diskussionsgrupper och på andra platser. Juridik --- Vad innebär PUL? Förklara Förbjuder att namn och andra personuppgifter offentliggörs på Internet, såvida inte berörda personer gett sitt "otvetydiga" samtycke. --- Vilka olika delar består Upphovsrättslagen av och vad innebär de? Den ekonomiska rätten kallas också förfoganderätt. Det innebär rätten att använda verket i olika sammanhang. Genom avtal kan man bestämma hur verket ska få mångfaldigas (kopieras), spridas (säljas/uthyras/utlånas), visas (t ex film) eller framföras (t ex musik eller teater). Den ideella rätten kallas också respekträtt. Den som skapat verket har rätt att få sitt namn angivet i samband med användning av verket (utom i reklamsammanhang). Det är inte tillåtet att ändra eller manipulera ett verk eller använda det i något kränkande sammanhang utan upphovsmannens tillstånd.
--- Vad menas med 'responsiv webbdesign'? Hemsidans layout anpassar sig till olika skärmstorlekar. --- Ge exempel på hur du kan öka responsiviteten på din webbsida? T ex använda % och em istället för pixlar, max-height för bilder och använda @mediaqueries för att skapa anpassningar för olika skärmstorlekar.