Außerhalb von NETWAYS: Projektwoche in der Berufsschule

Heute möchte ich einen Blick außerhalb der betrieblichen Ausbildung werfen und ein wenig über die Projektwoche in der Berufsschule berichten. Alle Auszubildenden, die die Berufsschule B3 in Fürth im Zweig Fachinformatik Systemintegration oder Anwendungsentwicklung besuchen, führen dort am Ende des 2. Ausbildungsjahres eine Projektwoche durch.
Innerhalb dieser Projektwoche arbeiten die Schüler einer Klasse in Gruppen von 12 – 15 Mitgliedern zusammen. Dabei wird vor allem darauf geachtet, dass die Stärken der Schüler gleichmäßig auf die Gruppen verteilt werden.
Das Projekt selbst bestand aus der Simulation eines Kundenauftrages an eine Firma, die sowohl die Umsetzung von IT-Infrastrukturen als auch Software-Entwicklung bietet. Die Belegschaft der Firma wurde dann wie folgt auf die Mitschüler aufgeteilt:

  • Abteilung Management: 3 Schüler
  • Abteilung Infrastruktur: 3 Schüler
  • Abteilung Entwicklung: 6 Schüler

Die Gewichtung ergab sich aus der Analyse des Lastenheftes, das vom Lehrerkollegium zuvor ausgearbeitet und ausgehändigt wurde. Darin ging es darum, dass für den Kunden eine Infrastruktur und Software aufgebaut werden soll, mit der der Kunde sämtliches IT-Inventar in seinen Räumlichkeiten verwalten kann. Der Kunde selbst wurde dabei durch unsere Schule und einen Teil des Lehrerkollegiums dargestellt. Folgende Punkte waren dabei besonders von Bedeutung:

  • Netzwerk mit VLANs (Trennung von Schul- und Administrationsnetzwerk) mit Access Points für WLAN
  • Web- und Datenbankserver, auf denen die Inventarisierungssoftware laufen soll
  • Mit der Software müssen folgende Aktionen machbar sein:
    • Auflisten von Inventar
    • Ändern, Löschen und Hinzufügen von Inventar
    • Zuordnung von Inventar zu Räumen und Klassenzimmern
    • Login mit User/Passwort und Vergabe von Rechten (Admin oder User)
  • Einrichten von Clients für die Nutzung des Webfrontends der Software
    • Aufrufbar über Browser
    • Ergonomie muss beachtet werden
  • Erstellung eines Pflichtenheftes, einer Kundendokumentation und eines Wartungsvertrages
    • Pflichtenheft und Wartungsvertrag muss von den Lehrkräften abgenommen werden
    • Kundendokumentation soll als Benutzerhandbuch fungieren
  • Abschließende Projekt-Präsentation vor Publikum mit abschließender Fragerunde
  • Zeitlicher Rahmen: Montag bis Donnerstag, Umsetzung des Projektes mit freier Zeiteinteilung, Freitag morgen Präsentation

Nachdem wir den Montagvormittag damit verbrachten, die Aufgabenstellung durchzuplanen, setzten wir im Laufe der Woche die folgenden Schritte um:

  • Erstellung Pflichtenheft
  • Aufbau Netzwerk
  • Aufbau LAMP-Stack auf Server
  • Aufbau der MySQL-Datenbank
  • Erstellung der Core Software aus php und javascript
  • Erstellung des Webfrontends mit html und php
  • Erstellung Wartungsvertrag
  • Erstellung und Planung Projekt-Präsentation
  • Ausführliches Testen der einzelnen Komponenten
  • Fehlersuche, Debugging und Korrekturen
  • Erstellung Kundendokumentation, direkt aufrufbar über die Hilfe-Funktion in der Software

