WEBDESIGN & WEBKOMMUNIKATION

Transkript

1 WEBDESIGN & WEBKOMMUNIKATION 16. februar 2012 #3 - Webteknologier + HTML5 fortsat

2 PROGRAM FOR I DAG 1. Webteknologier 2. Best practice & semantik 3. Det handler om struktur 4. Hvis tid: Links 5. Hvis tid: Tabeller 6. Næste uge

3 #1 Webteknologier

4 CLIENT SIDE SCRIPTING - Relevante teknologier/kodningssprog: - HTML - CSS - XML - Javascript (91.6%*) - AJAX - jqeury - Flash (25.4%*) *Most popular Client-side Programming Languages

5 FORSKELLIGE LAG Præsentation CSS Leverer information om hvordan dokumentets skal se ud Beskriver strukturen i dokumentet Tilføjer interaktivitet, instant feedback og dynamik. Struktur HTML5 Adfærd Eksempelvis JavaScripzt, jquery, AJAX Leverer indhold via databaseforespørgsler, beregninger osv. Dynamisk Eksempelvis PHP + SQL

6 KURSETS AFGRÆNSNING Præsentation CSS Vi koncenterer os kun om disse to lag på dette kursus Struktur HTML5 Adfærd Eksempelvis JavaScripzt, jquery, AJAX Dynamisk Eksempelvis PHP + SQL

7 EXtensible Markup Language XML er meget fleksibelt og indeholder modsat HTML ingen XMLXML bruges til at præfinerede tags - man skaber gemme og udveksle selv tags og struktur informationer Er et markup sprog ligesom HTML Benyttes bl.a. til at udveksle data mellem applikationer og kodningssprog

8 Asynchronous JavaScript and XML AJAX spiller en stor rolle i moderne webapplikationer og -funktionalitet. AJAX arbejder modsat normal Javascript asynkront - dvs. at den foregår løbende mellem script og server. AJAX I kommer ikke til at arbejde direkte med AJAX på dette kursus Men i kommer til at arbejde konceptuelt med AJAX funktionalitet i jeres eksamensprojekt AJAX er normalt en blanding af XHTML, CSS til præsentation, XML til dataudveksle og JavaScript til at koble det sammen Muliggør at dataudveksling kan ske mens brugeren interagerer - dvs. uden pageloads og dermed også meget hurtigere.

9

10

11

12

13

14 SPRY FRA ADOBE technologies/spry/ home.html

15 jquery er open source, gratis og meget udbredt (44.1%*) Det er nemt at arbejde med - ofte rent plug jquery er et modificeret JavaScript bibliotek som forenkler intergrationen mellem JavaScript og HTML. and play jquery I må gerne benytte jer af jquery i forbindelse med eksamensprojektet Gør det bl.a. muligt at arbejde med avancerede animationer, at håndtere events og nemt skabe AJAX-integration. Der findes et hav af prædefinerede animationer og muligheder og der kommer hele tiden nye til. *Most popular JavaScript Libraries

16

17

18 jquery UI jqueryui.co m/home

19 jquery Mobile jquerymo bile.com/

20 Kræver plugin, har en stejl læringskurve, dyr software og udvikling, kan være tungt og processorkrævende, indholdet er ofte afskåret fra andre systemer og webservices, ikke understøttet på iphone og ipad. Plus mange flere ulemper... Stor udbredelse (stadigvæk), stort set ingen begrænsninger, kan levere let animation og meget overbevisende oplevelser som dog stadig oftere maches af HTML5/CSS3/Javascript. Flash er stadigvæk det mest kraftfulde værktøj til at skabe interaktive løsninger Kan optræde som moduler på websites eller som I kommer ikke til at arbejde med Flash på dette kursus og må ikke bruge det i eksamensprojektet integrerede dynamiske systemer

21

22

23 SERVER SIDE SCRIPTING - Relevante teknologier/kodningssprog: - PHP (77.2%*) - ASP (21.7%*), Java (4.1)%*), PERL (1.0%*), Coldfusion (1.2%*),.NET, JSP,og C# - SQL (Structured Query Language) og mysql - NoSQL Databases - Dynamiske websites (databaser, SQL og PHP): Introduktion til scripting (DDK, 2. semester) - Dynamisk webdesign (Master, interaktionsdesign og multimedier). *Most popular Server-side Programming Languages

