webtech

Animal’s Hair est une société fictive créée pour les besoins du cours « Technologies du Web ».  Tout d’abord active dans le domaine de l’entretien du pelage des animaux, elle a ensuite étoffé son offre en proposant une gamme de produits dédiés au soin des onglons. Finalement, elle s’est lancée dans une service de suivi personnalisé, avec des conseils d’experts.

Le style du site est basé sur le thème « Naturelle ». La page d’accueil contient un en-tête principal, avec le nom de la société et un slogan. S’en suit une courte description de la société et des prestations proposées, ainsi que quelques liens. Une barre de menu présente tout au long du site permet d’accéder aux différentes pages. Quelques modifications ont en outre été apportées au thème principal, directement dans le code.

La page « Produits » permet au client d’avoir un aperçu de la gamme de produits proposée par Animal’s Hair. Elle liste les différentes catégories d’articles vendus et propose des liens vers ceux-ci. On remarquera aussi la présence d’une barre latérale avec une zone de recherche, un calendrier, ainsi qu’une liste de toutes les pages du site. Cette dernière est insérée sur tout le site, sauf sur les pages d’accueil et de contact. Bien que ce site n’ait qu’un but didactique, on pourrait encore étoffer la description des différents produits pour aller plus loin.

La section « Conseil » permet au visiteur de s’inscrire au service de conseil proposé par Animal’s Hair, à l’aide d’un lien vers la page « Contact ». Elle propose aussi différentes vidéos didactiques.

La page « A propos de nous » décrit en détail la société et permet d’accéder aux pages « Collaborateurs » et « Site ». Cette dernière contient en outre une carte permettant l’accès au siège et au magasin d’Animal’s Hair, et a été créée à l’aide du plugin Google Map Embed.

Finalement, une page « Contact » permet au visiteur de contacter Animal’s Hair en cas de question, pour passer commande ou pour s’inscrire au service de conseil. Le formulaire a été réalisé avec le plugin « Contact Form 7 ».

Du fait que je me marie dans le courant de l’été je me suis dis qu’il était intéressant de faire un site de mariage. Sur celui-ci les invité/es peuvent s’informer, nous contacter mais surtout confirmer leur présence.

J’ai créer une page d’accueil, une du programme de la journée et une page de contact. Sur la page d’accueil j’ai insérer un compte à rebours qui inclut une part de JavaScript.

Au fond de la page d’accueil il y a la possibilité de confirmer sa présence ou d’aller à la page suivante.

Lorsque une personne confirme sa présence elle a également la possibilité de confirmer la présence de 4 personnes supplémentaires. Une adresse mail est demandé. La confirmation m’est transmise sur ma boîte mail.

Programme

Sur la page du programme, les personnes ont un court aperçu du déroulement de la journée. Il y a également une carte google map au fond de la page. Cette dernière indique le lieu exact des différents emplacements.

Contact

Sur la page de contact chaque personne à la possibilité de nous contacter via E-mail, Messenger ou Instagram. Elles peuvent aussi contacter 3 nos Maîtres de cérémonies dont les informations personnelles sont sur la page d’accueil.

Die fiktive Firma „Green Hoppers“ verkauft in Ihrem Webshop Insekten als Nahrungsmittel. Die Website wurde mit dem Plugin „WooCommerce“ erstellt, dass sich bei Shop-Betreibern grosser Beliebtheit erfreut: 28% aller Webshops wurden mit WooCommerce gebaut. Das Erstellen geht relativ leicht, da bereits der ganze Shop/Warenkorb/Kassen-Teil zur Verfügung gestellt wird. Das Plugin „Jetpack“ wird gleich mitinstalliert. Zu tun geben dann „nur“ noch das Erstellen der Produkte und der generelle Aufbau der Seite.

Die Website besteht momentan aus einer Willkommens-Seite, wo unter dem Willkommen-Banner sofort die Produkte präsentiert werden. Dank der grossen Heuschrecke im Hintergrund weiss der potentielle Kunde gleich um was es geht…

Im Shop gibt es momentan diese drei Produkte, in den Kategorien „verarbeitet“ bzw. „unverarbeitet“. Wie links bei den „Grillen“ zu sehen ist, können Angebote erstellt werden, wo beim Erstellen jeweils nur der Angebotszeitraum und der Angebotspreis angegeben werden müssen, der Rest wird vom Plugin übernommen.
Im Menü auf der rechten Seite, kann der Benutzer zu den Blogbeiträgen wechseln, wo es momentan die beiden Kategorien „Allgemein“ und „Rezepte“ gibt.

Auf der Produktseite wird das Produkt näher beschrieben. Mittels der Links bei „Kategorie“ und „Schlüsselworte“ gelangt der Kunde zu weiteren Produkten. Unterhalb (hier nicht sichtbar) gibt es Platz für eine detailliertere Beschreibung wo Nährwert/Verwendung/Herkunft etc. angegeben werden können, sowie ein Kommentarbereich.

Zu einem guten Webshop gehört natürlich auch ein Blog, wo allgemeine Themen im Zusammenhang mit den Produkten behandelt werden. Beim Green-Hoppers-Shop ergibt es Sinn, regelmässig Rezepte zu veröffentlichen, um die Kunden zu inspirieren und natürlich die Verkäufe anzukurbeln… Auch neu hinzugefügte Produkte könnten im Blog präsentiert werden, um entsprechend Aufmerksamkeit auf diese zu lenken. Auch bei jedem einzelnen Blog-Posting gibt es eine Kommentarfunktion.

Es gibt zwar schon einen Warenkorb und eine Kasse, doch es fehlen noch die Zahlungsmethoden um einen „richtigen“ Shop daraus zu machen. Um den Shop zu vervollständigen bräuchte es dann, abgesehen vom Verarbeiten, Lagern, Verpacken und Versenden der Insektenprodukte, eine Datenbank für das Sortiment, den Versand und die Kunden.

WooCommerce soll ein flexibles und vielseitiges Plugin sein, mit dem auch mehrsprachige Shops aufgebaut werden können. Allerdings ist es wohl nicht besonders einsteigerfreundlich und kostet natürlich auch etwas (wie auch Jetpack), wenn man die volle Funktionalität haben will.

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.

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

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.

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

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

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

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.

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

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 :

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

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.

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é.

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.

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.

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.

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:

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.

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.

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.

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.

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