Mit dem Ergebnis aus dieser Woche konnten wir dann auch unsere Lehrer überzeugen, die unsere Gruppe durchweg positiv bewerteten und sehen konnten, dass wir als Klasse viel Wissen aus den letzten beiden Schuljahren mitgenommen haben.
Als Fazit kann ich persönlich sagen, dass es auf jeden Fall eine tolle und konstruktive Erfahrung ist, einmal komplett eigenverantwortlich und mit eigener Zeiteinteilung eine solche Aufgabe zu bewältigen. Außerdem bringt dies die Schüler auch zwischenmenschlich und bzgl. der eigenen Persönlichkeit weiter, denn jeder lernt nicht nur die eigenen Stärken und die der Mitschüler kennen und schätzen, sondern muss auch mit Schwächen und Fehlschlägen zurechtkommen bzw. anderen aus diesen heraushelfen. Es ist eben doch ganz gut, wenn man ab und zu mal die eigene Komfortzone verlässt!
Wer sich nun angesprochen fühlt, auch mal in die IT-Welt zu schnuppern oder mit dem Gedanken spielt, eine Ausbildung im Bereich Informatik zu machen, dann schreibt uns doch einfach unter jobs@netways.de. Mehr Infos findet Ihr auch auf unserer Webseite oder in unserer Stellenausschreibung zum Azubi Fachinformatik. Mehr Informationen zum Thema Ausbildung Fachinformatiker findet Ihr auch auf der Webseite der IHK.
 
Bildquellen: 
https://www.unixmen.com/how-to-install-lamp-stack-ubuntu-17-04/
http://www.b3-fuerth.de/ 

Nicole Lang
Nicole Lang
Account Manager

Ihr Interesse für die IT kam bei Nicole in ihrer Zeit als Übersetzerin mit dem Fachgebiet Technik. Seit 2010 sammelt sie bereits Erfahrungen im Support und der Administration von Storagesystemen beim ZDF in Mainz. Ab September 2016 startete Sie Ihre Ausbildung zur Fachinformatikerin für Systemintegration bei NETWAYS, wo sie vor allem das Arbeiten mit Linux und freier Software reizt. In ihrer Freizeit überschüttet Sie Ihren Hund mit Liebe, kocht viel Gesundes, werkelt im Garten, liest...

Styling Webforms

Styling webpages? Easy.
I’m guessing a lot of you had to work with CSS at some point in their lives.
Most parts of the web are fairly easy to style,
especially if you know some of the little hacks that you have to use to make a page look pretty.
So you go ahead and style everything the way you want it:
Nice grey background, elements in different shades of blue a bunch of elements in pink for contrast.
You put a nice image as a header for your page and add a sidebar, things that appear and disappear when you hover over them, even some nice animations.
All looking good.
Styling forms? Not so much.
Then you get to the user settings.
You try to apply styles to the checkboxes. Nothing happens.
You try to apply styles to the dropdowns of select elements. Nothing happens.
Need a date selector? Good luck on doing anything to that one!
But why is it so hard to style webforms?
In the end it all comes down to the fact that styling form elements is left up to the browsers.

A select will look different in Chrome than in Safari, Firefox, IE or any other User Agent.
But then again, in a Chrome browser a select will look the same in every web page you look at.


I’m not talking about whether you should or shouldn’t overwrite those defaults.
There are a lot of arguments for and against it, but all I’m going to focus on in this post is the how.


How do you restyle checkboxes?
Especially hacky is how the restyled checkboxes work:
The actual checkbox input is to be hidden:


input[type="checkbox"] {
position: absolute; // take it out of document flow
opacity: 0; // hide it
}

The new box for the checkbox is then built into the label of the checkbox with the ::before selector.
The tick is then styled with the ::after selector like this:


input[type="checkbox"] + label:before {
// Box for Checkbox
}


input[type="checkbox"] + label {
// Actual label
}


input[type="checkbox"]:checked + label:after {
// Tick
}

That way you can have a completely customised checkbox.
How does it look like all put together?
I had a little project where I spent a week researching how to make a webform pretty with only CSS.
The result was a melange of tips and tricks I found all over the web. (That little checkbox trick that i just explained was one of them)
Check it out below!

See the Pen Formstyles for Blogpost by Feu (@the_Feu) on CodePen.

Jennifer Mourek
Jennifer Mourek
Junior Developer

