Archiv der Kategorie: Einstieg in die Internet Programmierung

Wie erstelle ich meine erste eigene Internet Seite und was brauche ich alles dafür? Ich versuche User jeden Alters dazu zu motivieren sich mit dem spannenden Thema Webentwicklung auseinander zu setzen. Der Arbeitsmarkt ist derzeit sehr gut und wird auch in Zukunft vielen interessierten die Chance bieten eine Arbeit in diesem Bereich zu finden.

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.

Einstieg in die Internetprogrammierung: Responsive Webdesign – was ist das?

Veröffentlicht am von
Responsive Design Webdesign Duisburg Quelle mediaqueri.es

Responsive Design Webdesign Duisburg Quelle mediaqueri.es

Responsive Webdesign ist ein Begriff der zur Zeit verstärkt diskutiert wird. Ich werde in den nächsten Wochen vermehrt über das Thema bloggen und das hier ist der erste Artikel zu der Serie “Responsive Webdesign”.

Responsive Webdesign – Was ist das?
Ein Responsive Webdesign passt sie an die jeweilige Größe des Ausgabegerätes an. Das sind heute Fernseher, Desktop PC, Notebooks, Tablets und Smartphones. Derzeit stark im Fokus ist Responsive Webdesign für Smartphones. Man spricht hier von einer mobilen Webseite. Responsive Design bezieht sich allerdings bei dem Entwurf der Layouts auf 4 Formate. Das sieht man sehr gut in den angehängten Beispielen.

Responsive Webdesign – Wie geht das technisch?
Grundsätzlich wird die große Ansicht einer Seite als HTML und CSS umgesetzt und dann je nach Auflösung zusätzliche CSS Regeln geladen. So werden beispielsweise Webseiten Bereiche, wie eine Sidebar auf der rechten Seite ausgeblendet oder Webdesign Navigationen nur vertikal und nicht mehr horizontal abgebildet. Das kann über mediaqueries oder mit Hilfe von JavaScript realisiert werden. Es sollte dem Kunden jedoch immer möglich sein die große Ansicht auch auf einem kleinen Gerät zu laden, wenn er das möchte. So kommt er auch an alle Informationen, die auf der kleineren Ansicht eventuell nicht nur erreichen sind.

Responsive Webdesign – Was bringt es dem Kunden?
Ein Kunde entspricht einer bestimmten Zielgruppe und sucht sein eigenes Ziel auf der Internetseite. Nehmen wir als Beispiel die Internetseite eines Restaurants. Typische Navigationspunkte könnten hier sein:

  • Bilder von den Räumen
  • Reservierung
  • Veranstaltungen
  • Öffnungszeiten
  • Facebook Chronik
  • Speisekarten
  • Specials

Das ist jetzt exemplarisch. Wichtig ist zu verstehen das ein Webuser eher stöbert und auf Bilder aus ist, während ein mobiler User konkrete Informationen möchte. Und hier liegt der Teufel dann auch schon im Detail. Man braucht ein Webdesign Konzept für die mobile Ansicht einer Webseite. Für den mobilen User sind Kontakt, Adresse und Anfahrt viel wichtiger, als eine Bildergalerie und eine 1,5 MB große Speisekarte im PDF Format.

Responsive Webdesign – Was bringt es dem Seitenbetreiber
Die Besuchergruppe mit Tablets und Smartphones macht zur Zeit eine sehr starke Wachstumsphase durch. Allerdings sind im Bereich Smartphones APPs immer noch führend. Vorallem weil sie über zahlreiche Funktionen, wie z.B. eine GPS Ortung verfügen und deshalb viel spezifischer sind. Aber Responsive Design ist gewaltig auf dem Vormarsch und es bringt Kunden und Unternehmer enger zusammen, wenn das Konzept stimmt.

Weiterführende Links zu Responsive Webdesign
Wikipedia Seite zu Responsive Webdesign
http://de.wikipedia.org/wiki/Responsive_Webdesign
Referenzen zum Thema Responsive Design
http://www.mediaqueri.es

WordPress Bildergalerie zu Responsive Webdesign

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 Snippet: Klammern auf der MAC Tastatur

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

Mac Book Pro Shortcut Tastatur Layout Retina

Mac Tastatur Keyboard shortcuts für Klammern
Alt + 5: [ -> MAC eckige Klammer auf
Alt + 6: ] -> MAC eckige Klammer zu
Alt + 7: | -> MAC Pipe
Alt + 8: { -> MAC geschweifte Klammer auf
Alt + 9: } -> MAC geschweifte Klammer zu

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