Liftgaudi

Die Website, welche wir erstellt haben gehört der Firma Liftgaudi. Ziel der Firma ist es, Getränke mithilfe einer mobilen Bar, direkt an der Talstation eines Skiliftes zu verkaufen. Somit werden sowohl die Wartezeiten als auch die Fahrt zu einem unvergesslichen Erlebnis.

Die Website ist auf sieben einzelnen Seiten Aufgebaut.

Home

Auf der Seite „Home“ ist unsere fiktive Firma kurz beschrieben.

Aktuell

Auf der Seite „Aktuell“ werden aktuelle Ereignisse publiziert.

Angebot

Die Seite „Angebot“ führt zu drei weiteren Seiten weiter. Sowohl im Menu als auch über die Schrift neben den Bildern gelangt man zu den spezifischen Seiten, auf welchen das Angebot genauer beschrieben ist. (Spirituosen, Biere und Softgetränke)

Standort

Der Standort wird via Google Maps angezeigt. Auf My Maps kann der Standort angepasst werden. Er wird anschliessend automatisch auf der Karte aktualisiert.


Philosophie

Dieser Abschnitt der Website enthält die wichtigsten Grundsätze, welche ausschlaggebend für die Gründung des Unternehmens waren.

Team

Auf dieser Seite sind die Mitwirkenden beschrieben.

Rückmeldungen

Dieser Abschnitt besteht aus einem Beitrag und dient dem kommentieren der Firma durch Besucher. Anschliessend kann die Administration entscheiden, ob der Kommentar auf der Seite publiziert wird.


Link zur Website:

Helikopterflug

Die Idee dieser Website ist es den Menschen einen Helikopterflug über die Alpen schmackhaft zu machen. Direkt buchen kann man diesen noch nicht.

Die Startseite meiner Webpage

Hauptsächlich habe ich mit dem PlugIn ELEMENTO gearbeitet um die Seiten zu gestalten. Auf der Startseite habe ich ein Video und den Titel schattiert, alles mit Elemento.

Der Helikopter

Die Seite Helikopter wurde auch mit Elemento gestaltet. Die Sterne sind ein Effekt und der Ordner unten mit Modell, Sicherheit.


Kontaktseite

Die Kontaktseite habe ich mit WordPress und Jetpack erstellt. Die Google Maps erscheint in einem neuen Fenster, wenn man auf die Adresse klickt.

Preistabelle

Die Preistabelle wurde erstellt mit Elemento und einem HTML-Code via Elemento.

Fotogallerie
Beitag

Beitrag von meinem erfundenen Redakteur. Erstellt mit Elemento und auch die Seite ist eine Vorlage von Elemento.

Mein Footer habe ich via WordPress PHP- Footer bearbeitet.

Das Theme der ganzen Website ist eine Vorlage von Elemento.

L’énergie solaire

Notre site comprend plusieurs pages, dans le menu on retrouve les pages :

  • Accueil
  • Panneaux solaires
    • Cellules photovoltaïques
  • Centrales photovoltaïques de Payerne
    • Contexte historique
    • Caractéristiques
    • Production et rentabilité
    • Rendement de l’installation
  • Solar Payerne
  • Potentiel énergétique
  • Contact
Certaines pages du menu, possède des pages secondaires comme la page „centrale photovoltaïque de Payerne“

Toutes les pages possède environ la même structure, c’est à dire :

  • Au centre :
    • Le logo (inventé) en haut à gauche
    • Le menu avec les sous menus
    • La photo du champs solaire de Payerne
    • Un texte en rapport avec la page citée
    • Un texte explicatif du site
    • Une barre de recherche
    • Les contacts
    • Une vidéo explicative sur les panneaux solaires
  • Barre latérale :
    • Une rubrique „le saviez-vous ?“
    • Une galerie photo, avec des photos du champs solaire pris de différents angles
    • Un calendrier à disposition qui avertit des événements à venir
  • Pied de page :
    • Un lien pour retourner en haut de page
    • Un lien pour des informations complémentaires sur l’énergie
    • Une horloge
    • Un menu de différents réseaux sociaux

Les différentes pages :

Page d’accueil
Panneaux solaires
Cellules photovoltaïques
Contexte historique
caractéristiques
Production et rentabilité
Rendement de l’installation
Potentiel énergétique
Contact

