team.eliZZZa * webdesign * screendesign * xhtml * css * jQuery * ajax * fragen & antworten * tutorials * community
Club der wifen Nasen – Gemeinsam sind wir schlauer!
Sicherheitslücken bei Passworteingabe anno 2000
Für die Profis aufgelesen: Sicherheitslücken für Passwortfunktionen, 10 Jahre altes Dokument aber immer noch interessant zu lesen.
Webseiten in 3D – Papervision3D
Dieser Artikel zeigt, was für gaaaanz arbeitsame Webdesigner einmal raussehen könnte:
Kursmitschrift Webdesign 2009 Basiskurs Fortsetzung
KURSMITSCHRIFT TEIL 2
/* Universalselektor: Für alle Elemente gilt */
margin:
0px auto 0px auto
Top Right Bottom Left
(margin: top, right, bottom, left) werden gesetzt um auch in FIREFOX den Balken
mittig bzw. Zentriert zu setzen. Wird ins .css
geschrieben.
Das padding bezieht sich auf den Bereich innerhalb des Rahmens (border)
Das margin bezieht sich auf den äusseren Bereich des Rahmens (border)
Font Size in HTML (.css ganz oben eintragen)
62,5% für alle Browser = 10px (entspricht etwa 100%)
Durch den Fixbefehl von 62,5% + 10px Schriftgrösse muss man zusätzlich im
.css (body) folgendes definieren: 1,3em = quasi der Muliplikator ausgehend von
10px = 100% x 1.3em entspricht somit 13px Schriftgrösse!
Das BLOCKELEMENT “div”
Ein DIV (Blockelement) beginnt immer in einer neuen Zeile!
In .css sieht die Schreibweise des “div” so aus: div#..……
Wir haben ein zusätzliches div#header in unser .css eingebaut und zwar:
div#header: ul li {display:inline} (ein “a”= Inline Element)
Webinfos : www.artzzz.net
www.overnightprints.de (Online Druckerei – 1.000 Stk. für € 9.-
www.printshop.de (Prägestempel – Standard Handmodell für € 89.-)
Transparenz erzwingen für .png24 = pngfix.js
Illustrative Grafik = .gif
Photos = .jpg
DESIGN INFO: Der Gesamtinhalt in KB auf einer Seite sollte nicht 100KB
übersteigen.
pro Bild max. 40KB ideal sind 20-30KB!
Der Header darf etwas grösser sein.
Header von TEAM ELIZZZA besteht aus einem Farbbalken und der Schrift, die
aus tanzenden Personen besteht.
Die Ladezeit beträgt etwa 10-20 Sekunden.
Man orientiere sich nach der 3 KLICK Strategie: 3x klicken um jede INFO zu
finden.
Cache: (sprich-kasch) hierbei handelt es sich um einen Zwischenspeicher damit
Dreamweaver die links (Relationen der Datei) richtig aufreiht bzw. anreiht!
siehe
Dreamweaver Menüleiste einstellen:
Site verwalten od. Neue Site erstellen anklicken.
Einstellungen: FTP anwählen.
Klicke auf Neu…. in Sites verwalten!
Grafix1
Klicke auf FTP Server unterhalb von Site!
Grafix2+3
Der Upload würde unnötig lange dauern , deshalb die Meldung nur die jeweilige Seite
up(zu)loaden. Auch beim Download sollte man die Datei markieren die man vom Server
runterholen möchte, da ansonsten die gesamte Seite downgeloaded wird.
Die oben eingefügte Grafik wird bei Windows Usern wahrscheinlich nicht angezeigt
werden und diese sehen gleich diese Grafikbox mit FTP Konfigurationsmenü.
Grafix4+5
In unserem Fall wäre der Name des Servers : http://www.peoplezzz.net
FTP Host: ftp.peoplezzz.net
Host-Ordner: Kann in den meisten Fällen frei gelassen werden, sucht sich selbständig!
Anmeldung: bezieht sich auf den Namen der eigenen Seite: z.B. inge.peoplezzz.net oder
lissom.peoplezzz.net, hannes.peoplezzz.net, ferry.peoplezzz.net.
Kennwort: das jeweilige Kennwort
Wichtig: mittleres Kasterl Grafix6
Dateien speichern, anklicken.
REMOTE – INFOS (Mac Menü)
Grafix7
CODE FORMAT: UF (unix) einstellen, (Windows Menü)
Grafix8
Windows Dreamweaver Menü
Radiobutton „Nach Eingabe der öffnenden Tags“ anklicken!
Grafix9
Weitere wichtige Voreinstellungen: links auswählen bzw. markieren
Grafix10
und rechts mit + der Auswahl hinzufügen !
Grafix11
Kopieren und Einfügen: Radiobutton „nur Text“ anklicken.
Grafix12
Neues Dokument: HTML/XHTML 1.0 strict + Unicode (UTF-8)
Grafix13
Schriftarten: Unicode
Grafix14
Grafix15
BROWSWER VORSCHAU: Firefox als Primärbrowser wählen !
Grafix16
DESIGN NOTES: Nicht Anklicken!
Notiz: Wer über keine automatische Screenfunktion verfügt, hat die Möglichkeit bei
www.google.com in Suchfunktion MIREK’S FREE (MW SNAP) Kameraprogramm
runterzuladen. Wichtig nur den Mirek’s Link direkt verwenden or try www.snap.com !
Kurze Schreibweisen in .css
Für margin und padding:
Lange Schreibweise = (top)10px (right)20px (bottom)30px (left)20px
Kurze Schreibweise= (top)10px (r+l)20px (bottom)30px
Border width= 10px (o+u) 20px(r+l)
Wenn bei margin steht: 40px (bezieht sich das auf alle 4 SEITEN!!)
Notiz: Kurzbefehl – STRG (APFEL) +D = Kopieren bzw. Duplizieren!
Audio und Videoprogramme finden wir auf: http://avs4you.com
MENÜPUNKTE mit Gummiband verlinken: Den Menüpunkt markieren und in der
Eigenschaftsleiste im Dreamweaver das Gummiband aktivieren und auf den markierten
Text ziehen um interne Verlinkungen auf der Seite herzustellen.
Linkdefinition im .css sheet !
a: link = Aussehen des gesetzten Links, zumeist in blauer Farbe, kann eingefärbt werden.
a: visited link = der bereits besuchte Link, kann beliebig gefärbt werden, zumeist violett.
a: hover = mouse_over link bzw. der Effekt der entsteht wenn man mit der Mouse streift.
a: active {outline:none} sieht man kaum, ist eine meist rot gestrichelte Linie wenn man
den Link aktiviert!
Notiz: Wenn eine Schrift aus mehr als einem Wort besteht, muss das in der .css immer in
Anführungszeichen stehen. Z.B. „Times New Roman“
Gute Menü und Navigationsvorlagen finden wir auf http://jazzz.biz
Geld verdienen mit Amazon: http://partnernet.amazon
Widgets von Amazon dazu direkt holen.
http://www.zanox.com = Globales Online Marketing – we create partners!
3 WERTE SYSTEM ! Content = Inhalt = Inhalt lockt Besucher
1. UNIQUE VISITOR/VISITS
2. PAGE NEWS
3. TIME VISIT
Die Hälfte aller Besucher – monatlich – sollten NEU sein!
Notiz: Rumänien druckt Flyer/Stk. für 80 cent!
Illustrator Tutorial für Verrückte – Auto
Da kann man wieder sehen was alles möglich ist, allerdings mit einem Aufwand von ein paar 100 Stunden.
Ich würd da gleich ins Cinema 3D wandern, aber bitte 
Illustrator Tutorial – Basic Typo
http://vector.tutsplus.com/tutorials/tools-tips/illustrators-type-tool-a-comprehensive-introduction/
Illustrator Tutorial – Buch, Haar und Weinglas
Aus der Reihe 50 3D Illustrator Tutorials
http://www.smashingmagazine.com/2009/06/16/50-excellent-3d-adobe-illustrator-tutorials/
3 sehr erwähnenswerte Tutorials:
stelle ein 3D Buch mit Illustrator her
stelle glänzende Haare mit Illustrator her
http://vector.tutsplus.com/tutorials/illustration/easily-make-shiny-realistic-vector-hair/
stelle ein Weinglas mit Illustrator her
http://vector.tutsplus.com/tutorials/illustration/create-a-stylized-semi-realistic-wine-glass/
CSS Tutorial – Basics, negative Margins bis zu Sprechblasen
sehr gute Demo wie man ein div Element zentriert
http://www.dezinerfolio.com/2007/05/02/the-simplest-way-to-horizontally-and-vertically-center-a-div
sehr übersichtlicher CSS Tutorial Blog
http://www.smashingmagazine.com/2009/08/03/mastering-css-styling-design-elements/
negative Margins
http://www.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/
Illustrator Tutorial – 3D Globus
http://www.blog.spoongraphics.co.uk/tutorials/create-a-rotatable-globe-in-adobe-illustrator
Webdesign 1 – 3. Teil (27.5.)
sendblaster.com – programm 60 USD
menüleiste steht vom body aus hinein -> im CSS “a” einen span drüberlegen, um zu schieben. (kommt heute später…)
summe der bilder einer seite sollte 100k nicht übersteigen
mail me: <li><a href=”mailto:xy@z.com?Subject=Mail aus Wifi Testseite”></a>mailnsemal</li>
von bots ausgelesen, zugespammt!!!
mailadresse eintragen, text und about, dann ENCRYPT, diesen code in das (leergemachte <li>< /li> einfügen!
<script type=”text/javascript”>
/*<![CDATA[*/
/***********************************************
* Encrypt Email script- Please keep notice intact
* Tool URL: http://www.dynamicdrive.com/emailriddler/
* **********************************************/
<!-- Encrypted version of: xy [at] *.*** //–>
var emailriddlerarray=[120,121,64,122,46,99,111,109]
var encryptedemail_id82=” //variable to contain encrypted email
for (var i=0; i<emailriddlerarray.length; i++)
encryptedemail_id82+=String.fromCharCode(emailriddlerarray[i])
document.write(‘<a href=”mailto:’+encryptedemail_id82+’?subject=Mail aus Wifi Testseite”>Mailnsemermal!</a>’)
/*]]>*/
</script>
google mail: nachrichten weiterleiten, aber kopie hierlassen
http://mail.google.com/mail/#settings/fwdandpop
daheim mit thunderbird einstellen und im normalen mail abrufen, kann dann auch daheim im normalen mailprogramm gmail verschicken.
body id=”home” einfügen: benannter ankerpunkt “top”
ergibt:
<body id=”home”>
<a name=”top” id=”top”></a>
zeile anwählen, in hyperlink: #top
eingeben.
einfügen/bild, im kastl alternativ text einfügen
<img src=”images/members/romen.jpg”>
width height gelöscht
div#maintext img {float: right; width: 120px; height: auto;}
div#maintext img m{float: right;}
div#maintext img {float: left; clear: both; width: 120px; height: auto;}
div#maintext img.m{float: right; border-color: #99f} /* wir geben den männdern class m und rutschen sie nach rechts */
div#maintext img {float: left; clear: both; width: 120px; height: auto; margin: 0px 10px 20px 0px; border: 4px solid pink;} /* marghin = abstant text/bild */
div#maintext img.m{float: right; border-color: #99f; margin: 0px 0px 20px 10px;} /* wir geben den männdern class m und rutschen sie nach rechts, margin-abstand auf die li seite, weil das bild nun re steht */
border: 4px solid pink; padding: 10px;
bilder zur info, illu etc. ins html
blockquote= text hervorhebe-kastln
-> alle html codes
auch html4you, selfhtml
einfügen/html/textobjekt/b
(BLOCKSATZ FUNKTIONIERT NICHT IM WEB!!!)
einzweiter absatz weiter oben bekommt KEINE klasse
blockquote {font-family:”Times New Roman”, Times, serif; font-style:italic; margin: 1em 20px 1.2em; background: #ededed; border: 1px dashed #CCC; padding: 1em 20px 1.2em; font-size: 1.1em; font-size: 1.1em;}
blockquote{float: right; margin: left: 20px; width: 200px;}
es geht: span /spanne, keine struktur-bedeutung, wie div (dumme, leere hüllen)
site – zitat
.dore{}
klassen zuweisen: dore wichtig
3x ansteuerbar
contentmanagement.de (content management überblick)
sind die 3 grossen content management systeme, gut verbreitet.
ca. 80% lassen quellenkommentar in eigener site drinnen 20% verheimlichen es
plone.org gut davon wegsiedelbar, aber kleiner
Webdesign 1 – 2. Teil (22.5.)
graphicriver.net
trigami.com – beiträge schreiben, blog etc. anmelden, blog wird bewertet, bekommst angebote worüber du schreibst, werbebeitrag-button einfügen, für 300 wörter 20 euro, die gibt man im paypal dann für webdesigns aus.
fontyukle.com – türk. fonts gratis
morguefile.com – gratis foto suchmaschine
fotolia.com
istockphoto.com
dreamstime.com
shutterstock.com
photodisk.com – dachagentur getty
bgpatterns.com – tiles
csstea.com – SAMMLUNG
stripedbgs.com
stripemania.com
pdf-it – suchen wir noch
dynamicdrive.com
http://www.antonhofmayer.at/
http://www.christofwagner.com/
http://www.christianpostl.com/
in hyperlink eintippen (SELBST WENN HTM DATEI NOCH NICHT EXISTIERT) oder am rädchen ziehen und zur bestehenden .htm verlinken.
Ziel: _blank = HIER GEHT EIN NEUES FENSTER AUF!
-> nur sinnvol bei externen links !
/* */ ein kommentar erstellen, das NICHT aktiv wird
LINK FÄRBUNG IMMER DIE REIHENFOLGE!
a{color: #FF0000;}
a:link {/*border-left: 4px solid #FF9900; */}
a:visited {text-decoration: none;}
a: hover {}
a:active {}
div#nav_serivce a, div#nav_main a {}
im gmail auf wordpress eingetragen!
lerograph /123
________________________________________________
Album: http://www.bananalbum.com/
_
guiness?* {margin: 0px; padding: 0px; border: 0px}
html {height: 101%; background: url(images/rose.gif); font-size: 62.5%; font-family: “Trebuchet MS”, Helvetica, sans-serif;}
body {text-align: center; padding-top: 40px; background: url(images/bg_rose2.jpg) repeat-x 100px 0px; font-size: 1.3em;}
h1, h2, h3, h4, h5, h6 {font-family: “Times New Roman”, serif; padding: 0em, 0em, 0.2em, 0em; margin: 1em, 0em, 0.4em, 0em;}
h1 {font-family: Verdana, Arial, Helvetica, sans-serif;}
div#wrapper {
width: 960px; margin: 0px auto 0px auto; text-align:left; background: #FFFFFA;}
div#nav_service ul li, div#nav_main ul li{
font: bold;
display: inline;
list-style-type: none;
margin-right: 1em;
padding-right: 1em;
border-right: 1px solid;
}
div#header {
width: 960px; height: 200px; background: url(images/header_team2.jp
div#header h1 {marigin: 0px; padding: 20px 20px 0px 0px; text-align: right;}
div#header h2 {marigin: 0px; padding: 20px 20px 0px 0px; text-align: right;}
div#header h3 {marigin: 0px; padding: 10px 20px 0px 0px;}
div#nav_main { background: #ddd3c9; color: #FFFFFA;}
div#nav_service {background: #ddd3c9; color: #FFFFFA; text-align:right}
div#wrapcontent {background: #f4f1e8; overflow: auto;}
div#maintext {float: left; width:600px; margin: 20px;}
div#sidebar {height: 960px; float: right; width:300px; background: red; margin: 0px; padding: 3px;}
div#footer {margin-top: 10px; border: 1px dotted #CCC; padding: 10px;}
span.wichtig {}
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>lernat | Team Unique | WebDesign Wien WIFI</title>
<link href=”styles.css” rel=”stylesheet” type=”text/css” media=”screen” />
<link href=”print.css” rel=”stylesheet” type=”text/css” media=”print” />
<style type=”text/css”>
<!–
.Stil1 {color: #008347}
.Stil3 {color: #46351a; }
–>
</style>
</head>
<body id=”home”>
<div id=”wrapper”>
<div id=”nav_service”>
<ul>
<li>Home</li>
<li>Über uns</li>
<li>Impressum</l
<li>Kontakt</li>
</ul>
</div><!– #nav_service –>
<div id=”header”><h1>Elizzza+Team Unique</h1>
</div>
<!– #header –>
<div id=”nav_main”>
<ul>
<li>Home</li>
<li>Unser Team</li>
<li>Unsere Produkte</li>
<li>Specials</li>
</ul>
</div><!– #nav_main –>
<div id=”wrapcontent”>
<div id=”maintext”>
<div id=”lipsum”>
<h1>Lorem ipsum dolor sit amet, </h1>
<p>consectetur adipiscing elit. Aliquam nunc tellus, viverra vitae iaculis vel, vehicula tristique nisi. Curabitur sagittis tellus sit amet magna euismod ornare. Mauris at tellus risus, varius eleifend nibh. Pellentesque nec enim lacus. Aenean euismod cursus felis eu consectetur. Duis orci arcu, adipiscing vel congue semper, consectetur vel velit. Quisque mi lectus, placerat eu tempus quis, porta rhoncus urna. Aliquam at lacus vel massa venenatis molestie. </p>
<p>Morbi erat justo, luctus vel dignissim ac, mattis ac tellus. Cras scelerisque, quam et auctor mollis, purus justo malesuada massa, a dignissim dui ipsum at quam. Quisque imperdiet, velit a cursus cursus, lacus neque lobortis metus, consequat dignissim purus sem sed tellus. Ut a nibh sit amet nulla dignissim placerat. Morbi ornare turpis non est tempus tristique. Nam lobortis eros eget nisl auctor quis porta velit dictum. </p>
<p> </p>
<h3>Vestibulum pharetra viverra aliquam. </h3>
<p>Curabitur ultrices tincidunt dapibus. Vivamus gravida, odio quis condimentum pharetra, sem sem tempor lacus, ac convallis arcu tellus ac quam. Integer consequat sem mauris. Donec laoreet, purus nec molestie venenatis, sapien enim aliquet neque, a rhoncus nibh risus eget lacus. Pellentesque condimentum faucibus lacus, non vestibulum mi pharetra sed. Fusce odio sapien, tempus quis congue ut, suscipit quis nisi. Morbi at nisl lorem. Vivamus orci leo, blandit ac fringilla sit amet, viverra nec eros. Nunc orci sapien, suscipit at semper et, ultrices at enim. Pellentesque quis massa mi. Nunc faucibus ultricies luctus. Duis fermentum tellus eu nibh sodales ornare et non nisl. </p>
<p>Etiam pellentesque sem fringilla lacus elementum sollicitudin. Sed accumsan lobortis porta. Integer congue dui non lorem tempor et egestas turpis pharetra. Phasellus et felis odio, nec porttitor dui. Aliquam sit amet ligula in tortor iaculis congue feugiat ut nibh. Suspendisse eget sapien augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin volutpat suscipit bibendum. </p>
<p> </p>
<h3>Quisque sed odio odio. Aliquam erat volutpat. </h3>
<p>Aliquam luctus augue ac eros hendrerit ornare. Aliquam vitae lorem ac lorem facilisis cursus. Duis lacus tellus, adipiscing pellentesque consectetur non, tempor a ligula. Vivamus tincidunt mauris eu enim accumsan ultrices. Fusce a odio sit amet turpis aliquam dapibus. Nam neque magna, imperdiet nec aliquet et, placerat sit amet eros. Pellentesque dolor turpis, pretium id lobortis at, tincidunt quis justo. Donec eget dolor eu diam pretium pharetra sit amet id lectus. Vivamus sit amet sem nunc. Etiam blandit blandit tellus ut ultrices. </p>
<p>Suspendisse sagittis tortor sed urna ullamcorper fermentum. Nam rutrum dolor eu augue pretium imperdiet. Nunc facilisis feugiat nunc, nec fermentum metus dapibus commodo.</p>
<p> </p>
<h3>Praesent sit amet elit quis est aliquam mollis. </h3>
<p>Duis vel tellus nisl. Suspendisse aliquam, metus a dapibus volutpat, ante orci tincidunt metus, vitae commodo erat tellus id purus. Curabitur tincidunt ante ut enim posuere blandit. Vivamus lobortis posuere nunc. Integer eu libero vel massa eleifend dictum at in eros. Suspendisse imperdiet, dui quis rhoncus fermentum, nisi mauris aliquam erat, ac eleifend elit erat quis ipsum. Sed feugiat congue nunc, non dignissim est pretium eget. Morbi posuere arcu id augue elementum egestas. Aliquam egestas, elit a venenatis mollis, ante turpis pharetra mauris, ut iaculis odio ipsum vel sapien. Etiam auctor elementum placerat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut dui quam, fermentum non lacinia eget, consectetur sit amet nulla. Nulla porttitor posuere mi, ut scelerisque enim mollis sed. </p>
<p>Donec fermentum semper nunc, vitae auctor ipsum bibendum at. Cras mi arcu, mollis ut euismod non, accumsan id tellus. Aliquam a turpis et augue adipiscing porta. Maecenas posuere nunc vel mi tincidunt id bibendum nulla elementum. Vivamus gravida aliquet urna. Integer et felis turpis, et vestibulum nisi. Nullam facilisis, ligula id tempor pharetra, ligula arcu ultrices leo, ac imperdiet ipsum turpis sit amet diam. <br />
Duis in est ipsum, ac rutrum felis. Curabitur blandit bibendum orci, eget vulputate justo malesuada quis. Suspendisse aliquam sapien et augue pretium facilisis. Donec rutrum urna eget ipsum consectetur pharetra. Integer commodo, urna sit amet rhoncus dignissim, dolor felis porta neque, et sodales massa arcu non nunc. </p>
</div>
</div>
<!– #maintext –>
<div id=”sidebar”>sidebar</div><!– #sidebar –>
</div>
<div id=”footer”>footer</div>
<!– #footer –>
</div><!– #wrapper –>
</body>
</html>
link im text: im entwurf vollen hyperlink angeben: http://www.cnn.com
Ziel: _blank = HIER GEHT EIN NEUES FENSTER AUF!
-> nur sinnvol bei externen links !
LINKS EINFÄRBEN:
a:link {/*border-left: 4px solid #FF9900; */}
IM CSS KOMMENTIEREN:
/* */ ein kommentar erstellen, das NICHT aktiv wird
LINK FÄRBUNG IMMER DIE REIHENFOLGE: LINK-VISITED-HOVER-ACTIVE!
a{color: #FF0000;}
a:link {/*border-left: 4px solid #FF9900; */}
a:visited {text-decoration: none;} (KEINE UNTERSTREICHUNG IM LINK)
a: hover {}
a:active {}
Natalie Leroy
Today at 4:01pm
links in div ansteuern:
div#nav_serivce a, div#nav_main a {}
Natalie Leroy
Today at 4:12pm
FFCC00 kann auch geschrieben werden: FCO (verkürzt)
Webdesign 1 – 1. Teil Mitschrift Nachtrag
HTML stellt den Content bereit, CSS übernimmt die Gestaltung
firebug ad-on in firefox installieren!
http://www.csszengarden.com/?cssfile=/182/182.css&page=3
http://de.selfhtml.org/ – Umfangreiches Web Tutorial
http://www.domesofelounda.com/default.aspx
GALERIE EFFEKTE funktionieren z.B. mit Mootools
http://www.digitalia.be/software/slimbox#demo
… oder auch anderen vorgefertigten Alben
W3 Zertifizierung
open source alternativen
webbarometer auswertungen
browser-verwendungen
elizzzas Beispielseiten:
elizzza.net
catzzz.net
nadelspiel.com
habertheuer.at
crimezzz.net
victimzzz.net
artzzz.net
viennalefatale.com/
jaegertee.at – nicht so gutes Design
Mobile sites: für iopd, kleine screens optimieren: grosse buttons, grössere fonts etc.
templatemonster.com
Die Maus beim Arbeiten verfolgen, welchen Weg sie nimmt:
Maus-O-Meter: Maus-Kilometer – ergonomisches Webdesign = Menü rechts!
euber.com/schreibtrainer (Windows)
screenshooter (WIN) http://www.mirekw.com/winfreeware/mwsnap.html
buch: webproduktion 3.: simpel, schlank, semantisch (kommendes buch)
smashingmagazine.com
elegantthemes.com
Dreamweaver setup:
site verwalten im linken menü: export, import, bearbeiten.
site in natalie ausserhalb www
voreinstell/NIE CSS anstelle von HTML anclicken!
allgemein/
codeformat/zeilenumbruch LF unix!
codehinweise/2.punkt nach eingabe automatisch end tec!
codehinweise OK
datei/editoren: .php addieren
primäre öffnungs-programme wählen
smashingmagazine sites fehler
dw: site ordner: re maustaste 2x neues dokument: index.htm, styles.css
DATEINAMEN a-z A-Z 0-9 _ (- ist minus vermeiden)
KEINE LEERZEICHEN, SONDERZEICHEN, UMLAUTE!
kleinbuchstaben, namen NIE mit ZIFFERN beginnen!
cssboxmania
.UNUSED unbenutzte bilder aufheben
unterordner A-Z anlegen
grosses bild mama.jpg vorschaubild mama2.jpg
HAUMER_anna - vornamen nachnamen ordnen
bilder heissen genauso, dann findet man sie wieder!
datum immer jahr monat tag
hintergrundbilder bg_start, bg_menue
bildordner: images
javascript: js
eltern, kind element etc.
http://css.maxdesign.com.au/selectutorial/
http://css.maxdesign.com.au/floatutorial/tutorial0211.htm
cssplay.co.uk demos daumenkino!
suchmaschinen optimieren:im titel alle begriffe ansammeln mit * getrennt.
key word density 7% OK aber 70% fällt auf – gebannt
____________________________
<link /> in sich geschlossener tec
<img />
<hr /> horizontal rule – waagrechte linie
<meta />
<br /> zeilenumbruch
_____
div id abschliessen mit beschreibung:
<div id=”nav”>header</div><!– #nav –>
_____
klasse <!– .nav –>
_____
CSS löschen:
@charset “utf-8″;
____
Browser Stylesheet Reset
browser stylesheet reset: 3 einheiten
* {margin: 0px; padding: 0px; border: 0px}
bildschirm 1024×768, design 960×560
_
Zentrieren
zentrieren im CSS gibts nicht, nur text align
IE macht zentral: body {text-align:center} aber wirkt sich auf alle texte aus!
Firefox zentral:
div#wrapper {width: 960px; margin: opx auto 0px auto; text-align:left;} alignt text wieder links!
__
0px 1px 2px 3px
Eselsbrücke: Ratatouille: Ten Red Boiling Linguini
top, right, bottom, left
Rollbalken erzwingen
Rollbalken für alle Browser erzwingen: html {height: 101%;}
Hintergrundbild / Kachel
background repeat:
html {height: 101%; background: url(images/bg_stripes.jpg)
-> wiederholt bild in alle richtungen
html {height: 101%; background: url(images/bg_stripes.jpg); repeat-x 100px}
-> wiederholt bild nur in x-achse
bild: 100px 0px (oben-unten, links-rechts)
theinspirationgallery.com wallpaper-damask
freewebpageheaders.com gratis header
wrapper erkennt keinen inhalt, haut die floater irgendwohin. fix: overflow: auto
Fonts im Web
flir – font replacemet technologies (funktioniert schlecht)
gut lesbar: Verdana 8klobig), Trebuchet MS, Tahoma
Fontnamen mit 2 Worten unter “” setzen
http://www.lipsum.com/feed/html
hl: serifen OK
font+62.5 -> ca. 10 px grösse
html: font-size: 62.5%;
body: font-size: 1.3em;
Standardfontgrössen für Browser!
em = antikes schriftmass: breite vom m
ex = breite vom x
Wir beginnen das Projekt ESSL Webseite
______________________________
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<link rel=”stylesheet” type=”text/css” href=”css/screen.css” />
<link rel=”css/slimbox/slimbox.c
<script type=”text/javascript” src=”js/mootools.js”></script>
<script type=”text/javascript” src=”js/slimbox.js”></script>
<a href=”bild.jpg” rel=”lightbox”><img src=” ” /> </a>
<link rel=”shortcut icon” href=”/favicon.ico” />
<title>Essl Museum</title>
</head>
<body id=”top”>
<div id=”kopfbereich”><a href=”http://www.sammlung-essl.at/” target=”_blank”><img src=img/essl_r.gif width=”" hight=”100″ alt=”Essl Museum” title=”Dies ist das Logo vom Essl Museum” /></a></div>
<div id=”navigation”>
<ul>
<li><a href=”#”index.html”>Ausstellungen</a></li>
<li><a href=”html/kunstvermittlung.html”>Kunstvermittlung</a></li>
<li><a href=”html/sammlung.html”>Sammlung</a>
<ol>
<li>Mission Statement</li>
<li>Die Sammler</li>
<li>Sammlungspflege und Restaurierung</li>
</ol>
</li>
<li>Museum</li>
<li>Künstler</li>
</ul>
</div>
<div id=”inhalt”>
<h1>MISSION STATEMENT</h1>
<h2>Aufgaben und Ziele der Sammlung Essl</h2>
<p id=”aussstellung”><a href=”http://www.sammlung-essl.at/“><img src=”img/restaurierung.jpg” rel=”lightbox” width=”150px” height=”120px” alt=”restaurierung” /> <img src=”img/retaurierwerkstatt_hoefer.jpg” rel=”lightbox” width=”150px” height=”120px” alt=”restaurierung hoefer”/>
</a> Ausgangspunkt für die Sammlung von <span class=”hausfarbe”>Agnes und Karlheinz Essl</span> ist der persönliche Blickwinkel des Sammlerehepaares auf die Kunst der Gegenwart. Die österreichische Malerei ab 1945 bildet den zentralen Kern der Sammlung. Seit den 1990er Jahren wird auch verstärkt international gesammelt. Die Sammlung umfasst heute wichtige Positionen zeitgenössischer Kunst aus Europa, den USA, Australien (Aboriginal Art), Mexiko und China. Spezifika sind ein Sammeln "in die Tiefe", das heißt der Erwerb ganzer Werkgruppen von Künstlern, sowie eine kontinuierliche Ankaufstätigkeit. Inzwischen ist die Sammlung Essl auf über 6.000 Exponate angewachsen und umfasst alle Medien der Gegenwartskunst der zweiten Hälfte des 20. sowie des 21. Jahrhunderts.</a>
<p>Ein wesentliches Ziel der Sammlung Essl ist es, ihre Werke einer möglichst breiten Öffentlichkeit zugänglich zu machen und zu vermitteln. 1999 wurde das von Architekt Heinz Tesar gestaltete Museum eröffnet. Dieses bildet das Zentrum der Sammlung Essl mit seinen vielfältigen Aktivitäten, die sowohl Ausstellungen als auch Neue Musik umfassen. Das rein privat finanzierte Museum hat sich als Institution Moderner Kunst in Österreich etabliert. Seine Unabhängigkeit und Flexibilität ermöglichen ein schnelles Reagieren auf aktuelle Tendenzen und Fragestellungen der zeitgenössischen Kunst.</p>
<p>Das Ausstellungsprogramm entwickelt sich aus den Inhalten und Zielen der Sammlung Essl. Säulen dieses Programms bilden Themenausstellungen, monografische Präsentationen, Blicke von externen Kuratoren auf die Sammlung und die Kunst aus anderen Kulturen.</p>
<p>Die Ausstellungsreihe "emerging artists" präsentiert junge, noch nicht am Markt etablierte Kunst sowie alle zwei Jahre die Preisträger des Essl Awards für Zentral- und Südosteuropa.</p>
<p>Das Essl Museum versteht sich also nicht nur als Ort für etablierte Museumskunst, sondern auch als Experimentierfeld für das ganz Zeitgenössische. Die Besucher sind zur Teilnahme an der geistigen Gegenwart eingeladen.</p>
<p>Integraler Bestandteil des Hauses ist die Pflege der zeitgenössischen, elektronischen und experimentellen Musik durch Konzerte, Performances und Klanginstallationen in den Ausstellungsräumen der Sammlung Essl. Damit hat sich ein international renommiertes und in Österreich einzigartiges Forum Neuer Musik im musealen Kontext etabliert.</p>
<p>Die Angebote der Kunstvermittlung für Erwachsene, Schüler und Kinder dienen einer mündigen und offenen Auseinandersetzung mit Kunst. Methodisch bilden Dialoge vor Originalen in Verbindung mit malerischen Erfahrungen im Atelier einen Schwerpunkt.</p>
<p>Die Ausstellungen der Sammlung Essl finden sowohl im Essl Museum als auch im Schömer-Haus, der Firmenzentrale von bauMax, in Klosterneuburg/Wien statt. In diesen Räumen erschließt sich den Betrachtern Gegenwartskunst durch das Zusammenspiel von Werk, Licht, Raum und Bewegung.</p>
<p>"Seit Beginn unserer Sammlertätigkeit ist es unser Wunsch, möglichst viele Menschen mit Kunst in Berührung zu bringen und von dieser inspirieren zu lassen. Kunst bereichert das Leben und setzt innovative Kräfte frei. Kunst ist ein Lebenselixier, das vertiefende Einblicke in die Zusammenhänge des Lebens und der Existenz ermöglicht. In diesem Sinne möchten wir einen Beitrag zur positiven Entwicklung der Gesellschaft leisten"</p>
<p><span>Agnes und Karlheinz Essl</span></p>
<a href=”#top”>zum Seitenanfang</a> | <a href=”#inhalt”>zum Inhalt</a>
</div>
</body>
</html>
digidruck.at -
internet4jurists.at – gute info bezüglich copyright etc. !
siesagt.org – frauen in der kreativindustrie
hdr filter
gravatar
http://picasaweb.google.com/elisabeth.wetsch/
faceyourmanga.com
tantek.com/CSS/Examples/bo
hack= unsinn
nie einen fehler verwenden um einen anderen fehler auszubessern!!!
browsertests
Webdesign 2 – Joomlaa Template verändern
Gratislizenzen: Dateien, Programme die JEDER verändern darf!
Geänderte Templates müssen unter GNU/GPL Lizenz stehen.
http://de.wikipedia.org/wiki/GNU_General_Public_License
nur https “abhörsicher”
Mail client anderes port angeben
pop per SSL
(Abhörsicheres Internet ist Illusion – Tschechen haben Ashkelon gebaut, vor der Verbreitung des Internet – Abhörung)
cpanel: SSL Outlook für pop 3 SSL konfigurieren…
____________________
Anhand es Milkyway Templates zeigen wir, was wir alles brauchen:
rhuk_milkyway Template Dateien
CSS
html – module, plugins
komponente (grosser bestandteil) polls
images
index.php (MUSS für Templates php sein!)
template_thumbnail
templateDetails.xml (Auflistung des Inhalts, Autoren, Positionen der Elemente)
_____________________
Wie konvertiere ich nun mein Seitenlayout in ein Template?
mein html aufmachen und die index.php von milkyway
Die ersten 14 Zeilen sind ein Schutz:
<?php
/**
* @copyright Copyright (C) 2005 – 2008 Open Source Matters. All rights reserved.
* @license GNU/GPL, see LICENSE.php
* Joomla! is free software. This version may have been modified pursuant
* to the GNU General Public License, and as distributed it includes or
* is derivative of works licensed under the GNU General Public License or
* other free or open source software licenses.
* See COPYRIGHT.php for copyright notices and details.
*/
// no direct access
defined( ‘_JEXEC’ ) or die( ‘Restricted access’ );
?>
_______________________
das in mein XHTML VOR der doctype definition einfügen und die datei als index.php in mein template ordner speichern
_______________________
früher: pro Kiste 1 Webseite
heute: virtuelle webhosts, die VIELE seiten beherbergen
____________________
gdoc: hier stellt Joomlaa alle generierten Komponenten hinein.
diese Zeile kopieren wir uns unter den head tec
<jdoc:include type=”head” />
wir löschen ALLES aus dem Head bis auf den link tag
<title>Unbenanntes Dokument</title>
<link href=”CSS/nat.css” rel=”stylesheet” type=”text/css” />
-> kommt weg!
____________________
Zwischenfragen: Englisch Test integrieren… http://www.ielts.org/
Test per PDF händisch auswerten
free english tests TEFL
0-100% Test -> vielleicht einen Poll umschreiben?
____________________
Wir integrieren weiter:
<jdoc:include type=”modules” name=”top” /> aus Zeile 42 ist dann ein Platz für Header, kommt bei uns in die div id banner
zeile 90 statt main menue: left menue
<jdoc:include type=”modules” name=”left” style=”rounded” />
<jdoc:include type=”modules” name=”right” style=”xhtml”/>
wir definieren so für joomlaa die positionen.
<jdoc:include type=”component” /> COMPONENT sind alle unsere contents!
-> damit xhtml konform ist: <jdoc:include type=”modules” name=”syndicate” />
wird mit W3C verlinkt!
____________________
template thumbnail: macht ein Screenshot vom template (das kann man erst wenns rennt!)-> daher ersteinmal IRGENDEINS und dann erst austauschen. wir kopieren das von milkyway.
____________________
template details xml rüberkopieren,
die 4 files, die wir haben, eintragen
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>template_thumbnail.png</filename>
<filename>css/layout.css</filename>
</files>
____________________
joomlaaportal.de -> forum!
____________________
in positions alle jdoc einschreiben! wir lösche alle ausser left, right, top
____________________
fertig, ordner uploaden.
____________________
____________________
lynx textbrowser (??)
____________________
verschönern: img {border: 0;} -> Randerln sind weg
____________________
web developer (vom portable firefox)-mit dem die WS ansehen und alles, was ich ändern will, ansteuern.
firebug lässt codes anders eintippen, zeigt aber nur an, wie es so wäre. ohne auf unsere Dateien einzugreifen!
____________________
Erweiterungen immer von Joomlaos.de
immer 1.5 Erweiterungen wählen wenn möglich!
upload braucht ein CMOD 757
files haben 644
folder braucht 755 damit man HINEIN kann (execute)
chronoforms
ChronoForms_V3.1_RC5.2_erst_entpacken-> ergibt 3 folder, den mittleren installieren.
____________________
cpanel: public_html/tmp verzeichnis permissions ändern auf 757
public/components auch.
admin 757, darin folder components auch 757 setzen.
____________________
-> komponenten/chrono forms/form wizard
wir überlegen uns jetzt wie unser formular aussehen soll!
_
Maileinstellung – man braucht immer 4: to, from, subject, name
to: meine email
dynamic subject
dynamic from email (der, der eingetragen hat) enabled YES
solls der KU auch in kopie erhalten?
->neue email, rotes feld
to dynamic (name) – in die mitte clicken, formular feld auswählen
subject (email von wifi) (fixer betreff von uns)
from name (wifi-training.com)
from email (noreply@etc.)
____________
bei Fehlern nachträglich ändern: form manager
html! mühsam! daher gleich genau planen!
Webdesign 2 – Joomlaa Templates
ein template ist eine PHP datei.
im DW einen HOST Ordner gleich im TEMPLATES wählen.
ich lege mir einen JOOMLAA Ordner im gruppenlaufwerk an, wir loaden das template rhuk_milkyway runter.
xml file – wann verwende ich xml?
bei Ajax,
XML
client -> server : sag mir adresse?
server->client: österreich
client -> server : welches bundesland?
…
AJAX -> vorteil: weniger verbindungen zum server
passiert Clientseitig: im XML file stzeht alles drinnen. Auswahlfelder:
<Adresse>
<österreich>
<bundesland>
<ort>
<bezirk>
</adresse>
…
egal von welchem system auszulesen, wie tabellenkalkulationsblatt.
XML beginnt und endet mit <install> </install>
alle dateien, die für das template wichtig sind, werden hier aufgeführt
http://www.module.joomlademo.de/
_______________________________________________________________
<?xml version=”1.0″ encoding=”utf-8″?>
<!DOCTYPE install PUBLIC “-//Joomla! 1.5//DTD template 1.0//EN” “http://www.joomla.org/xml/dtd/1.5/template-install.dtd”>
<install version=”1.5″ type=”template”>
<name>rhuk_milkyway</name>
<creationDate>11/20/06</creationDate>
<author>Andy Miller</author>
<authorEmail>rhuk@rockettheme.com</authorEmail>
<authorUrl>http://www.rockettheme.com</authorUrl>
<copyright></copyright>
<license>GNU/GPL</license>
<version>1.0.2</version>
<description>TPL_RHUK_MILKYWAY</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>template_thumbnail.png</filename>
<filename>params.ini</filename>
<filename>images/arrow.png</filename>
<filename>images/indent1.png</filename>
<filename>images/index.html</filename>
<filename>images/mw_box_blue_bl.png</filename>
<filename>images/mw_content_b_l.png</filename>
<filename>images/mw_footer_blue_b_l.png</filename>
<filename>images/mw_header_b.png</filename>
<filename>images/mw_joomla_logo.png</filename>
<filename>images/mw_line_grey.png</filename>
<filename>images/mw_menu_active_bg.png</filename>
<filename>images/mw_readon.png</filename>
<filename>images/mw_shadow_blue_l.png</filename>
<filename>images/spacer.png</filename>
<filename>css/index.html</filename>
<filename>css/template.css</filename>
<filename>css/editor.css</filename>
<filename>css/ieonly.css</filename>
</files>
<positions>
<position>breadcrumb</position>
<position>left</position>
<position>right</position>
<position>top</position>
<position>user1</position>
<position>footer</position>
<position>debug</position>
<position>syndicate</position>
</positions>
<params>
<param name=”colorVariation” type=”list” default=”white” label=”Color Variation” description=”Color variation to use”>
<option value=”blue”>Blue</option>
<option value=”red”>Red</option>
<option value=”green”>Green</option>
<option value=”orange”>Orange</option>
<option value=”black”>Black</option>
<option value=”white”>White</option>
</param>
<param name=”backgroundVariation” type=”list” default=”blue” label=”Background Variation” description=”Background color variation to use”>
<option value=”blue”>Blue</option>
<option value=”red”>Red</option>
<option value=”green”>Green</option>
<option value=”orange”>Orange</option>
<option value=”black”>Black</option>
<option value=”white”>White</option>
</param>
<param name=”widthStyle” type=”list” default=”fmax” label=”Template Width” description=”Width style of the template”>
<option value=”fmax”>Fluid with maximum</option>
<option value=”medium”>Medium</option>
<option value=”small”>Small</option>
<option value=”fluid”>Fluid</option>
</param>
</params>
</install>
_______________________________________________________________________________________
jdoc -> hier kann Joomlaa was reinlegen!
es gibt mehr templates fürs 1er statt fürs 5er. daher plugin SYSTEM LEGACY muss man aktivieren!
joomlaos.de eine Menge templates! Am besten eines das bei den Farben und spalten passt.
Diplom nicht herschenken, sonst am Markt am Wert.
ACHTUNG bei Domain Registrat der Webseiten loggt um Dir das Weggehen schwer zu machen!
Was ist das Mühsame beim Umsiedeln?
Registrar, ca. 5 grosse (varysign, US, nicht gut), 100 kleine!
Admin A -> Owner
B -> Kunde
C-> Techniker
NIC.at <- registrar(domain)->DF.de-> NS1, NS2 (Nameserver)
DF.de hat einige server -> da drin der webspace. hier sind SQL, HTML, MAILS, logs
Domainserver zeigen nach Kündigung hin, wo nichts mehr ist.
MX eintrag im Vorfeld schon auf die neue hinzeigen lassen
http://en.wikipedia.org/wiki/Zone_file liegt auf NS1 und NS2
$ORIGIN example.com. ; designates the start of this zone file in the name space
$TTL 1h ; The default expiration time of a resource record without its own TTL value
example.com. IN SOA ns.example.com. username.example.com. (
2007120710 ; serial number of this zone file
1d ; slave refresh (1 day)
1d ; slave retry time in case of a problem (1 day)
4w ; slave expiration time (4 weeks)
1h ; minimum caching time in case of failed lookups (1 hour)
)
example.com. NS ns ; ns.example.com is the nameserver for example.com
example.com. NS ns.somewhere.com. ; ns.somewhere.com is a backup nameserver for example.com
example.com. MX 10 mail.example.com. ; mail.example.com is the mailserver for example.com
@ MX 20 mail2.example.com. ; Similar to above line, but using "@" to say "use $ORIGIN"
@ MX 50 mail3 ; Similar to above line, but using a host within this domain
example.com. A 10.0.0.1 ; ip address for "example.com"
ns A 10.0.0.2 ; ip address for "ns.example.com"
www CNAME ns ; "www.example.com" is an alias for "ns.example.com"
wwwtest CNAME www ; "wwwtest.example.com" is another alias for "www.example.com"
mail A 10.0.0.3 ; ip address for "mail.example.com", any MX record host must be
; an A or AAAA record, it should never be a CNAME record
; as explained in RFC 2181 (section 10.3)
_________________________________________________________________
UMZIEHEN mit Kunde: alle mails runterladen, Zeitabfrage auf 2 Stunden stellen.
Bitte refresh Zeit heruntersetzen und 2. MX Eintrag (wer ist der neue) eintragen.
NS-Zonen einsetzen. Domain "example" läuft auf 2 Servern, nur weiss keiner davon.
Das LETZTE ist den DNS Eintrag ändern.
Wenn alles übertragen ist, Zeit wieder raufsetzen.
SQL file, HTML files etc. mühsam sind die LOG files. (raw, ab-stats, was für ein statistiktool, etc.)
-> wenn beide C-Panel haben, manchmal gratis rüberzuholen! (ICH BIN DER ADMIN)
_________________________________________________________________
profiwebhost.net
Rück mail Adresse von Aliases:
Spam und Porn sind Profis im Web Eintragen
_________________________________________________________________
whitelist, ignorier, blacklist
freunde email 2x schicken, alle spams kommen nur 1x vom selben adresserl.
SpamAssassin, Akismet
mobile leitungen: zum arbeiten mit SSL protokoll,minicht stabil! freizeitleitung!
_________________________________________________________________
Wir machen uns ein eigenes Template!
nat CSS
nat HTML
Morgen wandeln wir das template in JOOMLAA um!
Webdesign 2 – Joomlaa Erweiterung
joomlaos.de -> Plugins
wir haben dieses installiert: Joomla_Core_de.1.5.12v1
selfhtml Seite: BASETARGET!!!
http://de.selfhtml.org/navigation/suche/index.htm?Suchanfrage=basetarget
an.i24.cc
______________________Wir fügen heute Content in Joomlaa___________________
Wenn Du CSS ändern willst, musst Du 646 haben! (CMMOD)
http://wifi-training.com/cpanel
Filemanagerpublic_html/images
rechte Maustaste-Berechtigungen ändern!
ein FOLDER muss ausführbar sein!
Apache fürht PHP aus, deshalb ist er WELT.
-> von 755 auf 757
Bereich – Kategorie – Beitrag
Fussball-Regional-Liga-Beitrag
die Beiträge werden OK geschalten, veröffentlicht.
Als Journalist kann ich keine Kategorien anlegen oder löschen!
Es geht auch statisch: Pro Beitrag erstellt sich ein Menüpunkt!
___________
http://www.lerograph.wifi-training.com/administrator
Wir sind in der Admin, legen einen Bereich fest.
Inhalt/Bereich/Neu
Inhalt/Kategorie/Neu -> dem BEREICH zuordnen!
___________
Bild einfügen: Bild-Button, upload, Grösse einstellen.
___________
Templates liegen in cpanel, da kann man CSS wählen und verlinken, etc.
___________
Beitrag: neu, 3 Beiträge schreiben
freigeben und unter Menü, hauptmenü, Erweiterte Parameter: Sortierung der Artikel einstellen
___________
Nur Intro-Text anzeigen: in einen Artikel hineingehen, Cursor in den text setzen, WEITERLESEN button einfügen.
___________
Navigationsmöglichkeiten: Hauptmenü
Beitrag layout wählen: layout beitrag
unter basisparameter einen beitrag wählen
______________
Menü, Neu, Kategorie Blog, speichern
Menü, Neu, Kategorie-Liste, speichern
Menü, Neu, Bereich-Liste, Bereich blog
_______________
http://www.lerograph.wifi-training.com
hat jetzt alle diese Menüpunkte dazubekommen.
________________
bereichsblog: bundes + international
________________
cpanel: file auswählen: code-editor (quellcode sehen)
______________
Menümässig ist hier voiel möglich: Submenü: abhängigkeit einstellen.
CSS: alles li und ul!
Webdesign 2 – Joomlaa 2
Wir sehen Frontend und Backend.
Neuen Beitrag anlegen.
Backend: NEUER BEITRAG.
Start oder Subseite?
Index wird automatisch dargestellt. Er nimmt so, wie der Apache konfiguriert ist.
_______________
Austrian Cricket Open
Text eingeben
-> konfigurierbar:
Anlegen, Startseite OK, steht drinnen.
Einstellungen GLOBAL einstellen, dann kann ich z.B. bei jedem Artikel das Erstellungsdatum verbergen.
_______________
Menüpunkt für Artikel: Menüs/Hauptmenü
+
Layout Beitrag
titel vergeben (2x)
_______________
Joomlaa ist 5x mehr konfig Arbeit, kann aber auch mehr!
______________
cpanel: Sicherungskopie
home-verzeichnis und datenbank einzeln anclicken und SPEICHERN (Firefox geht automatisch auf Desktop!)
Webdesign 2 – Joomlaa
Wifi-training.com/cpanel
die Login Daten bekommen wir vom Trainer.
in Dateimanager alles löschen. Wir uploaden das gezippte Joomla_Core_de.1.5.12v1 vom Trainer-Laufwerk in den Folder public_html
Maustasten Click auf EXTRACT
Domain aus dem Datenblatt ansteuern
http://lerograph.wifi-training.com
Wir wählen DE-deutsch
Wir brauchen noch eine Datenbank.
My SQL Datenbank im CPANEL wählen.
Ich wähle den Namen antik. lerograp_antik
User: lerant
Passwort: XXXXXXXXXXX
Wir haben eine Datenbank angelegt, wir haben einen User angelegt, aber die Zwei kennen sich noch nicht…
Benutzer zur Datenbank hinzufügen
Benutzer mit Datenbank verknüpfen und bestimmen, WAS der User machen darf > ALLE BERECHTIGUNGEN
________
Verwaltung von MySQL-Konten
Benutzerrechte verwalten
Benutzer: lerograp_lerant
Datenbank: lerograp_antik
Passwort: XXXXXXXXXXXX
________
Zurück zur Joomlaa Installation
http://lerograph.wifi-training.com/installation/index.php
________
Installationsprüfung für Joomla! 1.5.12 Stable [ Wojmamni Ama Woi ] 01-July-2009 02:00 GMT:
Joomla! wird nicht korrekt funktionieren, wenn Sie dies unterlassen!
PHP, PEARL oder CGI scripts werden ausgeführt. Der Apache Server ist ALL
Script muss ausführbar sein, die Datei muss von allen gelesen werden können.
Entweder wir geben der Datei die X für execute. Warum? Wenn die Konfiguration fertig ist, vergisst man oft die X für ALL wegzunehmen (etwas wie Hackerschutz)
Unser CONFIG File ist also aus Sicherheitsgründen nicht beschreibbar!
_____________
Konfiguration der Datenbank
Datenbanktyp mysql
servername localhost
_____________
FTP-Konfiguration
lerograp
VvdnSXTDzH
/public_html
Erweitert: FTP pass speichern JA
_____________
Datenblatt durchlesen!
_____________
Hauptkonfiguration
Wir entscheiden uns für ein Sport-News Projekt mit Artikel Erneuerung!
Das Hash-Passwort ist NIE WIEDER auslesbar, besser MERKEN!
saduti
keine Beispielseiten installieren.
sport-news (webseite benennen)
admin
-> das PW das wir generiert haben!
(saduti)
________
in cPanelX gehen, Dateimanager-> configuration.php-dist anwählen, re. Maustaste-> code edit, alles X kopieren
-> file muss heissen OHNE dist
________
Dateimanager > public_html-> Installation Folder löschen!
________
BACKEND -> /administrator
FRONTEND -> webseite // http://lerograph.wifi-training.com/
http://lerograph.wifi-training.com/administrator/index.php?option=com_frontpage
Firezilla merkt sich alle Passwörter (die 20 letzten)!
Bzw. Server Manager
_____________
Prüfungsprojekt:
Navigation der Zielgruppe entsprechend, halbwegs gut gelayoutet, wordpress Blog anhängen, Inhalt egal
_____________
Onlineshop XT-Commerce (Joomlaa integrierbares Onlineshop)
Speisekarte 4 Kategorien, Preisänderung
_____________
Über SICHERUNGSKOPIEN kann man ein vollständiges Backup hereinholen. Vorteil des cpanel!
_____________
CMS Boom, die Meisten brauchen es nicht. Bedarfsanalyse!
Gebt den Kunden ein CMS System: der ruft euch an: wie geht das? In einem halben Jahr wieder…
Besser Wartungsvertrag! -> Für KU billiger! Hosting plus Aufschlag 1-2 Stunden/Jahr
_
Wenn doch, PHP + SQL, eine Seite Speisekarte veränderbar. Bissi Text ändern, kein Problem! Layout ändern…NIX!…
KU NIE als ADMIN REINLASSEN! -> Konfigurierbar, was er tun darf. KU Fehler muss ich dann ausbessern, seine Zeit UND Deine draufgegangen…
Simple Systeme:
WordPress
CMsimple http://cmsimple.de/cmsimple/index.php
Contribute: Adobe-> in DW installieren, Lizenzkosten! (200USD), geht auch im Web!
___
Online-Shops-> was ist konform mit österreichischen Rechtsprechung?
SSL-Zertifikat? https (shared certifikat), online Rechnung muss mit einem Zertifikatschlüssel belegt sein.
a-trust.at – Lesekarte, Server konfigurieren, etc.
Anwalt oder Consultant fragen!
Wein-Onlineshops: Umsatzsteuerrecht nicht gelesen! Alkohol USt in der gesamten EU!-> alle Pleite, gegenseitig angezeigt!
Man hat die gleichen Kosten wie mit einem realen Geschäft!
_____________
http://kinderfilmeonline.de/ -> Google Hit Collector
-> in Betriebseinnahmen reinnehmen!
_____________
Webdesign 2 – Design + Slicen
Webdesinger Buch MUSTHAVE
Web Design Taschen´s 1000 Favorite Websites
ISBN 3822825867
_________
Wie Farben wirken: Eva Heller
_________
Gestaltungsraster: Ordnung ist das halbe Leben
Lea Wolf Buchhandel, Bäckerstrasse 2
Morawa Wollzeile – gute Grafik Abteilung
Shakespeare & Company Sterngasse 2
_________
Handouts:
ACSII codes mit HTML Übersetzung
http://www.torsten-horn.de/techdocs/ascii.htm
Design Seiten
http://www.logodesignlove.com/
designerinaction.de – Gestaltungsinfos
_ _ _
Design Magazine
Novum, Page
_ _ _
Deliscious Library – DVD Library (Mac Programm)
Der goldene Schnitt
http://did.mat.uni-bayreuth.de/mmlu/goldenerschnitt/lu/
Einzige Spirale die unendlich fortführbar ist!
Daniela hat einen mathematischen Zugang zu Layouts, berechnet Spaltenbreite, Layout wird stimmiger.
M.C. Escher, Mondrian, Vasarelly,
Architektur Le Corbusier
Indesign: Gestaltungsraster
Layout-Hilfslinien erstellen: 8:13 anlegen
Photoshop: Gestaltung, Slicen
Farbprofil sRGB
1024×768 > Liniale bei 0/0 Hilfslinien an allen 4 Seiten
Bild>Arbeitsfläche>vergrössern 1600×1200
Auswahl Viereck > Art: Festes Seitenverhältnis:8:13
Exakt bei pixel 564 eine Hilfslinie: (Hilfslinien sind gezogen nicht verlässlich!) Ansicht >neue Hilfslinie>vertikal 564px
Header und Footer sollten GENAUE Pixelmasse haben!
Slicetool (Cutter) – sollte genau auf den vorbereiteten Hilfslinien landen, deshalb genau überall Hilfslinien vorbereiten
Alle Slices die benötigt werden auswählen und > für Web und Geräte speichern>ausgewählte Slices>nur Bilder
Illustrator
kann slicen und mit pix umgehen, InDesign NICHT!
Webseiten, die uns gefallen oder nicht
designforsport.com – das Logo ist viel zu rund für Sport!
volumeone.com – webseite nach saisonen, stimmig und schön
mammamedia.at – nur 3 Farben uns alles auf einer Ebene!
www.absolutbeautiful.at – eine von Danielas Seiten, Blättern ist Flash
kuenstlerdrucke.at – unglücklich geplante site, werbung stört navigation, mittiges layout zu selektiv in der wahrnehmung, farben links passen runde elemente in einer blockigen seite nicht, rote stricherl bei jeder farbe sind falsch. Bilder sollten selbe Höhe haben, unmotivierte Schreibschrift hängt im Verhältnis zum logo irgendwo.
Designer Marcel Wanders – aus Rotz per Laser eine Vase modelliert
http://www.marcelwanders.com/marcel-wanders-news.html
Dipolmatische Akademie 1m Münze – im Fernsehen bei politischen Diskussionen zu sehen
DIPLOM FRAGEN
Webdesign 2 – Typografie und Lesen
Schriftquelle: http://www.1001freefonts.com/
Wie man liest (link clicken)
Das Auge des Lesers tastet erst Bilder, Überschriften und Fettgedrucktes ab, um zu entscheiden, ob der Artikel lesenswert ist. Besser Artikel in quatratischerer Form anlegen. Breite Artikel geringer Höhe wirken wie viel Text, obwohl die Textmenge gleich ist. Es ist angenehmer, übersichtliche Bereiche zu lesen.
Ein langer Brief, darunter ein P.S. Was wird am meisten gelesen? Das P.S. Daher bringen Marketingbriefe die Info immer im P.S. unter!
Weniger ist mehr, Konsistenz, Struktur.
Sinn vor Schönheit! (Sinn vor schönem Umbruch)
Beste Lesbarkeit: libü Flattersatz
Nicht zwischen Bündigkeiten zuviel wechseln!
Designerblog: http://markbixby.com/
Hintergrundmuster im Illustrator selber herstellen:
Menü Fenster Farbfeldbibliotheken, Muster
Fenster-Pathfinder: Fläche aufteilen
Muster in PH als Smart Object importieren.
kann im PH mit Doppelclick noch farbgeändert werden! -> Illustrator geht auf, ändern, sichern, zumachen, Änderung erscheint im Photoshop!
Photoshopwunder, zuviel des Guten!
http://www.glennferon.com/portfolio1/
Maske ist ein dreckiges Fenster, das zwischen zwei bildern liegt. Wo das Fenster dreckig ist, blendet es aus.
Haare freistellen
Filter-extrahieren
Mit Pinsel halb an der Kante entlangfahren (bei Haaren). Mit Küberl in gewünschten Bereich clicken, OK.
Photoshop, 3 wichtige Fragen:
Bin ich in der richtigen Ebene?
Habe ich die richtige Auswahl?
Habe ich das richtige Werkzeug, und ist es richtig eingestellt?
Wer schreibt hier?
nadelspiel * Stricken & Häkeln mit eliZZZa | Stricken lernen mit eliZZZa | Häkeln lernen mit eliZZZa | Socken stricken mit eliZZZa
Powered by WordPress | Based upon Elegant Themes * WhosWho Theme