Nützliche Firefox Add-ons für Webentwickler

04.03.2010 | Kategorien: Webdesign | 3 Kommentare | Tags: , ,

Ich beschäftige mich ja schon seit einigen Jahren mit dem Thema Webentwicklung und möchte euch hier kurz ein paar Firefox Add-ons nahe legen, die jeder Webentwickler haben sollte:

Add-onBeschreibung
ColorZillaMit ColorZilla kann man schnell und einfach Farbwerte bestimmen
FirebugDas Webentwickler-Tool schlechthin. Hiermit kann man Webseiten wunderbar Debuggen und sogar Änderungen live an einer Webseite testen
Font FinderDu findest die Schriftart auf einer Webseite total genial, weißt aber nicht wie diese heißt und möchtest dich nicht durch das Stylesheet quälen? Einfach Text markieren und Font Finder zeigt dir auf Knopfdruck die eingesetzte Schriftart an
HTML ValidatorDieses nützliche Add-on validiert deine Seite und hilft dir, Fehler im (X)HTML-Markup zu beheben
Web DeveloperDie eierlegende Wollmilchsau zum Testen deiner Seite. Wie sieht deine Seite bei 800x600 aus? Ist deine Seite noch ohne Cookies nutzbar? Das und viel mehr kannst du mit Web Developer testen

Solltet ihr noch andere must-have Add-ons für Webentwickler kennen, schreibt mir einen Kommentar. Ich werde das Add-on dann testen und ggf. mit in die Tabelle aufnehmen :)

Reset Stylesheet

24.02.2010 | Kategorien: Webdesign | 6 Kommentare | Tags: , ,

Wer Webseiten mit Cascading Stylesheets entwirft, kennt das leidige Thema: die Webseite wird in einem Browser korrekt dargestellt, in einem anderen Browser hingegen ist alles verzerrt. Das liegt daran, da jeder Browser sein eigenes “Standard-Stylesheet” eingebaut hat und so bereits kleine Unterschiede große Auswirkungen nach sich ziehen können.

Viele Probleme kann man jedoch durch einen simplen Trick umgehen: man überschreibt einfach sämtliche Browser-Voreinstellungen. Hierfür eignet sich wunderbar das Reset Stylesheet von Eric Meyer. Einfach den Code kopieren, ab damit in eine CSS-Datei und diese auf der entsprechenden Seite einbinden.

Ein ziemlich einfacher Trick mit großer Wirkung. So bleiben einem viele unerklärliche Design-Phänomene (vor allem in Bezug auf den Internet Explorer) beim Entwickeln erspart :)

Erweitertes XHTML-Grundgerüst

24.02.2010 | Kategorien: Webdesign | 2 Kommentare | Tags: , ,

Ich beschäftige mich ja schon seit mehreren Jahren mit dem Thema Webdesign und schreibe mir immer wieder das folgende Grundgerüst zusammen.

Hierbei wird das auf SelfHTML zu findende Grundgerüst um die Angabe der Zeichenkodierung (UTF-8) und der Einbindung eines Stylesheets ergänzt. Außerdem habe ich den Document-Type auf XHTML 1.0 Strict angepasst (SelfHTML gibt XHTML 1.0 Transitional vor).

Hier nun also mein erweitertes XHTML-Grundgerüst:

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
   <head>
      <title>Titel der Seite</title>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
      <link rel="stylesheet" type="text/css" href="stylesheet.css" />
   </head>
   <body>
   </body>
</html>

Dateiupload mit PHP

16.01.2010 | Kategorien: Webdesign | 0 Kommentare | Tags: , ,

Ich habe vor kurzem eine Lösung gesucht, um Dateien per HTML-Formular auf einen Webserver hochladen zu können und habe dabei diesen Artikel auf php-einfach.de gefunden. Der gezeigte Upload-Mechanismus per HTML-Formular in Verbindung mit PHP ist wirklich einfach zu implementieren.

Zunächst muss man folgendes Formular einbinden:

<form action="upload.php" method="post" enctype="multipart/form-data">
  <p>
    <input type="file" name="file" />
    <input type="submit" value="Hochladen" />
  </p>
</form>

Danach implementiert man die Datei upload.php, an welche die hochgeladene Datei übergegeben wird:

<?php move_uploaded_file($_FILES['file']['tmp_name'], $_FILES['datei']['name']); ?>

Der erste Parameter gibt hierbei den temporären Pfad der hochgeladenen Datei auf dem Webserver an, mit dem zweiten Parameter kann man den Zielordner und den gewünschten Dateinamen angeben. In diesem Fall landet die hochgeladene Datei in dem derzeitigen Ordner mit dem originalen Dateinamen.

Möchte man Dateien z.B. in den Ordner uploads direkt unter dem Hauptverzeichnis der Webseite (also /uploads) hochladen, müsste man das Script wie folgt anpassen:

<?php move_uploaded_file($_FILES['file']['tmp_name'], "/uploads/".$_FILES['datei']['name']); ?>

Wichtig: der gewünschte Zielordner muss das Schreiben auch erlauben. Auf Linux-Webservern kann man dem Verzeichnis mit chmod 777 sämtliche Rechte zuteilen. Über die hochzuladenden Dateien können diverse Informationen ausgelesen werden. So ermittelt man den originalen Dateinamen über

$_FILES['file']['name']

Den temporären Pfad und Dateinamen auf dem Webserver ermittelt man hingegen wie folgt:

$_FILES['file']['tmp_name']

Die Größe in Bytes findest du so heraus:

$_FILES['file']['size']

Und den MIME-Type der Datei kannst du so herausfinden:

$_FILES['file']['type']

Praxisbeispiel

Das folgende Script prüft zunächst, ob es sich bei der hochzuladenden Datei um eine JPEG-Datei handelt, die eine Dateigröße von 1MB nicht überschreitet. Sind diese beiden Einschränkungen erfüllt, wird die Datei unter Beibehaltung des originalen Dateinamens in den Ordner /upload hochgeladen:

<?php
  if($_FILES['file']['type'] == "image/jpeg" && $_FILES['file']['size'] <= 1*1024*1024) {
    move_uploaded_file($FILES['file']['tmp_name'], "/upload/".$_FILES['file']['name']);
  }
?>

Ich hoffe, dass diese Anleitung dem ein oder anderen dabei helfen kann, einen Dateiupload zu implementieren.