n diesem Beispiel wird eine Galerie mit fünf Bildern erstellt. Die CSS-Regeln verwenden Flexbox, um die Bilder gleichmäßig in flexiblen Reihen anzuordnen. Durch die Verwendung von Media Queries werden diese Regeln für verschiedene Bildschirmgrößen angepasst:⬅️
Die Media Queries helfen dabei, sicherzustellen, dass die Galerie auf verschiedenen Geräten und Bildschirmgrößen gut aussieht und benutzerfreundlich bleibt
Die Reihenfolge, in der du CSS lernst, kann variieren, abhängig von deinem individuellen Lernstil und deinen Zielen. Hier ist jedoch eine allgemeine Reihenfolge, die dir helfen könnte:
Denke daran, dass der praktische Einsatz und die kontinuierliche Anwendung der gelernten Konzepte entscheidend sind. Es ist auch hilfreich, CSS in Kombination mit HTML und JavaScript zu üben, um ein umfassendes Verständnis der Frontend-Webentwicklung zu entwickeln.
Hier eine kleine Erinnerung warum eine Webseite in der heutigen Zeit so wichtig ist.
Eine eigene Webseite ist aus verschiedenen Gründen wichtig, unabhängig davon, ob es sich um ein Unternehmen, eine Organisation oder eine persönliche Webseite handelt.
5 wichtige Punkte bei der Erstellung einer eigenen Webseite:
Die Erstellung einer eigenen Webseite erfordert Zeit, Mühe und Planung. Sie können entweder selbst programmieren oder Website-Baukästen und Content-Management-Systeme (CMS) wie WordPress nutzen, um den Prozess zu erleichtern. Denken Sie daran, dass Ihre Webseite ein wichtiges Aushängeschild für Ihr Unternehmen oder Ihre Online-Präsenz ist, daher sollten Sie die genannten Aspekte sorgfältig berücksichtigen.
HTML- Quotations:
<blockquote> wird verwendet, wenn man aus fremden Quellen zitiert.
<q> sind die typischen Anführungszeichen.
<abbr> definiert Abkürzungen. (z.B. HTML, CSS…)
<address> gibt Kontaktinformationen an, wie z. B. Telefonnummer oder E-Mail-Adresse.
<cite> steht für das Zitieren eines kreativen Werkes, wie z. B. einem Spruch oder einem Gedicht.
<bdo> ist eine Möglichkeit um die aktuelle Textrichtung zu überschreiben.
Mikrointeraktionen beeinflussen das Verhalten, die Verarbeitung und die Interpretation der Benutzer einer Webseite. Das Ziel besteht darin, nicht nur das Design, sondern auch die Struktur einer Webseite so zu gestalten, dass sie die Benutzer zur Interaktion ermutigt. Natürlich spielt dabei die Ladezeit und das Layout eine entscheidende Rolle, um die Interaktion so angenehm wie möglich zu gestalten. Mikrointeraktionen beziehen sich somit auf das individuelle Benutzerverhalten.
Um bei CSS eine Syntax zu schaffen, werden Eigenschaften mit Regelsätzen geordnet. Dabei wird zuerst der Selektor angegeben, der bestimmt welches HTML-Element angesprochen wird. Durch ein geschweiftes Klammerpaar wird anschließend der Bereich definiert, in welchem eine oder mehrere Deklarationen festgelegt werden (Deklarationsblock). Dabei weist man den Eigenschaften des Elementes passende Werte zu. Zwischen Eigenschaft und ihrem Wert steht ein Doppelpunkt. Jede Deklaration wird mit einem Semikolon abgeschlossen.
Mit dem CSS-Grid wird ein Gestaltungsraster erzeugt. Dieses definiert durch Zeilen und Spalten die Bereiche einer Webseite. Elemente können diesen Bereichen zugewiesen werden, wodurch das Layout der Webseite bestimmt wird.
Unser aktuellstes Kundenprojekt ist fertig! Schaut euch das Ergebnis selbst an: (https://sb-dvag.de/)
Außerdem ist der Vermögensberater Steffen Bauer auf der Suche nach neuen Mitarbeitern. Bei Interesse könnt Ihr ihn hier kontaktieren: (https://sb-dvag.de/jobs/).
Bilder auf Webseiten erhöhen die Suchmaschinenoptimierung, weshalb qualitativ hochwertige Bilder ein Muss sind. Doch wie findet man diese, ohne viel Geld zu zahlen? Dafür gibt es kostenlose und kostenpflichtige Bilddatenbanken. Aber Vorsicht: Das heißt nicht automatisch, dass alle Bilder für die öffentliche Nutzung verwendet werden dürfen. Bei den kostenpflichtigen Bilddatenbanken bekommt man meistens eine Lizenz, um die Bilder nach den angegebenen Nutzungsbedingungen zu verwenden. Bei den kostenlosen Bilderdatenbanken haben die Bilder meist unterschiedliche Lizenzmodelle. Diese müssen vorher genau überprüft werden, damit es nicht zu Urheberrechtsverletzungen kommt. Kostenpflichtige Datenbanken bieten meist eine größere Auswahl und eine bessere Qualität der Bilder an und garantieren auch, dass die gewählten Bilder nicht so häufig im Internet verwendet wurden, womit die Individualität und der Wiedererkennungswert einer Webseite besser gewährleistet ist.
AJAX steht für “Asynchronous JavaScript and XML”. Durch AJAX werden einzelne Teile einer Webseite asynchron geladen, um sie so dynamischer zu machen. Diese auf JavaScript basierende Technik verändert die Kommunikation mit dem Server, um Webanwendungen zu beschleunigen. Webseiten sind meist inaktiv und müssen auf die Eingaben der Nutzer dynamisch reagieren. Durch zeitversetzte Datenübertragungen werden Benutzeroberflächen schneller aufgebaut und geladen. So wird zum Beispiel beim Anlegen eines Benutzerkontos schon vorher die Verfügbarkeit eines Nutzernamens geprüft, ohne die ganze Seite neu laden zu müssen. Natürlich gibt es statistische Inhalte, welche bestehen bleiben, während ergänzende Informationen je nach Situation im Document Object Model hinzugefügt werden. Dadurch wird für neue Parameter nur ein kleiner Teil der Seite ergänzend neu geladen und es wird Zeit und Bandbreite gespart, um dem Nutzer ein flüssigeres Erlebnis zu liefern. Für diese dynamische Manipulation einer Webseite wird JavaScript verwendet.
Das IP steht bei IP-Adresse für „Internet-Protokoll“. Durch die IP-Adresse lassen sich innerhalb eines Netzwerkes verschiedene Geräte identifizieren. Diese Identifikation ist nötig, damit diese Geräte Verbindungen zueinander aufbauen können. Jedes Gerät, welches mit dem Internet verbunden ist, hat auch eine IP-Adresse. Diese ermöglicht es festzustellen, welche Geräte welche Informationen im Internet abrufen, versenden usw. Vergleichbar mit der IP-Adresse wäre eine Telefonnummer, bei der erkenntlich wird, wer gerade anruft. Telefonnummern werden also auch zur Identifikation genutzt. Dasselbe macht die IP-Adresse auch, nur eben im Internet. Ohne IP-Adresse können sie das Internet nicht nutzen, genauso wie sie ohne gültige Telefonnummer trotz Handy niemanden anrufen können.
Passend zur neuen Webseite haben wir uns dazu entschieden, ein neues Logo zu designen. Ist richtig gut geworden 😁👍
Bei einem Compiler handelt es sich um ein spezielles Programm, welches einen geschriebenen Quellcode einer Programmiersprache in maschinenlesbaren Binärcode (Binärcode = Code aus 0 und 1) übersetzt. Das daraus entstehende Resultat (ausführbarer Code) wird auch Objektcode oder Zielsprache genannt. Weitere Aufgaben eines Compilers können sein, überflüssige und fehlende Zeichen als Fehler zu erkennen, welche beim gescannten Quellcode an Programmsymbolen nach der Extraktion zurückbleiben (lexikalische Analyse). Außerdem wird die Grammatik des Quellcodes (syntaktische Analyse) und der Sinn des Quellcodes überprüft (semantische Analyse). Compiler können auch zur Schlüsselwortsuche in Quellcodes von Webseiten genutzt werden. Darüber hinaus braucht nicht jede Programmiersprache einen Compiler.
a:link – unbesuchter Link (Standard)
a:visited – ein bereits besuchter Link (Um diesen zu kennzeichnen, kann man z. B. die Farbe ändern)
a:active – ein Link gilt in dem Moment als aktiv, wenn er angeklickt wird
a:hover – wenn der Mauszeiger sich auf dem Link befindet, kann man z. B. das Aussehen des Mauszeigers oder des Links ändern
Die Webseite von evermeet.de ist online, schaut doch gerne mal vorbei.😄📸
Corporate Design ist die visuelle Darstellung eines Unternehmens. Dabei befasst die sich mit der zusammenhängenden Gestaltung des Logos, der Webseite, dem Auftreten des Unternehmens in Zeitungen, Visitenkarten, Werbeanzeigen und Ähnlichem. Idealerweise greifen auch die Geschäftsräume und (wenn möglich oder gewünscht) auch die Arbeitskleidung, das Farbschema, die Schriftart usw. des Logos auf. Das Corporate Design ist ausschlaggebend für den Wiedererkennungswert und das Markenauftreten des Unternehmens. Durch ein gut gewähltes Corporate Design hebt man sich von der Konkurrenz ab. Neben der Identifikation dient es auch der langfristigen Kundenbindung.
Der Transition-Befehl ist ein shorthand, welches aus der property, duration, timing und dem delay besteht.
1. Wert: transition-property, 2. Wert: transition-duration, 3. Wert: transition-timing-function, 4. Wert: transition- delay
Bei CSS versteht man unter Shorthand-Properties eine verkürzte Schreibweise des CSS-Codes. Erkennen kann man diese dadurch, dass alle Angaben unter einem Punkt zusammengefasst werden und nicht einzeln aufgeschrieben werden (Longhand-Properties).
Mit einer „Transition“ ist ein Übergang gemeint, wie in unserem Beispiel die Farb- und Formänderung des Buttons, sobald die Maus darüber verweilt (a:hover). Durch „delay“ wird die Verzögerung eingestellt, wie lange der Farbwechsel benötigt. Mit „a::before“ wird das Aussehen des Buttons bestimmt, bevor die „Transition“ beginnt
– columns: Spalten (allgemein)
– column-width: Angabe zur Spaltenbreite
– column-span: Elemente über alle Spalten
– column-rule-width: Stärke der Spaltentrennlinie
– column-rule-style: Darstellung der Spaltentrennlinie
– column-rule-color: Farbe der Spaltentrennlinie
– column-rule: Spaltentrennlinie
– column-gap: Spaltenabstand
– column-fill: Verteilung des Inhaltes auf die Spalten
– column-count: Anzahl der Spalten
CSS-Flexboxen werden für lineare Strukturen verwendet, da sie mit zwei Achsen arbeiten, auf die sie ihre Inhalte verteilen. Das dadurch kreierte Layout, macht den Entwurf einer flexiblen und responsiven Layoutstruktur, ohne die Verwendung von Float oder Positionierung, umso leichter. Gut erklärt wird das alles von „Kulturbanause“. Wer Interesse hat, kann sich dort genauer informieren.
Was ist der Unterschied zwischen Java und JavaScript?
Java ist eine objektorientierte und plattformunabhängige Programmiersprache. JavaScript ist Skriptsprache, die ursprünglich für Animationen und die allseits bekannten „Pop-Up-Meldungen“ verwendet wurde. Am Anfang oft verrufen und klein gesprochen ist JavaScript mit seinen unzähligen Erweiterungen nicht mehr aus der Webentwicklung wegzudenken und bildet die Basis für das Internet, wie wir es heute kennen.
Die neue Webseite von Metallbau Willms ist online. Schaut doch gerne mal vorbei.
Seit 1995 gibt es die Skriptsprache JavaScript. Durch die regelmäßige Erweiterung der letzten Jahre handelt es sich mittlerweile um eine äußerst komplexe Programmiersprache. JavaScript ermöglicht einen dynamischen Aufbau einer Webseite. Außerdem kann man mit JavaScript komplexe Kontrollabfragen programmieren und diese z. B. mit Datenbanken verknüpfen, um Eingaben zu prüfen
Um ein Bild auf einer Webseite einzufügen, wird das Tag <img> verwendet. Dieses Tag hat keinen Inhalt, sondern nur Attribute, wie z. B.:
<img src=“images/beispielbild.png“
height=“200px“ width=“400px“
alt=“Beispielbild“ title=“Beispielbild“ />
• src: gibt die Quelle des anzuzeigenden Bildes an.
• height: Höhe des Bildes (wird nur die Höhe angegebene wird die Breite automatisch mit skaliert)
• width: Breite des Bildes (wird nur die Breite angegebene wird die Höhe automatisch mit skaliert)
• width und height: Wird die Höhe und die Breite angegeben bekommt das Bild eine feste Größe und es wird keine automatische Skalierung vorgenommen. Das heißt die dadurch entstehenden Proportionen müssen zu dem Bild passen.
Wird weder die Höhe noch die Breite angegeben, wird das Bild in Originalgröße angezeigt.
Die Attribute height und width bestimmen die Anzeigegröße des Bildes, verändern jedoch nicht die Originalgröße des Bildes.
• alt: damit wird der Alternativtext für das Bild angegeben.
• title: zeigt vorgegeben Text an, wenn die Maus über dem Bild stehen bleibt
Lazy Laoding bei Webdesign bedeutet, dass nicht alle Bilder einer Webseite gleich beim Öffnen laden. Das Gegenteil davon wäre Eager Loading, wobei alle Bilder gleich nach dem Öffnen geladen werden. Dadurch kann je nach Internetverbindung die Ladegeschwindigkeit einer Seite stark verlangsamt werden. Um Abhilfe zu schaffen, wird Lazy Loading verwendet, wodurch nur dann Bilder einer Webseite geladen werden, wenn diese auch angezeigt werden sollen (z. B. bei scrollen).
• <!doctype html> beschreibt Typ und Version der Webseite
• <html> … </html> Anfang und Ende der HTML-Seite
• <meta charset=“utf-8“> setzt zusätzliche Angaben und Informationen wie z. B. den Zeichensatz (erleichtert die Verwaltung des Dokumentes)
• <title>… </title> Titel der Webseite
• <head> … </head> beinhaltet meta, titel und base welche die wichtigsten Informationen der Webseite liefern (z. B. style, link …)
• <body> … </body> umschließt die auf der Webseite angezeigten Inhalte
• <h1> … </h1> Große Überschrift
• <h2> …. </h2> Kleinere Überschrift
Viele Tags werden in den heutigen Browsern nicht mehr benötigt, da sie automatisch hinzugefügt werden. Trotzdem gehören sie zum guten Ton dazu und werden deshalb auch heute noch verwendet.
Was ist Abwärtskompatibilität?
Durch Erweiterungen von z. B. HTML, CSS usw. können Teile von Webseiten oder Webanwendungen von älteren Browsern nicht mehr richtig dargestellt werden. Um dies zu verhindern, sollte man darauf achten, dass alle genutzten Elemente einer Webseite eine relativ hohe Abwärtskompatibilität aufweisen. Damit kann die Seite auf allen oder zumindest auf einem Großteil von Geräten richtig dargestellt werden. Dafür sollten viele Präfixe angesprochen werden (z.B Gradient bei Farben). Neuste Technologien sollten nicht immer sofort genutzt werden, da nur ein kleiner Bruchteil der Browser diese zu Beginn darstellen kann.
Vorteile von WordPress:
• riesige Community (Sicherheitslücken werden schnell gefunden und bearbeitet, bei Problemen findet man schnell Hilfe etc.)
• einfach zu lernen und nutzen (Anfängerfreundlich)
• kostenlos
• viele und aktuelle Erweiterungsmöglichkeiten
• WordPress Webseiten sind individuell erweiterbar (z. B. durch Plugins)
Übersicht der Schriftbefehle bei CSS:
• font-size: bestimmt die Schriftgröße
• font-style: bestimmt die Schriftart (z. B. Arial, Times New Roman, Calibri usw.)
• font-weight: hiermit wird das Schriftgewicht angegeben (normal, bold, lighter …)
• font-variant: bestimmt die Schriftvariante (normal oder small-caps)
• font-family: legt den Schriftstil fest (z. B. normal, kursiv, unterstrichen usw.)
• color: legt die Textfarbe fest
Das Genie beherrscht das Chaos…????
Aus Alt mach Neu? Sinnvoll bei:
– Veraltetem Design
– Zu vielen Farben. Sie können die Website schnell überladen wirken lassen. 2-3 Farben sind vollkommen ausreichend.
– Zu großen Bildern. Diese verlangsamen das Laden der Seite und machen sie unübersichtlich.
– Zu viel Text. Es lässt die Seite überladen aussehen.
– Schlecht gewählte Fonts, welche die Lesbarkeit verschlechtern.
– Zu vielen Unterseiten. Sie erschweren das Navigieren.
– Unterschiedlichen Textgrößen. Diese zerstören die Einheit und wirken unordentlich.
Die Wahl einer passenden Schriftart ist ausschlaggebend für die eigene Webseite:
Die Schriftart sollte zum eigenen Design passen und nicht zu altmodisch wirken.
Außerdem ist die Lesbarkeit ausschlaggebend. Sie muss auch bei kleiner Schriftgröße und auf allen mobilen Endgeräten gewährleistet sein.
????????
Da heute Welttourismustag ist, möchten wir auf unseren Kunden @orientaltours__ aufmerksam machen. Reist Ihr eigentlich gerne? Wenn ja, wohin?????????
Wir sind übrigens auch auf Instagram.
Wir helfen unseren Kunden bei dem Umgang mit IT-Geschäftsprozessen, indem wir diese optimieren, um damit ein effizienteres und zielführenderes Arbeiten zu ermöglichen.
Zur Vereinfachung und Verbesserung von Prozessabläufen, bieten wir auch die Entwicklung einer eigenen Softwarelösung an.
Schaut euch mal die Webseite unseres Kunden @spektralhaus an. Ist die nicht super geworden?????????
Unser Angebot zur Pflege von Internetpräsenzen richtet sich vor allem an Unternehmen, welche regelmäßige Änderungen an ihren Webseiten durchführen müssen. Um unseren Kunden eine bestmögliche Webseite zu schaffen, bieten wir unsere professionelle Webseitenbetreuung an. Dabei führen wir regelmäßige oder gewünschte Überprüfungen und Wartungen unserer betreuten Webseiten durch.
Wir entwickeln für unsere Kunden eine individuelle Onlinepräsenz. Dafür verwenden wir HTML, CSS, Bootstrap und Content Management Systeme (CMS). Besonders hervorzuheben sind die Kenntnisse, welche wir mit WordPress haben.
Unsere Kunden sind in den verschiedensten Geschäftsfeldern tätig, welche von der Automobilindustrie bis hin zu Zahntechnikern reichen. Besonders wichtig dabei ist es uns, auf Kundenwünsche einzugehen, um die Webseite individuell und userfreundlich zu gestallten. Natürlich achten wir auch auf einen angemessenen Datenschutz und die benötigte Rechtssicherheit.
Sollten Sie bereits bestehende Webseiten haben, können wir diese auf Wunsch hin auch für Sie pflegen.
Alle unsere Webseiten werden für alle mobile Endgeräte nutzbar erstellt. Das hat den Vorteil, dass Content-bezogenen Webseiten erstellt werden, welche später immer noch erweitert werden können. Diese Strukturen ermöglichen eine leichtere Anpassung von neuen Entwicklungen.
Auch geht unser Angebot über die üblichen Webseiten und Onlineshops hinaus. Sollten Sie nach passenden Webapplikationen für Ihr Unternehmen suchen, können Sie diese ebenfalls bei uns erwerben.
Der nächste Mitarbeiter der sich vorstellt, ist Chris.
–
Hello there! Ich heiße Chris Loch und bin zurzeit 29 Jahre alt.
Seit kindestagen habe ich eine Affinität zu Computern und Allem, was damit verbunden ist. Dadurch hat es mich nach der Schule in Richtung Studium der praktischen Informatik gezogen und letztendlich zu diesem Beruf geführt.
Angefangen mit einer Nebenbeschäftigung, über eine Teilzeitbeschäftigung und bis hin zu einer jetzigen Vollzeitbeschäftigung, arbeite ich seit Januar 2019 für diesen Betrieb.
Besonders an meiner Arbeit gefällt mir, denke ich das Lösen von bestimmten Problemen, auf die man in diesem Beruf tagtäglich stößt. Des Weiteren sind besonders das Arbeitsklima und der Zusammenhalt dieser Firma unübertreffbar. 🙂
Mir ist die Abwechselung besonders wichtig, die diese Arbeit mit sich bringt und die Zusammenarbeit und Kommunikation in unserem Team. Außerdem ist mir wichtig, eigene Ideen und Vorschläge einbringen zu können.
Das Ziel bei der Arbeit ist für mich, effiziente und schnelle Lösungen für Aufgaben zu finden und dadurch immer weiter zu wachsen und mich fortzubilden. Die erfolgreiche Lösung eines neuen Problems, bedeutet gleichzeitig auch immer, sich mehr Wissen angeeignet zu haben.
Über mich selbst würde ich sagen, dass ich wissbegierig und fleißig bin. Außerdem freue ich mich immer auf neue Herausforderungen. Manchmal neige ich dazu ein wenig zu perfektionistisch zu sein, weshalb ich mich dann an kleineren Dingen länger aufhalte als ich müsste.
Neben der Kundenzufriedenheit ist uns auch ein gutes Arbeitsklima besonders wichtig. Deshalb ist hier ein kleiner Post, um unsere Mitarbeiter wertzuschätzen.
Seit dem Jahr 2012 hat mission-webstyle es sich zum Ziel gemacht, die Webseiten unserer Kunden auf Wunsch aufzuwerten oder individuell zu erstellen und gestalten. Die Zufriedenheit unserer Kunden ist uns dabei besonders wichtig. Außerdem bieten wir auch Schulungen, Print und mehr an. Bei Interesse können Sie unser ganzes Angebot auf mission-webstyle.de finden.