Posts gespeichert unter 'Web Development'

Nächste Homepage fertig – thesquires.de

In wochenlanger Arbeit, schaffte ich etwa 90 Stunden an einem neuem Homepageprojekt – Anfang dieser Woche wurde sie nun endlich fertig: unter www.thesquires.de kann das Resultat begutachtet werden.Der Auftrag gehörte nicht mir allein – nein, Seb und ich arbeiteten (zumindest stellenweise) “Hand in Hand” um eine super Homepage auf die Beine zu stellen. Und – ganz ehrlich – ich glaube das ist uns gelungen. Bewaffnet mit jeder Menge Fachkompetenz bewiesen wir beide in unterschiedlichen Bereichen unser Können: er kreirte das Design und stellte den Flash-Header her, ich erledigte die gesamte Back- und Frontend-Programmierung und das Umsetzen des Designs in CSS und HTML. Einen genaueren Tätigkeitsbericht werde ich wahrscheinlich nächste Woche schreiben, heute ist es mir dafür zu spät … 

bisher 31 Kommentare 02. Mai 2008

Ein Haus wird gebaut

Gestern trafen sich Seb, Mari, Ferdi und ich zu einer Besprechung unseres gemeinsamen Projekts – der Gründung einer GbR mit dem Schwerpunkt Mediengestaltung (also Videoschnitt, Web- und Printdesign, Webseitenrealisierung). Wir hatten überlegt, ob wir eine GbR gründen und wollten daher gestern das alles noch einmal besprechen, die rechtlichen Aspekte bedenken, den Fokus setzen (sozusagen das Grundstück abmessen und überlegen, ob es sinnvoll ist, dort überhaupt zu bauen, und in was für einem Maßstab – Hoch-, Mehrfamilien- oder Reihenhaus?).

Aber dann ging es erst einmal um den USA-Austauschfilm. Nach einer längeren Diskussion mit zwei völlig unterschiedlichen Meinungen, was die Besetzung anging (jede Meinung wurde von 50% der Anwesenden vertreten :P) entschieden wir uns 2 Teams à 7 Leute zu machen. Ein Team ist für San Francisco und das andere für den Rest verantwortlich. Während meiner BOGY-Woche (nächsten Montag bis Freitag) gehe ich das Videomaterial durch und bewerte es.  Vielleicht schaffen wir es mit meiner Vorarbeit dann doch den Film bis zum 21. April fertig zu stellen – an diesem Tag ist der Nachbesprechungsabend, wo der Film vorgeführt werden soll. (Mehr Infos gibts unter einer eigens eingerichteten Website: usa.gabrielwilkes.de).

Doch dann  zurück zum eigentlichen Thema – unserem “Projekt”. Die Einzelheiten des Gesprächs interessieren euch bestimmt nicht. Daher nur das Ergebnis: Mediengestaltung – eher nicht. Wir werden uns dagegen mit einem Webprojekt beschäftigen, was mehr als nur die nächsten 3 Monate in Anspruch nehmen wird. Weitere Details gebe ich aus Gründen der Diskretion aber nicht bekannt ;) Aber auf das Haus-Motiv bezogen haben wir jetzt einen Plan, wie es aussehen soll. Innenausstattung etc. sind noch nicht geklärt, aber der Grobbau ist klar.

bisher 26 Kommentare 09. März 2008

How many HTML-Elements can you name in 5 minutes?

Named so far:

A, ADDRESS, AREA, B, BIG, BLOCKQUOTE, BODY, BUTTON, CITE, COL, DEL, DIV, EM, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HEAD, HTML, I, IMG, INPUT, INS, LABEL, LEGEND, LI, LINK, META, OBJECT, OL, OPTION, P, PARAM, Q, S, SCRIPT, SELECT, SMALL, SPAN, STRIKE, STRONG, STYLE, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TITLE, TR, UL,

You forgot:

ABBR, ACRONYM, APPLET, BASE, BASEFONT, BDO, BR, CAPTION, CENTER, CODE, COLGROUP, DD, DFN, DIR, DL, DT, FONT, FRAME, FRAMESET, HR, IFRAME, ISINDEX, KBD, MAP, MENU, NOFRAMES, NOSCRIPT, OPTGROUP, PRE, SAMP, SUB, TT, U, VAR,

57

Naja, manche habe ich schon vergessen. Aber den Großteil gewusst :)  und ich meine, wer braucht schon Frame-Elemente oder solche wie Applet oder Center, die ja eh deprecated sind.

