Sechs Artikel in der Kategorie „Coding

Umlaute auf Static Websites?

Kategorie: Coding

Es soll ja von Zeit zu Zeit vorkommen, dass man auch noch einfache HTML-Seiten programmiert, wenn sich der Content nicht regelmäßig verändert. Wie auch ich, werdet auch dir diese Seiten dann wahrscheinlich für den deutschen Sprachraum erstellen und das bedeutet Umlaute im Text.
Im puren HTML-Code muss ich also irgendwie dafür sorgen, dass die Browser weltweit die Umlaute also auch korrekt anzeigen und nicht die Boxen mit Fragezeichen, wie ihr sie bestimmt auch schon gesehen habt.
Als ich die erste eigene HTML-Seite gecodet hatte, war das mit den Umlauten auch ein nicht ganz kleines Problem für mich und auch wenn das jetzt schon etwas her ist, denke ich dass gerade Anfänger dieses Problem auch haben werden.
Das Problem haben wir jetzt lange genug bewundert, kommen wir nun endlich zur Lösung.
Damit Umlaute auf Static-Sites korrekt angezeigt werden, muss nämlich nur die Zeichenkodierung in den Meta-Tags angegeben werden. Da es sich um einzelne Seiten handelt, müsst ihr das natürlich auch auf jeder Seite tun.
Der Code um Umlaute anzeigen zu lassen ist der folgende:

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

Einfach im Datei-Kopf der HTML-Datei einbinden und schon, werden die Umlaute so angezeigt, dass man sie auch lesen kann.
Ich hoffe ich konnte euch mit diesem kurzen Artikel etwas helfen.
Sensei

Post to Twitter

Gepostet am: 6. 1. 2010

8 Kommentare

Videos in xhtml valid einbinden

Kategorie: Coding

Wie ihr sicher wisst, sind die Codes, die man von den großen Video-Portalen wie Youtube zur Verfügung gestellt bekommt nur für HTML zu gebrauchen sind. Wenn ihr eure Seite in xhtml umgesetzt habt, dann müsst ihr den Code allerdings verändern, damit er W3C konform ist.
Der Code unveränderte Code sieht so aus:
<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/vu24pkVQbjc&hl=de&fs=1&"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/vu24pkVQbjc&hl=de&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>
</object>
Es ist zwar aufwendiger Videos in xhtml auf einer Webiste einzubinden, aber nicht unmöglich. Eigentlich ist es sogar recht simpel, denn ihr müsst eigentlich nur den „embed“-Tag entfernen und durch das „data“-Attribut im „object“-Tag ersetzen und schon ist der Code valid.
Nach dieser Änderung sieht der Code dann so aus:
<object width="425" height="344" data= "http://www.youtube.com/v/vu24pkVQbjc&hl=de&fs=1&" >
<param name="movie" value="http://www.youtube.com/v/vu24pkVQbjc&hl=de&fs=1&"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
</object>

Wenn es danach doch nicht funktionieren, solltet ihr nachsehen, ob die &-Zeichen mit den entsprechenden Codes ersetzt sind. Solltet ihr diese nicht mehr kennen, findet ihr sie in dem Artikel Code in WordPress anzeigen lassen.
Sensei

Post to Twitter

Gepostet am: 28. 7. 2009

1 Kommentar

Poken Contest – Der Gewinner

Kategorie: Coding

Nun ist es so weit, der Poken Contest hier auf netheweb.de ist zu ende und der Gewinner steht fest. Ich danke euch allen für die Teilnahme und werde mich bemühen bald wieder einen Contest für euch auf die Beine zu stellen.
Bevor ich jetzt aber den Gewinner nenne, möchte ich mich noch mal bei meinem Sponsor Pokenonline bedanken, der diesen Contest erst ermöglicht hat.
Jetzt noch einen Trommelwirbel ratatatatata …. and the winner is: der elbenblog.blogspot.com
Für alle anderen Teilnehmer gibt es einen Gutscheincode mit dem ihr beim Kauf eines Pokens die kompletten Versandkosten spart. Einzige Bedingung ist, dass ihr über https://www.pokenonline.com/ bestellt.
Da ich leider keine Email Adressen von den Teilnehmern habe, würde ich euch bitten, einfach kurz eine Email an contest@netheweb.de schreibt, in dem ihr den Blog, mit dem ihr am Contest teilgenommen habt nennt.
Viel Spaß dem Gewinner mit seinem Poken und bis zum nächsten Contest,
Sensei

Post to Twitter

Gepostet am: 18. 7. 2009

3 Kommentare

Firefox Plugins für Webentwickler

Kategorie: Coding, Webentwicklung

