WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN B

Maat: px

Weergave met pagina beginnen:

Download "WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B"

Pepijn Jansen
8 jaren geleden
Aantal bezoeken:

1 WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN B

2 WEBSITE-DESIGN INHOUD COLLEGE Afronding vak JQuery, mail(formulieren) en social media Testen Website-design

3 AFRONDING VAK Opleveren site 1) Controleer of je site in dit overzicht staat!: portfolio.io.utwente.nl/webdesign/ 2) Deadline opleveren site: maandag :00u Terugkoppelings sessies Data: 17, 18 en 19 februari Website-design

nl/webdesign/ 2) Deadline opleveren site: maandag 2-2-2015

4 CSS: MOVING TEXT Voorbeeld bevat ook 2e voorbeeld met '3d flip card' HTML <div class="mybox background"> <div class="desc desc_background"> Beschrijving - deze beschrijving is niet helemaal zichtbaar. Beweeg je met je muis over de box, dan kan je de hele tekst lezen. </div> </div>.desc { position: absolute; bottom: 0; left: 0; height: 0.85em; transition: height 1s; } CSS.mybox:hover.desc { height: 4em; } Voorbeeld: movingtext Website-design

Beweeg je met je muis over de box, dan kan je de hele tekst lezen. </div> </div>.

5 JQUERY GEBRUIKEN op mijn website staan een aantal kleine afbeeldingen op het moment dat je boven zo'n afbeelding hovert wordt de afbeelding vergroot weergegeven (preview) aan de rechterkant, op het moment dat er op een kleine afbeelding geklikt wordt opent zich een fotoviewer waar zich de afbeelding in zal tonen (lightbox) afbeelding wordt hier vergroot weergegeven (preview) lijst met links naar grote afbeeldingen <div id="preview">... preview...</div> deel van lightbox gallerij <ul id="gallery"> <li> <a class="lightbox" data-group="gallery" href="images/img1.jpg"> <img src="images/thumb1.jpg" width="65" height="61"></a> </li>... kleine versie afbeelding (thumbnail) Voorbeeld: jquery_plugins/lightbox_preview Website-design

weergegeven (preview) lijst met links naar grote afbeeldingen <div id="preview">... preview.

6 JQUERY GEBRUIKEN css selector: selecteer alles van de class lightbox mouseenter-functie: doe iets als de muis het element binnenkomt Html code tussen enkele quotes (blauw) <script> $('.lightbox').mouseenter(function() { $('#preview').hide(); $('#img_show').html('<img src="'+$(this).attr("href")+'" width="217" height="217">') $('#preview').fadein(1000); }); </script> We gebruiken het attribuut href van het huidge element mbv this html-functie: verander de html (inhoud) van het element css selector: selecteer element met id preview Website-design

attr("href")+'" width="217" height="217">') $('#preview').

7 JQUERY ANIMATIES Veranderen van vorm, positie, stijl 3 lagen: achtergrond, reset-laag, 4 blokken: <div> Blokken gecentreerd, positie wordt dynamisch bepaald Klik-in blok: schuiven stylesheet { }, in blauw // verplaats blok met id b1 naar hoek: $("#b1").animate({left: 0, top: 0},"slow"); // open (vergroot) huidige (geklikte) blok: $(this).animate({left: 0,top: 0, width: w-bs-bm, height: h-bs-bm},"slow"); variabelen bepalen afmetingen: w-bs-bm w3schools: jquery/jquery_animate Voorbeeld: jquery_plugins Website-design

animate({left: 0, top: 0},"slow"); // open (vergroot) huidige (geklikte) blok: $(this).

JQUERY ANIMATIES: ACCORDION luister naar click-events op kolommen die niet de class 'current hebben $('body').on('click', '#accordion li:not(".current")', function() { $(this).