24 PAUSE...

25 #2 Best practice & semantik

26 HVORFOR FØLGE STANDARDERNE? - Optimerer kompatibiliteten med fremtidens browsere. - Fjerner behovet for at udvikle forskellige versioner til forskellige browsere. - Visningen optimeres til alle instrumenter. - Websiderne er nemmere at vedligeholde og ændre på. - Udgifter reduceres. - Søgemaskine-optimering. - Tilgængeligheden forbedres. Flere gode grunde til at følge standarderne.

27 HVORDAN FØLGES STANDARDERNE? - W3C s Markup Validation Service (validator.w3.org). - Øvelser og eksamensprojekt skal validere HTML5.

28 VALIDERING

29 VALIDERING

30 Semantik, (af gr. semantikos 'betydningsfuld, som indeholder betydning', afledn. af semainein 'betegne, markere', af sema 'tegn'), betydningslære, den gren af lingvistikken, der beskæftiger sig med betydning. Den store danske encyklopædi

31 SEMANTIK - Syntaks: Hvordan man siger noget. Konstruktion af sætninger. - Semantik: Betydningen af det man siger.

32 I love New York!

33 I LOVE NEW YORK! - Syntaksen er sammensætningen af de fire ord til en forståelig sætning. - Semantikken er det sætningen siger: Afsenderen holder meget af New York

34 - Ændret syntaks, samme semantik. - Mennesker forstår betydningen, fordi vi kan fortolke syntaksen.

35

36 SEMANTIK I WEBKONTEKST - Computere kan kommunikere beskeder ved at bruge korrekt syntaks. - Udveksling af data mellem browser og webserver vha. en HTML-syntaks. - Computere kan ikke forstå betydningen af de HTMLdokumenter de sender frem og tilbage. - Metafor: Talende papegøjer.

37 W3C Semantic Web

38 ...Because we don't have a web of data. Because data is controlled by applications, and each application keeps it to itself. The vision of the Semantic Web is to extend principles of the Web from documents to data. W3C Semantic Web W3C Semantic Web

39 EKSEMPEL: SYNDIKERING

40 SEMANTISK MARK-UP - Handler basalt set om at skrive god HTML - Det starter ved korrekt syntaks, dvs. HTML der validerer. - Vælg det element som på bedste vis beskriver indholdet. - Ignorer udseendet - det kan ændres. - Giver dokumentet struktur. - Giver informationen betydning som kan bruges i andre sammenhænge. - Har altid været hensigten med HTML, men har været vanskeligt at efterleve.

41 VÆLG DET RETTE ELEMENT - Mange HTML-elementer har en semantisk værdi, og det er vigtigt at bruge dem logisk og funktionelt. - Vælg det element som på bedste vis beskriver indholdet. - Eksempel: <h1> gives til den vigtigste overskrift på siden.

42 BRUG SÅ LIDT MARK-UP SOM MULIGT - Giv dokumentet struktur: - Jo mindre kode, desto mere overskuelighed. - Ved at mestre den fleksible styring i CSS er det muligt at fjerne meget unødvendig HTML (Det starter vi op næste gang) - Sørg for ikke at pakke indhold ind i mange HTML-elementer. - Placer indhold som skal læses først i starten af dokumentet, og det der skal læses sidst til slut i dokumentet.

43 DET ER IKKE NEMT - Selvom et HTML-dokument validerer, kan semantikken godt være uforståelig for en computer - Med andre ord kan computeren ikke tjekke kvaliteten eller rigtigheden af dine semantiske valg - Med HTML5 har vi fået rigtigt mange nye semantiske elementer - det er fedt, men samtidigt levere det ekstra kompleksitet

44 MIN SIDE VISES JO ALLIGEVEL - SÅ HVORFOR OVERHOVEDET BEKYMRE SIG OM AT ARBEJDE MED SEMANTISK MARK-UP? Fiktiv anonym studerende

