Archiv der Kategorie: Code Snippets

Kleine Hilfestellungen für die Webdesign Programmierung mit PHP, HTML, CSS und Javascript

JQuery best practice: Javascript Funktionen auslagern und über Klassen aufrufen

Veröffentlicht am von
jQuery Webdesign Duisburg

jQuery Webdesign Duisburg

Javascript jQuery best practice:
Alle Javascript Funktionen sollten in ein externes Javascript File ausgelagert werden. Das Javascript File wird dann über ein <script>-Tag im head-Bereich oder vor dem schließenden Body-Tag </body> eingebunden. Schauen wir uns ein praktisches Javascript Best Practice Beispiel an. Belegen wir einen HTML Link mit einer Javascript Function:

 

 

jQuery Javascript best practice example:
HTML in der Seite
<a href=”#” class=”doSomeMagic”>Do some magic</a>

Javascript jQuery best practice im ausgelagerten JS-File
$(‘a.doSomeMagic’).click(function(){
// Magic code or simple
console.log(‘Right here!’);
});

Die jQuery .click() Methode erlaubt uns einfach ein Event an ein bestimmtes HTML

HTML5 Webdesign aus Duisburg Logo

HTML5 Webdesign aus Duisburg Logo

Element zu binden. In diesem Falle wird die oben beschriebene Javascript Funktion an alle Links mit der Klasse “doSomeMagic” gebunden. Das ist auch der große Vorteil dieser Art der Programmierung. Es ist zentral und Darstellung und Logik von einander getrennt. Betrachten wir hierzu ein Javascript jQuery bad practice example.

Javascript jQuery bad practice example
<a onclick=”doSomething()” href=”#”>Click!</a>

Hier wird direkt der Javascript Funktionsaufruf im A-Tag HTML Element ausgeführt. Dadurch ist das Javascript nicht mehr klar vom HTML Code getrennt. Würde sich die Funktion ändern, also umbenannt oder Parameter hinzugefügt, müsste das immer an allen Stellen im HTML Code geändert werden. Das macht dann erheblichen Mehraufwand bei Änderungen.

 

CSS3 Webdesign aus Duisburg Logo

CSS3 Webdesign aus Duisburg Logo

Weiterführende Links Javascript jQuery:
jQuery Library
http://www.jquery.com/ 

Webdesign mit WordPress: Upload Limit für Mediathek mit .htaccess erhöhen

Veröffentlicht am von

WordPress .htaccess Upload Limit erhöhen
php_value upload_max_filesize 10M
php_value post_max_size 10M

Webdesign mit WordPress aus Duisburg

Webdesign mit WordPress aus Duisburg

Mit dem Bild zum Klopapiergewehr von 9.1 MB aus der Funny Fail gif compilation hatte ich das in der php.ini gestzte PHP Upload Limit von 8MB erreicht und konnte das Bild nicht mehr hochladen.

Den Wert für ein neues WordPress php uload limit kann man jedoch einfach über die .htaccess im WordPress root-Verzeichnis mit dem oben genannten WordPress .htaccess Code neusetzen. Die beiden Zeilen einfach unten hinzufügen, hochladen und fertig.

Funny Fail compilation Bild Klopapiergewehr

Klopapier Gewehr Badezimmer funny fail compilation

Klopapier Gewehr Badezimmer funny fail compilation

 

 

Typo3 Snippet: Typo3 6.0 no confirmation step und target page

Veröffentlicht am von
NEOS TYPO3 Webdesign Duisburg

NEOS TYPO3 Webdesign Duisburg

Bei der neuen Typo3 6.0 gibt es viele Neuerungen gegenüber bisherigen Typo3 Versionen. Dabei fällt beim Standard Typo3 Formularen auf, daß die Angaben aus dem Wizard nicht richtig in die Typo3 Formular Configuration Ansicht übernommen werden. Daher hier eine Typo3 Config, die funktioniert

Typo3 6.0 Formular Configuration no confirmation step and messages.success
Typo3 6.0 Formular Configuration ohne Bestätigungsschritt und mit Erfolgsmeldung 