Une dernière partie avec un plugin qui permet de voir les statistiques de visite du site :

Une partie utilisateurs avec :

  • 2 administrateurs
  • 1 auteurs

Le bas de page

Dessert Blog

Einen Blog von Grund auf mittels WordPress erstellen? Wie geht das und welche Erfahrungen zwei Studenten der HAFL Zollikofen dabei gemacht haben, liest ihr hier!

Der Auftrag im Modul BUUx442 war klar: Erstellt einen Blog mithilfe von WordPress, präsentiert eure Seite und verfasst auf hasn.ch einen kurzen Beitrag über eure Seite.

Das Thema ist schnell gewählt; unser Blog dreht sich um die süsseste Sache der Welt: das Dessert.

Zuerst haben wir eine Vorlage gewählt: Baker’s Lite. Die Vorlage zeigt ebenfalls eine süsse Speise und sticht so sofort ins Auge. Für unseren Blog haben wir drei Desserts fokussiert, damit uns genügen Zeit bleibt, diese schön in die Webseite zu integrieren. WordPress ist nicht selbsterklärend, doch mit ein wenig Hingabe wird einem schnell bewusst, wie der hase läuft. Es wird ein Beitrag verfasst, eine Seite mit generellen Informationen erstellt, im Menü geordnet und zum Schluss noch schön formatiert. Um gewisse Kleinigkeiten zu ändern, kann man sogar im CSS Editor Änderungen vornehmen.

Kommen wir nun zu unserem Blog selbst.

Auf der Startseite sieht man die letzten fünf Beiträge. Oder besser gesagt: man würde die aktuellsten fünf sehen, wenn so viele verfasst worden wären.

Auf der rechten Seite sind folgende fünf Widgets, die ständig angezeigt werden:

  • Suchfunktion
  • Neueste Beiträge
  • Neueste Kommentare
  • Archiv
  • Ein aktuelles Video

In der Fusszeile sind die Kontaktdaten und die Funktion, sich den Blog zu abonnieren.

Die Seite verfügt auch noch über eine Übersicht mit allen veröffentlichten Rezepten und eine Vorstellseite Über uns.

Voilà, unser Dessert Blog 🙂

Fabio Ferrara und Joël Wehrli, Zollikofen, Februar 2019.

Album photographie

Description du site

Ce site a pour but de présenter différentes photos que j’ai faites.

Une première page „description“ donne les informations concernant le matériel photo que j’utilise.

Quatre autres pages (printemps, été, automne et hiver) regroupent les photos par saison. Chaque photo est commentée avec quelque informations techniques.

Exemple de présentation de la page hiver et de la galerie photo.

Dans la barre latérale droite, on trouve une galerie photo ainsi qu’une carte Google Maps permettant de localiser les différents lieux où le photos ont été prises.

Finalement le pied de page du thème à été modifié en y ajoutant quelque lignes de code en mode éditeur. Le footer.php a donc été modifié.

Menu déroulant permettant d’accéder au différentes pages.

Galerie photo

La galerie regroupe toute les photos présentes sur le site. En cliquant dessus, les photos s’ouvrent en plein écran.

Carte Google Maps

La carte Google Maps est disponible dans la colonne de droite de chaque page. Des puces localisant chaque lieu ou les photos ont été réalisées ont été définies afin de pouvoir localiser ces endroits. Le Plugin WP Google Maps a été utilisé.

Lors du chargement de la page, un message d’erreur s’affiche sur la carte. Ce dernier dit: „Impossible de charger Google Maps correctement sur cette page„. Ce message est du au fait que pour utiliser les données Google Maps, il faut obtenir un clé API qui est payante. Il est tout de même possible de visualiser la carte en cliquant sur OK.

Fenêtre Google Maps et message d’erreur.

Pied de page

Le pied de page initial contenait uniquement le copyright de WordPress. Le code footer.php a donc été modifié en mode éditeur.

Le code surligné est ce qui a été ajouté au php du pied de page footer.php.

A la place du copyright en place, mon nom a été ajouté. De plus, un lien permettant de me contacter directement par mail est disponible. Finalement, la date et l’heure sont affichées.

Illustration du pied de page du site. Si l’on clique sur le lien, une fenêtre permettant d’envoyer un mail à mon adresse s’ouvre automatiquement.

Food Trends 2019

