Jahr: 2008

Kategorien
CSS Templates Stylesheets Webentwicklung

Coole CSS Vorlage Whiteberry 02

Dieses Template (WhiteBerry 02) verwendet eine Breite von 950px der eigentliche Contentbereich ist 700px breit mit einem padding von 10px versehen.

#gesamt {
width:950px;
margin:10px auto;
text-align:left;
}
#content {
float:right;
clear:right;
border:1px solid #CCCCCC;
border-right:1px solid #757575;
border-bottom:1px solid #757575;
width: 700px;
padding:0;
margin:0;
background-color: #A0C0E0;
color:#444444;
text-align:left;
}

Das Menue ist eine unsortierte Liste. Die Formatierung dieser Liste erfolgt durch:

ul#mainnav {
list-style:none;
margin:0;
padding:0;
}
ul#mainnav li {
text-decoration:none;
display:block;
width:100%;
padding:3px 0%;
text-align:left;
}
ul#mainnav li a:link, ul#mainnav li a:visited {
text-decoration:none;
display:block;
width:100%;
padding:3px;
text-align:left;
color:#202040;
background-color: transparent;
}
ul#mainnav li a:hover {
background-color:#E0A0A0;
color:#000066;
padding:3px 0%;
text-align:right;
}

Im Contentberecih schließt sich ein Footerbereich mit ein. Dieser ist 50px hoch und in der Schriftgröße 11px gestaltet. Durch die Klasse “Text” wird ein Einzug von 10px erreicht, im Contentbereich wie auch im Footerbereich.

#footer {
height:50px;
padding:0;
margin:0;
text-align:left;
background-color:#E08080;
font-size:11px;
color:#757575;
width:100%;
border-top:1px solid #F0F0F0;
}
#content .text, #footer .text {
padding:10px;
}

Dieses Template ist CSS validiert.

74 kB

Kategorien
ITIL

Effektive Planung von Changes in ITIL

Time for Changemanagement
Erstellen eines Implementierungsplans für Changes

Der Changemanager entwickelt einen Implementierungsplan für Changes unter Verwendung der Risikoanalyse. Das Ziel ist es, einen Plan zu erstellen, der das Risiko und die Auswirkung für den Kunden minimiert. Hierzu ist es notwendig den zeitlichen Ablauf festzulegen und Tasks zur Planung und Vorbereitung technischer Aspekte zu verteilen.

Wird das Releasemanagement

  • Große und kritische Hardware Rollouts, insbesondere bei Abhängigkeiten zu einer Softwareänderung in den Geschäftssystemen.
  • größere Software-Rollouts, besonders erstmalige Einführung neuer Anwendungen zusammen mit einer begleitenden Softwareverteilung und ggf. benötigten Supportverfahren
  • Bündelung verwandter Änderungen zu Einheiten von praktikabler Größe

Zuweisen der Tasks

Zu jedem Change gehören Arbeitsaufträge. Der Changemanager weist diese Tasks den dafür zuständigen Arbeitsgruppen zu. Der Changemanager weist den zuständigen Arbeitsgruppen im Tool die entsprechenden Tasks zu.

Abarbeiten der Tasks

Abarbeiten der vom Changemanager zugewiesenen Tasks. Der Spezialist befolgt die Anweisungen im Task, erledigt die dort spezifizierten Aufgaben und schließt anschließend das Ticket.

Test durchführen

Vor der Implementierung des Changes ist ein Test der geplanten Änderungen durchzuführen um sicherzustellen, das der Change mit minimalen Auswirkungen auf die Services umgesetzt wird. Der Spezialist testet den geplanten Change und dokumentiert die Testergebnisse im dazugehörigen Task.

Quelle: IT Service Management Forum

Kategorien
ITIL

Wie wird ein Change registriert?

Time for Changemanagement

Changeanfrage

Bewertung und Filterung