Edit: auch noch ein CSS-Test:

Named so far:

background, background-attachment, background-color, background-image, background-position, border, border-bottom, border-bottom-color, border-bottom-style, border-bottom-width, border-color, border-left, border-left-color, border-left-style, border-left-width, border-right, border-right-color, border-right-style, border-right-width, border-style, border-top, border-top-color, border-top-style, border-top-width, border-width, bottom, clear, color, display, float, font, font-family, font-size, font-style, font-weight, height, left, margin, margin-bottom, margin-left, margin-right, margin-top, max-height, max-width, min-height, min-width, outline, outline-color, outline-style, outline-width, padding, padding-bottom, padding-left, padding-right, padding-top, position, right, text-decoration, top, visibility, width,

You forgot:

azimuth, background-repeat, border-collapse, border-spacing, caption-side, clip, content, counter-increment, counter-reset, cue, cue-after, cue-before, cursor, direction, elevation, empty-cells, font-size-adjust, font-stretch, font-variant, letter-spacing, line-height, list-style, list-style-image, list-style-position, list-style-type, marker-offset, marks, orphans, overflow, page, page-break-after, page-break-before, page-break-inside, pause, pause-after, pause-before, pitch, pitch-range, play-during, quotes, richness, size, speak, speak-header, speak-numeral, speak-punctuation, speech-rate, stress, table-layout, text-align, text-indent, text-shadow, text-transform, unicode-bidi, vertical-align, voice-family, volume, white-space, widows, word-spacing, z-index,

61Die ganzen, die ich hier vergessen habe, sind zum größten Teil ja relativ unwichtig. Klar, die Leute, die mit einem Screen-Reader unterwegs sind werden das vielleicht anders sehen. Aber für mich sind sie nicht von hoher Relevanz und ich habe Eigenschaften wie azimuth, volume oder speak-punctuation noch nie eingesetzt.

Auch mal testen? HTML, CSS

bisher 26 Kommentare 13. Dezember 2007

class_modpic.php – eine Bild-verändern-PHP-Klasse

Nach tagelanger Arbeit kann ich euch nun endlich meine erste Klasse vorstellen, die ich selber geschrieben habe. Es handelt sich um eine PHP-Klasse, die dazu da ist, Bilder zu verkleinern und/oder Text hinzuzufügen. Sie ist sehr klein (5,2KByte)  und leicht zu bedienen.

Folgende Ausdrücke können z.B. verwendet werden, um das Bild "test.jpg" auf eine Größe von 250px proportional zu verkleinern und einen Text "Hallo Welt" mit der Schriftart Arial und einer Schriftgröße von 16pt in die Mitte des Bildes schreiben:

PHP:
  1. $pic = new Modpic("test.jpg", 250);
  2. $pic->newwatermark("Hallo Welt", "arial.ttf", 16, 'center', 'red');
  3. $pic->outputimg();

Wie du siehst, ist sie wirklich sehr simpel und einfach aufgebaut. Sie dient einfach dem schnellen und unkomplizierten Erzeugen von Thumbnails und Bildern mit Wasserzeichen (auch halbtransparenter Text ist möglich!).

Du kannst das Script hier ansehen: /files/class_modpic.phps und hier das gesamte ZIP-Archiv mit readmes auf Deutsch und Englisch herunterladen.

Wichtig! Das Script basiert auf der OOP von PHP5. Mit wenigen Anpassungen (die du dann aber selbst vornehmen musst), läuft das Script auch mit älteren Webhostern, die lediglich PHP4 unterstützen. Ich habe es aber auf der neusten Version aufgebaut, weil ich zukünftige Projekte ebenfalls mit - dem deutlich moderneren - PHP5 realisieren möchte.

Ich hoffe aber, dass dieses Script bei euch so läuft, wie es soll. Ansonsten könnt ihr mir einfach eine Mail schrieben (ich@gabriel-wilkes.de)  oder bei den Kommentaren eure Probleme mitteilen.

bisher 23 Kommentare 13. Dezember 2007

Adventsparty der Klasse

