Webdesign-Grundlagen 2. Techniken CSS-P Tutorial (Quelltext): http://brainjar.com/css/positioning/
Webdesign-Grundlagen 2. Techniken Mozilla DOM Samples (DHTML) http://mozilla.org/docs/dom/samples (Mozilla benützen!)
JavaScript = clientseitige Scriptsprache z.B. für einfache Berechnungen, Popup Fenster, Mouseovers usw.
DHTML = Mit Hilfe von JavaScript CSS Eigenschaften verändern. Z.B.
s ein und ausblenden, Schneeflocken animieren u.s.w.
Webdesign-Grundlagen
3. Print vs. Web
Bis zum Rand: http://ewo.co.at
Ganz flüssig: http://legowood.c3o.org
http://lindenhof-beinhauer.at
Papier vs. Browser: Web: Man kann sich auf nichts verlassen: Auflösung, Fenstergröße, Schriftarten, Farbtiefe, installierte Plugins, Gamma,...
Flexible, flüssige Designs sind möglich User hat Einfluss auf Aussehen: Schriftgröße in allen Browsern einstellbar Evtl. sogar Nur-Text oder Sprachbrowser.
Eh klar: Interaktivität & Animation
Webdesign-Grundlagen 3. Print vs. Web Farben: Webfarben, sollen überall gehen Mittlerweile ziemlich vernachlässigbar Popups mit fixer Größe sind kein Ausweg: Usability!
Webdesign-Grundlagen
4. Navigation & Struktur
Auf jeder Seite, auf einen Blick: Wo bin ich, was gibts hier, wohin kann ich gehen Breadcrumbs: Home > Kat. > Unterkat > Seite Dropdowns, Flyouts "Mystery meat navigation" vermeiden
Hyperlinks
Aussagekräftige Wörter verlinken: „Spielplan“ statt „Um unseren Spielplan zu sehen klicken Sie hier“.
Von normalem Text abheben Nichts anderes unterstreichen
Webdesign-Grundlagen
5. Browser & Webstandards
Dasselbe Menü, Phoenix & Lynx 1. IE/Win (5, 5.5, 6) 2. IE/Mac, Mozilla, Safari, Opera 3. Netscape 4 4. iCab, Lynx, Arachne, Handy/PDA, TV,...
Kompromisse eingehen (1~2) Zumindest benutzbar (2-3) Notfalls verschiedene CSS je nach Browser (Erkennung JS oder PHP, etc) W3C-Standards als Grundlage Degradable: abwärtskompatibel
Webdesign-Grundlagen 5. Browser & Webstandards Auflösung: 800x600 Grundlage, Zielgruppe!
Achtung: Taskbar, Scrollbar, Fenster!
• Netscape 4 kann kaum CSS(-P) • IE6/Win, IE5/Mac, Moz, Opera7 halten sich gut an Standards • IE5/Win und IE6/Win: Wichtiger Unterschied bei CSS-P (Größe von
s) -> Tanteks Box Model Hack • Mozilla: CSS-2 (position:fixed, abgerundete Ecken, usw.)
Webdesign-Grundlagen
6. Suchmaschinen
http://google.com/addurl.html
http://alltheweb.com/add_url.php
http://altavista.com/addurl/new/ Suchmaschinen-Bots prüfen Seite Finden gut verlinkte Seiten automatisch Bei manchen kostenfreie Anmeldung • Google (Yahoo, AOL) • Inktomi (MSN) • FAST (Lycos, T-Online) • Teoma (Ask Jeeves) • Altavista ODP-Anmeldung (dmoz.org) = Google Directory, usw.
Webdesign-Grundlagen 6. Suchmaschinen + Semantisches Markup
Überschrift
+ Viel Inhalt, Keywords + Incoming Links von guten Seiten + Guter Titel
vs „Willkommen..“ od. Sonderzeichen.
+ Meta-Tags
+ alt & title-Attribute 
+ Keywords in URL, nicht zu viele Parameter http://wirkstoff.at/tshirt/23 vs.
http://wirkstoff.at/katalog?t=23&seite=2&zoom=ja
Webdesign-Grundlagen 6. Suchmaschinen - Flash & andere Plugins - Inhalt in Bildern, Videos - Inhalt in JavaScript - Frames (<![CDATA[ hilft) - Spam</p>
<a id="p21" href="#"></a>
<p>Webdesign-Grundlagen</p>
<p><b>7. Accessability</b></p>
<p>Accessability prüfen: http://cast.org/bobby/ • Textbrowser • Sprechender Browser • Braillezeile wie für Suchmaschinenbots: Inhalt in maschinenlesbarem Text logisch strukturiert (<strong> vs <b>!) Lynx: Informations-design.fh-joanneum.at</p>
<p><b>Druckbarkeit</b></p>
<p>Seperate CSS-Anweisungen für media="print" (Seitenumbrüche, evtl Menü verbergen, usw)</p>
<a id="p22" href="#"></a>
<p>Webdesign-Grundlagen</p>
<p><b>8. Tipps Tabellen</b></p>
<p>Werden erst angezeigt wenn ihr gesamter Inhalt geladen wurde. In mehrere aufteilen hilft manchmal (Header schnell da, Rest lädt noch)</p>
<p><b>WYSIWYG-Editoren</b></p>
<p>Legen idR wenig Wert auf Standards, Suchmaschinenfreundlichkeit, Accessability Oft sieht man es den Seiten an Aber mit Wissen gute Ergebnisse erzielbar</p>
<a id="p23" href="#"></a>
<p>Webdesign-Grundlagen 8. Tipps</p>
<p><b>Dateinamen</b></p>
<p>• Groß- != Kleinschreibung (Unix-Server) • Leerzeichen, Sonderzeichen (+äöüß) riskant</p>
<p><b>Flash</b></p>
<p>macht bei Info-Websites keinen Sinn Usability, Durchsuchbarkeit,...</p>
<p>Gut für Filmwebsites, Kunst, Multimedia Intros sowieso nie</p>
<a id="p24" href="#"></a>
<p>Webdesign-Grundlagen 8. Tipps</p>
<p><b>Techniken</b></p>
<p>• gestrichelte Linien • Transparenzen • PNGs mit Alpha-Transparenz • animierte GIFs (Mouseover, 1malig, ...) • Stylesheetwechsler</p>
<a id="p25" href="#"></a>
<p>Webdesign-Grundlagen</p>
<p><b>9. Server Scriptsprachen</b></p>
<p>PHP, ASP, Perl/CGI, Python, ColdFusion (CFM), Java-Servlets (J2EE) Browser: „GET index.php“ Server: Interpretiert Inhalt von index.php</p>
<p>Gibt dementsprechend HTML aus Browser: bekommt ganz normales HTML</p>
<p><b>Anwendungsgebiete</b></p>
<p>Formularmailer, Onlineshops, Datenbanken, alles was Daten auf dem Server speichern muss</p>
<a id="p26" href="#"></a>
<p>Webdesign-Grundlagen 9. Server Int. Domains registrieren $10/a http://www.registerfly.com</p>
<p>(Kreditkarte!)</p>
<p><b>Webspace</b></p>
<p>Speicherplatz im Internet bei einem Webhost (idR Linux-Server) Optional: Datenbank, PHP-Unterstützung,… Upload per FTP Transferlimit</p>
<p><b>Domain</b></p>
<p>com/net/org/biz/info/name ~ $10/Jahr at = Kopfweh!</p>
<p>Weiterleitung oder „echt“ (Voraussetzung: DNS-Einträge, virtueller Server vom Webhost)</p>
</div>
</section>
</div>
</div>
</div>
</main>
<footer>
<div class="container mt-3">
<div class="row justify-content-between">
<div class="col">
<a href="/">
<img src="/theme/studyslide/static/logo-slideum.png" />
</a>
</div>
</div>
<div class="row mt-3">
<ul class="col-sm-6 list-unstyled">
<li>
<h6 class="mb-3">Company</h6>
<li>
<i class="fa fa-location-arrow"></i>
Nicosia Constantinou Palaiologou 16, Palouriotissa, 1040
<li>
<i class="fa fa-phone"></i>
+357 64-733-402
<li>
<i class="fa fa-envelope"></i>
info@slideum.com </ul>
<ul class="col-6 col-sm-3 list-unstyled">
<li>
<h6 class="mb-3">Links</h6>
<li>
<a href="/about">About</a>
<li>
<a href="/contacts">Contact</a>
<li>
<a href="/faq">Help / FAQ</a>
</ul>
<ul class="col-6 col-sm-3 list-unstyled">
<li>
<h6 class="mb-3">Legal</h6>
<li>
<a href="/terms">Terms of Service</a>
<li>
<a href="/privacy">Privacy policy</a>
<li>
<a href="/page.html?code=public.usefull.cookie">Cookie policy</a>
<li>
<a href="/page.html?code=public.usefull.disclaimer">Disclaimer</a>
</ul>
</div>
<hr>
<p>slideum.com ©
2024, Inc. All rights reserved.</p>
</div>
</footer>
<div class="modal directory" id="directory-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Directory</h5>
<button class="close" type="button" data-dismiss="modal">×</button>
</div>
<div class="modal-body"></div>
</div>
</div>
</div>
<script src="/theme/common/static/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="/theme/common/static/jquery_extra/dist/jquery-extra.js"></script>
<script src="/theme/common/static/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="/theme/common/static/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
<script>
var __path_directory = [ ]
!function __draw_directory(data, root, uuid)
{
var ul = $('<ul>', uuid &&
{
id: 'category' + uuid,
class: !__path_directory.includes(uuid) ? 'collapse' : null
});
for (var item in data)
{
var li = $('<li>').appendTo(ul);
if (item = data[item], item.children)
{
li.append('<a href=#category' + item.id + ' data-toggle=collapse>')
__draw_directory(item.children, li, item.id);
}
else
{
li.append('<a href=' + item.url + '>');
}
var a = $('> a', li).addClass('item').text(item.name)
.append($('<a class="link fa fa-external-link" href=' + item.url + '>'));
if (item.id === +__path_directory.slice(-1))
{
a.addClass('active');
}
/*
if (item.id !== __path_directory[0])
{
a.addClass('collapsed');
}
*/
}
root.append(ul);
}
([{"id":1,"name":"Food and cooking","url":"/catalog/Food+and+cooking","children":null},{"id":2,"name":"Education","url":"/catalog/Education","children":null},{"id":3,"name":"Healthcare","url":"/catalog/Healthcare","children":null},{"id":4,"name":"Real estate","url":"/catalog/Real+estate","children":null},{"id":5,"name":"Religion ","url":"/catalog/Religion+","children":null},{"id":6,"name":"Science and nature","url":"/catalog/Science+and+nature","children":null},{"id":7,"name":"Internet","url":"/catalog/Internet","children":null},{"id":8,"name":"Sport","url":"/catalog/Sport","children":null},{"id":9,"name":"Technical documentation","url":"/catalog/Technical+documentation","children":null},{"id":10,"name":"Travel","url":"/catalog/Travel","children":null},{"id":11,"name":"Art and Design","url":"/catalog/Art+and+Design","children":null},{"id":12,"name":"Automotive","url":"/catalog/Automotive","children":null},{"id":13,"name":"Business","url":"/catalog/Business","children":null},{"id":14,"name":"Government","url":"/catalog/Government","children":null}], $('#directory-aside'));
var __root_directory = $('#directory-aside > ul');
$('#directory-aside')
.on('show.bs.collapse', function()
{
//console.log('show.collapse')
})
.on('hide.bs.collapse', function()
{
//console.log('hide.collapse')
});
$('#directory-modal')
.on('show.bs.modal', function()
{
$('[class$="body"]', this).prepend(__root_directory);
})
.on('hide.bs.modal', function()
{
$('#directory-aside').prepend(__root_directory);
});
$('.directory-mobile').on('click', function(e)
{
e.preventDefault();
});
$('.directory .link').on('click', function(e)
{
e.stopPropagation();
});
</script>
<script>
function scrollToViewport()
{
$('html, body').stop().animate(
{
scrollTop: $('.navbar').outerHeight()
},
1000);
}
setTimeout(scrollToViewport, 1000);
$(window).on('orientationchange', scrollToViewport);
$('[data-toggle="tooltip"]').tooltip();
</script>
<script async src="//s7.addthis.com/js/300/addthis_widget.js#pubid=#sp('addthis_pub_id')"></script>
<!-- Yandex.Metrika counter -->
<script type="text/javascript">
(function (d, w, c) {
(w[c] = w[c] || []).push(function() {
try {
w.yaCounter28397281 = new Ya.Metrika({
id:28397281
});
} catch(e) { }
});
var n = d.getElementsByTagName("script")[0],
s = d.createElement("script"),
f = function () { n.parentNode.insertBefore(s, n); };
s.type = "text/javascript";
s.async = true;
s.src = (d.location.protocol == "https:" ? "https:" : "http:") + "//mc.yandex.ru/metrika/watch.js";
if (w.opera == "[object Opera]") {
d.addEventListener("DOMContentLoaded", f, false);
} else { f(); }
})(document, window, "yandex_metrika_callbacks");
</script>
<noscript><div><img src="//mc.yandex.ru/watch/28397281" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
<style>
@media screen and (max-width: 768px)
{
.cc-revoke
{
display: none;
}}
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function() {
window.cookieconsent.initialise(
{
content:
{
href: "https://slideum.com/dmca"
},
location: true,
palette:
{
button:
{
background: "#fff",
text: "#237afc"
},
popup:
{
background: "#007bff"
},
},
position: "bottom-right",
revokable: true,
theme: "classic",
type: "opt-in"
})});
</script>
</body>
</html>
]]>