Prüfung, ob die Anfrage in Konflikt mit internen Standards oder Richtlinien steht und Prüfung, ob das Change Management für die Anfrage notwendig ist. Dies ist dann der Fall, falls deren Implementierung folgendes verursacht:

  • Unterbrechung eines Service während der Servicezeiten
  • Die Funktionalität des Service verändert sich
  • Update der CMDB nötig
  • Prüfung, ob bereits ein Changeticket zu der Anfrage besteht
  • eine Prüfung, ob es sich um einen Notfallchange handelt.
  • Prüfung, ob es sich um einen Standardchange handelt.

Notfallchange

  • Öffnen eines Notfallchange.
  • Der Changemanager erstellt ein Changeticket.

Standardchange

Der Changemanager erstellt ein neues Changeticket.

Neuen Change erstellen einschliesslich Kategorisierung/Priorisierung

  • Erstellen eines neuen Changetickets und durchführen von Kategorisierung und Priorisierung
  • Festlegen, worum es in der ChangeAnfrage geht
  • Festlegung von Auswirkung und Dringlichkeit
  • Kategorisierung der Anfrage mithilfe der Klassifizierungsmatrix

Analyse von Auswirkung und Risiko

Durchführen einer Analyse von Auswirkung und Risiko des geplanten Changes für einen Change der Kategorie “Normalchange”.

Es muss festgestellt werden, welche

  • Auswirkungen die Änderung hat auf die Geschäftsvorgänge des Kunden
  • die Auswirkungen die Änderung hat auf Services des Kunden oder andere Services
  • Auswirkungen die Änderung hat auf Nicht IT Infrastruktur.
  • die Auswirkungen eine Unterlassung der Änderungen hätte
  • Ressourcen (Zeit, Personal, Kapital, Infrastrukturelemente) für die Umsetzung erforderlich sind

Quelle: IT Service Management Forum

Kategorien
ITIL

Prozessbeschreibung Changemanagement

Time for Changemanagement

Beschreibung

Wovon ist hier eigentlich die Rede, Prozessbeschreibung? Das Changemanagement ist verantwortlich für die Steuerung von Änderungsprozessen im Zusammenhang mit:

  • Hardware
  • Kommunikationsanlagen und der entsprechenden Software
  • Systemsoftware
  • Produktive Anwendungsprogramme
  • allen Dokumentationen und Verfahren, die mit dem Betrieb, dem Support und der Wartung von Systemen in der Produktionsumgebung betroffen sind
PROZESSZIELE

Was ist das Ziel? Das Ziel des Prozesses Changemanagement ist, Änderungen auf effektivste Art und Weise zu implementieren und gleichzeitig negative Auswirkungen auf Anwender während der Implementierungsphase des Changes zu minimieren.

PROZESS-INPUT
  • RfC
  • CMDB
  • FSC
PROZESS-OUTPUT

Implementierte Changes, PIR, FSC, CAB-Protokolle und deren Aktivitäten, Berichte des Changemanagements

KRITISCHE ERFOLGSFAKTOREN
  • adäquate Toolunterstützung zur Bearbeitung von Changes
  • Einsetzung von Standardchanges zur Verringerung der Arbeitsbelastung des Changemanagementprozesses
NUTZEN
  • Bessere Ausrichtung der Services an den geschäftlichen Erfordernissen
  • Bekanntheit und Kommunikation von Änderungen gegenüber Anwendern und Servicesupportmitarbeitern wird gesteigert
  • Bessere Risikoeinschätzung
  • Weniger negative Auswirkungen von Änderungen auf die Qualität der Services
  • Bessere Einschätzung der Kosten der beabsichtigten Änderungen
  • Gesteigerte Produktivität der Anwender durch weniger Betriebsunterbrechungen und qualitativ höherwertiger Services
  • Eine größere Änderungsanzahl kann bewältigt werden
PROZESSKENNZAHLEN
  1. Anzahl der Changes pro Monat.
  2. Die Anzahl der Changes der Kategorie “Standardchange” pro Monat
  3. Anzahl der RfCs pro Monat
  4. Anteil der nicht erfolgreich umgesetzten Änderungen pro Monat

Warum Change Management so wichtig ist