class = kontaktform
method = post
prefix = tx_form
confirmation = 0
postProcessor {
1 = mail
1 {
recipientEmail = empfaenger@kunde.de
senderEmailField = email
senderNameField = name
subject = Kontakt von Webseite
messages.success = TEXT
messages.success.value = <p>Danke für die Email.</p>
}
}
10 = TEXTLINE
10 {
name = name
label {
value = Vor- und Zuname
}
}
20 = TEXTLINE
20 {
name = email
label {
value = Email-Adresse
}
}
30 = SELECT
30 {
name = betreff
label {
value = Betreff
}
10 = OPTION
10 {
data = Allgemein
selected = selected
}
20 = OPTION
20 {
data = Käuferanfrage
}
30 = OPTION
30 {
data = Service
}
}
40 = TEXTAREA
40 {
cols = 38
rows = 5
name = nachricht
label {
value = Nachricht
}
}
50 = SUBMIT
50 {
name = 6
value = senden
}
rules {
1 = required
1 {
breakOnError = 0
showMessage =
message = Fehler
error = Namen eingeben
element = name
}
2 = email
2 {
breakOnError = 0
showMessage = 1
message =
error = Email ausfüllen
element = email
}
}

Die oben abgebildete Typo3 6.0 Formular Configuration versendet eine Email an empfaenger@kunde.de.

Typo3 6.0 Formular Configuration für Zielseite
Typo3 6.0 Formular Configuration for target page

…
confirmation = 0
action = 78
…

So wird die Typo3 PID 78 als Formular Zielseite aufgerufen.

Weiterführende Links zu Typo3 6.0 
Offizielle Internetseite von Typo3
www.typo3.org
Offizielle Internetseite Typo3 NEOS CMS für Flow
http://neos.typo3.org/

System Structure Backend NEOS TYPO3 Webdesign Duisburg

System Structure Backend NEOS TYPO3 Webdesign Duisburg

 

Magento Shop: Erste Schritte Tutorial Deutsch installieren – CONNECT ERROR: Couldn’t resolve host ‘magento-community’

Veröffentlicht am von
Open Source Shop Magento Duisburg Webdesign

Open Source Shop Magento Duisburg Webdesign

CONNECT ERROR: Couldn’t resolve host ‘magento-community’
richtiger Link zum deutschen Sprachpaket für Magento Shops
http://connect20.magentocommerce.com/community/Locale_Mage_community_de_DE

Nach den ersten Schritten im Open Source Shopsystem Magento kann ich auch gleich meinen ersten Artikel zu dem Thema Magento Shops schreiben. Es hat mich ein wenig “googeln” gekostet und das möchte ich ja auch in Zukunft angehenden Magento Freelancer ersparen. Sucht man nach dem deutschen Sprachpaket für Magento Shops wird man zielsicher auf diese Seite hier geleitet

Offizielle Seite zum deutschen Sprachpaket für Magento
http://www.magentocommerce.com/magento-connect/locale-mage-community-de-de.html

und bekommt unter der Funktion Select Key folgende URL. Leider ist der Link unvollständig und falsch.

Offizieller Link zu deutschen Magento Sprachpaket führt zu CONNECT ERROR: Couldn’t resolve host ‘magento-community’
magento-community/Locale_Mage_community_de_DE

Aber mit dem Link von oben wird das dann alles schön installiert und durchgeführt.

PHP OOP Webdesign Video Tutorials: Getter und Setter verwenden

Veröffentlicht am von
YouTube Video Tutorial Sicherheit Secure PHP Webdesign aus Duisburg OOP Objektorientierte PHP Programmierung Getter Setter

YouTube Video Tutorial Sicherheit Secure PHP Webdesign aus Duisburg OOP Objektorientierte PHP Programmierung Getter Setter

Eine wichtige Methode bei der objektorientierten Programmierung – OOP mit PHP ist die Verwendung von PHP Gettern und PHP Settern. Dadurch können vor allem die PHP Applikation von der Webseite und den User Eingaben getrennt werden. Jede User Eingabe auf einer Internetseite kann zur Eingabe von Schadcode genutzt werden. Das beschänkt sich leider nicht nur auf Formulareingaben. Durch die richtige Verwendung von PHP Gettern und PHP Settern können Eigenschaften von Objekten richtig gekapselt und mit Sicherheit in PHP OOP Appplikationen verwendet werden. Ein gutes Youtube Video Tutorial aus einer PHP Video Tutorial Serie zu dem Thema OOP – Objektorientierte Programmierung in PHP gibt es hier.