45 #3 It s all about structure

46

47

48 FØRST LIDT HISTORIK Top 20 over navngivning af class -element indikatorer på nettet (Google, 2010)

49 NYE STRUKTUR ELEMENTER <section> og <article> kan modsat de andre elementer være lidt vanskelige at håndtere <section> Definerer sektioner på siden <article> Definerer det primære indhold på siden <div class= classnavn > <header> Definerer headeren på siden <nav> Definerer navigationen på siden <aside> Definerer ekstra indhold som eks. en sidebar <footer> Definerer footeren på siden

50 <section id="sverige"> <h1>historier om danskere i Sverige</h1> <article>historien om Jan</article> <section>arbejde</section> <section>fritid</section> <article>historien om Maria</article> <article>historien om John</article> </section>

51 <section> <h1>livshistorier</h1> <article>historien om Jan</article> <article>historien om Maria</article> <article>historien om John</article> </section> <article> <h1>livshistorier</h1> <section>historien om Jan</article> <section>historien om Maria</article> <section>historien om John</article> </article>

52

53

54 BLOCK & INLINE ELEMENTER - Block-level elementer: Skal tænkes som små kasser, der starter på en ny linje, hver gang de optræder. - Eksempler: <article> <aside> <h1> og <p> - Inline elementer bryder ikke linje, når de optræder i et dokument, hvorved de eksempelvis kan optræde i et afsnit. - Eksempel: <p>du er en <strong>værre slambert</ strong>, men jeg elsker dig alligevel</p>

55 DET NORMALE FLOW

56 FLOW - Browseren er default indstillet til at behandle disse elementer således. Dette kan ændres med CSS. - Browserens normale flow: - Block elementer udlægges fra top mod bund - Tekst elementer udlægges fra venstre mod højre, inden for block elementerne. - Objekter i det normale flow influerer på omgivende objekter. - Flowet kan ændres med CSS (mere om dette når vi skal arbejde med med floating og positioning ).

57 <cite> <q> <mark> <em> <u> <i> <b> <blockquote> <ins> <s> <strong> <pre> <del> <code> <h1>-<h6> <sup> TEKST ELEMENTER <sub> <address> <abbr> <small> <meter> <dfn> <br /> <figure> <p> <hr /> <progress> <wbr> <ul> <ol> <dl> <time>

58 BLOCK-LEVEL: DIVISION <div>...</div> GENERISKE ELEMENTER INLINE-LEVEL: DIVISION <span>...</span>

59 #4 Hvis tid: Links

60 ANCHOR ELEMENTET - <a> </a> - Laver et hypertekst-link til et andet dokument, mail eller sektion af et andet dokument. - Vigtige attributter: - href= URL - target= - id=

61 URL URL (Uniform Resource Locator), HTTP (Hypertext Transfer Protocol)

62 ABSOLUT & RELATIV - Absolut URL: <a href= >ITU</a> - Relativ URL - Linking til et dokument på det samme site, relativt til det aktuelle dokument. - Brug ikke backslash (\) men / (baseret på UNIX) - <a href=../index.html >Forside</a> - <a href= /opskrifter/fransk/baguette.html >Baguette</a>

63 SAMME NIVEAU Learning Web Design (Robbins 2007), s. 98.

64 DYBERE NIVEAU Learning Web Design (Robbins 2007), s. 100.

65 HØJERE NIVEAU Learning Web Design (Robbins 2007), s. 102.

66 SITE ROOT Learning Web Design (Robbins 2007), s. 104.

67 ANDRE PROTOKOLLER - FTP-link, ftp:// - <a href= ftp://ftp.itu.dk >ITU s FTP server</a> - Mail, mailto:// - <a href= mailto:stg@itu.dk >Send mig en </a>

68 NU KAN ALT LINKES - Som i tidligere HTML versioner: Inline links - Eksempelvis: <a href= ><img src= logo.jpg alt= ITU s logo /></a> - Og nu med HTML5: Block-level links - Eksempelvis: <a href= ><hgroup><h1>...</h1><h2>...</h2></ hgroup></a> - Vær dog opmærksom på ikke at omkranse alt for store indholdsklynger med links.

