Infosite von Joe Brandes
Eine Website von Trainer Joe Brandes. Infos zu IT-Seminaren von A bis Z.
Das klassische PCS Zertifikat
Von der Hardware und Netzwerktechnik bis zu den den Betriebssystemen Windows, Windows Server und Linux
Ich biete diese Module an!
Zertifikat CMSOD
Module Basiszertifikat
Module Specialist
Ready for Tech Deep Dives...
Für alle Interessierten aus dem Bereich des "CMS Online Designer" findet ab dem 11.10.2021 ein Seminar "HTML & CSS" bei der VHS/BIZ WF Wolfenbüttel statt.
In unserem HTML & CSS-Workshop wollen wir uns alle notwendigen Fähigkeiten von den einfachen Webtechnikgrundlagen bis zur ausgebauten Website erarbeiten. Das Seminar orientiert sich dabei an den "Ideen/Roter Faden" des CMSOD-Zertifikats aber natürlich vor Allem auch an den Bedürfnissen und Themenwünschen der Teilnehmer im Seminar.
Hier die Rahmendaten unseres Seminars:
Ort: VHS/BIZ WolfenbüttelZeiten: Mo, 11.10. - Fr, 15.10.2021; jeweils 08.00 - 15.30 UhrPrüfung: Do, 18.11.2021 ab 15.45 Uhr - aktuell 4 Interessierte
Ich werde unser Seminar an dieser Stelle - wie gewohnt - ausführlich begleiten...Ihr Trainer Joe Brandes
Diesen Begriff hört man in meinen Seminaren häufiger ;-). Gemeint ist hier: Das grundsätzliche Verständnis der fraglichen IT-Techniken. Am Besten gleich so, dass man auch nach einer Zeit ohne Beschäftigung mit diesen Techniken sehr schnell wieder in Fahrt kommt.
Unter einem roten Faden versteht man ein Grundmotiv, einen leitenden Gedanken, einen Weg oder auch eine Richtlinie. „Etwas zieht sich wie ein roter Faden durch etwas“ bedeutet beispielsweise, dass man darin eine durchgehende Struktur oder ein Ziel erkennen kann. Quelle: Wikipedia - Roter Faden
Unter einem roten Faden versteht man ein Grundmotiv, einen leitenden Gedanken, einen Weg oder auch eine Richtlinie. „Etwas zieht sich wie ein roter Faden durch etwas“ bedeutet beispielsweise, dass man darin eine durchgehende Struktur oder ein Ziel erkennen kann.
Quelle: Wikipedia - Roter Faden
Eine sehr grundsätzliche Erfahrung in der IT ist, dass sich natürlich die IT modernisiert. ABER: keine Entwicklergemeinschaft setzt sich dauernd hin und erfindet das Rad neu. Wir werden uns also erarbeiten, wie Webtechnik tickt und dann profitieren wir einfach mal ein paar Jahrzehnte davon ;-).
Die Themen im Groben: (s.a. SelfHTML Beitrag )
Und natürlich schauen wir vor Allem auch, das wir Ihre Topics im Seminar klären.
Wichtig: Lassen Sie sich zu Beginn des Seminars nicht von der Fülle an Infos in diesem Seminarbeitrag erschlagen. Es handelt sich auch um viel Zusatzinfos und Infos zum Thema Online Design, die sich im Laufe des Seminars immer wieder mal nachschlagen/nutzen lassen.
Die Inhalte der Seminarewoche sind auch nicht nur bereits über die Seminartage/Seminarabschnitte aufbereitet, sondern ebenfalls oft mit Zusatzinfos versehen. Und natürlich ergeben sich ja nach Seminarverlauf leichte Abweichungen. Am Ende des Seminars sind dann alle Infos der Seminarwoche für Sie komplett.
Wir müssen unsere Arbeitsplatzrechner optimal für die Umsetzungen mit Content Management Systemen (oder auch anderen Online-Techniken) vorbereiten.
Ansicht für den Standard-Dateimanager Window Explorer ( Win + E ) einstellen:
Windows Einstellungen - Dateierweiterungen einblenden
Anzeige der Dateiendungen mit Windows Explorer (Win + E); Windows Vista / 7 / 8 / 10: Organisieren - Ordner- und Suchoptionen - Register Ansicht ...
Grund für die Konfiguration: Dateien heißen bild.jpg oder bild.jpeg oder bild.JPG - wir müssen das genau wissen!
bild.jpg
bild.jpeg
bild.JPG
(siehe auch Beitrag Toolsammlung auf diesem Portal - aber: Praktische Installationen im Seminar)
Die Programme sind entweder schon vorinstalliert oder die Software wird von mir fertig lokal zum Installieren verteilt, um Zeit zu sparen.
Montag, 05.07.21, 08.30 - 16.00 Uhr
Orientierungsphase, Pausenzeiten, Seminarzeiten/Seminarende, Teilnehmerthemen, Prüfungsinteresse (freiwillig)
Ein paar kleine Vorgaben für unsere Übungen:
Ausstattung TN-PCs:
Hinweis auf Profile der installierten Windows 10 Trainings-PCs
Vorgabe für Dateien und Ordner
Bei Datei- und Ordnernamen keine Leerzeichen und Sonderzeichen (ä, ß) nutzen. Alles klein schreiben - sonst bitte unbedingt später an Groß-/Kleinschreibung bedenken.
In Projektordnern arbeiten und Unterordner für ./bilder , ./css oder ./js (JavaScript)
./bilder
./css
./js
Trennung von Layout (HTML) und Design (CSS)
siehe: www.csszengarden.com
Die Saubere Trennung für Statische Website besteht aus drei Säulen:
Hinweise auf semantischen Code (em, strong, cite, ...)
em
strong
cite
HTML-Kommentare mit <!-- ..Kommentar.. --> (sind im Quelltext sichtbar!)Leerzeichen und Zeilenumbrüche haben keinen Einfluss auf die Ausgabe im Browser-"Body"
<!-- ..Kommentar.. -->
Vorgabe: eine Website kommt als ein Webprojekt in einen Hauptordner!
Vorschlage für Seminar: Ordner C:\html-css\projekt-montag (Basisordner / Projektordner)
C:\html-css
projekt-montag
Der Ordner enthält unsere HTML-Dokumente der Website - also die sogenannten Webpages (einzelne "Seiten").
Für eine bessere Organisation werden für die zusätzlichen Dokumente geeignete Unterordner erstellt und genutzt:
Selbstverständlich kann man die Ordnernamen und Strukturen eigenen Wünschen anpassen - man sollte halt einen Plan haben und stringent verfolgen.
Der Ordner "projekt-montag" enhält unsere Website (unser Webprojekt) und müsste später nur 1-zu-1 auf unseren Hosting-Anbieter kopiert werden und als Ordner einer Internetadresse (Domain; z.B. www.ihrname-xyz.de) zugewiesen werden.
Ein paar Anmerkungen für die ersten Software- und Programmnutzungen:
Eine Serverumgebung ist für HTML/CSS-Seminar nicht zwingend nötig! - ansonsten) Apache Webserver (mit PHP) nach Bauform XAMPP-CMSOD
Die Auswahl eines Editors für die Erstellung und Bearbeitung ist klassisch auf Notepad++ gefallen.(Tipp: Erweiterung Emmet für fertige Quellcode-Schnippsel)
Seit geraumer Zeit nutze ich in Seminaren den Visual Studio Code von Microsoft. Ein kleiner Nachteil liegt in der Professionalität also Mächtigkeit des Editors. Aber wir haben ja auch genügend Zeit ihn besser kennen zu lernen und die Vorteile überwiegen deutlich.
Wer keine Lust auf Software direkt von Microsoft hat, kann einfach zur Telemetrie-freien Variante Codium greifen. Denn die Software ist ja grundsätzlich OpenSource und man kann völlig frei über die Codebasis verfügen, was im Projekt Codium eben auch getan wird.
Wir benötigen aus verschiedenen Gründen mehrere Browser für die Arbeit an und mit Online-Dokumenten.
Mozilla Firefox
Tipps zum Firefox:
Browser-Alternativen:
Die Liste geht on and on...
Das "Schweizer Messer" für HTML/CSS-Kodierungen ist bei VS Code bereits integriert (bei Notepad++ bitte als Erweiterung nachrüsten).
Website: www.emmet.io - alter Name: Zen Coding (entwickelt von/bei Google)
CheatSheet: ausführlichere ZenCoding-Beispiele: Link, Link Emmet Cheat Sheet
Tastenkombination für Emmet "Expand Abbreviation - Abkürzungen ausführen/expandieren" lassen sich konfigurieren (bei VS Code einfach per TAB den Code komplettieren lassen).
Emmet-Beispiele (hier auch schon spätere Einsätze - z.B. für Tabellen...)
In VS Code können eingestellte Tastenkombinationen aufgelistet werden und dann über das Schlagwort Emmet gefiltert werden.
DTD
(Dokumenttyp Definitionen - Entwurf/Normen durch das W3C - World Wide Web Consortium)
Beachten: nicht alle neuen HTML5-Tags werden immer von allen Browsern gleich unterstützt!
HTML-Entities
Nur bei richtiger Codierung (Zeichencodetabellen) werden alle Zeichen korrekt dargestellt!
In Browsern mit abweichender Codierung Umlaute anzeigen lassen verlangt nach Lösungen.Einsatz von Meta-Tag für Zeichencode <meta charset="UTF-8">
<meta charset="UTF-8">
Einsatz von HTML-Entities am Beispiel Ü (groß U Umlaut): Ü (benanntes Entity) und Ü (unicode)siehe Info-/Übersichtsseiten auf de.selfhtml.org zum Themas (Link1, Link2)
(erste Website - z.B.: ./projektordner/test01.html)
Wir lernen den Baukasten für HTML Layouts kennen.
Standardaufbau:
html
head
title
body
Quellen für Recherche und eigene Trainings: wiki.selfhtml.org (früheres Projekt von Stefan Münz - aktuelles HTML-Buch Amazon)
Tag-Beispiele in erster Website test.html:
p
pre
hr
ol
ul
li
h1
h6
dl
dt
dd
a
Alle Beispiele in praktischen Übungen über das Seminar verteilt.
(Images - Bilder werden immer webtauglich benötigt und von Trainer bereitgestellt bzw. mit Trainees erzeugt)
img-Tag mit Zuweisung von Quelle per Attribut src="..." und bitte immer mit alt- und title-Attributen
img
src="..."
alt
Beispiel: <img src="/bilder/bild.jpg" alt="Alt-Text" title="Title-Text">
<img src="/bilder/bild.jpg" alt="Alt-Text" title="Title-Text">
Die alt und title natürlich gerne auch mit identischem Text. Hier wurde ein Unter-Ordner bilder für den Pfad zum Bild angegeben!
bilder
Analyse der Nutzung von alt-Attribut (als Ersatztext für Bild) und title-Attribut (für Mausinfos/Quickinfos zu Bildern)
Bilder sind als anklickbare Objekte in Kombination mit Links (a-Tag) nutzbar (Übungen folgen).
Bilder für Web verkleinern / optimieren:
Bildmaterial / Quellen: Bitte immer unbedingt auf Lizenzen und Nutzungen achten!
Bilder auf https://unsplash.com/ Alternativen: pexels.de oder auch pixabay.de
Diese Quellen sind sogar in Bildverarbeitungen wie Serifs Affinity Photo als Galerien verlinkt.
Dummy-Images für Entwicklungsphase
Auch Unsplash bietet eine Einbindung für Bilder per Linkstruktur: https://source.unsplash.com/
Tipp: Nutzung von Zufallsbildern oder mit Bildcode inklusive Übergabe von Dimensionen: (Anleitungen)z.B. source.unsplash.com/WLUHO9A_xik/1600x900
(Cascading Style Sheets - ein Einstieg)
Zuweisung von Design (Aussehen) der Tags mittels CSS - CSS kann an drei Stellen zugewiesen werden: (Link zu selfhtml)
<h1 style="color: red;" ></h1>
Wichtig: je näher die Styles am eigentlichen HTML-Tag kodiert sind, desto eher gelten sie.
Beispielcode:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- Externe CSS Datei verlinken --> <link rel="stylesheet" href="/montag.css"> <!-- Zentrales Styling für dieses Dok --> <style> h2 {color: blue;"} </style> </head> <body> <!-- manuelle Styling für einen einzigen Tag --> <h1 style="color: red;" ></h1> </body> </html>
Erste Zuweisungen und Tests bei kombinierten Anweisung für Headings h1 und h2, p, img, ...
Screenshots aus Seminar:
Screenshots aus Vorseminar 2021:
Screenshots aus Vorseminar 2017:
Dienstag, 06.07.21, 08.30 - 16.00 Uhr
Ausführliche Rekapitulation zu Tag 01, TN-Fragen
Inbetriebnahme der "Entwicklungsumgebung"
Versionierung / Backup: gerne einfach Projektordner für Arbeit kopieren / versionieren / archivierenHinweis: ordentlichen Packer/Entpacker (siehe 7-Zip) für diese wiederkehrenden Arbeiten nutzen.
Tipp/Erinnerung: alle fraglichen Dateien immer mit geeignetem Code-Editor öffnen, damit die Zeichen der Dateien sauber abgelegt/gespeichert werden.(Empfehlung: Visual Studio Code)
(Anchor / Anker)
Einfachster Link - siehe auch Dummy-Link in HTML-Templates/Vorlagen:
<a href="#">Klicktext</a> <!-- die # steht kurz für eine unbekannte/unbenannte Stelle im Quellcode mit einer ID --> <a href="#top">Klicktext</a> <!-- das #top steht für die benannte Stelle im Quellcode mit einer ID namens top (z.B. also <div id="top"> ... </div> ) -->
Website-Adressen verlinken:
<a href="http://www.bahn.de">Klicktext</a> <!-- der Link führt zur entsprechenden Adresse --> <a href="http://www.bahn.de" target="_blank">Klicktext</a> <!-- der Link führt zur entsprechenden Adresse in einem neuen Fenster/Tab -->
E-Mail-Adressen verlinken: (hier inklusive Betreff)
<a href="mailto:Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein.?subject=Testbetreff">klickbarer Text (oder Grafik)</a> <!-- Beispiel mit Betreff -->
Übungen...
(Beispiel: Firefox - Code Inspector)
Link zu Firefox Add-on Seite oder mittels Menü Add-ons direkt in FirefoxBeispielhaftes Add-on für Firefox: colorPicker - Farben direkt mit Maus wählen/zuweisenTipp/Alternative: Farbwähler der Microsoft PowerToys
Alternative Code-Analysen mit anderen Browsern:
MS Internet Explorer - Entwicklertools (Funktionstaste F12)Google Chrome mit Erweiterung WebDeveloper oder eigenen Entwicklertools (Umschalten + Strg + I wie Inspektor; siehe Firefox!)
Stichwort: Firefox Developer Tools (Link)
Übungen und Einsatz des Firefox beim Entwickeln der eigenen Seiten oder Analysieren "fremder" Websites
Hinweis: Code Inspector Tool berechnet die Dimensionen (Stichwort: Boxmodell) von Webseiten-Elementen!
Übung / Darstellung mit colorPicker (Firefox Add-on) oder den Microsoft PowerToys
Dunkelgrün aus Website VHS Braunschweig analysiert: rgb(175, 200, 14) bzw. #AFC80E
Beispiel: Blau aus Website: rgb(74,105,173) bzw. #4A69ADBeispielrechnung für Grünwert: (dezimal) 105 = (hexadezimal) 6*16 + 9*1
Definieren von Farben in RGB:mit # : z.B. Schwarz: #000000 und Weiß: #FFFFFF bzw. rgb (0, 0, 0) und rgb (255, 255, 255)
Erläuterungen auf selfhtml.org (Link)Umrechnungen zwischen dezimalen und hexadezimalen Werten möglich mit Boardmittel "Taschenrechner - calc" unter Windows
Farben mit Erweiterungen von Browsern "picken" oder die PowerToys von Microsoft installieren:
Der Color Picker der PowerToys in Action: Aufnehmen des Orange-Tons von selfHTML.
Empfehlung: benannte Farben möglichst vermeiden!Darstellung der CSS Farbdefinitionen auf Portal Webmasterpro (Link)
Seit CSS3 inklusive "Deckkraft / Opazität" (Durchscheinen):mit Definitionen mittels rgba bzw. hsla, wobei a für Alpha-Wert von 0.0 bis 1.0 steht
Einfacher Farbmischer:
oder einfach mal "Farbwähler" googeln (Google Search Link)
Farbdesignsysteme:
Video zur Nutzung von MyColor.Space: How to choose a color palette (3 easy Steps)
(Tabellen-Tags: table, caption, thead, tbody, tfoot, tr, th, td )
table
caption
thead
tbody
tfoot
tr
th
td
Aufbau einer Standardtabelle mit 3 Spalten und 3 Zeilen nach Anleitung und Beispiel Selfhtml (Link)
Emmet nutzen: table#tabid>tr.zeilenformat*3>td.spalte$$*4 (einfach mal ausprobieren!)
table#tabid>tr.zeilenformat*3>td.spalte$$*4
Anm.: da fehlen jetzt eigentlich nur noch summary im table, caption und ggf. th (statt td) in erster ZeileIm Emmet-Beispiel werden gleich die Klassen für Tabellenreihen tr und Tabellendaten td erzeugt.
summary
Wichtig: Tabellen werden nur als Darstellung von Daten genutzt (nicht mehr als Layout-"Krücke")!
Tipp: in table-Tag ein summary="..." hinterlegen für Barrierefreiheit
Tabellen mittels CSS stylen:
border: 1px solid #000000; (also Rahmenstärke, Rahmentyp und Farbe in einer Anweisung) und spezielles Tabellenstyling mittels border-collapse: collapse; , damit die Rahmenlinien "kollabieren" und nicht mehr doppelt vorkommen
border: 1px solid #000000;
border-collapse: collapse;
Übungen zu einfachen Styles (CSS) und HTML-Tabellen-Layouts
Tabellenbeispiele:
oder direkte Erläuterungen bei der W3C (World Wide Web Consortium) zu den Tabellentechniken
Das CSS Boxmodell kann man seit ca. 2016 mit den aktuellen Browsern etwas entspannter sehen als früher - insbesondere der Internet Explorer hatte da sein "eigenes Süppchen gekocht".
Boxmodell (Bordermodell):
Tipp: Dimensionen mit Firefox Code Inspector analysieren!
Klassen definieren und nutzen: <p class="besondererstil"> ... </p>
in CSS: .besondererstil { ... } (Punkt beachten - hier allgemeine Klasse)
.besondererstil { ... }
in CSS nur für Absätze (Paragraphs): p.besondererstil { ... } (Klasse wird nur bei Zuweisung in Absätzen genutzt)
p.besondererstil { ... }
Nutzung von span-Tag zum "Markieren" von Textbereichen in Absätzen (Inline-Styling)- Beispiel: <p>Lorem ipsum <span class="formatklasse">dolor</span> sit amet, ... </p>
<p>Lorem ipsum <span class="formatklasse">dolor</span> sit amet, ... </p>
Vererbung von Eigenschaften von Elternelementen an Kinderelemente Beispiel: Styling von body wird vererbt an h1, h2, p, ...
h2
(die etwas andere "Klasse": es kann nur eine geben...)
Mit der Zuweisung einer id in einem Tag verfahren wir prinizipiell genauso wie mit den Klassen (id="test" statt class="test") nur dass wir im CSS die id durch die Kennzeichnung #test ansprechen (statt .test bei Klassen).
Das Besondere: eine id gibt es im Dokument nur ein einziges Mal!
id
Tags werden mit den id dann quasi benannt und können als "Sprungadressen" im Dokument genutzt werden: <a href="#top">nach oben</a> (per Klick auf diesen Link kommt man zum Tag mit id="top")
<a href="#top">nach oben</a>
border (Rahmen), margin (Außenabstände), padding (Innenabstände)
Anwendung der unterschiedlichen Eigenschaften und Details zum Stylen
Vergleich der kompakten Darstellung ("Einzeiler") mit den jeweiligen langen und detaillierten CSS-Styles.Beispiele:
/* Klasse für besondere Absatz-Formate */ p.besondererstil { color: #00FF00; background: #000000; padding: 10px 20px 30px 40px; /* padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 40px; */ border: 5px solid red; /* border-width: 5px; border-style: solid; border-color: red; */ margin: 40px; }
Anm.: die Werte im Uhrzeigersinn -top (12 Uhr) -right (15 Uhr) -bottom (18 Uhr) -left (21 Uhr)
Die Browser der aktuelleren Generationen haben auch keinerlei Probleme mit abgerundeten "Ecken" oder anderen aufwendigeren Styles.
... für das CSS-Styling
Absolute Längenmaße:
Pixel (px - relativ), physischen Einheiten: Zoll (in), Pica (pc), Punkt (pt), Zentimeter (cm) und Millimeter (mm)
Relative Längenmaße:
em - Ein em entspricht der Schriftgröße des Elements, auf das eine Eigenschaft mit einem em-Wert angewendet wird. Wird die Schriftgröße selbst (font-size) in em festgelegt, bezieht sich die Einheit auf die Schriftgröße des Elternelements!neuer: ex, rem (Erläuterungen auf Wiki Selfhtml)
Prozentangaben:% - unterschiedliche Proportionen für resultierende Styles mit width ("der Klassiker") oder bei line-height oder font-size
Zwischen-/Abschluss-Übungen:geschützte Leerzeichen: HTML-Tags: pre (Vorformatierter Text), hr (Horizontale Linie)
Mittwoch, 07.07.21, 08.30 - 16.00 Uhr
Rekapitulation, TN-Fragen
Tabellen (Wiederholung / Übung)
mit der guten Beispieltabelle (siehe alle wichtigen Table-Tags und ordentliche Barrierefreiheit und Design)aus dem Wiki von Selfhtml: Beispieltabelle "Browserstatistik":
Quellcode kopieren / analysieren; Wissen über Tabellenstyling verbessern
div
span
Mit div-Tags lassen sich "Blöcke" mit HTML-Code zusammenfassen (Anm.: Outline-Element).
Der span-Tag ist der "kleine Bruder" von div: Inline-Elemente erzeugen; z.B. zum manuellen Styling von Textstellen in Absätzen (p - Paragraph)
...tbc...
Fachartikel von Stephan Heller (www.daik.de), Internet Professional, März 2007
Wichtig: der Beitrag stellt nur eine Grundtechnik dar und wird von uns in den nächsten Tagen natürlich modern interpretiert (HTML5 statt XHTML)! Ich habe die Grundgedanken trotz des offensichtlichen "Alters" im Beitrag gelassen, da die Basics (der "Rote Faden") immer noch passt und das Layout von mir auf HTML5 aufgemotzt wurde ;-)!
Websites werden klassisch aus Blöcken (div-Tags) zusammengebaut.Später werden wir dann gerne die semantischen HTML5-Tags nutzen: header, article, aside, nav, footer
Begründung/Vorzüge für Einsatz von HTML5:
Das sind entscheidende Vorzüge gegenüber Layouts per Tabellen oder gar Frames!
Analyse und Praxis
... mit den Beispielseiten zum tabellenlosen Layout bereitgestellt durch Trainer
Ein neues Websiteprojekt erfordert einen neuen Ordner:.\htdocs\htmlcss\tabellenloses-layout (mit Unterordnern: ./css und ./img - Ordner-Vorgaben durch Ersteller)
tabellenloses-layout
./img
Die Dateien (von 01 bis 10) ausgiebig erläutern, diskutieren und testen.
Hier ein paar technische Anmerkungen:
min-height
* html #kopf
ex
rem
%
float:left;
#navigation ul li a
display: block;
href="#"
clear:both;
clear:left
clear:right
Ausführliche Übungen und Praxisbeispiele
<div id="container"> ... Page-Blöcke ... </div>
#container { width: 980px; margin: 0 auto; }
:hover
:active
:link
:focus
:visited
#kopf:hover { background-color: silver; }
Übungen: spezielle Rahmen- (border) und Box-Styles (box-shadow) recherchieren und anwenden
Im Grunde geht es um die unterschiedlichen Möglichkeiten unsere Layout-Blöcke nach unseren Wünschen anzeigen zu lassen - und das am Besten auch noch für alle Viewports (Auflösungen) passend!
Aufgrund der unzähligen Umsetzungsmöglichkeiten und teils auch komplexen theoretischen Hintergründe sollte man sich hier wirklich einmal gute Beispiele (Templates) organisieren und dann intensiv analysieren.
Für eine Übersicht und Einführung hier ein Youtube Video von Kevin Powell zum Thema Floats, Flexbox oder Grids.
Conclusio: im Grunde geht es of gar nicht um eine Einzelentscheidung für ein Layoutsystem, sondern oft um eine Kombination der Techniken. Gute Frameworks kombinieren dann die Techniken und bieten diese über die zugehörigen HTML-Layouts und CSS-Stylings an.
Am Ende der Übung steht folgende Erkenntnis:
Die kombinierten Techniken führen zu entsprechenden Darstellungen und müssen/müssten jeweils wieder auf neue Projekte aktualisiert angewendet werden. Man hätte das Gefühl, das "Rad immer wieder neu erfinden" zu müssen. Das führte in der Online-Technik zur Enwicklung von HTML/CSS-Frameworks: bekanntestes Beispiel Bootstrap (getbootstrap.com). Bootstrap ist auch besonders durch die sehr gute Dokumentation attraktiv.
... neue Tags braucht das "Land" (beispielhafter Cheat-Sheet Fundus - SelfHTML Link Seitenstrukturierung )
eine kurze Übersicht über die neuen Tags, die dann auch in unserer Website "Design01" zum Einsatz kommen:
header
main
role="main"
footer
article
section
aside
nav
Startseite index.html
index.html
Der Webserver (Apache) wird mit einer Konfiguration (httpd.conf) ausgeliefert.
Dies Konfiguration regelt auch das automatische Ausliefern von Index-Seiten: d.h. dass bei Aufruf einer Adresse (URL) nur mit Ordner/Hauptordner (Root-Directory) wird ein im Ordner befindliches Standarddokument (index.html, index.htm, index.php, index.pl, index.asp, ..) automatisch auf die Browseranfrage (Request) ausgeliefert!
Impressum
mindestens Angabe von Name, Telefonnummer, E-Mail-Adresse (wichtig: reale und funktionstüchtige Infos)Das Impressum sollte auf jeder Seite mit nur einem Klick direkt erreichbar sein
Zwischen-/Abschluss-Übungen: HTML-Kurzanalyse von "Design01"Bereitstellung eines freien HTML5-Templates aus dem Selfhtml-WikiMorgen dann Umsetzung einer kompletten Website auf Basis dieses HTML5/CSS3-Templates
Donnerstag, 08.07.21, 08.30 - 16.00 Uhr
Rekapitulation, TN-Fragen, ... der "Website-Projekt-Tag"
Bibliothek
Bücher zum Thema "HTML & CSS"
Digitale Übersicht auf einer "HTML & CSS - Bibliothek" auf diesem Portal
Wer an einem aktuellen Nachschlagewerk zu den Themen "HTML, CSS und JS" interessiert ist, kann nach unseren Kursen immer zur "Handbuch-Reihe" aus dem Rheinwerk-Verlag greifen.
Tipp: Online-Beispiele aus Buch "HTML5 und CSS3 Meisterkurs" (Link)
... von Design01 - einem freien CSS-Template des Selfhtml-Wiki (Link Design01 Wiki SelfHTML)
Im Kopfbereich erkennt man folgende Techniken - hier ein paar Erläuterungen (Version Design01 Jahrgang 2021)
<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Beispiel-Design von selfhtml.org"> <link rel="stylesheet" href="/css/style.css"> <link rel="icon" type="image/svg+xml" href="/favicon.svg" sizes="any"> <script src="/js/dark-mode-toggle.js"> </script> <title>SelfHTML Design Nr.01</title> </head>
Erläuterungen im Seminar zu:
(Meta-Tags)
Infos für die Suchmaschinen-Bots - also Suchmaschinen Google, Bing (Microsoft - Bing is not Google), Altavista, DuckDuckGo oder das Metager-Projekt des RRZN Hannover (metager.de - Link)
Automatisch auswertbare Infos mittels<meta name="author" content="J. Brandes"> und z.B. auch name="keywords",und name="description", ...
<meta name="author" content="J. Brandes">
name="keywords"
name="description"
Weiterführende Infos: Link Selfhtml
... von "Design01" - einem freien Template des Selfhtml-Wiki
Im Seminar werden mehr Erläuterungen zum CSS inklusive Tests durchgeführt.
Einstieg in den CSS-Code:
/* Stylesheet für Selfhtml Design 01 responsives Layout mit Flexbox ab Z. 247 */ /* ============== GLOBAL DEFINITION =================== */ /* alternatives Boxmodell */ *, ::before, ::after { box-sizing: border-box; } /* Farbfestlegungen nur als Fallback für IE9-11 custom properties für alle anderen! */ body { max-width: 65em; margin: 0 auto; padding: 0 1em; font: normal 1em Arial, sans-serif; color: darkRed; /* wird als currentColor für die Akzentfarbe verwendet. */ color: var(--accent1-color); background-color: #ffffff; background-color: var(--background-color); } p, ol, ul, dl { color: #333; color: var(--font-color); } :root { --background-color: #fff; --background2-color: #ccc; --background3-color: #ccc; --accent1-color: darkred; --accent2-color: orange; --accent3-color: #fede9e; --font-color: #333; --font2-color: #666; --link-color: darkred; } :root.dark { --background-color: #666; --background2-color: #666; --background3-color: #ccc; --accent1-color: darkred; --accent2-color: orange; --accent3-color: #fede9e; --font-color: #fff; --font2-color: orange; --link-color: orange; }
Selbstverständlich sind hier nur Auszüge in meinem Beitrag präsentiert.
Hier ein paar kurze Erklärungen:
Variablen mit CSS: Erläuterungen und Beispiele auf SelfHTML Wiki
(Buchtipp: benutzerfreun.de)
Layout:
2- oder mehr-spaltiges Layout mit variabler Anordnung der NavigationAnm.: Breite von 960px; orientiert sich an klassischen 960er Grid-Raster (siehe 960.gs - ein Framework für HTML/CSS der ersten Stunde)
Farben:
Auswahl mit paletton.com (siehe gleichlautende Website und/oder Ausdruck)Farbauswahl gerne wieder auch mit einem Firefox-Add-on: Farben für unser Styling aus einem Bild entnehmen und Codes in Textdatei dokumentieren
Typografie:
Schriftart (Verdana), Größen/Größenverhältnisse, Zeilenabstände, spezielle Aufzählung oder hervorgehobene Textstellen, …Tipp: Google-Fonts (Thema Schriften/Fonts und Schriftschnitt: font-weight: 700;)Einstiegsseite: www.google.com/fonts - Auswahl einer Schriftart an Beispiel "Ubuntu" zeigenDarstellung zu Thema Fonts/@font-face auf Selfhtml
Navigations-Struktur:
Hautpseite index.html mit Unterseiten hobby.html, job.html, impressum.html und kontakt.html (4 Unterseiten)
hobby.html
job.html
impressum.html
kontakt.html
Tafelbild aus Vor-vor-vor-Seminar ;-)
Für die Erstellung der Unterseiten eine passende erste Hauptseite mit den gleichen und veränderlichen Positionen identifizieren und effizient mit Kopien der HTML-Pages und HTML-Bereiche arbeiten.
(mehr Design / komplettere Vorlage)
Beispiel: (z.B.) Design01 aus den HTML/CSS Vorlagen des Selfhtml-Wiki (Link) in HTML5Prüfen, ob die Designs lassen sich für private und kommerzielle Projekte anpassen/nutzen lassen.
Allgemeine Erinnerung: wieder bekommt unser neues Projekt einen Ordner auf unserem Entwicklungssystem/Ordnersystem:.\htdocs\htmlcss\design01 (mit Unterordnern: ./css und ./img - Vorgaben durch Ersteller)nach Vorgabe aus "Phase I" (s.o.) eine eigene Websitestruktur schaffen und verlinken
design01
Youtube Portale zu HTML & CSS
Spezielle Übungen:
background-image und background-repeat TechnikenWichtig: relative Pfade in der Url() Anweisung beim CSS: background-image: url('../img/hintergrund.jpg) Erläuterung: Ordner ./css und ./img liegen "nebeneinander", also muss man aus CSS heraus erst einen Ordner "zurück" und dann in den parallelen Bilderordner (hier: ./img)Link: http://www.stripegenerator.com/ für Background-ImagesLink: http://www.colorzilla.com/gradient-editor/ Backgrounds mit CSS Gradiententen (Verläufen)
background-image: url('../img/hintergrund.jpg)
verschiedene CSS-Stylings; z.B.:h2.img - Heading 2 mit Klasse img - hier also Klasse img!).img.group - Styling für Elemente mit class="img group" - also 2 Klassen zugewiesen!
h2.img
.img.group
Freitag, 09.07.21, 08.30 - 16.00 Uhr
Rekapitulation (Webprojekt Do-Nachmittag!), TN-Frage ... Plan für Freitag:
Listen verschachteln
am Beispiel unsortierter Listen eine Aufzählung mit 2. Ebene erstellen und stylen
Wichtig: die 2. Listenebene muss sauber in einem li (Listitem) der 1. Ebene verschachtelt werden!umso wichtiger wenn wir danach aus dieser Liste eine Navigation erstellen wollen
Horizontale Navigationsleiste
(horizontal list) beispielhafte Navigation nach Vorlage Buch C. Wyke-SmithAlternative: Bruce Hysloop "Meisterkurs - Link - Online-Beispiele)
Lösung mittels div-Block für Navigation (in Lösung mit HTML dann bitte nav Block nutzen und den CSS-Stil entsprechend kodieren) und natürlich wieder unsere richtig verschachtelten ul/li-Listen; Styling mit intelligentem Floating (float: left;)
Kurz-Einführung:
Client-/ Server- Technologie (eine "Kopiermaschine")
Web-Server: z.B. Software Apache, hält alle Ihre Webdokumente und Ordnerstrukturen bereit, kann bei einem Hoster inklusive weltweiter "Adresse" (Domain → domainname.topleveldomain → Bsp.: firmenname.de ) gemietet werden
Web-Client: Browser, Software z.B. Firefox, Chrome, Opera, Internet Explorer, stellt Anfrage (Request - http://www.bahn.de an den Server) und erhält die entsprechenden Dateien herüberkopiertWichtig: "Startdokumente" für Ihre Projekte richtig benennen für die automatische Auslieferung durch Server: index.php, index.html, ...
index.php
Für unser Website-Projekt (den Projektordner) benötigt man jetzt einen Anbieter für den nötigen Webserver und die Registrierung einer gewünschten "Adresse" (Domain) im Internet.
Beides (und auch E-Mail-Service, Datenbanken, FTP-Zugangstechnik, ...) bietet ein Hoster an. Bekannte "Massen"-Hoster: 1und1, Strato, Hosteurope, Domainfactory, ...
Hoster mit spezielleren und maßgeschneiderten Angeboten (hier TYPO3): jweiland.net, mittwald.de
Tipp: bei den Hostern kann man die Verfügbarkeit einer Domain checken lassen! (Technik: whois Recherche)
Software zum "Kopieren" unserer Projektordner auf den Webserver des Hosting: FTP (File Transfer Protocol)Empfehlung: Filezilla (Link) und bitte als Protokoll immer nur SFTP (Secure FTP - eigentlich SSH-Technik) nutzen!
(ein kleines Bildergalerie Beispiel)
Anm.: bitte JS nicht mit Java (Programme dann z.B. als Java Applet - Java "Progrämmchen") verwechseln-1
für JS ist keine Extra-Software nötig - die Browser haben eine JavaScript-Engine eingebaut.
Beispiel einer Dia-/Bildershow mit dem Klassiker LightBox2 aktuelle Version von Lokesh Dhakar - Link - Kurzanleitung aus Webseite bzw. aus Übung mit TN:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Lightbox Beispiel</title> <link rel="stylesheet" href="/css/lightbox.css"> </head> <body> <h3>2 Bilder als Galerie (data-lightbox gleich)</h3> <a href="/img/big/DSC_0040.jpg" data-lightbox="gallery" data-title="Erste Bildunterschrift"> <img src="/img/small/DSC_0040.jpg" alt="Bild 1"> </a> <a href="/img/big/DSC_0041.jpg" data-lightbox="gallery" data-title="Zweite Bildunterschrift"> <img src="/img/small/DSC_0041.jpg" alt="Bild 2"> </a> <script src="/js/lightbox-plus-jquery.min.js"></script> </body> </html>
Anm.: CSS und JS Dateien gibt es oft auch in einer "minified" (komprimierten) Version (lightbox.min.css), um kB beim Seitenaufruf einzusparen.
lightbox.min.css
Bearbeiten lassen sich diese "geschrumpften" Dateien kaum - Lösung / Toolbeispiel: CSS Minifier (als Online Tool).
Die Erstellung von qualitativen (siehe Aussehen, Technik, Validität) Formularen stellt häufig allein schon eine Hürde bei der Umsetzung mit Online-Technik dar.
Hinzu kommt bei der Verwendung von Formularen, dass wir uns mit bestimmten technischen und gesetzlichen Rahmen beschäftigen müssen.
Diese Auflagen führen bei vielen Betreibern von Websites dazu, dass mandie Interaktionen mit Website-Besuchern auf die klassischen Techniken wie E-Mail reduziert.
Kommen wir zu Formular-Beispielen und Quellen rund um das Thema "Formulare mit HTML/CSS":
On Design - Formulare Step-by-Step (DLs bereitgestellt durch mich/Trainer)
Die Variante Step 2c wird in Seminaren meist in unsere Übungswebsite integriert/eingebaut.
Bild: in den Formular Beispielcode wurde ein "Datum"-Eingabe-Element nach Beispiel aus dem SelfHTML-Wiki eingebaut. Das CSS-Styling des Beispiels wurde leicht angepasst.
SelfHTML Infosites:
Viele Beispielcodes lassen sich mit Online-Test-Umgebung (frickl PHP Umgebung) austesten.
W3-Schools Beispiele:
Anm.: das ist ein Webportal, das auch kostenpflichtige Angebote beinhaltet / beinhalten kann.
Diverse Links zum Thema Formulare mit HTML und CSS:
Diese Listen ließen sich beliebig erweitern und ergänzen. Genug Stoff also, um sich mit der modernen Umsetzung von Formularen zu beschäftigen.
Und natürlich sollten hier auch wieder HTML-CSS-Frameworks erwähnt werden. Mit deren Hilfe lassen sich die meisten Formularumsetzungen per Copy & Paste aus den entsprechenden Dokumentationen entleihen.
(HTML5 / CSS3 / JavaScript - Vorlagensysteme)
Verfügbare, freie Vorlagen für unsere neuen Sites-Entwürfe ckecken - bitte unbedingt die jeweiligen Lizenzen beachten und einhalten!
Hinweis auf HTML/CSS-Frameworks, die gleich komplett Techniken für Navigationen, Bilddarstellungen (Galerien, Karussel, ...) und sogar Responsive Design (Darstellung optimal auch auf eingeschränkten "Viewports/Auflösungen" wie Smartphones, Tabletts und Co.) mitbringen.
Frameworks: (eine unvollständige Übersicht ;-)
Große Übersicht (inkl. Beschreibungen, Links und Einschätzungen): https://www.designerinaction.de/tipps-tricks/web-development/css-frameworks/
Im Einzelnen ist immer zu beachten:
Eine Entscheidung bedeutet immer auch eine gewisse zeitliche Bindung für unsere Projekte.
Templatesites (mit Downloads - und wieder auf die Lizenzen achten):
Themen, die (oft) dem zeitlichen Rotstift zum Opfer fallen:
Audio/Video - HTML5-Special
Mit den neuen audio- und video-Tags lassen sich - geeignete Kodierung der Files vorausgesetzt - die Medien direkt in den aktuellen Browsern abspielen.
audio
video
Als Beispiel siehe Lösung aus dem HTML5 Buch Bruce Lawson, Remy Sharp: Webseite http://introducinghtml5.com/ und die Beispiel-Seite https://introducinghtml5.com/links/ch04.html für Kapitel 4 "Video und Audio" des Buchs
Beispielhafte Fragen und Antworten in Theorie und Praxis rund um HTML & CSSDie Musterprüfung und Musterlösung finden Sie auch unter den Downloads zum Modul I; dort gibt es auch den Lernzielkatalog/Bewertungsraster (LZK/BWR) zum Modul (quasi den "Roten Faden" oder Checkliste zum Modul I)
Freiwillige Prüfung - Koordination nach dem Seminar
Falls Sie nach dem Seminar an der Prüfung im Modul "HTML & CSS" interessiert sind, dann bitte zeitnah per E-Mail an mich wenden.
Prüfungsvorbereitung:
TN-Bescheinigungen, letzte TN-Fragen, Feedback
Für Seminare zu HTML & CSS benötitgt man (eigentlich) keinen echten Webservice.
Aber man weiß ja nie wo uns die Entwicklungen in einem Seminar hinbringen. Also vervollständige ich für alle Interessierten hier die Infos zum AMP (Apache - MySQL/MariaDB - PHP) Server, den ich in meinen Online-Seminare einsetze.
Im Falle einer vollständigen Nutzung der Serverumgebung über unseren Client (das Windows-Betriebssystem) wollen wir letzlich auch mit vollständig professionellen VirtualHosts arbeiten. Wir wollen also unsere Projekte im Test- und Entwicklungsstadium über richtige URLs wie (z.B.) relaunch.pcs.local ansprechen können.
Wir erarbeiten unsere Projekte lokal an unserem Windows-System. Die nötigen Services laufen ebenfalls hier:
Die gesamte Serverumgebung ist also bereits fix & fertig vorbereitet.
Client: (OPTIONAL) Windows hosts Datei
Anm.: der Einsatz von hosts-Technik(en) ist normalerweise nur in den CMSOD TYPO3-Seminaren zwingend von Nöten.
Aber vielleicht möchten wir diese Technik (Anm.: sehr nah am späteren Hosting) auch mit anderen Online-Projekten umsetzen.
Es fehlen hierzu auf der Client-Seite noch wenige Zusatzkonfigurationen, damit wir unsere Projekte auch mit sauberen URLs nutzen können.
WICHTIG: Die folgenden Konfigurationen bitte mit Adminrechten umsetzen (Windows - Als Administrator ausführen / Benutzerkontensteuerung/UAC)
Hinweis: beispielhafte hosts-Datei wird von Trainer verteilt - bzw. hier als abgespecktes Beispiel für eigene Erweiterungen!Pfad für etc-Hosts Datei auf Windows Systemen: C:\Windows\System32\drivers\etc\hosts
C:\Windows\System32\drivers\etc\hosts
Einträge für die gewünschten VHosts erstellen:
# den lokalen CMSOD-XAMPP per Domainname ansprechen können: 127.0.0.1 cmsod.local www.cmsod.local # Konfigurationen - hier: # Beispiele für wordpress Site # ------------------------------------------------- # Domain: wordpress-demo.local # Alias: www.wordpress-demo.local # Webserver: C:\xampp-cmsod\htdocs\typo3\www.wordpress-demo.local # Datenbank: wordpress_demo # Einsatz: eine Umsetzung wie für das TYPO3-Seminar bzw. beim Hoster hier auch für WordPress 127.0.0.1 wordpress-demo.local www.wordpress-demo.local # am Besten auch gleich für weitere Seminarseite den VHost eintragen: 127.0.0.1 wordpress-seminar.local www.wordpress-seminar.local
Diese virtuellen Hosts (VHosts) müssen dann noch auf Serverseite (Apache Webserver) entsprechend passend konfiguriert sein! Siehe C:\xampp-cmsod\apache\conf\extra\httpd-vhosts.conf
C:\xampp-cmsod\apache\conf\extra\httpd-vhosts.conf
Server: (OPTIONAL) VHosts (zwingend notwendig für TYPO3-Installation)
Hinweis: beispielhafte httpd-vhosts-Datei ist bereits in dem vorbereitetem XAMPP-CMSOD vorhanden!
VHost-Konfigurationsdatei für den Apache: C:\xampp-cmsod\apache\conf\extra\httpd-vhosts.conf
Jetzt noch einen nötigen Eintrag für die gewünschte VHost-Domain www.wordpress-demo.local bereitstellen:Tipp: Vorlage des VHost-Abschnitts für www.wordpress-demo.local kopieren und anpassen für eigene Projekte
www.wordpress-demo.local
Anm.: hier nicht alle Zeilen dargestellt; die Kommentarzeilen wurden weggelassen.
<VirtualHost *:80> ServerAdmin webmaster @ cmsod.local DocumentRoot "C:/xampp-cmsod/htdocs/typo3/www.wordpress-demo.local" ServerName wordpress-demo.local ServerAlias www.wordpress-demo.local ... </VirtualHost>
Kommen wir jetzt zu den nötigen Schritten und Anleitungen für die Inbetriebnahme unserer Serverumgebung XAMPP-CMSOD.
Prinzipbild zur Client-/Server-Technik für Web-Client (Browser) und Web-Server:
maßgeschneiderte Seminar-Version basierend auf XAMPP 7.4.14 mit PHP 7.4.14
Bei Hostern: klassisches LAMP-System (Linux - Apache - MySQL/MariaDB - PHP)
Alternative Windows: als WAMPP mit einer Windows Server Betriebssystem Basis und dem IIS (Internet Information Server) als Webserver und dem MSSQL-Server als Datenbankserver
Vorgehensweise im "Windows-basierten" Seminar mit XAMPP-CMSOD-Server für Windows:
Ich stelle als Trainer ein fertiges selbstentpackendes XAMPP-7z-Archiv (exe-Datei) bereit, das bereits für die CMS Joomla, WordPress, TYPO3 und die anderen CMSOD-Seminare vorkonfiguriert ist.
Infos zum (aktuellen) XAMPP-CMSOD für meine Seminare:
Die Prüfsummen können in der PowerShell evaluiert werden.Tipp: Umschalten-Taste und Rechte Maus im Ordner zeigt PowerShell im Kontextmenü - Aufruf im Ordner des Archivs:
$a = Get-FileHash -Path .\xampp-cmsod-40-7.4.14-TEILNEHMER-20210124-1454.exe -Algorithm SHA256$a.Hash
Das Trainer-XAMPP-Archiv wird nur bei Notwendigkeit (siehe PHP-Version 7.4 zuletzt notwendig für TYPO3 v11) aktualisiert.Die eingebauten Techniken (s.u. Grafiktools, ...) könnten auch selber aktualisiert werden.
Bei Tests auf frischen Windows 10 Installationen (1909 bzw.19H2, 2004/20H1, 20H2, 21H1) wird ggf. ein Fehler beim Starten des XAMPP Controlcenter (xampp-control.exe) angezeigt: "httpd.exe - Systemfehler (...Code kann nicht fortgesetzt werden, da VCRUNTIME140.dll nicht gefunden ...)" Die nervigen Fehler-Popups müssen dann mit mehrfachen ESC weggeklickt werden.
xampp-control.exe
VCRUNTIME140.dll
Es muss die "Microsoft Visual C++ Redistributable für Visual Studio 2015, 2017 und 2019" Laufzeitumgebung installiert werden. Die nötige Installationsdatei (aktuell: VC_redist.x64.exe in Version 14.29.30037.0) kann leicht mit Suche nach "vc_redist.x64 2019" gefunden werden und muss mit Adminrechten installiert werden (Neustart empfohlen).
VC_redist.x64.exe
Hier folgt die Kurzanleitung für die Bereitstellung (Installation bedeutet hier ja einfaches Entpacken in Zielordner) und Nutzung unserer XAMPP-CMSOD Serverumgebung.
Schritte für die Inbetriebnahme de XAMPP-CMSOD:
C:\xampp-cmsod
C:\xampp
localhost
http://
Hier mal eine Übersicht nach dem "Auspacken/Installieren":
Die vorbereitete Umgebung in einer kleinen Übersicht:
C:\xampp-cmsod\
C:\xampp-cmsod\htdocs\wordpress\...
C:\xampp-cmsod\apache\conf\httpd.conf
C:\xampp-cmsod\php\php.ini
Die Tabelle hier natürlich beispielhaft für diverse Online-Projekte.
Für Technik- und CMSOD-Zertifikat-Interessierte befindet sich unter (URL) http: //localhost/cmsod-overview eine Website mit Infos rund um den CMSOD und die genutzten Techniken und Konfigurationen.
(URL) http: //localhost/cmsod-overview
Und schon kann es losgehen...
Bei häufigeren Einrichtungen von Entwicklungsumgebungen möchte man das gerne noch effizienter gestalten. Das führt uns zum Paketmanagement mit Chocolatey unter Windows - einem der Lieblingstools von Windows Administratoren/Profis.
Profitipp: Chocolatey zur Installation der gewünschten Tools
Hier: Schnellanleitung Softwareinstallationen mit Chocolatey PaketmanagementAnm.: wir entscheiden uns für die systemweite Nutzung der Installationen!Das bedeutet, dass wir die PowerShell (Konsole) für Chocolatey Befehle immer mit Adminrechten nutzen.
# PowerShell vorbereiten: (ggf. schon auf Trainingssystemen konfiguriert)# ======================================================================Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser Get-ExecutionPolicy # ergibt RemoteSigned
# Chocolatey bereitstellen: (ggf. schon auf Trainingssystemen installiert) # ====================================================================== # in Admin-PowerShell Copy&Paste von Chocolatey Seite # https://chocolatey.org/install # einfach die Copy&Paste Zeile mit Maus anklicken und in der # PowerShell Konsole mit rechter Maus wieder einfügen # ====================================================================== # hier die fragliche Installzeile für die Admin-PowerShell # Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1')) # die Chocolatey Install Seite zeigt auch, wie man die install.ps1 einfach # manuell herunterladen kann, um diese vorher zu inspizieren! # ====================================================================== # Chocolatey nutzen/testen # ====================================================================== choco version choco list --local-only # oder kurz: choco list -l # Alle Packages für Chocolatey online recherchieren: # https://community.chocolatey.org/packages # ====================================================================== # Chocolatey CMSOD Installationen: # Wichtig: Admin-PowerShell nutzen # ====================================================================== # Browser (mindestens 2 Browser für Entwicklungsumgebungen nötig) # ====================================================================== choco install -y firefox choco install -y chromium # choco install -y opera # hat aktuell leichte Fehlermeldungen # ====================================================================== # Tools: Editor, Zipper, Windows Werkzeuge, Git # ====================================================================== choco install -y notepadplusplus --x86 choco install -y vscode choco install -y 7zip choco install -y powertoys choco install -y git choco install -y riot # ====================================================================== # Experten-Tools für Websiteentwicklungen (siehe SASS und Co) # ====================================================================== choco install -y nodejs choco install -y python3
Der Clou: die gesamte gewünschte Software ließe sich auch mit einem Einzeiler installieren (oder natürlich per Skript).
Und natürlich installiert man sich nur die wirklich benötigte Software. Für die Softwareverwaltung reichen dann einfache Befehle choco /? | choco list | choco list -l | choco install | install /? | choco outdated | choco upgrade all -y , ... mit der Windows PowerShell.
choco /? | choco list | choco list -l | choco install | install /? | choco outdated | choco upgrade all -y , ...
Vielen Dank für das "Klopfen" und die Rückmeldungen zum Seminar.Ich freue mich auf die Folgeseminare im Rahmen der Weiterbildungen IUK/BIZ WF.Ihr Trainer Joe Brandes
Sie finden auf dieser Seite - als auch auf meiner privaten Visitenkarte joe-brandes.de einige Hintergrundinformationen zu mir und meinem Background.Natürlich stellt die IT einen Schwerpunkt in meinem Leben dar - aber eben nicht nur ...
Private Visitenkarte / Technik: HTML & CSS joe-brandes.de
Ich erarbeite und konzipiere seit über 30 Jahren IT-Seminare und -Konzepte. Hierfür stehen der "PC-Systembetreuer / FITSN" und der "CMS Online Designer / CMSOD". Ich stehe Ihnen gerne als Ansprechpartner für Ihre Fragen rund um diese und andere IT-Themen zur Verfügung!
BECSS Visitenkarte / Technik: HTML & CSS becss.de
Wer einmal zum Snookerqueue gegriffen hat, der wird es wohl nicht wieder weglegen. Und ich spiele auch immer wieder gerne eine Partie Billard mit den Kumpels und Vereinskameraden. Der Verein freut sich über jeden, der einmal in unserem schicken Vereinsheim vorbeischauen möchte.
Billard Sport BS / nicht mehr von mir betreut billard-sport-braunschweig.de