Firefox Plugins für Webentwickler und Webmaster
Heute will ich mich mal um hilfreiche Plugins für Firefox kümmern, wobei ich natürlich einen Fokus auf Relevanz für Webentwickler und Webmaster legen werde.
Für jeden sind natürlich Plugins wie der AdBlockerPlus, NoScript oder ein deutsches Wörterbuch zu empfehlen.
Wer sich öfter im Internet aufhält wird diese Standart-Plugins sicher schon installiert haben deshalb nun weiter zu denen, die eventuell noch nicht jeder kennt.
Plugins die ihr euch zumindest ansehen solltet sind:
1.FireBug. Mit FireBug erhaltet in ein Plugin, dass euch viele nützliche Developer Tools an die Hand gibt. Mit ihm könnt ihr html, css oder java direkt im Browser editieren, auf Fehler checken und Javascript „on the fly“ ausführen lassen. Auch ganz nett ist, dass man CSS visuell darstellen lassen kann. Das macht sich positiv bemerkbar, wenn die Div‘s mal nicht so wollen wie sie sollen. Jeder der seine Websites selber schreibt, sollte FireBug installiert haben, denn es nimmt einem viel Arbeit ab, vor allem aber zeitraubendes Geklicke ab.
2.webDeveloper. Dieses Plugin bietet ähnliche Funktionen wie schon FireBug. Man kann sich das CSS ansehen, den Style deaktivieren oder ein eigenes Stylesheet hinzufügen. Mein Fazit zu diesem Plugin ist: Nicht unbedingt notwendig wenn FireBug schon installiert ist, kann aber auch nicht schaden.
3.ColorZilla war erste Plugin, dass ich zum Thema Webentwicklung installiert habe. Mit ihm kann man Farben direkt im Browser auslesen lassen, die einem dann als HEX und RGB-Codes angezeigt werden. Außerdem zeigt ColorZilla mit einem roten Rahmen die html-Elemente an, über denen gerade der Mauszeiger steht. Dabei wird neben dem Plugin-Symbol auch angezeigt, ob das Element eine ID oder Class verwendet und wie dieses heißt. Es wird einem also das Fehlersuchen auf schon gecodeten Websites extrem erleichtert und man muss nicht extra das ganze Stylesheet durchsuchen, sondern kann gezielt nach der passenden Class oder Id Ausschau halten. Meiner Meinung nach ein klares muss für Webentwickler. Für Blogger und Webmaster aber auch sehr hilfreich.
4.HTML VALIDATOR. Wie der Add-On Name schon verrät handelt es sich um einen Validator der den HTML-Code auf Wunsch direkt im Browser prüft, ohne das man z.B. den w3c-Validator bemühen muss. Außerdem bietet ein in einen Browser integrierter Validator den Vorteil, dass der Code nicht erst an einen Server gesendet werden muss und ihr könnt euch den Code eurer Website auch mit diesem Plugin anzeigen lassen. Wer sicher gehen will, dass seine Website valid ist, sollte darüber nachdenken, ob es für ihn eventuell nicht Sinn macht den HTML Validator zu installieren.
5.Launchy. Mit Launchy könnt ihr Dokumente, Websites, was auch immer mit externen Programmen öffnen lassen. Dabei wird der Dateitype automatisch erkannt und in den meisten Fällen die passende Anwendung gewählt. Dieses Plugin ist sicher kein muss, spart aber Zeit und kann deshalb durchaus sinnvoll sein.
6.IE View. Ein sehr schönes und wichtiges Add-On für Webentwickler und Webmaster, da man mit ihm ohne großen Stress die eigene, Website in der Ansicht im InternetExplorer checken kann, um zu testen ob alles korrekt angezeigt wird oder man sich um den IE wie eigentlich immer nochmal extra kümmern muss.
7.SeoQuake. Jetzt wird es auch für Websitebesitzer wieder spannend, die mit dem Code einer Website nicht ganz so viel anfangen können. Mit SEOquake könnt ihr euch in Form einer Toolbar viele hilfreiche Informationen über die gerade geöffnete Website anzeigen lassen. Die wichtigsten sind wohl die bei Google, Yahoo und Live indexzierten Pages, das Domainalter, der PR, der Alexa-Rank, Backlinks, Externe Links und die Keyword-Dichte. Es werden allerdings auch noch weitere interessante Daten ausgelesen. Wer seine Website also für Suchmaschinen optimieren will, sollte die SeoQuake-Toolbar als Handwerkszeug installiert haben.
8.SearchStatus. Mit diesem Plugin könnt ihr euch den PageRank, den Alexa-Rank, das Compete.com, SEOmoz, Lincscape und mozRank sowie eingehende und ausgehende Links(über Alexa) anzeigen lassen. Hier entscheidet ihr am besten selbst, ob es sich für euch lohnt, was davon abhängt, wie wichtig euch diese Daten sind und wie oft ihr sie ohnehin abfragt.
Ganz am Ende will ich euch noch auf ein Plugin aufmerksam machen, dass nicht direkt für Blogger, Webentwickler oder Webmaster zugeschnitten ist, aber trotzdem ganz nett sein kann, wenn man es installiert hat. Es geht um CoolIris, mit CoolIris könnt ihr Fotos im eurem Browser betrachten und durchstöbern, die Bilder können von eurer Festplatte stammen, aber auch von Internet-Diensten wie Flikr, Google Images, Facebook oder ähnlichem.
Ich hoffe das wir euch in diesem Artikel einige Plugins vorstellen konnten, die euch bei eurer Arbeit weiterhelfen.
Euer netheweb.de Team.