Die fiktive Website “Food Trends 2019” beschreibt jährlich die jeweils interessantesten neuen Food Trends.

Der Header der Webseite muss deshalb jährlich mit der aktuellen Jahreszahl angepasst werden – Trends der vorigen Jahre stehen den Nutzern weiterhin im „Archiv“ zur Verfügung.

Auf der Startseite hat der Nutzer die Gelegenheit seine Kommentare zu den Beiträgen oder zur Webseite im Allgemeinen zu hinterlassen.

Unter „Trends“ können über ein Unter-Menü die einzelnen beschriebenen Trends angesteuert werden – hier wird beispielsweise näher auf den Trend „Pflanzliche Proteine“ eingegangen:

Unter dem Menü „Über Uns“ wird das Food Trends Team kurz vorgestellt.

Unter „Newsletter“ können die Nutzer einen Newsletter abonnieren, der sie jeweils über die neusten Trends respektive deren Entwicklung informiert und neue Produkte beschreibt und/oder empfiehlt.

Unter Kontakte schliesslich, sind Informationen zum Firmen Hauptsitz des Food Trend Teams zu finden.

Der Newsletter Abonnenten-Service und die Anzeige der Adresse des Firmen Hauptsitzes auf Google Maps wurden mit den folgenden beiden Plugins erstellt:

Blochpferde – Commerce de chevaux

Avec WordPress, l’idée était de créer un site pour un marchand de chevaux. Des boxes sont également à louer dans cette écurie.
Sur ce site, les gens attendent de trouver : le lieu, le contact, les chevaux à vendre avec les différentes informations, les résultats faits en concours, et surtout des photos.
Les différents onglets du menu représentent donc ces différentes attentes.

Page d’accueil

Les chevaux à vendre sont présentés sous forme d’article avec des photos. Les gens peuvent y laisser des commentaires pour avoir des informations en plus par exemple.

Chevaux à vendre

Pour permettre aux visiteurs d’avoir plus d’impressions par rapport aux chevaux, une galerie a été créée. Les photos défilent toutes seules en continu, mais il est également possible de les agrandir et de les passer soi-même.

Galerie

Sur la page des boxes à louer, des photos de l’écurie forme également une galerie. Dans cette dernière, on peut directement voir toutes les photos avec une petite légende. Mais il est également possible de les agrandir et de les passer comme pour la galerie des chevaux.

Boxes à louer

Vous pouvez consultez directement la page internet en cliquant sur le lien suivant: https://ineslamo.myhostpoint.ch/wordpress/

Musikgesellschaft Gurzelen

Im Modul Webtech BUUx442 wurde mit Worpress eine Webseite zu einem beliebigen Thema erstellt. Ich habe eine Webseite für meinen Musikverein erstellt. Wichtig war mir, einen internen Bereich für die Mitglieder zu erstellen und ein Platzreservationssystem für unsere Konzerte einzubetten.

Das Foto auf der Frontseite dient als Header und wird bei jeder Seite angezeigt.

Ebenfalls auf der Frontseite befindet sich eine kurze Begrüssung. Im Startseitenabschnitt „Aktuell“ informieren wir kurz über unsere aktuellen Tätigkeiten, zudem ist hier der Link zur Online Platzreservation:

Startseite

Auf der Seite „Über uns“ werden Dirigent, Mitglieder, Vorstand & Musikkommission vorgestellt. Zudem findet man einen kurzen Abschnitt über unsere Geschichte.

Über uns

Im Bereich Nachwuchsausbildung befinden sich Informationen zu unserem Nachwuchs, unserem Ausbildungskonzept und weiterführende Links.

Nachwuchsausbildung

Im Bereich Platzreservation können Sitzplätze für unser Konzert & Theater reserviert werden. Die Funktion wurde mit dem Plug in „Book a place“ erstellt und mittels Shortcode in der Seite eingebettet. Leider dauert das Aktualisieren nach der Platzwahl ziemlich lange. Zudem ist das erstellen des Schemes (Saal / Sitzplatzanordnung) sehr zeitaufwendig: es muss jeder Platz einzeln markiert und mit einem Namen oder Nummer versehen werden.

Platzreservation

Der interne Bereich ist passwortgeschütz. Hier sind Dokumente abgelegt, welche nur für Mitglieder bestimmt sind.