Gestern, 10.12., fand die Adventsparty unserer Klasse statt, bei der wir unserem Klassenlehrer ein Geschenk überreicht, Kuchen gegessen, Cola getrunken und gute Laune hatten. Ich habe dazu - wie immer bei solchen Anlässen - ein paar Fotos gemacht, diesmal relativ wenige. 54 von ihnen habe ich auf die Klassenhomepage gestellt. Ihr findet sie unter www.abi10-asg.de/fotos/adventsparty07/. Bevor ich die Bilder allerdings ins Netz gestellt habe, habe ich mein Upoad-Script deutlich überarbeitet. Da ich da wirklich einige Stunden Arbeit hineingesteckt habe, denke ich, dass es würdig ist auch auf meinem Blog veröffentlicht zu werden - daher findet ihr gleich hier auch meine neue Bild-bearbeiten-Klasse für PHP.

Außerdem habe ich noch 2 Linktipps für euch:

www.cut-the-knot.org  — zum interaktiven Mathelernen

www.pbase.com/fotoopa  — coole Bilder von Wasser

bisher 31 Kommentare 11. Dezember 2007

Aus pink wird schwarz oder bunt — koloriere dein SchülerVZ neu!

Im folgenden möchte ich euch erklären, wie ihr den pinken Style des SchülerVZ ändern könnt - weil es ja viele Leute gibt, die dieses Pink nicht mögen. Also - führt das folgende Tutorial durch, und ihr werdet dem SchülerVZ einen völlig anderen Anstrich geben können: egal ob dunkel oder hell, weiß oder schwarz, rot, grün oder blau – für jedermann gibt es einen passenden Stil!

1. Benutzt ihr bereits Firefox oder Opera? Das Tutorial zeigt den Weg für Firefox-User, beim Opera sind andere Arbeitsschritte notwendig, wenn ihr also meinem Weg folgen wollt, dass müsst ihr euch die aktuelleste Firefox-Version von mozilla-europe.org herunterladen und danach installieren.

2.  Ladet euch von addons.mozilla.org die Firefox-Erweiterung »Stylish« herunter. Zum grundsätzlichen Verständnis: Stylish kann CSS-Stylesheets importieren, mit denen ihr das Aussehen von Websites oder auch Firefox-Elementen verändern könnt. Ihr könntet zum Beispiel generell festlegen, dass überall die Schriftfarbe blau sein soll. Man kann aber eben auch speziell einer bestimmten Website ein anderes Aussehen verpassen – und genau das möchte ich hier machen. Jetzt aber erstmal weiter mit dem Installieren der Extension. Folge einfach den Meldungen, solltest du dabei Probleme haben, schaue dir mein Tutorial zum Speichern von Bildern im SchülerVZ an, dort wird auch das Installieren einer Erweiterung erklärt. Danach sollte unten in der Statusleiste das Icon von einem Farbpinsel auf einem Blatt sein: Stylish erfolgreich installiert.

3. Öffne eine der unten folgenden Dateien und drücke nacheinander die Tastenkombinationen STRG+A (um den gesamten Inhalt zu markieren) und STRG+C (und den Inhalt in die Zwischenablage zukopieren).

(Ich muss dazu sagen, dass die Stile nicht von mir selbst erstellt sind, sondern ich sie von svz-styles.de gedownloadet und teilweise modifiziert habe, damit sie "runder" sind. Auf dieser Seite findet ihr noch viele weitere Styles und eine ganz ausführliche Anleitung, falls ihr Opera benutzt)
Klicke dann auf das Stylish-Icon und wähle "Stil erstellen" -> "Neuer Stil …". Gib im ersten Feld den Stilnamen ein und füge in dem großen Textfeld per STRG+V den Stil-Code ein. Speichere den Stil dann per Klick auf den gleichnamigen Button. Bei manchen Stilen kommt nun eine Fehlermeldung: "Der Code für diesen Stil enthält Fehler …", diese Meldung kannst du ignorieren und den Stil "Trotzdem verwenden".

4. Gehe nun in das SchülerVZ und bewundere deinen neuen Style :-)

5. Solltest du das Bedürfnis nach einem anderen Stil haben, öffnest du diesen, kopierst ihn, wählst erneut "Neuer Stil …", fügst den anderen Stil dann in das Textfeld ein und speicherst ihn, nachdem du den Namen eingegeben hast. Damit du dann nicht beide Stile parallel laufen lässt, musst du erneut auf das Stylish-Icon klicken und dort das Häckchen bei dem nicht gewünschten Stil wegmachen, so dass dann eben nur noch der Stil aktiv ist, den du auch wirklich haben möchtest. (Das funktioniert nur auf schülervz.net oder im Stilverwaltungs-Fenster, das du per Klick auf "Stile verwalten" im Stylish-Menü erreichst).

