Seite wählen

NETWAYS Blog

Außerhalb von NETWAYS: Projektwoche in der Berufsschule

von | Jul 11, 2018 | , , , , ,

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/ 

Styling Webforms

von | Nov 16, 2017 |

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.

Feu Mourek
Feu Mourek
Developer Advocate
Feu verbrachte seine Kindheit im schönen Steigerwald, bevor es sich aufmachte die Welt zu Erkunden. Seit September 2016 unterstützt es Icinga zunächst als Developer und seit 2020 als Developer Advocate, und NETWAYS als Git und GitLab Trainer. Seine Freizeit verbringt es hauptsächlich damit Video-, und Pen and Paper Rollenspiele zu spielen, sich Häuser zu designen (die es sich nie leisten können wird) oder ganz lässig mit seinem Cabrio durch die Gegend zu düsen.
Lies mehr von Feu und triff unser Team

Weekly Snap: Git Flow & GeoIP, Rsync & SCP

von | Apr 8, 2013 |

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

von | Jan 31, 2013 |

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

von | Feb 13, 2012 |

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.

Trainings

Web Services

Events