69 LINK TIL SEKTION - Først skal området identificeres (mere om id næste gang): - <h1 id= kontakt >Kontakt information</h1> - Hvis vi linker fra det samme dokument: - <a href= #kontakt >Se kontakt information</a> - Hvis vi linker fra et andet dokument: - <a href= index.html#kontakt>se kontakt information</a>

70 TARGET - Har været udgået ( deprecated ) men er nu tilbage igen - Eksempelvis target= _blank, target= _self eller selvnavngivne vinduer (eksempelvis til iframes) - Bør undgås da det kan være irriterende for brugeren eller problematisk for tilgængeligheden. - Lad hellere brugerne styre, hvordan de vil have vinduerne skal opføre sig.

71 SAMMENKÆDNING AF DOKUMENTER - Links til eksterne dokumenter. - Benyttes til at knytte CSS-dokumenter til HTML dokumentet. - Flere forskellige muligheder: - <link href= stylesheet.css rel= stylesheet type= text/ css media= screen /> - Mere om dette næste gang

72 GØR DIG SELV EN TJENESTE - Det er op til dig, hvordan den mappe- og linksstrukturerne skal udformes. - Ting du bør medtage i dine overvejelser: - Mappestrukturen - Adskillelse af indhold - Konsistens og orden - Navngivning - Versioner og dubletter - Dit og andres workflow

73 #5 Hvis tid: Tabeller

74 ANVENDELSE - Til visning af data: - Information vises rækker (rows) og kolonner (columns). - Kalender, skemaer, statistikker. - Men ikke kun tal. - (IKKE) til layout - Før i tiden var tabeller den eneste mulighed for at skabe avancerede layouts med luft og kollonner. - Må ikke benyttes mere

75 ELEMENTER - Definer tabellen: <table> </table> - Starter og slutter tabellen. - Definer række (row): <tr> </tr> - Definer elementerne i en række (cellerne): <td> </td> - Table headers (specielle celler): <th> </th> - Og kolonnerne (som er defineret af antallet af celler <td>

76 OPBYGNING

77 MARKUP

78 MARKUP - Alt indhold skal placeres i en celle. - <td>indhold her</td> - <th>indhold her</th> - Indhold kan være alt muligt (tekst, billeder osv.)

79 CELL SPANNING - Stræk celler over flere rækker eller kolonner (dvs. at cellerne sammenlægges). - Column span: <td colspan= 3 > - Cellen sammenlægges med de to næste celler i den samme række (horisontalt). - Row span: <td rowspan= 3 > - Cellen sammenlægges med de to næste celler i den samme kollonne (vertikalt).

80 COLSPAN <table> <tr> <th colspan="2">mulddyr</th> </tr> <tr> <td>hest som mor</td> <td>æsel som far</td> </tr> </table>

81 ROWSPAN <table> <tr> <th rowspan="3">egetræ</th> <td>krone</td> </tr> <tr> <td>stamme</td> </tr> <tr> <td>rødder</td> </tr> </table>

82 SUMMARY AND CAPTION - Summary: - Beskrivelse af tabellen og dens indhold. - Bliver ikke vist i browseren. - <table summary= > </table> - Caption: - Titlen på tabellen. - <caption>titel på tabel</caption> - Vises i forbindelse med tabellen (ovenover pr. defeault).

83 STYLING - Tabeller kan blive rigtigt flotte - udseendet styres via CSS - Cellpadding (er også en tabel attribut). - Celspacing (er også en tabel attribut). - Border. - Farver. - Alignment. - Placering. - Dimensioner.

84 TIL NÆSTE GANG - Læsning: - (G) HTML5 & CSS3 Visual QuickStart Guide (Castro & Hyslop): Introduction, kap. 7, kap. 8, kap. 10 og kap Arbejd selv: - Aflever dagens øvelse som et link på bloggen under din hjælpelærers underside inden tirsdag d. 21. februar kl

85 <h1>på GENSYN</h1> <p>god kodning</p>