Jennifer (von eigentlich jedem nur "Feu" genannt) verbrachte ihre Kindheit im schönen Steigerwald und kämpfte sich bis zum Abitur durch die Schule. Seit September 2016 unterstützt sie nun im Rahmen ihrer Ausbildung zum Fachinformatiker die Development Abteilung bei Netways und widmet sich dort dem Web Development. Ihre Freizeit verbringt sie hauptsächlich in den virtuellen Welten von 'Dota 2' und diversen anderen Games, an der Kletterwand in der Boulderhalle oder damit ihren Freunden und Kollegen auf...

Weekly Snap: Git Flow & GeoIP, Rsync & SCP

weekly snap1 – 5 April kicked off the month with tips for flowing Git branches, SSH transmission speed, clean website code and request redirection.
Eva began by counting 16 days to the OSDC with Benedikt Stockebrand’s presentation “Like Rats on a Sinking Ship” on the end of IPv4.
Stefan then shared his trick to boost SSH transmission speed with SCP and Rsync parameters while Bernd gave us his to redirect requests from specific countries.
To end the week, Eric explained the right flow for Git branching, and Tobias reminded us that clean website code matters to Google page ranks.

Nicht nur für mobile Endgeräte: Responsive-Web mit Media-Queries

Im Buzzwort-Bingo hat beim heutigen Blogpost ‘Responsive Web’ zugeschlagen.
Nachdem Tablets und Smartphones in sehr kurzer Zeit zur potentiellen Zielgruppe für die meisten Webapplikationen gelten, geistert ‘Responsive Web’ als Paradigma durch das Web – und meint damit eigentlich nur, dass man jetzt wirklich darauf achten sollte dass Webseiten auch auf kleineren Displaygrößen benutzbar sind. Man tut dem ganzen aber Unrecht wenn man es nur als Mobile-Thema abtut – auch wer ‘nur’ mit dem Desktopbrowser surft kann von den Techniken profitieren.
Kernelement des ganzen sind CSS Media Queries. Diese stellen im Grunde eine Verfeinerung der media-types da, die alle Browser (ausser IE, der kann es ohne Hacks erst ab Version 9) seit Urzeiten unterstützen. mit
@media print {
... CSS für Druckausgabe ...
}
@media screen {
... CSS für Bildschirmausgabe ...
}

… stellen unzählige Angebote bereits Ihre Druckseiten anders dar als die Browseransicht (z.B. andere Schriftgrößen).
Media-Queries gehen noch einen Schritt weiter: Mit ihnen kann man CSS in Abhängigkeit der Fenstergröße, der Bildschirmorientierung (z.B. wenn man das Tablet dreht), des Höhe/Breite Verhältnisses, der Pixeldichte und vielen mehr anpassen. Die Query
@media screen and (max-width: 1024px) {
... css ...
}

definiert z.B. Regeln,die nur dann gelten, wenn das Browserfenster 1024px klein ist und greift auch, sobald der Nutzer das Fenster kleiner zieht. Meistens sieht man so etwas wenn es darum geht Mobilgeräte zu unterstützen, z.B. indem Werbebanner anders angezeigt werden sobald ein Gerät mit bestimmter Pixeldichte und Auflösung auf die Seite kommt. Man muss sich jedoch bewusst sein dass auch ein Desktopbrowser mit den gleichen Eigenschaften gerade die Seite anschauen könnte. Einen eigenen Medientyp für Smartphones oder Tablets gibt es nämlich nicht.
Allerdings sind media-queries in variablen Umgebungen wie dem Desktop-Browser fast praktischer: Da die Fenstergröße hier von sehr groß bis klein variieren kann sollte man als Entwickler auf Skalierbarkeit achten. Das fängt bei Netbooks an, geht zu Nutzern weiter die auch mal ein einzelnes Fenster klein gezogen haben, bis zu der (nicht mal so unpraktischen) Split-View von Windows 8.
Hier kann man mit Media-Queries ohne viel Aufwand auf Größenänderungen reagieren und die Seite anhand des vorhandenen Platzes anpassen. Denkbar wäre es je nach vorhandener Breite z.B. Icons kleiner zu machen, Bereiche nicht mehr nebeneinander, sondern untereinander darzustellen, u.v.m.
Als Demo habe ich mal ein kleines (extrem gestyltes) Szenario erstellt. Zieht man das Result-Fenster kleiner, ändert sich die Icongröße, der Text wird abgeschnitten und nur bei Mouseover angezeigt.
Zwar ist das keine Wunderwaffe für alle Szenarien, gezielt eingesetzt kann man damit aber den vorhandenen Platz oft besser Ausnutzen – ohne massig JavaScript schreiben zu müssen.