Veränderung war immer wichtig. Während „Veränderung“ vor zehn, fünfzehn Jahren noch zeitlich abgesteckte Innovationssprünge bedeutete, ist die fortlaufende strukturelle Anpassung heute die Grundvoraussetzung dafür, dass Unternehmen und Organisationen aller Größen handlungs- und wettbewerbsfähig bleiben. Nur Organisationen, die in der Lage sind, den sich laufend verändernden Bedingungen unserer modernen Arbeitswelt flexibel anzupassen, können in ihr überleben.

Der Grund dafür lässt sich zusammenfassen: WENIG RESSOURCEN. Soviel zum Thema Prozessbeschreibung.

Quelle: IT Service Management Forum

Kategorien
Stylesheets Webentwicklung

How to use the target attribute

Prozess Pyramide farbige Darstellung

target

Die Eigenschaft target (target attribute) ersetzt das nicht mehr valide HTML-Attribut target="".

Mit den Werten none, window und tab kann festgelegt werden, ob der Browser einen Link im gleichen Fenster, in einem neuen Fenster oder als neuen Tab öffnen soll.

Der :target-Selektor ist eine dynamische Pseudoklasse und selektiert Elemente, die Ziel eines Verweises sind.

Beispiel:

a:target { 
  color: red; 
}

In diesem Beispiel wird jeweils das aktuell angesprungene Verweisziel in roter Schrift dargestellt.

Kategorien
Stylesheets Webentwicklung

How to create an multi column layout

CSS Programming Image

column layout

Um die Erstellung eines mehrspaltigen Seitenlayouts (column layout) ohne viel Code zu ermöglichen, sollen drei neue CSS-Eigenschaften eingeführt werden.

Zum einen kann man mit column-count festlegen, wie viele Spalten erzeugt werden sollen, mit der Eigenschaft column-gap gibt man den Abstand zwischen den einzelnen Spalten an und mit column-width legt man die Breite der Spalte fest. Dabei sollen nur prozentuale Angaben möglich sein.

Beispiel:

body {
    display: grid;
		gap: 10px;
}