OOP – Objektorientierte PHP Programmierung Tutorial – How to use getter and setter


Wordpress Bildergalerie Youtube Video Tutorial Sicherheit Secure PHP Webdesign aus Duisburg OOP Objektorientierte PHP Programmierung Getter Setter

jQuery code snippet: html() mit Bild – image – füllen

Veröffentlicht am von
jQuery Webdesign Duisburg

jQuery Webdesign Duisburg

jQuery code snippet für ein img-Tag mit der html() jQuery Funktion
$(‘#id-of-element’).html($(“<img>”).attr(“src”, ‘/path-to-image/image.gif’);

Es ist möglich mit der .html() jQuery Function HTML Code an einer bestimmte Stelle im Webdesign auszugeben. Damit man einen img-Tag mit jQuery mit der .html()-Methode ausgeben kann ist es nötig die richtige jQuery Syntax für die Darstellung eines HTML-Tags, in diesem Falle eines img-Tags, zu nutzen. Das oben angegebene jQuery-Code snippet zeigt, wie es richtig geht.

Mac snippets: OS X Lion – Das Umlaut-Menü ausschalten

Veröffentlicht am von
Mac Book Pro Shortcut Tastatur Layout Retina

Mac Book Pro Shortcut Tastatur Layout Retina

Mac Terminal Befehl zum deaktivieren des Umlaut Menüs
defaults write -g ApplePressAndHoldEnabled -bool false

In meiner täglichen Arbeit als Senior Web Developer mit den Schwerpunkten Typo3, Zend Framework 2 – ZF2 und Frontend Webdesign Entwicklung bin ich vor zwei Monaten auf das MAC Betriebssystem mit einem MacBook 15 Zoll Retina Display umgestiegen. Nach einer etwas unterschätzten Einarbeitungszeit bin ich doch sehr glücklich über die zahlreichen Features, die das Apple Betriebssystem bietet. Allerdings kann man auch hier sagen, die Welt wird nicht einfacher und die Bedienung von Geräten auch nicht. Die Handlungen die man durchgeführt werden komplexer. Was sich Apple allerdings damit gedacht hat die Umlautmenüs welche man von dem Handy, Smartphone oder IPhone kennt in den MacBooks zu nutzen ist mir bisher ein Rätsel. Gibt man den oben genannten Befehl auf der MAC Linux Konsole ein kann man dieses Feature deaktivieren.

Mac Book Tastatur Layout Shortcuts Keyboard Tastatur

Typo Script und SEO: Typo3 Pagetree mit NavTitle für SEO – Suchmaschinenoptimierung für Auto Hortz aus Duisburg

Veröffentlicht am von
Suchmaschinen SEO Typo3 Webdesign Alexander-Klaus pixelio.de

Suchmaschinen SEO Typo3 Webdesign Alexander-Klaus pixelio.de

Möchte man individuelle Seitentitel und Seitenbeschreibungen für SEO Suchmaschinen Optimierung im Typo3 nutzen ist es nötig den NavTitle im PageTree auszugeben. Es gibt drei Möglichkeiten die Einstellung für Typo3 Redakteure vorzunehmen.

TSConfig Einstellung für alternativen Seitentitel im Pagetree beim User
options.pageTree.showNavTitle = 1

TSConfig Einstellung für alternativen Seitentitel im Pagetree in der User Gruppe
options.pageTree.showNavTitle = 1

Globale Einstellung in der Typo3 localconf.php
t3lib_extMgm::addUserTSConfig(‘options.pageTree.showNavTitle = 1′);

SEO TYPO3 Suchmaschinenoptimierung Auto Hortz Duisburg

SEO TYPO3 Suchmaschinenoptimierung Auto Hortz Duisburg

Ein sehr wichtiger Bestandteil für die Suchmaschinenoptimierung auf einer Internetseite sind individuelle Seitentitel und Seitenbeschreibung. Das legt unter anderem  Google für seine Suchmaschinenoptimierungsrichtlinienfest. Hier wird ausgesagt, dass sich

Typo Script Pagetree Navtitle SEO Suchmaschinenoptimierung aus Duisburg

Typo Script Pagetree Navtitle SEO Suchmaschinenoptimierung aus Duisburg

Seitentitel und Seitenbeschreibung für die Suchmaschinenoptimierung nicht wiederholen dürfen. Es gibt Möglichkeiten Seitentitel unter Seitenbeschreibung für die Suchmaschinenoptimierung automatisch von CMS Systemen wie Typo3 oder WordPress ausfüllen zu lassen. WordPress als Internet Blog benutzt als Default Einstellung die Überschrift als Seitentitel und den Anfang des Artikels als Meta Tag für die Suchmaschinen Beschreibung. Das ist gut für Google, aber nicht sehr gut für eine erfolgreiche Suchmaschinenoptimierung. Abgesehen von den technischen Möglichkeiten ist es natürlich besser die jeweiligen Internetseiten einzeln für Suchmaschinen zu optimieren. Durch die Qualität der Keywords und der Beschreibung für Suchmaschinen erreicht man eine bessere Conversion Rate bei den Suchmaschinentreffern. Aktuelle Inhalte, wie News oder Shop Artikel müssen automatisiert gepflegt werden.

Suchmaschinen Optimierung ist Arbeit
Es ist nötig im Vorfeld in der Arbeit zu recherchieren, die Änderungen im Redaktionssystem durchzuführen und nachher den Erfolg zu messen. Dadurch steigert man den Verkauf und den Umsatz des Kunden. „Wir bringen die Leute zur Party hin, wie die Party ist das ist uns scheißegal“. Das war die Aussage von einem der unfähigsten SEO Marketing Manager, den ich in meiner beruflichen Laufbahn bisher erlebt habe. Leider ist trotz allem etwas an dieser Aussage dran. Die Internetseite, das Produkt und deren Darstellung müssen den Käufer insgesamt überzeugen. Suchmaschinen Traffic alleine ist es sicherlich nicht, aber manche Geschäftsführer wollen tatsächlich einfach nur mehr Suchmaschinen Traffic haben. Wie bei jeder Marketingsmaßnahme muss man sich hier die Kosten-Nutzen-Frage stellen.

Vorbereitung für SEO Suchmaschinen Optimierung verschiedene Optimierung
Es ist nicht immer einfach die richtigen Suchmaschinen Keywords zu finden. Das sollten auch nicht mehr als 5 Suchmaschinen Keywords sein. Varianten eines Worts zählen dabei einzeln. Betrachtet man den Kunden Auto Hortz muss man hier die Entscheidung treffen ob man das Wort „Autowerkstatt“ oder „Auto Werkstatt“ nimmt. Bei Suchmaschinenoptimierung geht es nicht zwingend um Rechtschreibung. Mit der zweiten Wortkombinationen deckt man also zwei Suchmaschinen Keywords direkt ab. Hier könnte man noch genauer recherchieren in welche Wörter öfter aufgerufen werden. Die wichtigsten Wörter für die Suchmaschinenoptimierung sind allerdings „Gebrauchtwagen“, „Neuwagen“ und „Duisburg“.

Liste der SEO Suchmaschinen Optimierung Begriffe für Auto Hortz aus Duisburg
Suchmaschinen Keywords
Neuwagen
Gebrauchtwagen
Duisburg
Auto Werkstatt
Audi
VW Volkswagen Nutzfahrzeuge
ŠKODA
SEAT
Vertragshändler
Autohaus
Service

Wenn man die Liste der Suchmaschinen Keywords erstellt hat, geht man sie noch einer mit dem Kunden durch und favorisiert die Suchmaschinen Keywords.
Favorisierte Suchmaschinen Keywords für ein Duisburger Autohaus
Neuwagen
Gebrauchtwagen
Duisburg
Auto Werkstatt
Service

Erstellung individueller Seitentitel und Seitenbeschreibungen für SEO Suchmaschinenoptimierung
Die Internetseite des Kunden hat hier 18 Internetseiten. Hiermit eingeschlossen sind auch die Seiten für den 404 Error und die Suchausgabe. Die Aufgabe für die Suchmaschinenoptimierung in Bezug auf Seitentitel und Seitenbeschreibung ist es nun hierfür jede Seite eine individuellen Seitentitel und Seitenbeschreibung zu erstellen. Ich führe hier exemplarisch mal einige Seiten auf.

Individuelle Seiten Titel und Seitenbeschreibungen für Suchmaschinenoptimierung
Startseite
Titel
Auto Hortz in Duisburg-Großenbaum: Ihr Autohaus für Neuwagen und Gebrauchtwagen mit Werkstatt-Service.
Beschreibung
Wir führen Neuwagen von Audi, VW Volkswagen, ŠKODA und SEAT sowie Gebrauchtwagen aller Marken inklusive Werkstatt-Service.

Kontakt
Titel
Kontakte für Neuwagen, Gebrauchtwagen und Werkstatt-Service in Duisburg.
Beschreibung
Sie möchten einen Neuwagen oder Gebrauchtwagen kaufen oder suchen eine Auto-Werkstatt? Nehmen Sie Kontakt zu uns auf.

Service
Titel
Werkstatt-Service für Ihren Neuwagen oder Gebrauchtwagen direkt in Duisburg.
Beschreibung
Unser Team in Duisburg-Großenbaum verfügt über eine langjährige Werkstatt-Erfahrung für Neuwagen und Gebrauchtwagen.

Diese drei Seiten haben jetzt individuelle Suchmaschinen Seitentitel und Suchmaschinen Seitenbeschreibungen, die auch von der Beschreibung her zu dem Inhalt der jeweiligen Seite passen. Man kann ja auch ein wenig variieren, indem man auf anderen Seiten den Begriff „aus Duisburg“ verwendet, oder den Stadtteil hinzufügt. Wichtig ist auch das der Hinweis auf Duisburg nicht immer am Ende, sondern auch mal im mittleren Teil ist. Seitentitel und Seitenbeschreibungen dürfen sich bei der Suchmaschinen Optimierung nicht zu stark wiederholen. Diese Gefahr besteht jedoch immer, wenn man hier Keywords stark nach vorne bringen möchte. Das kann man mithilfe der Google Webmaster Tools später kontrollieren.

Wenn man die individuellen Seitentitel und Seitenbeschreibungen für die Suchmaschinenoptimierung in Typo3 einflegt ist folgendes zu beachten. Der ausführliche Seitentitel wird unter den Seiteneigenschaften unter Seitentitel ein gepflegt Und gleichzeitig der bestehende Navigationstitel als „Alternativer Navigationstitel“ eingepflegt, damit die einzelnen Navigationspunlte erhalten bleiben.
Das Ganze hat aber einen negativen Effekt im Typo3 Backend. Der Seitenbaum gibt die Seitentitel aus und würde dadurch extrem unübersichtlich. Hier ist es also nötig eine Anpassung vorzunehmen. Typo3 muss gesagt werden, da? der alternative Seitentitel beziehungsweise NavTitle Für den Seitenbaum Verwendet werden soll.

Kostenlose Bilder Typo3 Duisburg Suchmaschinen Optimierung SEO

Typo3 Conditions: Pageid PID größer oder kleiner als

Veröffentlicht am von
Webdesign mit Typo3 aus Duisburg

Webdesign mit Typo3 aus Duisburg

Typo3 condition match if pageid PID is higher value
[globalVar = TSFE:id > 10]

Typo3 condition match if pageid PID is lower value
[globalVar = TSFE:id < 10]

Für eine Abfrage in Typoscript nach der größe der Pageid PID kann man die oben angegebenen Code Snippets nutzen.

Typo3 Conditions: Lokale IP-Adresse 192.168.* erkennen

Veröffentlicht am von
Webdesign mit Typo3 aus Duisburg

Webdesign mit Typo3 aus Duisburg

Typo3 Condition to match local ip address
[globalString = ENV:REMOTE_ADDR = 192.168.*]

Wenn man eine Abfrage nach dem lokalen Netzwerk in TS – TypoScript eines Typo3 Templates einfügen möchte kann man das, wie oben gezeigt, einfügen. Dadurch kann man beispielsweise einen Hinwies auf eine lokale Entwicklungsumgebung ausgeben, oder bestimmte Funktionen, wie ein Reporting Tracking ausschalten.