Ich hoffe die Stile funktionieren alle problemlos, solltest du Anregungen oder Fragen haben, benutze dazu einfach die Kommentarfunktion.
Ich wünsche dir nun noch mehr Spaß am SchülerVZ!

Für weitere Styles besucht www.userstyles.org oder www.svz-styles.de

Update 29.3.2008:

Besucht bitte das SVZ-Community-Wiki und schaut euch diesen Artikel an, dort wird alles beschrieben, wie es auch für die aktuelle Version funktioniert.

Ich empfehle den Weg mit Stylish, da ihr bei der Methode kein "pinkes Flackern" habt.

Update 10.4.2010:

Verwendet die Anleitung bei SVZ-Styles.de, sie wird regelmäßig aktualisiert.

bisher 62 Kommentare 01. Dezember 2007

Bilder im SchülerVZ speichern

Ein herzliches Hallo zu meinem 3. Eintrag :-)

Die meisten von euch kennen vermutlich das SchülerVZ und viele von euch werden sich vermutlich bisher schon gefragt haben: »Wie zum Teufel bekomme ich denn Bilder von anderen SchülerVZ-Fotoalben auf meinen PC gespeichert?«

Die Antwort war darauf bisher immer »Gehe in den Quelltext und suche die Bild-URL heraus« – das das nichts für jedermann ist, ist klar. Kaum jemand kennt sich mit HTML aus und noch weniger kommen mit dem komplexen Quellcode vom SchülerVZ klar. Das habe auch ich mir gedacht und ein Script entwickelt, das es euch viel einfacher macht, Bilder zu speichern. Die einzige Voraussetzung dafür ist, dass ihr Firefox benutzt. Sollte das nicht der Fall sein, solltet ihr das schleunigst nachholen: Download Firefox. Folgt danach einfach folgender Anleitung.

1. Kontrolliere ob du die Erweiterung »Greasemonkey« installiert hast, gehe dazu in das Add-ons-Fenster im Menü »Extras«. Ist in dieser Liste Greasemonkey eingetragen, kannst du gleich zum 3. Schritt springen, fahre ansonsten einfach mit dem 2. Schritt fort.
2. Lade dir Greasemonkey von der Firefox-Addons-Seite herunter: addons.mozilla.org, klicke dort auf den großen grünen Button »Installieren«. Warte 4 Sekunden und klicke dann auf »jetzt installieren«. Warte danach noch einmal, bis der Download abgeschlossen ist. Starte danach Firefox neu.

3. Überprüfe ob Greasemonkey aktiv ist, es müsste ein Affengesicht auf braunem Hintergrund in der rechten Ecke der Statusleiste (unterhalb des Browserinhalts) zu sehen sein:

Greasemonkey aktiv.

Sollte dies nicht der Fall sein und das Affengesicht vor grauem Hintergrund liegen, klicke einmal mit der linken Maustaste darauf, es müsste daraufhin braun werden.

4. Lade dir das Userscript hier herunter: http://gabriel-wilkes.de/svz-savepic.user.js, in dem folgenden Dialog musst du auf »Installieren« klicken.

5. Das wars schon - in Zukunft siehst du unter jedem SchülerVZ-Fotoalbumsbild einen Button »Bild speichern!« unter dem du das Bild aufrufen und per Menü Datei, Befehl »Seite speichern unter« das Bild an einem beliebigen Ort speichern kannst.

Viel Spaß beim Ausprobieren!

Solltet ihr Dankesgrüße oder Feedback haben - nutzt dazu einfach die Kommentarfunktion zu diesem Beitrag.

Nachtrag 9.3.08:  Nachdem es zwischenzeitlich möglich war, Bilder einfach per Rechtsklick zu speichern, ist dieser nun blockiert. Um die Bilder dennoch zu speichern, kann man ein Bild "verschieben" (nur in Firefox getestet). Dazu klickst du auf das Bild, hälst die Maustaste gedrückt und ziehst es entweder auf den Desktop um es direkt zu speichern oder ziehst es in die Adresszeile. Wenn du dann die Maustaste loslässt, wird das Bild direkt angezeigt.

Siehe auch die Kommentare für weitere Hinweise.

bisher 69 Kommentare 24. November 2007