@media (min-width: 500px) { 

body {
 grid-template-columns: 1fr 3fr 1fr;	
 grid-template-rows: auto 1fr 100px;
}

header,footer {
  grid-column: 1 / -1;
}

Zusammenfassend kann gesagt werden: Das Holy-Grail-Layout ist ein Webseiten-Layout, das mehrere, trotz unterschiedlichen Inhalts gleich hohe Spalten hat.

Weiterführende Infomationen findet ihr auf: https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/mehrspaltige_Layouts

Kategorien
Stylesheets Webentwicklung

CSS Boxmodell: Innen, Außen & Dimensionen

Das Boxmodell

Das Boxmodell: Mit CSS können Sie Elementen (feste) Breiten, Höhen und Abstände geben und diese nebeneinander positionieren.

Das CSS-Boxmodell ist ein grundlegendes Konzept in der Webentwicklung, das die Darstellung und das Layout von HTML-Elementen beschreibt. Es behandelt jedes HTML-Element als eine rechteckige Box, die aus mehreren Schichten besteht:

  1. Inhalt (Content): Dies ist der tatsächliche Text, die Bilder oder andere Elemente, die innerhalb des HTML-Elements platziert sind. Die Größe dieses Bereichs wird durch die Eigenschaften “width” und “height” gesteuert.
  2. Padding: Das Padding ist der Raum zwischen dem Inhalt und dem inneren Rand der Box. Es dient dazu, den Inhalt von den Rändern zu trennen. Sie können das Padding mit den Eigenschaften “padding-top”, “padding-right”, “padding-bottom” und “padding-left” anpassen.
  3. Border: Der Border ist eine Linie oder ein Rahmen, die die äußere Kante der Box umgibt. Sie können die Dicke, den Stil und die Farbe des Rahmens mit den Eigenschaften “border-width”, “border-style” und “border-color” steuern.
  4. Margin: Der Margin ist der Raum zwischen der äußeren Kante der Box und anderen Elementen auf der Webseite. Er sorgt für Abstand zwischen den Boxen. Die Größe des Margins wird mit den Eigenschaften “margin-top”, “margin-right”, “margin-bottom” und “margin-left” festgelegt.

Die Gesamtbreite und Höhe eines HTML-Elements werden durch die Summe von Inhalt, Padding, Border und Margin bestimmt. Das Boxmodell ermöglicht es Entwicklern, das Layout von Webseiten genau zu kontrollieren, indem sie diese Eigenschaften gezielt anpassen.

Das Boxmodell ist ein grundlegendes Konzept in der Webentwicklung und spielt eine entscheidende Rolle bei der Gestaltung von Webseiten und der Positionierung von Inhalten.

Die rechteckigen Blöcke, die im Elementbaum erzeugt und auf dem Bildschirm dargestellt werden, folgen einem Schema, dem „Boxmodell“. Es ist somit Grundlage jeden Layouts.

Jedes Block-Element wie Textabsätze (p), -Abschnitte (div, article, main, aside, …) und Überschriften (h1, h2, …) bildet eine rechteckige Box, die Sie frei formatieren können.

Beispiel:

overflow-x, overflow-y

Mit overflow-x und overflow-y kann der “Überlauf” eines Elementes(overflow) für jede Richtung einzeln eingestellt werden (also ob z.B. ein Scrollbalken angezeigt werden soll).

box-sizing

Mittels box-sizing kann eingestellt werden ob sich die Breite eines Elementes auf deren Inhalt oder auf Inhalt+Rahmen+padding bezieht. (Webkit: -webkit-box-sizing)

calc()

Die Eigenschaft calc(), die z.B. innerhalb einer CSS-Eingeschaft wie width oder height stehen kann, ist es möglich Breiten- und Längenangaben direkt auszurechnen.

Kategorien
Stylesheets Webentwicklung

How to set properties with selectors

Prozess Pyramide farbige Darstellung

CSS 3 Selektoren (selectors)

Damit Formateigenschaften auf ein Element angewendet werden können, muss definiert werden, welche Elemente angesprochen werden. Dies geschieht über Selektoren (selectors).

Ein CSS-Selektor nennt die Bedingungen, die auf ein Element zutreffen müssen, damit der nachfolgende Regelsatz an CSS-Deklarationen auf das Element angewendet wird. Der Selektor ist somit der Teil vor den geschweiften Klammern.

Mit neuen Selektoren (Damit Formateigenschaften auf ein Element angewendet werden können, muss definiert werden, welche Elemente angesprochen werden. Dies geschieht über Selektoren (selectors). kann man Elemente noch genauer auswählen.

Beispiele: 

first-of-type
first-letter

Fazit, CSS 3 Selektoren (selectors) erweitern also die Möglichkeiten zur gezielten Auswahl und Gestaltung von HTML-Elementen auf Webseiten erheblich. Mit Pseudo-Klassen, Pseudo-Elementen, Attribut-Selektoren und Kombinator-Selektoren bieten sie mehr Flexibilität und Präzision bei der Anpassung des Stils und der Interaktivität von Webseiten. Dies ermöglicht eine verbesserte Benutzererfahrung und eine ansprechendere Webentwicklung.

Kategorien
Stylesheets Webentwicklung

How to use CSS property resize

html code beispiel

resizeoutline

Die Eigenschaft resize bestimmt, ob ein Element durch die Maus vergrößert, bzw. verkleinert werden kann.

Die CSS-Eigenschaft resize ermöglicht weiterhin die Steuerung, ob und wie ein Element in der Größe verändert werden kann. Sie akzeptiert verschiedene Werte:

  • none: Das Element kann nicht verändert werden.
  • both: Das Element kann sowohl in der Breite als auch in der Höhe verändert werden.
  • horizontal: Das Element kann nur in der Breite verändert werden.
  • vertical: Das Element kann nur in der Höhe verändert werden.
  • initial: Setzt die resize-Eigenschaft auf den Standardwert, normalerweise “both”.
  • inherit: Erbt den Wert von der übergeordneten Elementkette.

Mit outline kann ein Rahmen zum Hervorheben um Elemente herum gelegt werden, der aber nicht die Box breiter macht.

Beachten Sie, dass nicht alle Elemente diese Eigenschaft standardmäßig unterstützen, und die tatsächliche Umsetzung kann je nach Browser variieren. Es ist wichtig sicherzustellen, dass das Element, das Sie ändern möchten, die resize-Eigenschaft unterstützt, um eine konsistente Benutzererfahrung zu gewährleisten.

Eine Veränderung der Größe ist nur möglich und sinnvoll, wenn die overflow-Eigenschaft des Elements einen Wert hat, der verschieden von visible ist.
Chrome und Safari lassen keine Verkleinerung des Elementes zu.

Kategorien
Stylesheets Webentwicklung

Schrift und Satz – der Textfluss

CSS Programming Image

Schrift bedeutet, wie die Buchstaben und Wörter geschrieben sind. Zum Beispiel, welche Schriftart und -größe genutzt werden. Das hilft dabei, dass der Text leicht zu lesen ist.

Satz ist, wie der Text auf einer Seite oder auf dem Bildschirm angeordnet ist. Das betrifft, wie der Text in Abschnitte aufgeteilt ist, ob er links oder in der Mitte steht, wie viel Platz zwischen den Zeilen ist und wie die Absätze beginnen. Ein guter Satz sorgt dafür, dass der Text gut aussieht und einfach zu verstehen ist.

Der Textfluss ist die Art und Weise, wie der Text im Dokument angeordnet ist. Er bestimmt, wie der Text gelesen wird, indem er die Abschnitte und Seiten ordnet. Ein guter Textfluss macht den Text leichter verständlich und angenehm zu lesen. Alle diese Dinge arbeiten zusammen, um sicherzustellen, dass der Text gut aussieht und leicht zu lesen ist. Designer und Autoren denken darüber nach, um sicherzustellen, dass ihre Texte ansprechend und verständlich sind.

text-wrap

Bessere Steuerung von Zeilenumbrüchen: Mit text-wrap können Zeilen an Interpunktionszeichen umgebrochen werden.

word-wrap

Mit word-wrap legt man fest wie Wörter umgebrochen werden dürfen. hyphenate bricht Wörter um, indem an die vorangehende Silbe ein “-” angehängt wird.

word-break

Die word-break-Eigenschaft legt fest, welche Zeilenumbruch-Beschränkungen für ein Element gelten. Diese Eigenschaft ist nur für asiatische Schriftarten interessant.

Textfluss

text-overflow

Was mit überfließendem Text geschehen soll, kann mit text-overflow gesteuert werden. Hier kann man z.B. automatisch bei zu langem Text Pünktchen “…” anhängen lassen. (Opera:-o-text-overflow )

Blöcke

text-align-last

Die Eigenschaft text-align-last gibt (falls text-align:justify; gesetzt ist) an, wie die letzte Zeile des Blocksatzes gehandhabt werden soll.

text-justify

Genauso verhält sich auch text-justify zu text-align. Diese Eigenschaft gibt an wie stark der Blocksatz erzeugt werden soll. Zum Beispiel nur durch die Zwischenräume der Wörter oder auch durch die Zwischenräume der Buchstaben.

Sonstige

Mit white-space-collapse kann, wie der Name schon sagt, die Handhabung von Leerzeichen gesteuert werden.

Die Eingeschaften text-align, letter-spacing und word-spacing erhalten weitere Werte.

text-kashida-space ist eine Eigenschaft die noch undefiniert ist. Unter Umständen kommt diese auch gar nicht im CSS3 zum Einsatz.

WebFonts

@font-face

Mit @font-face kann eine beliebige Schriftdatei auf einem Server angegeben werden, die dann heruntergeladen und vom Browser verwendet wird. Zu beachten ist hierfür aber besonders die Lizenzart der Font.

Dies war eigentlich schon seit sehr langer Zeit in der CSS2 Spezifikation, wurde aber mangels Browserunterstützung in CSS 2.1 wieder entfernt.

@font-face {
      font-family: "Fertigo";
      src: url(http://www.taptaptap.com/Fertigo.otf)
          format("opentype");

Neuste WebKit-Versionen (Safari 3) enthalten diese Funktion, Schriften dynamisch nachzuladen. Der Internet Explorer unterstützt seit Version 4 das nachladen von Schriftarten im eigenen .eot-Format.