Post to Twitter

Gepostet am: 1. 5. 2009

12 Kommentare

Code in WordPress anzeigen lassen

Kategorie: Coding, Tutorial

Code in WordPress anzeigen lassen
Jeder der schon einmal ein Tutorial zu einem Coding-Theme verfasst und es in einem WordPress Blog gepostet hat, weiß dass es nicht einfach so geht.
In HTML und xHTML werden die <code></code> Tags dazu genutzt, um HTML-Code als Text anzeigen zu lassen. Wenn man in WordPress allerdings einen Code wie den folgenden eingibt:
<code> <div class=“test“></div> </code>
dann wird der Code ausgeführt und nicht angezeigt, weil WordPress trotz den Code-Tags die < > Klammern erkennt und für einen auszuführenden Befehl hält.
Wenn ihr wollt, dass WordPress den Code anzeigt, müsst ihr die < > Klammern mit dem HTML-Code für diese Sonderzeichen ersetzen.
für die „<"-Klammer nutzt ihr &lt; für die „>“-Klammer &gt; Wenn ihr das in den Code einsetzt: <code> &lt;div class=“test“>&lt;/div> </code>
dann wird der Code nicht mehr ausgeführt, sondern als Code angezeigt.
Als Abschluss hier nochmal eine kurze Liste mit weiteren Sonderzeichen: < = &lt; > = &gt; / = &#47; ] = &#93; [ = &#91; " = &#34; ' = &#39; Wir hoffen wir konnten euch auch mit diesem kleinen Tutorial helfen.
Euer netheweb.de Team

Post to Twitter

Gepostet am: 28. 4. 2009

7 Kommentare

Php Codes in CMS MS nutzen

Kategorie: Coding, Tutorial

Php Codes in CMSMS nutzen
Das wohl am leichtesten verständliche – kostenlose – CMS ist “CMS Made Simple”. Mit ihm kann man Websites mit weniger als 3000 Besucher/Tag doch recht angenehm verwalten, und auch Templates lassen sich leicht erstellen.
Nur was tut man, wenn man in einem Template zum Beispiel eine PHP-Datei einbinden will?
Der normale Code wäre <? php include “dateiname.php“; ?>. Wenn ihr diesen Code aber in das Tempalte kopiert, passiert erst mal gar nichts. Das CMS reagiert überhaupt nicht darauf, dass es sich um einen Code handelt und dieser ausführbar ist, es wird nicht einmal ein Fehler ausgegeben.
Das führt erstmal zur Resignation des Nutzers und auf der ersten Seite der Google Ergebnisse findet sich auch nichts, man versucht sein Glück dann nochmal auf der deutschsprachigen Dokumentation von CMS MS, nur leider ist du nicht vollständig und hilft einem auch nur bedingt weiter.
Dabei ist das System eigentlich ganz einfach, PHP-Dateien können als Tags gespeichert werden, und diese Tags werden dann im Template auch ausgeführt.
Um einen eigenen Tag zu erstellen geht ihr unter Erweiterungen->Benutzerdefinierte Tags und klickt dort auf „Einen benutzerdefinierten Tag hinzufügen“. Jetzt gebt ihr dem Tag einen schönen Namen, der die Funktion symbolisiert und fügt den PHP-Code in das dafür vorgesehene Feld ein.
Wenn ihr die PHP-Tags mit kopiert, erhaltet ihr eine Fehlermeldung, kopiert also nur <„ include “dateiname.php“;“> rein und alles funktioniert einwandfrei.
In dem Code für das Template lasst ihr den Code durch den Befehl <{Tagname}>ausführen.
Wir hoffen wir konnten euch mit diesem kurzen Tutorial etwas helfen,
euer netheweb.de Team

Post to Twitter

Gepostet am: 25. 4. 2009

2 Kommentare