LEEREENHEID HTML/CSS Dit document bestaat uit twee onderdelen - Onderdeel Leereenheid - Onderdeel Onderwijsproduct
1 Naam leereenheid In deze tabel staat de naam en het type van de leereenheid Leereenheid naam: HTML/CSS Leereenheid type KGC 2 Specificatie In deze tabel staat voor welk crebotraject de leereenheid is gemaakt Crebotraject code: 95311 Crebotraject naam: Applicatie- en mediaontwikkeling (Applicatieontwikkelaar) BOL Cluster: Cluster 1 Realiseert Taakklasse: Taakklasse 1 3 Plaats in het ander crebotraject wordt door de vaststeller ingevuld bij overlap van leereenheden Deze tabel zo vaak kopieren als aantal crebotrajecten waarin leereenheid ook wordt gebruikt Crebotraject: 95701 Crebotraject naam: Applicatie- en mediaontwikkeling (Mediadeveloper) BOL Cluster: Cluster 1 Realiseert Taakklasse: Taakklasse 1 4 Beschrijving van de beroepssituatie behorende bij deze leereenheid
De student krijgt een aantal materialen aangeleverd b.v. een functioneel ontwerp, videofragmenten en foto’s. Op basis van de aangeleverde materialen realiseert de student een eenvoudige applicatie.Hij test of het product in de verschillende browsers werkt en past daar waar nodig de producten aan. 5 Leerdoelen leereenheid Leerdoelen onderwijs product 1: 1. Aan het einde van deze VGT kan de student twee redenen noemen waarom het gebruik van de W3C-validator bij het coderen in HTML/CSS belangrijk is. 2. Aan het einde van deze VGT kan de student een verklaring geven van de werking van de volgende HTML/CSS begrippen: Meta-informatie, Pagina-markup, Navigatie-markup, Logo-markup, Article-markup, Footer-markup.
6 Voorwaarden voor deelname aan leereenheid Om deel te nemen aan de betreffende leereenheid worden de volgende voorwaarden gesteld: Geen
95311_Leereenheid KGC_Applicatieontwikkelaar_120626_T&I_HTML-CSS
1
7 Beoordeling leereenheid conform visie ‘toetsing en examinering ROC ID College’ De beoordeling van de onderwijsproducten staan in het kader van: X ontwikkeling, de bijbehorende ontwikkelingsgerichte beoordeling uit het Programma Toetsing in het kader van de Ontwikkeling betreft: kwalificeren, de bijbehorende examentoets uit het Programma in het kader van toetsing en examinering (PTE) is:
7 Aantal SBU’s Het aantal SBU’s is: 20
8 Studiepunten Het aantal studiepunten is: 1
95311_Leereenheid KGC_Applicatieontwikkelaar_120626_T&I_HTML-CSS
2
Een leereenheid kan uitgewerkt worden in verschillende onderwijsproducten (A, B, …) A.1 Algemene informatie Onderwijsproduct Ontwikkelaar: Hans van Rheenen Ontwikkeldatum: 25-04-2012 Versie: 1.0 A.2 Beschrijving De student krijgt les uit het boek Webdesign 4, Academic Service, blz 1 t/m 77 Aan de hand van voorbeelden worden Meta-informatie, Pagina-markup, Navigatie-markup, Logomarkup, Article-markup en Footer-markup toegelicht, uitgelegd en besproken. Les 1: HTML-editors Lay-out en design van een webpagina Meta-informatie Tags of markups Doctype Het element , ,
De <!-- commentaar -->-tag Het element <body>, <div>, <section>, <header>, <hgroup>, <h1> t/m <h6> Les 2 (10): Navigatie markup Het element <nav>, <ol>, <ul>, <a> CSS3 Het element <link> CSS-syntaxis Definiëren van id’s De attributen width en height, margin en padding, box-shadow Les 3(18): Webkleuren Kleursyntaxis in CSS Het attribuut rgba, text-align, background Background-position: en background-repeat: Het attribuut font-size, border, float, border-radius, transition De pseudoklassen hover en focus Les 4(24): Logo markup Class Het element <span> Het attribuut position Definiëren van klassen Het attribuut border-radius, opacity, z-index Article markup Het element <article>, <p>, Inline- of tekstelementen Het element <strong>, <em>, <mark> Les 5(31): Article design Het attribuut overflow De function gradient()<br />
<br />
95311_Leereenheid KGC_Applicatieontwikkelaar_120626_T&I_HTML-CSS<br />
<br />
3<br />
<br />
<br />
<br />
Het attribuut text-shadow:, hsla, line-height Het element <aside rel="nofollow">, <video>, <source> Les 6(37): Videoformaat Videoconversie Het element <a href= “#” rel="nofollow"> Het attribuut text-transform, background-position De functie rotate(), scale() Het element <footer> Les 7(44): Het attribuut transform-origin CSS-animaties Les 8(49): Het element <form>, <fieldset>, <legend>, <label>, <input type=“checkbox”> Het element <input type=“radio”>, <input type=“text”>, <select>, <datalist> Het element <input type=“range”>, <textarea>, <input type=“submit”> Het attribuut clear, after, display, required, focus, invalid De function radial-gradient() Les 9(63): Het element <iframe>, <table>, <thead>, <tr>, <th>, <tfoot> Het attribuut colspan Het element <tbody>, <td> Het attribuut border-collapse Les 10: Toets<br />
<br />
A.3 Beschrijving voor voorliggende ALA’s (alleen invullen in geval van ALA) A.4 Criteria behorende bij Product/Eindresultaat De cesuur is dat de student 66% van de gebruikte statements juist moet verklaren A.5 Begeleiding De begeleiding bestaat uit: Docent A.6 Benodigde materialen en kosten Voor de uitvoering van dit onderwijsproduct zijn de volgende materialen benodigd:<br />
<br />
<br />
<br />
A.7 Faciliteiten voor onderwijs Voor het uitvoeren van dit onderwijsproduct zijn de volgende faciliteiten benodigd: Lokaal met projectiemogelijkheid (beamer, smartboard, etc.) A.8 In te zetten leermiddelen Voor het uitvoeren van dit onderwijsproduct zijn de volgende leermiddelen benodigd:<br />
<br />
ROC/domein afspraken <br />
<br />
95311_Leereenheid KGC_Applicatieontwikkelaar_120626_T&I_HTML-CSS<br />
<br />
4<br />
<br />
Suggesties voor in te zetten middelen Smartboard<br />
<br />
A.9 Uitvoeringslocatie(s) De ALA kan op de volgende locatie worden uitgevoerd (meerdere locaties kunnen aangevinkt worden) X ROC ID College, te weten: alle locaties / locatie(s): <locatie(s) invullen> leerbedrijf / leerinstelling elders, te weten: ………….. A.10 Faciliteiten voor toetsing/examinering Voor de toetsing/examinering van dit onderwijsproduct zijn de volgende faciliteiten benodigd: lokaal<br />
<br />
<br />
<br />
A.11 SBU’s Begeleide uren:<br />
<br />
12,5<br />
<br />
Onbegeleide uren: 7,5<br />
<br />
A.11 Aantal studenten minimaal: 12 maximaal: 26 A.12 Opmerkingen / bijzonderheden<br />
<br />
95311_Leereenheid KGC_Applicatieontwikkelaar_120626_T&I_HTML-CSS<br />
<br />
5<br />
<br /> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form role="form" method="post" action="https://adoc.pub/report/cluster-1-realiseert-4-beschrijving-van-de-beroepssituatie-b" style="border: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Report "Cluster 1 Realiseert. 4 Beschrijving van de beroepssituatie behorende bij deze leereenheid"</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>Your name</label>
<input type="text" name="name" required="required" class="form-control" />
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" required="required" class="form-control" />
</div>
<div class="form-group">
<label>Reason</label>
<select name="reason" required="required" class="form-control">
<option value="">-Select Reason-</option>
<option value="pornographic" selected="selected">Pornographic</option>
<option value="defamatory">Defamatory</option>
<option value="illegal">Illegal/Unlawful</option>
<option value="spam">Spam</option>
<option value="others">Other Terms Of Service Violation</option>
<option value="copyright">File a copyright complaint</option>
</select>
</div>
<div class="form-group">
<label>Description</label>
<textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;"></textarea>
</div>
<div class="form-group">
<div style="display: inline-block;">
<div class="g-recaptcha" data-sitekey="6LcEnMcZAAAAAFHzKKgaE-Qh57XzUTzpfRElD4dP"></div>
</div>
</div>
<script src='https://www.google.com/recaptcha/api.js'></script>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Send</button>
</div>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function () {
var inner_height = $(window).innerHeight() - 250;
$('#pdfviewer').css({"height": inner_height + "px"});
});
</script>
<footer class="footer" style="margin-top: 60px;">
<div class="container-fluid">
Copyright © 2024 ADOC.PUB. All rights reserved.
<div class="pull-right">
<span><a href="https://adoc.pub/about">About Us</a></span> |
<span><a href="https://adoc.pub/privacy">Privacy Policy</a></span> |
<span><a href="https://adoc.pub/term">Terms of Service</a></span> |
<span><a href="https://adoc.pub/copyright">Copyright</a></span> |
<span><a href="https://adoc.pub/contact">Contact Us</a></span> |
<span><a href="https://adoc.pub/cookie_policy">Cookie Policy</a></span>
</div>
</div>
</footer>
<!-- Modal -->
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" on="tap:login.close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="add-note-label">Sign In</h4>
</div>
<div class="modal-body">
<form action="https://adoc.pub/login" method="post">
<div class="form-group">
<label class="sr-only" for="email">Email</label>
<input class="form-input form-control" type="text" name="email" id="email" value="" placeholder="Email" />
</div>
<div class="form-group">
<label class="sr-only" for="password">Password</label>
<input class="form-input form-control" type="password" name="password" id="password" value="" placeholder="Password" />
</div>
<div class="form-group">
<div class="checkbox">
<label class="form-checkbox">
<input type="checkbox" name="remember" value="1" />
<i class="form-icon"></i> Remember me
</label>
<label class="pull-right"><a href="https://adoc.pub/forgot">Forgot password?</a></label>
</div>
</div>
<button class="btn btn-primary btn-block" type="submit">Sign In</button>
</form>
</div>
</div>
</div>
</div>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-177279549-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-177279549-1');
</script>
<script src="https://adoc.pub/assets/js/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://adoc.pub/assets/css/jquery-ui.css">
<script>
$(function () {
$("#document_search").autocomplete({
source: function (request, response) {
$.ajax({
url: "https://adoc.pub/suggest",
dataType: "json",
data: {
term: request.term
},
success: function (data) {
response(data);
}
});
},
autoFill: true,
select: function( event, ui ) {
$(this).val(ui.item.value);
$(this).parents("form").submit();
}
});
});
</script>
<!-- cookie policy -->
<div id="ADOCPUB_cookie_box" style="z-index:99999; border-top: 1px solid #fefefe; background: #FFC107; width: 100%; position: fixed; padding: 5px 15px; text-align: center; left:0; bottom: 0;">
Our partners will collect data and use cookies for ad personalization and measurement. <a href="https://adoc.pub/cookie_policy" target="_blank">Learn how we and our ad partner Google, collect and use data</a>. <a href="#" class="btn btn-success" onclick="accept_ADOCPUB_cookie_box();return false;">Agree & close</a>
</div>
<script>
function accept_ADOCPUB_cookie_box() {
document.cookie = "ADOCPUB_cookie_box_viewed=1;max-age=15768000;path=/";
hide_ADOCPUB_cookie_box();
}
function hide_ADOCPUB_cookie_box() {
var cb = document.getElementById('ADOCPUB_cookie_box');
if (cb) {
cb.parentElement.removeChild(cb);
}
}
(function () {
var ADOCPUB_cookie_box_viewed = (function (name) {
var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"));
return matches ? decodeURIComponent(matches[1]) : undefined;
})('ADOCPUB_cookie_box_viewed');
if (ADOCPUB_cookie_box_viewed) {
hide_ADOCPUB_cookie_box();
}
})();
</script>
<!-- end cookie policy -->
</body>
</html>