8 JQUERY ANIMATIES: ACCORDION luister naar click-events op kolommen die niet de class 'current hebben $('body').on('click', '#accordion li:not(".current")', function() { $(this).animate({width: "60%"}, function() { $(this).addclass("current"); animeer geklikte item naar 60% breedte en laat inhoud zien $(this).children().fadein(); }); $( "#accordion li" ).each(function( i ) { $(this).children().hide(); if ($(this).attr("id")!=clicked) $(this).animate({width: "10%"}); }); }); each: herhaal voor elk list-element in de accordion verberg inhoud als dit niet het geklikte item is, animeer dan naar 10% breedte Voorbeeld: jquery_plugins/accordion Website-design

children().fadein(); }); $( "#accordion li" ).each(function( i ) { $(this).children().hide(); if ($(this).attr("id")!=clicked) $(this).

(EMAIL) FORMULIEREN Let op: formulier werkt alleen samen met PHP-script send.php. Download de zip-file email_form.zip! <form action="send.php" method="post">.

9 ( ) FORMULIEREN Let op: formulier werkt alleen samen met PHP-script send.php. Download de zip-file _form.zip! <form action="send.php" method="post">... </form> <input type="text" name="name" /> <textarea name="message" rows="4" cols="40"></textarea> <input type="submit" value="send" /> w3schools: formulieren, AJAX Voorbeeld: _form Website-design

.. </form> <input type="text" name="name" /> <textarea name="message" rows="4"

10 ZOEKEN OP JE SITE Blz 115 Zoekformulier opmaken Voorbeeld: Google-zoek formulier rechtsboven Zoeken binnen een pagina: jquery plugin QuickSearch Voorbeeld: zoek Zoek voorbeeld, zoekt met Google in utwente.nl/io: <form id="searchform" name="searchform" method="get" action=" <input type="text" size=20 name="q" id="searchfield" /> <input type="hidden" name="sitesearch" value="utwente.nl/io" /> </form> Website-design

nl/io: <form id="searchform" name="searchform" method="get" action="http://www.google.

11 SOCIAL MEDIA VOORBEELD: FACEBOOK Like button instellen Login, ga naar ontwikkelaarspagina jquery Plugin: Socialcount Website-design

12 SOCIAL MEDIA: TWITTER RECENTE TWEETS 1 Log-in op twitter.com, ga naar Settings > Widgets > Create new 2 Stel opties in, Create Widget 3 Kopieer en plak HTML code in je pagina, Save changes 2 3 Website-design 1/5/

13 SOCIAL MEDIA: TWITTER RECENTE TWEETS OVER #WEBDESIGN Website-design 1/5/

14 TESTEN validator.w3.org Test met meerdere browsers en laat site testen Advies: test op verschillende computers met minimaal Internet Explorer, Firefox en Chrome W3 validator Fouten over ALT-tags van plaatjes zijn minder belangrijk Meeste waarschuwingen kan je negeren Ook stylesheet testen Preview (render): Netrenderer, Browsershots Dreamweaver: Website-design

met minimaal Internet Explorer, Firefox en Chrome W3 validator Fouten over ALT-tags van

15 TESTEN: BROWSER TOOLS Bekijken en bewerken HTML en CSS Resultaat en herkomst stijl (Javascript) console Metrics Rechter muisknop > Inspect Testen mobiel scherm Laadtijd html en onderdelen Console: meldingen en fouten scripts Website-design

Rechter muisknop > Inspect Testen mobiel scherm Laadtijd html

TESTEN: BROWSER TOOLS @media queries laten zien

16 TESTEN: BROWSER queries laten zien Scherminstellingen Testen mobiel scherm Website-design

17 VOLGENDE WEEK Meer informatie over afronding van het vak Wat willen we volgende week van je zien? Een eerste versie van je portfolio website Problemen met FTP-verbinding (uploaden)? Doorloop procedure FAQ. Werkt niet? Mail Fjodor. Als je (tijdelijk) geen verbinding hebt, kan je wel testen!: Open html bestand op je computer. Website-design

Een eerste versie van je portfolio website Problemen met FTP-verbinding (uploaden)?

Vergelijkbare documenten

WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B

WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B WEBSITE-DESIGN INHOUD COLLEGE Stappenplan: stap 4 HTML, Stylesheets vervolg slides @ vanslooten.com/websitedesign Website-design 1-12-2014