Weekly Snap: MySQL Backup, Teltonika & HTML/JavaScript Tips

6 – 10 February offered a nice mix of developer and sys admin tips, hardware and consulting news as well as general software food for thought.
Along these lines, Julian discovered the software complexity behind iPhones’ ‘home’ button, while Sebastian shared his tip for backing up MySQL with LVM snapshots.
Jannis then offered four JavaScript/HTML features for developers to impress their friends with – cross origin resource sharing, manifest files, deferred scripts and error objects.
Birger briefly reported on an Icinga project at Pegasus, transforming RDD files into SQL-ready performance data.
Lastly, Martin reassured shoppers at our hardware store, that there are alternatives to the much loved, but discontinued Teltonika ModemUSB/G10 GSM.

Einfache Galerie in HTML aus der Shell

Es gibt unzählige Webgalerien oder auch Werkzeuge mit graphischem Frontend die Galerien erzeugen. Hier wir von mir ein einfacher Weg aufgezeigt, fiffige Galerie-Seiten zu von der Kommandozeile aus zu erstellen. Das Tool convert aus dem ImageMagick-Projekt ist sicherlich dem ein oder anderen ein Begriff. Auch mit diesem ist die Erstellung einfacher HTML-Seiten schon möglich, aber ein weiteres Tool aus dem selben Projekt bietet jedoch noch weiter reichende Möglichkeiten. Mit montage sind nicht nur Rahmen, Beschriftungen und Schatten möglich, sondern auch mit der Option +polaroid die Darstelung als polaroidähnliches Thumbnail.
montage *.JPG -thumbnail 192×192 -background grey20 +polaroid -background white -geometry +1+1 -tile 5x -title “Wo ich schon mal war…” index.html

Außerdem sorgt +polaroid auch für die hier zu sehende leichte zufällg erzeugte Drehehung. Mit tile wird die maximale Anahl von Bildern in eine Reihe angegeben, alle anderen Parameter sollten selbsterklärend sein. Einen Untertitel, hier den Datenamen ohne Endung, zu jedem Bild erhält man durch das Hinzufügen von der Option -set caption ‘%t’. Möchte man z.B. zusätzlich noch die Größe des Orginalbildes in eine weiter Zeile des Untertitels anzeigen lassen, kann man dies durch ‘%t\n%b’ erreichen.
In der heutigen Zeit der hochauflösenden Digitalkamaras, sind die Orginalbilder vorher noch mit beispielsweise convert -resize 800×800 *.JPG auf eine Angemessende Größe für die Anzeige auf Webseiten zu skalieren. Wobei hier das Seitenverhältnis erhalten bleibt und jeweils die längere Seite auf 800 Pixel reduziert wird.
Auch das Tool jhead sollte nicht unerwähnt bleiben, dies kann dazu verwendet werden die Bilder automatisch drehen. Hierfür ist jedoch erforderlich, dass die Orientierung in den Exif Dateien hinterlegt ist. Desweiteren ist mit jhead auch eine Manipulation dieser Daten möglich.

Lennart Betz
Lennart Betz
Senior Consultant

Der diplomierte Mathematiker arbeitet bei NETWAYS im Bereich Consulting und bereichert seine Kunden mit seinem Wissen zu Icinga, Nagios und anderen Open Source Administrationstools. Im Büro erleuchtet Lennart seine Kollegen mit fundierten geschichtlichen Vorträgen die seinesgleichen suchen.

SASS – so macht CSS wieder Spaß

