APP DESIGN

Nog wat mogelijkheden

a. Iframe

Om een externe webpagina te openen in je eigen pagina of in je app gebruik je de html tag <iframe>

De html code voor bovenstaande is als volgt:

<iframe width = "100%" height = "200" src = "http://www.werensite.nl"></iframe>

Veel meer over iframes vind je hier.

Let op!

Onderstaande toepassingen voegen heel veel code aan je document. Daarom verdient het aanbeveling de toepassingen eerst uit te proberen op een leeg document en, als je het toepast in je app, deze eerst op te slaan onder een andere naam (bijvoorbeeld indexb.html zodat je altijd weer terug kunt naar het begin.

 

b. Sliders

Een fotopresentatie toevoegen aan je app, doe je met behulp van een slider. Op internet wemelt het van de mobiele sliders.

 

Voorbeeld

1. Koppel de javascript bestanden:

Onderstaande code plak je tussen de <head> tags

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="responsiveslides.min.js"></script>

<script src="responsiveslides.js"></script>

Let op!! De twee javascript bestanden moeten in het hoofddirectory van je app staan. Je vindt ze hier: (rechtermuisknop: opslaan als:)

responsiveslides.min.js

responsiveslides.js

2. zet de html tussen de body's

<ul class="rslides">
<li><img src="1.jpg" alt=""></li>
<li><img src="2.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
</ul>


3. Voeg de CSS toe als apart bestand

slider.css

4. Koppel de slideshow met behulp van onderstaand script

ook dit kan tussen de <head> tags

<script>
$(function() {
$(".rslides").responsiveSlides();
});
</script>

5. Instellingen die je kunt aanpassen

In het javascript bestand zitten een aantal instellingen die je kunt aanpassen:

// Default settings
var settings = $.extend({
"auto": true, // Boolean: Animate automatically, true or false
"speed": 500, // Integer: Speed of the transition, in milliseconds
"timeout": 4000, // Integer: Time between slide transitions, in milliseconds
"pager": false, // Boolean: Show pager, true or false
"nav": false, // Boolean: Show navigation, true or false
"random": false, // Boolean: Randomize the order of the slides, true or false
"pause": false, // Boolean: Pause on hover, true or false
"pauseControls": true, // Boolean: Pause when hovering controls, true or false
"prevText": "Previous", // String: Text for the "previous" button
"nextText": "Next", // String: Text for the "next" button
"maxwidth": "", // Integer: Max-width of the slideshow, in pixels

 

c. Navigatie

Een handige toevoeging aan je app is de mogelijkheid om te navigeren.

Ook hier weer een voorbeeld:

1. Koppel de javascript bestanden:

Onderstaande code plak je weer tussen de <head> tags

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

2. voeg de html en het script toe:

<div id="map_canvas"></div>
<h2>Plan uw reis</h2>
<form id="routeform">
City or zipcode:
<input type="text" name="routefrom" id="routefrom"/>
<input type="submit" value="calculate"/>
</form>
<div id="directions"></div>
<script>

$(document).ready(function()
{
initialize();

$('#routeform').submit(function(e)
{
calcRoute();
return false;
});

});

var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var home = new google.maps.LatLng(52.6538013,5.0585237,14);

function initialize()
{
directionsDisplay = new google.maps.DirectionsRenderer();

var myOptions =
{
zoom:8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: home
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directions"));

var myLatLng = new google.maps.LatLng(52.6538013,5.0585237,14);
var beachMarker = new google.maps.Marker
({
position: myLatLng,
map: map
});
}

function calcRoute()
{
var start = document.getElementById("routefrom").value;

var request =
{
origin:start,
destination:home,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status)
{
if (status == google.maps.DirectionsStatus.OK)
{
directionsDisplay.setDirections(response);
}
});
}</script>

3. Voeg nog wat CSS toe:

#map_canvas {
height: 500px;
width: 60%;
margin-top: 2%;
margin-right: auto;
margin-left: auto;
}
#directions {
width:600px;
}

d. Het weer

Het voorbeeld staat hier.

1. HTML

<div id="weather"></div>

 

2. CSS

het css-bestand staat hier

3. Javascript

het javascript-bestand staat hier

de externe koppeling is deze:

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.1.0/jquery.simpleWeather.min.js"></script>

Opdracht:

Voeg een van bovenstaande toepassingen toe aan je app.

 

©jw webdesign