Im Footer sind die nächsten Anlässe der MG Gurzelen zu sehen.

MGG intern und Footer

Im Bereich „Kontakt“ ist sowohl die Postadresse als auch die Mailadresse der Präsidentin zu finden.

Restaurant BEIZ by ChampoudTrautweiler

Aus der persönlichen Ansicht der Autoren, dass die meisten kleineren Gastrobetriebe eine schreckliche Website unterhalten, entstand der Versuch, eine passendere und einfache Alternative für diese Betriebe zu schaffen.

Wichtig waren dabei folgende Features:

Zum einen war es uns wichtig eine statische Seite für ein kurzes Portrait zu schaffen. Diese Seite stellt zugleich die Startseite dar.

Die News-Seite soll zusätzlich die Möglichkeit bieten, Informationen schnell und einfach im Internetauftritt einzubinden. Dies ist somit die Beitragsseite, wodurch nur noch Beiträge geschrieben werden müssen.

Des weiteren gibt es eine kleine Galerie, welche mit dem entsprechenden Jetpack-Plugin erstellt wurde.

Da die restlichen Themen für die Gastro-Seite zusammengefasst werden können, haben wir uns hier für den Begriff „für Gäste“ und ein Drop-Down-Menu entschieden. So konnte ein weiteres Feature in die Website eingebaut werden.

Unter „Für Gäste“ befinden sich weitere Seiten mit Hilfreichen Tool für Gastgeben und Gäste. Mit dem Reservations-Plugin können Gäste direkt ihren liebsten Tisch reservieren und der Gasthof erhält eine Mail mit den Reservationsdaten.

Ausserdem können Gäste mit einem Formular-Plugin direkt eine Eventanfrage an den Gasthof schicken, worauf das Team reagieren kann.

Zu guter letzt gibt es natürlich noch ein Gästebuch, worin die glücklichen Besucher der BEIZ ihre Erfahrungen teilen können. Hier wäre auch ein Plugin zu TripAdvisor eine gelungene Alternative. Die Social-Media Einbettung wurde allgemein etwas vernachlässigt, damit die Seite für GastgeberInnen jeder Generation funktioniert.

Wir haben ausserdem ein kleines Footer-Menü generiert, welches die Punkte „Anfahrt“ und „Kontakt“ enthält. Wobei wir bei „Anfahrt“ das WP-Maps Plugin eingebettet haben.

Décorama

Décorama ist die Webseite zum gleichnamigen Möbelgeschäft an der berühmten Champs-Élysées. Hier werden nach altem Handwerk die traditionellen französische Möbel mit grösster Sorgfalt hergestellt.
Bewusst haben wir uns für das schlicht gehaltene Design «Naturelle» entschieden, damit sich auch die ungeübten User zurechtfinden.

Startseite von Décorama

Konzept der Webseite

Das Ziel der Webseite «Décorama» ist es antike Möbel zu verkaufen, die das Unternehmen selbst herstellt. Die Kundschaft besteht vorwiegend aus älteren Leuten der oberen sozialen Schicht.
Die Seite ist einfach aufgebaut, besitzt aber dennoch einen edlen Touch. Raffinierte Bilder im Head im Zusammenspiel mit den einzelnen Seiten sollen die Kundschaft zum Kauf anregen. In der einstufigen Header-Navigation sind einerseits Informationen zum Unternehmen zu finden als auch die exklusiven Möbel, welche zur Zeit im Angebot sind.

Auf der Startseite sind auch Widgets wie «Suche» und die heute standardmässigen «Social Media Kanäle» platziert. Zudem ist die Telefonnummer auf den ersten Blick ersichtlich.

Head mit einstufiger Navigation

Plugins

Für die Darstellung der Bilder wird das Plugin «Nextgen Gallery» verwendet. Der Vorteil besteht darin, dass alle Bilder in der gleichen Grösse und in Form eines Rasters platziert sind.

Die Einbindung von Intergeo Maps hilft den Nutzern den Standort des Geschäfts zu lokalisieren.

Enbindung einer Karte in der Sidebar

WPforms unterstützt das Erstellen eines Kontaktformulars und erleichtert damit den Nutzern mit uns Kontakt aufzunehmen.

Formular für eine schnelle Kontaktaufnahme

Zur optischen Wiedererkennung wurde ein Webseiten-Symbol verwendet.