Keiner weiß, wie viele Entwickler schon aus dem Fenster gesprungen sind, weil sie “mal eben schnell” alle Vorkommnisse eines Grautons und dessen Abstufungen leicht ins bläuliche Färben sollten. CSS wird zwar um viele Features erweitert, doch die Auzeichnungssprache an sich hat sich seit 1998 kaum geändert. Features wie Variablen sucht man vergebens, was einem bleibt ist viel doppelte Arbeit.
Doch bevor nun alle Entwicklungsabteilungen ins Erdgeschoß verlegt werden, möchte ich den Ausweg aus der misere Vorstellen: SASS.
*.sass Dateien sind spezielle Stylesheets, die über einen Compiler einfach in CSS umwandelt werden. Man kann so Variablen, verschachtelte Definitionen, Funktionen und vieles mehr in sein Stylesheet einbauen – der Compiler erstellt daraus dann eine valide CSS-Datei.
Und das beste: Wer CSS kann, muss kaum Neues lernen. Eigentlich kann man damit sofort produktiv loslegen.
Nehmen wir mal ein einfaches Stylesheet:

div.header {
   background-color: #ababab; /*dunkelgrauer Rand*/
   border: 1px solid #dedede; /*grauer Rand*/
}

Mit SASS würde dies wie folgt aussehen:

$theme_color1: rgb(222,222,222) /*Variable mit Farbwert*/
div.header
   background-color: darken($theme_color1, 20%) /*Rand, dank Funktion 20% dunkler als $theme_color*/
   border: $theme_color1 /*grauer Rand*/

Der Vorteil ist sofort ersichtlich: Muss man bei einem neuen Grauton das CSS  an zwei Stellen ändern und sogar den neuen Farbwert des Randes per Hand ausrechen, reicht bei der .sass Datei lediglich eine Änderung in der Variable $theme_color – den Rest erledigt SASS.
Das CSS erstellt man einfach via

sass --watch %sass-quelle%:%ziel-datei% 

Durch den –watch Parameter erkennt SASS, wenn sich Änderungen an der *.sass Datei ergeben haben und aktualisiert das CSS. So kann man direkt am SASS Entwurf arbeiten und sieht das Ergebnis sofort.
Natürlich ist das nur ein kleiner Einblick in die Möglichkeiten. Am besten einfach mal auf die Homepage gehen, ausprobieren und begeistert sein.

Next generation floating in HTML

Wer floats in html mag, wird diese lieben.

Nach dem sich CSS2 mehr und mehr etabliert kann man gefloatete Seitenlayouts auf ganz neue Art und Weise durchführen.
Erstmal der Quelltext:

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.floatbox {
  overflow: hidden;
}
.col {
  float: left;
  width: 200px;
}
<div class="floatbox clearfix">
	<div class="col"><p>LINKS</p></div>
	<div class="col">
		<p>Lorem ipsum dolor sit amet, consectetue.</p>
		<p> Donec quam felis, ultricies nec, pellentesque.</p>
		<p> In enim justo, rhoncus ut, imperdiet a!</p>
	</div>
</div>

Das wichtigste befindet sich in den Klassen ‘clearfix’ und ‘floatbox’. Mit ‘clearfix’ bedienen wir uns CSS2 und fügen nach
einem float den clear gleich mit ein. Ein extra html Element, um den float abzuschließen,
wird hierfür nicht verwendet (die Pseudo-Klasse :after erledigt das für uns).
Als zweites schaffen wir uns einen neuen Anzeigekontext mit ‘overflow: hidden|auto’. Dieser Kontext bewirkt das ein ‘clear’ sich z.B. nicht Global auf die gesamte Seite auswirkt, sondern nur auf den gewollten Bereich. Auch richtet dieser Bereich die Inhalte neu aus. So muss ein float mit unterschiedlicher Länge, welcher auf der Folgeseite um fließt, nicht mit seltsamen margins auf Kurs gehalten werden (z.B. margin-left: 205px). Die weitere Positionierung und Abstandseinstellung verläuft so wie man es erwartet!
Mehr Informationen findet man hier:
Floats 1
Floats 2
Floats 3

Marius Hein
Marius Hein
Head of Development

Marius Hein ist schon seit 2003 bei NETWAYS. Er hat hier seine Ausbildung zum Fachinformatiker absolviert, dann als Application Developer gearbeitet und ist nun Leiter der Softwareentwicklung. Ausserdem ist er Mitglied im Icinga Team und verantwortet dort das Icinga Web.