Marketing https://www.mediaart-jena.de Media Mon, 20 Jul 2020 09:55:00 +0000 de-DE hourly 1 https://wordpress.org/?v=5.2.7 Responsive Web- und Desktop-Entwicklung mit Flutter https://www.mediaart-jena.de/index.php/2020/09/07/responsive-web-und-desktop-entwicklung-mit-flutter/ Mon, 07 Sep 2020 00:32:38 +0000 https://www.mediaart-jena.de/?p=173 Dieses Tutorial ist keine Einführung in Flutter. Es gibt viele Artikel, Videos und verschiedene Bücher online mit einfachen Einführungen, die Ihnen helfen, die Grundlagen von Flutter zu erlernen. Stattdessen werden wir die folgenden zwei Ziele behandeln: Der aktuelle Stand der nicht mobilen Entwicklung von Flutter und wie Sie Flutter-Code im Browser, auf einem Desktop- oder […]

The post Responsive Web- und Desktop-Entwicklung mit Flutter appeared first on Marketing.

]]>
Dieses Tutorial ist keine Einführung in Flutter. Es gibt viele Artikel, Videos und verschiedene Bücher online mit einfachen Einführungen, die Ihnen helfen, die Grundlagen von Flutter zu erlernen. Stattdessen werden wir die folgenden zwei Ziele behandeln:

  1. Der aktuelle Stand der nicht mobilen Entwicklung von Flutter und wie Sie Flutter-Code im Browser, auf einem Desktop- oder Laptop-Computer ausführen können;
  2. So erstellen Sie reaktionsschnelle Apps mit Flutter, damit Sie die Leistung – insbesondere als Webframework – vollständig anzeigen und mit einem Hinweis zum Routing basierend auf der URL abschließen können.

Lass uns loslegen!

Was Ist Flattern, Warum Ist Es Wichtig, Was Hat Es Sich Entwickelt, Wohin Es Geht?

Flutter ist Googles neuestes Framework für die App-Entwicklung. Google sieht es als umfassend an: Es ermöglicht die Ausführung desselben Codes auf Smartphones aller Marken, auf Tablets sowie auf Desktop- und Laptops als native Apps oder als Webseiten.

Es ist ein sehr ehrgeiziges Projekt, aber Google war bisher unglaublich erfolgreich, insbesondere in zweierlei Hinsicht: bei der Schaffung eines wirklich plattformunabhängigen Frameworks für native Android- und iOS-Apps, das hervorragend funktioniert und vollständig für die Produktion bereit ist, und bei der Schaffung einer beeindruckenden Front -end Web Framework, das 100% des Codes mit einer kompatiblen Flutter App teilen kann.

Im nächsten Abschnitt werden wir sehen, was die App kompatibel macht und wie der Stand der nicht-mobilen Flutter-Entwicklung ab sofort ist.

Nicht Mobile Entwicklung Mit Flattern

Die nicht-mobile Entwicklung mit Flutter wurde erstmals auf Google I / O 2019 in erheblichem Umfang veröffentlicht. In diesem Abschnitt wird erläutert, wie und wann sie funktioniert.

SO AKTIVIEREN SIE DIE WEB- UND DESKTOP-ENTWICKLUNG

Um die Webentwicklung zu aktivieren, müssen Sie sich zuerst im Beta-Kanal von Flutter befinden. Es gibt zwei Möglichkeiten, um an diesen Punkt zu gelangen:

  • Installieren Sie Flutter direkt auf dem Beta-Kanal, indem Sie die entsprechende neueste Beta-Version aus dem SDK-Archiv herunterladen .
  • Wenn Sie Flutter bereits installiert haben, wechseln Sie mit zum Beta-Kanal $ flutter channel betaund führen Sie den Wechsel selbst durch, indem Sie Ihre Flutter-Version (die sich tatsächlich git pullim Flutter-Installationsordner befindet) mit aktualisieren $ flutter upgrade.

Danach können Sie Folgendes ausführen:

$ flutter config –enable-web

Kopieren

Die Desktop-Unterstützung ist viel experimenteller, insbesondere aufgrund des Mangels an Tools für Linux und Windows, was die Plugin-Entwicklung besonders schwierig macht, und aufgrund der Tatsache, dass die dafür verwendeten APIs für die Verwendung als Proof-of-Concept vorgesehen sind und nicht für Produktion. Dies ist anders als bei der Webentwicklung, bei der der bewährte dart2js-Compiler für Release-Builds verwendet wird, die nicht einmal für native Windows- und Linux-Desktop-Apps unterstützt werden.

Hinweis : Die Unterstützung für macOS ist etwas besser als die Unterstützung für Windows und Linux, aber immer noch nicht so gut wie die Unterstützung für das Web und bei weitem nicht so gut wie die vollständige Unterstützung für mobile Plattformen.

Um die Unterstützung für die Desktop-Entwicklung zu aktivieren, müssen Sie zum masterRelease-Kanal wechseln, indem Sie die zuvor für den betaKanal beschriebenen Schritte ausführen . Führen Sie dann die folgenden durch den Austausch <OS_NAME>mit entweder linux, windowsoder macos:

$ flutter config –enable-<OS_NAME>-desktop

Kopieren

Wenn Sie an dieser Stelle Probleme mit einem der folgenden Schritte haben, die ich beschreiben werde, weil das Flutter-Tool nicht das tut, was ich sage, sollten Sie folgende Schritte zur Fehlerbehebung ausführen:

  • Ausführen flutter doctor, um nach Problemen zu suchen. Ein Nebeneffekt dieses Flutter-Befehls ist, dass er alle benötigten Tools herunterladen sollte, die er nicht hat.
  • Ausführen flutter upgrade.
  • Schalten Sie es aus und wieder ein. Die alte Antwort des technischen Supports auf den Tier-1-Neustart Ihres Computers ist möglicherweise genau das, was Sie benötigen, um den vollen Reichtum von Flutter nutzen zu können.

AUSFÜHREN UND ERSTELLEN VON FLUTTER-WEB-APPS

Die Unterstützung von Flutter Web ist überhaupt nicht schlecht, und dies spiegelt sich in der einfachen Entwicklung für das Web wider.

Laufen dies…

$ flutter devices

Kopieren

… Sollte sofort einen Eintrag für so etwas anzeigen:

Web Server • web-server • web-javascript • Flutter Tools

Kopieren

Darüber hinaus sollte das Ausführen des Chrome-Browsers dazu führen, dass Flutter auch einen Eintrag dafür anzeigt. Laufen flutter runauf einem kompatiblen Flutter – Projekt (mehr dazu später) , wenn der einzige „angeschlossene Gerät“ zeigt nach oben ist der Webserver Flutter verursachen einen Web – Server auf Start localhost:<RANDOM_PORT>, die es Ihnen erlaubt, Ihre Flutter Web – App Zugriff von einem beliebigen Browser.

Wenn Sie Chrome installiert haben, es jedoch nicht angezeigt wird, müssen Sie die CHROME_EXECUTABLEUmgebungsvariable auf den Pfad zur ausführbaren Chrome-Datei festlegen .

AUSFÜHREN UND ERSTELLEN VON FLUTTER DESKTOP APPS

Nachdem Sie die Flutter-Desktopunterstützung aktiviert haben, können Sie eine Flutter-App nativ auf Ihrer Entwicklungsarbeitsstation ausführen flutter run -d <OS_NAME>und <OS_NAME>durch denselben Wert ersetzen, den Sie beim Aktivieren der Desktopunterstützung verwendet haben. Sie können auch Binärdateien im buildVerzeichnis mit erstellen flutter build <OS_NAME>.

Bevor Sie dies tun können, benötigen Sie jedoch ein Verzeichnis, das enthält, was Flutter für Ihre Plattform erstellen muss. Dies wird automatisch erstellt, wenn Sie ein neues Projekt erstellen, aber Sie müssen es für ein vorhandenes Projekt mit erstellen flutter create .. Außerdem sind die Linux- und Windows-APIs instabil, sodass Sie sie möglicherweise für diese Plattformen neu generieren müssen, wenn die App nach einem Flutter-Update nicht mehr funktioniert.

WANN IST EINE APP KOMPATIBEL?

Was habe ich die ganze Zeit gemeint, als ich erwähnte, dass eine Flutter-App ein „kompatibles Projekt“ sein muss, damit sie auf dem Desktop oder im Web funktioniert? Einfach gesagt, ich meine, dass es kein Plugin verwenden darf, das keine plattformspezifische Implementierung für die Plattform hat, auf der Sie aufbauen möchten.

Um diesen Punkt für alle absolut klar zu machen und Missverständnisse zu vermeiden, beachten Sie bitte, dass ein Flutter-Plugin ein bestimmtes Flutter-Paket ist , das plattformspezifischen Code enthält, der für die Bereitstellung seiner Funktionen erforderlich ist.

Beispielsweise können Sie das von Google entwickelte url_launcherPaket so oft verwenden, wie Sie möchten (und dies möchten Sie möglicherweise, da das Web auf Hyperlinks basiert).

Ein Beispiel für ein von Google entwickeltes Paket, dessen Verwendung die Webentwicklung ausschließen würde path_provider, ist das, mit dem der lokale Speicherpfad zum Speichern von Dateien abgerufen wird. Dies ist ein Beispiel für ein Paket, das für eine Web-App im Übrigen nicht von Nutzen ist. Wenn Sie es also nicht verwenden können, ist dies kein wirklicher Mist, außer der Tatsache, dass Sie Ihren Code ändern müssen, um es funktioniert im Web, wenn Sie es verwenden.

Sie können beispielsweise das Paket shared_preferences verwenden , das auf HTML localStorageim Web basiert .

Ähnliche Einschränkungen gelten für Desktop-Plattformen: Nur sehr wenige Plugins sind mit Desktop-Plattformen kompatibel, und da dies ein wiederkehrendes Thema ist, muss auf der Desktop-Seite viel mehr daran gearbeitet werden, als auf Flutter für das Web wirklich erforderlich ist.

Erstellen Von Reaktionsschnellen Layouts In Flutter

Aufgrund der oben beschriebenen und der Einfachheit halber gehe ich für den Rest dieses Beitrags davon aus, dass Ihre Zielplattform das Web ist, aber die grundlegenden Konzepte gelten auch für die Desktop-Entwicklung.

Die Unterstützung des Webs hat Vorteile und Verantwortlichkeiten. Wenn Sie gezwungen sind, unterschiedliche Bildschirmgrößen zu unterstützen, klingt dies möglicherweise nach einem Nachteil. Wenn Sie jedoch die App in den Webbrowsern ausführen, können Sie sehr einfach sehen, wie Ihre App auf Bildschirmen mit unterschiedlichen Größen und Seitenverhältnissen aussieht, ohne separat ausgeführt werden zu müssen Emulatoren für mobile Geräte.

Sprechen wir jetzt über Code. Wie können Sie Ihre App reaktionsschnell machen?

Es gibt zwei Perspektiven, aus denen diese Analyse durchgeführt wird:

  1. “Welche Widgets verwende ich oder kann ich verwenden, die sich an Bildschirme unterschiedlicher Größe anpassen können oder sollten?”
  2. “Wie kann ich Informationen über die Größe des Bildschirms erhalten und wie kann ich sie beim Schreiben von UI-Code verwenden?”

Wir werden die erste Frage später beantworten. Lassen Sie uns zunächst über Letzteres sprechen, da es sehr einfach zu handhaben ist und im Mittelpunkt des Problems steht. Es gibt zwei Möglichkeiten, dies zu tun:

  1. Eine Möglichkeit ist , die Informationen von den zu übernehmen MediaQueryDatavon der MediaQueryWurzel InheritedWidget, die im Widget – Baum , um eine Flutter App Arbeit (es ist Teil vorhanden sein muss MaterialApp/WidgetsApp/CupertinoApp), die man bekommen kann, wie jede andere InheritedWidget, mit MediaQuery.of(context), unt sizeEigenschaft, die vom Typ Sizeist und daher zwei widthund heightEigenschaften des Typs hat double.
  2. Der andere Weg ist eine zu verwenden LayoutBuilder, die ein Builder – Widget ist (wie bei einer StreamBuilderoder a FutureBuilder), die an die Pässe builderFunktion (mit dem context) einem BoxConstraintsObjekt , das aufweist minHeight, maxHeight, minWidthund maxWidthEigenschaften.

Hier ist ein Beispiel für ein DartPad, mit dem MediaQueryEinschränkungen abgerufen werden. Der folgende Code lautet:

import ‘package:flutter/material.dart’;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override

  Widget build(context) =>

    MaterialApp(

      home: MyHomePage()

    );

}

class MyHomePage extends StatelessWidget {

  @override

  Widget build(context) =>

    Scaffold(

      body: Center(

        child: Column(

          mainAxisAlignment: MainAxisAlignment.spaceEvenly,

          children: [

            Text(

              “Width: ${MediaQuery.of(context).size.width}”,

              style: Theme.of(context).textTheme.headline4

            ),

            Text(

              “Height: ${MediaQuery.of(context).size.height}”,

              style: Theme.of(context).textTheme.headline4

            )

          ]

       )

     )

   );

}

Kopieren

Und hier ist einer, der dasLayoutBuilder für dasselbe verwendet:

import ‘package:flutter/material.dart’;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override

  Widget build(context) =>

    MaterialApp(

      home: MyHomePage()

    );

}

class MyHomePage extends StatelessWidget {

  @override

  Widget build(context) =>

    Scaffold(

      body: LayoutBuilder(

        builder: (context, constraints) => Center(

          child: Column(

            mainAxisAlignment: MainAxisAlignment.spaceEvenly,

            children: [

              Text(

                “Width: ${constraints.maxWidth}”,

                style: Theme.of(context).textTheme.headline4

              ),

              Text(

                “Height: ${constraints.maxHeight}”,

                style: Theme.of(context).textTheme.headline4

              )

            ]

         )

       )

     )

  );

}

Kopieren

Lassen Sie uns nun darüber nachdenken, welche Widgets sich an die Einschränkungen anpassen können.

Lassen Sie uns zunächst über die verschiedenen Möglichkeiten nachdenken, mehrere Widgets je nach Bildschirmgröße anzuordnen.

Das Widget, das sich am einfachsten anpassen lässt, ist das GridView. Tatsächlich muss für eine GridViewmit dem GridView.extentKonstruktor erstellte Version nicht einmal Ihre Beteiligung reagiert werden, wie Sie in diesem sehr einfachen Beispiel sehen können :

import ‘package:flutter/material.dart’;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override

  Widget build(context) =>

    MaterialApp(

      home: MyHomePage()

    );

}

class MyHomePage extends StatelessWidget {

  final List elements = [

    “Zero”,

    “One”,

    “Two”,

    “Three”,

    “Four”,

    “Five”,

    “Six”,

    “Seven”,

    “Eight”,

    “A Million Billion Trillion”,

    “A much, much longer text that will still fit”

  ];

  @override

  Widget build(context) =>

    Scaffold(

      body: GridView.extent(

        maxCrossAxisExtent: 130.0,

        crossAxisSpacing: 20.0,

        mainAxisSpacing: 20.0,

        children: elements.map((el) => Card(child: Center(child: Padding(padding: EdgeInsets.all(8.0), child: Text(el))))).toList()

      )

   );

}

Kopieren

Sie können Inhalte unterschiedlicher Größe aufnehmen, indem Sie die ändern maxCrossAxisExtent.

Dieses Beispiel diente hauptsächlich dem Zweck, die Existenz des GridView.extent GridViewKonstruktors zu zeigen. Eine viel intelligentere Methode wäre jedoch die Verwendung von a GridView.buildermit a SliverGridDelegateWithMaxCrossAxisExtent. In diesem Fall werden die im Raster anzuzeigenden Widgets dynamisch aus einer anderen Datenstruktur erstellt. Wie Sie in diesem Beispiel sehen können :

import ‘package:flutter/material.dart’;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override

  Widget build(context) =>

    MaterialApp(

      home: MyHomePage()

    );

}

class MyHomePage extends StatelessWidget {

  final List<String> elements = [“Zero”, “One”, “Two”, “Three”, “Four”, “Five”, “Six”, “Seven”, “Eight”, “A Million Billion Trillion”, “A much, much longer text that will still fit”];

  @override

  Widget build(context) =>

    Scaffold(

      body: GridView.builder(

        itemCount: elements.length,

        gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(

          maxCrossAxisExtent: 130.0,

          crossAxisSpacing: 20.0,

          mainAxisSpacing: 20.0,

        ),

        itemBuilder: (context, i) => Card(

          child: Center(

            child: Padding(

              padding: EdgeInsets.all(8.0), child: Text(elements[i])

            )

          )

        )

      )

   );

}

Kopieren

Ein Beispiel für die Anpassung von GridView an verschiedene Bildschirme ist meine persönliche Zielseite , bei der es sich um eine sehr einfache Flutter-Web-App handelt, die aus GridVieweiner Reihe von CardsCodes besteht, genau wie der vorherige Beispielcode, nur dass diese Cardsetwas komplexer und größer sind.

Eine sehr einfache Änderung, die an Apps für Telefone vorgenommen werden könnte, besteht darin, a Drawerdurch ein permanentes Menü auf der linken Seite zu ersetzen, wenn Platz vorhanden ist.

Zum Beispiel könnten wir ein ListViewWidget haben, wie das folgende, das für die Navigation verwendet wird:

class Menu extends StatelessWidget {

  @override

  Widget build(context) => ListView(

    children: [

      FlatButton(

        onPressed: () {},

          child: ListTile(

          leading: Icon(Icons.looks_one),

          title: Text(“First

Auf einem Smartphone befindet sich ein üblicher Verwendungsort in einem Drawer(auch als Hamburger-Menü bezeichnet).

Alternativen dazu wären das BottomNavigationBaroder das TabBarin Kombination mit dem TabBarView, aber bei beiden müssten wir mehr Änderungen vornehmen, als für die Schublade erforderlich sind, also bleiben wir bei der Schublade.

Um nur das zu zeigen Drawer, Menuwas wir zuvor auf kleineren Bildschirmen gesehen haben, würden Sie Code schreiben, der wie das folgende Snippet aussieht, die Breite mit dem überprüfen MediaQuery.of(context)und ein DrawerObjekt Scaffoldnur dann an das übergeben

The post Responsive Web- und Desktop-Entwicklung mit Flutter appeared first on Marketing.

]]>
Warum ich Open Source-Technologie für die Webentwicklung verwende https://www.mediaart-jena.de/index.php/2020/08/12/warum-ich-open-source-technologie-fuer-die-webentwicklung-verwende/ Wed, 12 Aug 2020 00:32:35 +0000 https://www.mediaart-jena.de/?p=172 Millionen von Menschen auf der ganzen Welt greifen auf die Web-Eigenschaften der OpenStack Foundation (OSF) zu, um mehr über die offene Infrastruktur zu erfahren. Diese Nutzungsstufe erfordert eine Plattform und Toolsets, die schnell, flexibel und erschwinglich sind – und hier kommt Open Source ins Spiel. Darüber hinaus integrieren wir natürlich Open Source-Technologien, da wir für […]

The post Warum ich Open Source-Technologie für die Webentwicklung verwende appeared first on Marketing.

]]>
Millionen von Menschen auf der ganzen Welt greifen auf die Web-Eigenschaften der OpenStack Foundation (OSF) zu, um mehr über die offene Infrastruktur zu erfahren. Diese Nutzungsstufe erfordert eine Plattform und Toolsets, die schnell, flexibel und erschwinglich sind – und hier kommt Open Source ins Spiel. Darüber hinaus integrieren wir natürlich Open Source-Technologien, da wir für eine Open Source-Software-Grundlage arbeiten alles, was wir tun, einschließlich Webentwicklung.

Überlegungen zur Webentwicklung

Wenn wir über Webentwicklungstechnologien nachdenken, müssen wir berücksichtigen, wie wir unsere Software-Lebenszyklen verwalten. Die gesamte Softwareentwicklung umfasst eine Art Lebenszyklusmanagement mit der Möglichkeit, den Code zu planen, zu analysieren, zu entwerfen und zu implementieren. Unser Webentwicklungsteam arbeitet normalerweise im laufenden Betrieb, oft unter engen Fristen, und mit anderen Abteilungen. Das bedeutet, dass unsere Anforderungen und unser Workflow flexibel genug sein müssen, um schnelle Iterationen, Aktualisierungen und Korrekturen zu ermöglichen. Ich würde lieber schnell etwas herausschieben und, falls nötig, wieder hineingehen und die Dinge nachträglich pixelgenau machen.

Unser Team muss auch alle an der Website beteiligten Stakeholder berücksichtigen, einschließlich unserer talentierten Marketingteams, die mit Git-Workflows nicht vertraut sind. Das hat uns, wie viele andere auch, dazu veranlasst, ein Content Management System (CMS) zu verwenden, damit diese Profis Updates vornehmen können, ohne Git verwenden zu müssen.

Aufbau einer CMS-agnostischen Webarchitektur

Um diesem Bedürfnis nach Flexibilität gerecht zu werden, haben wir uns traditionell auf ein Open-Source-CMS, SilverStripe, verlassen . Unsere Anforderungen sind jedoch schnell über das System hinausgewachsen. Daher haben wir eine eigenständige API erstellt und statische Microsites mit React JavaScript-Komponenten verwendet, um Daten in benutzerdefinierte Präsentationsebenen zu ziehen. Wir verwenden dieses System in allen Bereichen, von mobilen Apps über Websites bis hin zu digitalen Schildern. Dies ist als Jamstack- Architektur bekannt geworden. Wir fanden, dass dieses Modell so erweiterbar war, dass wir unsere Daten überall hin verschieben konnten, während wir CMS-unabhängig waren.

Bei der Einführung dieses API-gesteuerten Workflows haben wir festgestellt, dass unsere Daten an vielen verschiedenen Orten verwendet und auf viele verschiedene Arten dargestellt wurden. In unseren sieben Web-Eigenschaften teilen wir alles von Grafiken bis hin zu dynamischen Inhalten. Ein Standard-CMS kann dies nicht ohne viel benutzerdefinierte Entwicklungsarbeit zusammen mit Cron-Jobs oder kostspieligen Datenbankabfragen tun.

Wenn die Dinge API-gesteuert sind, können Sie über eine Vielzahl von Plattformen auf all diese verschiedenen Datensätze zugreifen und gleichzeitig Ihre Infrastruktur weitgehend vor großen Verkehrsspitzen schützen. Beispielsweise arbeitete das OSF mit Tipit , dem digitalen Design- und Entwicklungspartner des OSF, zusammen, um eine vollständig Open-Source-End-to-End-Event-Management-Software zu entwickeln. Unsere Veranstaltungsdaten werden auf Webseiten, mobilen Apps und Digital Signage dargestellt. Es sind dieselben Daten, die von einem einzigen Ort aus verwaltet werden, jedoch mit unterschiedlichen Präsentationsebenen, Formaten und Plattformen.

Open Source Identity Access Management

Ein Eckpfeiler für die Umstellung auf eine dezentrale Jamstack-Architektur ist die Notwendigkeit, Identitäts- und Zugriffsrechte festzulegen. Wenn Sie JavaScript verwenden, um Dinge in einer API aufzurufen, müssen Sie möglicherweise eine Authentifizierung und Autorisierung durchführen. Daher mussten wir den Identitätsanbieter von jeder einzelnen Implementierung trennen. Hierfür gibt es zwei Konzepte: Identität (authN) und Identitätszugriffsverwaltung (authZ). Der Identitätsanbieter bestätigt, wer Sie sind, während die Zugriffsverwaltung bestätigt, welche Rollen und Berechtigungen Sie für verschiedene Aufgaben benötigen. Eine der ersten Anforderungen bei der Entwicklung der Event-Management-Software war die Einrichtung eines eigenständigen Identitätsanbieters.

Geben Sie OpenStackID ein , eine OpenID Connect with oAuth2 SSO-Lösung. OpenStackID war ursprünglich eine sicherere Möglichkeit für Benutzer, sich bei Openstack.org anzumelden und ihre Profile zu verwalten. Selbst wenn die Anzahl der von uns verwalteten Websites und Ereignis-Apps zunimmt, entsteht eine nahtlose Authentifizierungserfahrung für Benutzer. Mit dem Abschnitt für die Zugriffsverwaltung können wir eigenständige reaktionsbasierte Apps erstellen, die mithilfe des Identitätsanbieters bestimmen, ob ein bestimmter Benutzer die Rechte hat, die gewünschten Aktionen in dieser bestimmten Anwendung auszuführen.

Eine Sache, die allen durch den Kopf geht – insbesondere in einer globalen Open Source-Community – ist die Privatsphäre. Dies ist ein wichtiger Faktor bei der Erstellung unserer Web- und Ereigniseigenschaften. Mit OpenStackID können sich Benutzer bei ihrem OpenStackID-Konto anmelden und Anwendungsberechtigungen über die OAuth 2-Konsole festlegen. Wenn sie entscheiden, dass ihre App nicht mehr mit ihrer OpenStackID verknüpft werden soll, können sie einfach Berechtigungen entfernen.

Zum Beispiel haben wir Benutzer für unsere Veranstaltungen, die nicht möchten, dass ihre persönlichen Daten mit ihrer Anwesenheit auf unseren Konferenzen in Verbindung gebracht werden. Bei der Einrichtung der Plattformen werden alle personenbezogenen Daten sicher auf dem OpenID-Server verwaltet und nicht zwischen Anwendungen geteilt, es sei denn, der Benutzer aktiviert dies strikt. Darüber hinaus teilen wir niemals Dinge wie die Ereignisse, an denen ein Benutzer teilnimmt, oder Teile seines Benutzerprofils, es sei denn, es ist vollständig anonymisiert oder sie erlauben es ausdrücklich, um mit den Four Open oder unserer Community-Philosophie in Einklang zu bleiben .

Bessere Webinfrastruktur mit Open Source

Durch die Berücksichtigung unserer Überlegungen und die Umstellung auf eine flexiblere Implementierung eines CMS konnten unsere Teams effektiver zusammenarbeiten. Am wichtigsten ist, dass wir weiterhin unseren Community-Werten folgen, indem wir dank Open Source-Technologie hervorragende Datenschutz- und Sicherheitsoptionen bieten.

Wenn Sie an unserem Ansatz interessiert sind, lesen Sie den Quellcode der OSF Foundation-Website . Sie können auch auf die folgenden Quellcode-Repos zugreifen

The post Warum ich Open Source-Technologie für die Webentwicklung verwende appeared first on Marketing.

]]>
Laden Sie genug auf? Eine Kurzanleitung zu den Preisen für digitales Marketing https://www.mediaart-jena.de/index.php/2020/08/11/laden-sie-genug-auf-eine-kurzanleitung-zu-den-preisen-fuer-digitales-marketing/ Tue, 11 Aug 2020 13:12:21 +0000 https://www.mediaart-jena.de/?p=191 Die Nachfrage nach digitalen Marketingdienstleistungen war noch nie so hoch. Laden Sie genug auf? Zu viel? Lesen Sie diese Anleitung, um es herauszufinden. Die Nachfrage nach digitalen Marketingdienstleistungen war noch nie so hoch. Gleichzeitig war der Wettbewerb um den Verkauf dieser Dienstleistungen nie größer. Was ist der beste Weg, um Ihre Dienstleistungen in einem so […]

The post Laden Sie genug auf? Eine Kurzanleitung zu den Preisen für digitales Marketing appeared first on Marketing.

]]>
Die Nachfrage nach digitalen Marketingdienstleistungen war noch nie so hoch. Laden Sie genug auf? Zu viel? Lesen Sie diese Anleitung, um es herauszufinden.

Die Nachfrage nach digitalen Marketingdienstleistungen war noch nie so hoch.

Gleichzeitig war der Wettbewerb um den Verkauf dieser Dienstleistungen nie größer.

Was ist der beste Weg, um Ihre Dienstleistungen in einem so wettbewerbsintensiven Umfeld zu verkaufen?

Das Festlegen von Preisen kann schwierig sein, insbesondere wenn Sie gerade erst anfangen.

Für viele ist es schwierig festzustellen, wie sehr mich ein Kunde schätzen würde. oder ” Was ist mein Service eigentlich wert ?”

Sie möchten Ihre Marketinghope Preise nicht unangemessen hoch einstellen, aber gleichzeitig kein Geld auf dem Tisch lassen.

Letztendlich sollten Ihre Preise auf den von Ihnen angebotenen Dienstleistungen, dem Marktwert dieser Dienstleistungen und vor allem auf der Zahlungsbereitschaft von Kunden und Interessenten basieren.

Im Laufe der Zeit können Sie ein Portfolio mit Erfolgsgeschichten sowie eine finanziell lohnende Karriere aufbauen.

Es gibt eine Reihe von Möglichkeiten, digitale Marketingdienste zu bewerten. Die beliebtesten werden im Folgenden erläutert.

Preisverpackung

Viele digitale Vermarkter bieten eine Auswahl an „Paketen“ an.

Kunden haben die Möglichkeit, aus verfügbaren Diensten auszuwählen.

Paketpreise sind sowohl für den Anbieter als auch für die Kunden bequem und bieten Transparenz in Bezug auf die zu erbringenden Leistungen.

Kunden können ein Paket auswählen, das ihren Bedürfnissen und ihrem Budget am besten entspricht.

Wenn Sie Paketpreise anbieten, stellen Sie sicher, dass Sie über das erforderliche Wissen und die Erfahrung verfügen, um alle von Ihnen beworbenen Aufgaben auszuführen.

Die meisten Pakete sind nach dem bewährten „Good, Better, Best“ -Paket-Ansatz gestaltet.

Ein zusätzlicher Vorteil dieser Form der Preisgestaltung besteht darin, dass potenzielle Kunden vorqualifiziert werden.

Potenzielle Käufer kennen die Kosten für Dienstleistungen im Voraus.

Öffentliche Preisgestaltung

Anstatt Optionen zu bündeln, kann man entscheiden, dass es besser ist, Dienstleistungen einzeln zu bewerten.

Auf diese Weise haben Interessenten die Möglichkeit, genau das auszuwählen, was sie wollen oder brauchen.

Das öffentliche Preismodell ist besonders für Personen attraktiv, die die Privatsphäre nicht durch Ausfüllen eines Kontaktformulars opfern möchten, um Preisinformationen zu erhalten.

Preisangebot Rechner

Diese Option ist effektiv eine Mischung aus Paket- und öffentlichen Modellen.

Legen Sie einfach einen Preis für jeden Service fest, dann können Kunden mithilfe des Taschenrechners ihre eigenen Pakete erstellen.

Preis = (Serviceauswahl + Zusatzleistungen) * Menge

Mit dieser Methode können potenzielle Kunden genau das kaufen, was sie möchten, und das zu einem Budget, mit dem sie zufrieden sind.

Auf diese Weise erhalten Kunden auch ein individuelles Angebot, ohne dass Sie eine E-Mail senden oder anrufen müssen.

Es gibt eine Reihe von Plugins, Widgets und Skripten, die online verfügbar sind und die Implementierung relativ einfach machen.

Stündliche Preisgestaltung

Die stündliche Preisgestaltung kann schwierig sein.

Es ist oft schwierig, die für die Ausführung einer bestimmten Aufgabe erforderliche Zeit abzuschätzen.

Startups und Kunden mit kleineren Budgets meiden möglicherweise stündliche Preise, weil sie nicht überrascht sein möchten und eine hohe Rechnung erhalten, die sie sich nicht leisten können.

Kleinere Kunden mit minimalen und vorhersehbaren Anforderungen bevorzugen jedoch möglicherweise einen stündlichen Ansatz.

Konten auf Unternehmensebene mit größeren Budgets und komplexen Websites werden voraussichtlich stundenweise bezahlt.

Sie verstehen, dass unvorhersehbare Probleme zu erwarten sind, die zusätzliche Ressourcen erfordern.

Wie bei jedem Service gibt es im Bereich digitales Marketing eine breite Palette von Preisen.

Für SEO können Sie mit 100 bis 150 US-Dollar pro Stunde rechnen .

Der Preis für Inhaltsersteller liegt zwischen 16 und 100 US-Dollar pro Stunde.

Projekte, die ein höheres Maß an Autorität oder Fachwissen erfordern, zahlen möglicherweise mehr.

Das Videomarketing erlebte einen enormen Boom, und viele weitere Unternehmen stiegen ein.

Die Kosten für die Videoproduktion liegen normalerweise zwischen 19 und 100 US-Dollar pro Stunde. Videomarketer, die komplexe Arbeiten ausführen, können viel mehr verdienen und Hunderte von Dollar pro Stunde verdienen.

Intelligente digitale Vermarkter gehen bei Stundenverträgen sehr vorsichtig vor. Sie überschätzen oft, wie viel Zeit für die Fertigstellung eines Projekts benötigt wird.

Dies schützt sie vor Geldverlusten, falls ein Job länger dauert als erwartet. Das heißt, gehen Sie nicht über Bord oder Sie werden nicht wettbewerbsfähig sein.

Pauschalgebühren / Projektbasierte Preisgestaltung

Einige SEO-Projekte, wie Google Penalty Recovery , sind einmalig.

Andere Projekte wie Keyword-Recherche, technische Audits und Inhalts-Audits sind wichtig, aber nicht jeden Monat erforderlich.

Diese Art von Aufgaben sind perfekte Kandidaten für Pauschalpreise.

Auch für einen Pauschalansatz geeignet ist bezahlte Werbung.

Wenn ein Kunde Sie für PPC anstellt, können Sie damit rechnen, zwischen 500 und 5.000 US-Dollar pro Monat an Pauschalgebühren (Verwaltungsgebühren) zu verdienen .

Abhängig von der Struktur des Geschäfts können Sie möglicherweise auch zusätzliche 15 bis 30% der Werbeausgaben aushandeln.

Eine SEO-Kampagne kostet in den USA durchschnittlich 2.500 bis 5.000 US-Dollar pro Monat.

Größere Websites geben mehr aus. Einige zahlen bis zu 25.000 bis 50.000 US-Dollar pro Monat.

Die Erstellung von Inhalten wird häufig vom Projekt bewertet (Flatrate).

Laut Jason McBride können beginnende freiberufliche Autoren damit rechnen, zwischen 25 US-Dollar für einen einfachen Blog-Beitrag mit 350 bis 500 Wörtern und 140 US-Dollar für eine Verkaufsseite mit 500 bis 1.000 Wörtern zu verdienen.

Inhalte, die nicht ausschließlich textbasiert sind, können mehr Befehle enthalten.

Grafikdesign kann beispielsweise eine zusätzliche Komplexitätsebene hinzufügen, die nicht nur mit der Recherche eines Themas und dem Schreiben darüber verbunden ist.

Whitepaper und technisches Marketing erfordern auch spezielle Fähigkeiten, und die Ersteller von Inhalten können für diese häufig mehr verlangen.

Die Pauschalpreise für Videomarketingprojekte richten sich nach dem Arbeitsumfang.

Einige Kunden sind bereit, für Videomarketingdienste mehr als 50.000 US-Dollar zu zahlen. Andere haben kein Budget und beginnen ihre Suche auf Fiverr.

Pauschalprojekte können großartig sein, aber Probleme entstehen, wenn Sie unterschätzen, wie viel Zeit, Aufwand und Ressourcen benötigt werden.

Wenn Ihr Projekt 20 Stunden länger dauert, als Sie in Ihrer Vereinbarung berücksichtigt haben, wird Ihre Gewinnspanne stark beeinträchtigt.

Denken Sie daran, wenn Sie kein Geld verdienen, ist es kein Geschäft – es ist ein Hobby.

Fazit

Es ist vorzuziehen, eine Bewertung vorzunehmen, bevor jemals ein Budget erstellt wird.

Sehr oft wissen potenzielle Kunden wirklich nicht, was sie brauchen.

Eine Konsultation wird ihnen helfen, den richtigen Weg zu finden, um eine fundierte Entscheidung zu treffen.

The post Laden Sie genug auf? Eine Kurzanleitung zu den Preisen für digitales Marketing appeared first on Marketing.

]]>
Was ist Web- und Mobile-App-Entwicklung? https://www.mediaart-jena.de/index.php/2020/07/11/was-ist-web-und-mobile-app-entwicklung/ Sat, 11 Jul 2020 00:32:33 +0000 https://www.mediaart-jena.de/?p=171 In diesem Artikel werden wir die Webentwicklung im Vergleich zur Android-Entwicklung diskutieren. Wir heben auch die Vorteile, den Vergleich und die damit verbundenen Fähigkeiten hervor. Beginnen Sie mit der grundlegendsten Frage, um die Webentwicklung und die Android-Entwicklung zu verstehen: Was ist Web- und Mobile-App-Entwicklung? Webentwicklung ist der Prozess, der mit der Entwicklung von Websites für das Internet (World […]

The post Was ist Web- und Mobile-App-Entwicklung? appeared first on Marketing.

]]>
In diesem Artikel werden wir die Webentwicklung im Vergleich zur Android-Entwicklung diskutieren. Wir heben auch die Vorteile, den Vergleich und die damit verbundenen Fähigkeiten hervor. Beginnen Sie mit der grundlegendsten Frage, um die Webentwicklung und die Android-Entwicklung zu verstehen:

Was ist Web- und Mobile-App-Entwicklung?

Webentwicklung ist der Prozess, der mit der Entwicklung von Websites für das Internet (World Wide Web) oder ein Intranet (ein privates Netzwerk) verbunden ist. Dieser Prozess umfasst unter anderem Webdesign, Entwicklung von Webinhalten, clientseitiges / serverseitiges Scripting und Konfiguration der Netzwerksicherheit.

Die Entwicklung mobiler Apps umfasst die Entwicklung einer mobilen App für mobile Geräte wie persönliche digitale Assistenten, digitale Unternehmensassistenten oder Mobiltelefone. 

Was ist eine bessere App- oder Webentwicklung?

Die Entwicklung von Web-Apps ist kostengünstiger als die von mobilen Apps. Mobile Apps sind plattformspezifisch und Sie müssen Java und XML lernen, um eine Android-Anwendung zu erstellen. Mobile Apps sind viel schneller als Web-Apps und bieten erweiterte Funktionen.

Ist Webentwicklung einfacher als mobile Entwicklung?

Die Programmiersprache für die Entwicklung von Web-Apps umfasst JavaScript, CSS und HTML5. Im Vergleich zu mobilen Apps verfügen Web-Apps nicht über ein Standard-Softwareentwicklungskit. Web-Apps sind einfacher zu erstellen, aber in Bezug auf Funktionen viel einfacher.

Unterschied zwischen Webentwicklung und Android-Entwicklung

Jetzt werden wir den Unterschied zwischen Webentwicklung und Android-Entwicklung diskutieren.

Android-EntwicklungWeb Entwicklung
Die Rolle des Android-Entwicklers besteht darin, Anwendungen für den Android Play Store zu entwerfen. Ein Android-Entwickler hat die Aufgabe, die Apps zu erstellen, die wir auf unseren Android-basierten Smartphones und Tablets verwenden.Ein Webentwickler ist ein Softwareentwickler, der sich auf das Entwerfen, Codieren und Ändern von Websites gemäß den Spezifikationen eines Kunden spezialisiert hat. 
Eine Android-Entwicklung erfordert Kenntnisse in JAVA, Kotlin, C / C ++ und XML sowie in Python.Die Webentwicklung erfordert Kenntnisse in HTML, CSS und JavaScript, um mindestens statische Websites zu erstellen. 
Für die Android-Entwicklung ist eine Datenbank erforderlich, um Daten in der Anwendung zu speichernFür die Webentwicklung sind auch Datenbanken erforderlich, um Inhalte und einige wichtige Daten von Benutzern zu speichern.
Android-Anwendungen, die über APKs auf Android-Handys installiert sindStatische Websites enthalten nur wenige Dateigruppen, darunter HTML, CSS und Javascript. Während einige Webarchive enthalten, für die Container wie Apache Tomcat und jBoss erforderlich sind.

Vor- und Nachteile der Webentwicklung

Jetzt werden wir die Vor- und Nachteile der Webentwicklung diskutieren. 

PROS der Webentwicklung:

  • Die Webentwicklungs-Community ist sehr kooperativ und ihre Entwickler lösen jeden Tag Probleme und teilen ihre Arbeit über Open Source.
  • Die Webentwicklung hat einen riesigen Arbeitsmarkt und wächst täglich.
  • Web-Apps werden mit bekannten Programmiersprachen unter IT-Fachleuten wie HTML und CSS entwickelt.
  • Webentwicklungsanwendungen werden nicht aus App Stores wie Google Play oder Apples App Store heruntergeladen und installiert. Ein direkter kostenloser Web-App-Link spart Geld.

Nachteile der Webentwicklung:

  • Webentwickler müssen über die neuesten Trends auf dem Laufenden bleiben.
  • Die meisten Webentwickler müssen sich mit Kunden befassen, die keine Kenntnisse über Websites haben. Sie erwarten von einem Back-End-Entwickler, dass er die Arbeit eines Front-End-Entwicklers übernimmt, und umgekehrt. Es kann schwierig werden, einen Kunden zu verstehen, was er für ihn wünscht Webseite.

Vor- und Nachteile der App-Entwicklung:

Hier ist die Liste der Vor- und Nachteile der App-Entwicklung:

PROS:

  • Budgetfreundliche Option
  • Technische Ressourcen und Fachwissen
  • 24/7 Support
  • Zeitmaximierung

Nachteile:

  • Gefährdung des Datenschutzes
  • Unfähigkeit, jeden Entwicklungsbereich zu kontrollieren
  • Teure kleine Änderungen
  • Kommunikationslücke

Responsive Web Design vs. Mobile App Development  

Die folgenden Punkte vermitteln ein besseres Verständnis von Responsive Web Design im Vergleich zur Entwicklung mobiler Apps  

Responsive Web Design VS. Entwicklung mobiler Apps.

  • Wenn wir über Kompatibilität sprechen, wird die mobile Version der Website in allen Browsern unabhängig vom Gerätemodell gleichermaßen angezeigt.
  • Es hat ein großes Publikum, da reaktionsschnelles Webdesign trotz des Gerätemodells Zugang zum Internet benötigt. 
  • Sie müssen nur für Domain und Hosting bezahlen.
  • Einfach zu bedienen, kein Download und keine Installation erforderlich.
  • Die Offline-Verfügbarkeit ist nicht für alle Geräte verfügbar.

Entwicklung mobiler Apps:

  • Wenn wir über Kompatibilität sprechen, erfordert die Entwicklung mobiler Apps die Entwicklung mehrerer Anwendungen für verschiedene Plattformen.
  • Das Publikum umfasst nur Benutzer von Smartphones und Tablets.
  • Sie müssen für Entwicklerlizenzen in den App Stores bezahlen.
  • Sie müssen es herunterladen und installieren.
  • Offline arbeiten ist möglich

The post Was ist Web- und Mobile-App-Entwicklung? appeared first on Marketing.

]]>
Webdesign vs. Webentwicklung: Den Unterschied kennen https://www.mediaart-jena.de/index.php/2020/06/28/webdesign-vs-webentwicklung-den-unterschied-kennen/ Sun, 28 Jun 2020 00:32:31 +0000 https://www.mediaart-jena.de/?p=170 Webdesign und Webentwicklung sind ziemlich knifflige Begriffe. Viele Websitebesitzer neigen dazu, sie zu verwirren und wissen nicht, welche Art von Spezialisten sie für ihre Website benötigen. In diesem Artikel werden wir detaillierter erklären, was der Unterschied zwischen Webdesignern und Webentwicklern ist, damit Online-Geschäftsinhaber beide Berufe besser verstehen können. Beginnen wir mit einer kurzen Vorschau beider […]

The post Webdesign vs. Webentwicklung: Den Unterschied kennen appeared first on Marketing.

]]>
Webdesign und Webentwicklung sind ziemlich knifflige Begriffe. Viele Websitebesitzer neigen dazu, sie zu verwirren und wissen nicht, welche Art von Spezialisten sie für ihre Website benötigen.

In diesem Artikel werden wir detaillierter erklären, was der Unterschied zwischen Webdesignern und Webentwicklern ist, damit Online-Geschäftsinhaber beide Berufe besser verstehen können.

Beginnen wir mit einer kurzen Vorschau beider Begriffe – Webentwickler und Webdesigner .

Ein Webdesigner wird häufig auf zwei mögliche Positionen verwiesen – einen Designer oder einen Front-End-Entwickler .

Der Designer macht nur Visuals und codiert nicht. Designer verwenden Programme wie Sketch, Adobe XD, Photoshops usw. und ihre Fähigkeiten konzentrieren sich auf die Benutzererfahrung (UX) und die Benutzeroberfläche (UI).

Ein Front-End – Entwickler, betrachtet als Web – Designer , ist derjenige, der nur HTML oder CSS schreibt und hat zumindest Grundkenntnisse in JavaScript (JS). Teil der Fähigkeiten sind gute Kenntnisse der besten UX- und UI-Praktiken.

Ein Webentwickler (oder auch Backend-Entwickler) ist derjenige, der etwas durch geschriebenen Code erstellt und sich normalerweise nicht um den visuellen Teil innerhalb einer bestimmten Site / Anwendung kümmert.

Ein weiterer Aspekt der Rolle von Back-End-Entwicklern ist das Programmieren in Sprachen wie PHP, Java, Datenbanken usw.

Entwickler und Designer arbeiten normalerweise als Team zusammen. Der Designer bietet Designs und Bilder, die Gäste anziehen. Anschließend kombiniert der Entwickler alle visuellen Elemente zu einer Website und stellt gleichzeitig sicher, dass alle Funktionen einwandfrei funktionieren.

Das war eine grundlegende Erklärung für beide Begriffe und jetzt ist es an der Zeit, sich eingehender mit den genauen Rollen und Verantwortlichkeiten der Webdesigner und Webentwickler zu befassen.

Welche Rolle spielt der Webdesigner?

Wir werden hier mehr auf die reine Designarbeit eingehen. Wie bereits erwähnt, sind Webdesigner an einigen Stellen auch Leute, die Front-End-Entwickler sind und HTML und CSS schreiben. Sie verfügen über völlig andere Fähigkeiten und Werkzeuge. Wir erkennen dies an, aber wir werden uns mehr auf die visuelle Arbeit konzentrieren.

Webdesigner werden oft als Künstler und ihre Arbeit betrachtet – als digitales Kunstwerk. Zumindest ist das das Grundprofil. Ihre Aufgabe ist es, Ideen in kreative Bilder umzuwandeln.

Sie können mit Designern in Bezug auf alles zusammenarbeiten, was mit dem Branding der Website zu tun hat – Logo, Farbpalette, Schriftarten und Bilder, das gesamte visuelle Erlebnis.

Wenn Sie jedoch einen Online-Shop besitzen, baut der Webdesigner seine Funktionalität nicht auf. Webdesigner sind für den visuellen und ästhetischen Teil einer Website verantwortlich.

Sie sind auch dafür verantwortlich, was Benutzer auf ihren Bildschirmen sehen – sowohl auf dem Desktop als auch auf dem Handy. Webdesigner erstellen die Layouts und können bei der Auswahl der richtigen Farben, Schriftarten , Bilder oder Inhaltsgrafiken helfen .

Ein wirklich wichtiger Teil ihrer Fähigkeiten ist das Wissen über UX und UI. Sie können beraten, wie die Navigation funktionieren soll, wie eine Homepage oder eine Landingpage erstellt werden muss, damit die Benutzer auf Ihrer Website bleiben und möglicherweise konvertieren.

Was sind die verschiedenen Entwurfswerkzeuge?

Webdesigner arbeiten mit einer Vielzahl von Design-Tools. Die Adobe Creative Suite ist wahrscheinlich die beliebteste. Zum Beispiel verwenden unsere Designer bei DevriX die folgenden Tools:

  • Adobe XD zum Entwerfen von Webseitenmodellen, Inhaltsgrafiken oder Apps
  • Adobe Illustrator für Illustrationen, Ausdrucke, Logos, Symbole, Skizzen, Typografie oder Werbetafeln
  • Adobe Photoshop für die Fotobearbeitung
  • Adobe InDesign oder Affinity Publisher für eBooks, digitale Marketingmagazine, interaktive PDFs, Poster
  • Affinity Designer für Vektorgrafiken und Illustrationen
  • CorelDraw für Illustrationen, Fotobearbeitung, Layout oder Typografie
  • Skizze für Mac-Benutzer

Andere sehr wertvolle Tools, die den Webdesignern helfen, bieten einen guten Überblick über die Designs und Informationen zu den Elementen – Schriftart, Größe, Abstand, Farben und mehr.

Solche Werkzeuge sind:

  • Zeplin, was wir in DevriX verwenden
  • InVision
  • Wunder

Was sind die wesentlichen Fähigkeiten, die ein Designer haben muss?

Design ist keine leichte Aufgabe. Es erfordert viel Kreativität, Inspiration und die Fähigkeit zu verstehen, was die Kunden von ihnen verlangen. Es braucht Vorstellungskraft und Erfindungsreichtum, was manchmal sehr schwierig sein kann.

Design erfordert ein tiefes Verständnis für Proportionen, Leerraum, Gleichgewicht, visuelle Hierarchie und viel Erfahrung im digitalen Medium als Schöpfer und Benutzer.

Die erfolgreichen Webdesigner haben folgende Fähigkeiten erworben:

  • Entwerfen Sie Website-Prototypen oder -Modelle basierend auf strengen oder sehr losen Anforderungen
  • Kennen Sie die Best Practices für Benutzererfahrung und Benutzeroberfläche
  • Guter ästhetischer Sinn und starkes Kunstgrundwissen
  • Kreativität und tiefe visuelle Bibliothek
  • Verstehen Sie Marketing- oder Vertriebsansätze und die Fähigkeit, diese in ihre Entwurfsarbeit umzusetzen
  • Kenntnis der neuesten Designtrends und Fähigkeit zu entscheiden, wann sie verwendet werden sollen und wann nicht
  • Für reine Designer ist es wichtig, die Grundlagen der zur Implementierung der Designs verwendeten Sprachen zu verstehen – Kenntnisse in CSS, HTML und JavaScript.

Welche Rolle spielt der Webentwickler?

Der Webentwickler erstellt alle Funktionen der Website. Die Entwickler schreiben den Code, der dem Server, dem Browser und allem dazwischen alle Anweisungen zur Leistung einer Website enthält. Vom Klicken auf eine Schaltfläche oder Öffnen einer Seite bis zum Abrufen von Daten mit SQL-Abfragen. All dies ist Teil des täglichen Zeitplans des Entwicklers.

Entwickler sind die Techniker. Abhängig von ihrer Rolle beim Erstellen der Website und den von ihnen verwendeten Sprachen können Webentwickler in drei Berufsgruppen unterteilt werden:

  • Front-End-Entwickler
  • Backend-Entwickler
  • Full-Stack-Entwickler, die in ihrer wahren Form eine seltene Rasse sind

Lassen Sie uns diese verschiedenen Rollen untersuchen.

Entwickler für Benutzeroberflächen

Der Front-End-Entwickler, auch als clientseitiger Entwickler bekannt. Steht zwischen einem Designer und einem Back-End-Entwickler. Alle visuellen Teile der Websites, die wir sehen, wurden von Front-End-Entwicklern erstellt.

Front-End-Entwickler arbeiten eng mit den Designern zusammen. Der Designer wählt Farben, Schriftarten oder Grafiken aus und kann Ratschläge zu Best Practices für die Benutzererfahrung geben . Dann wendet der Front-End-Entwickler diese Elemente an und erweckt die Website zum Leben. Designer stellen Designs als statische Bilder bereit, während Front-End-Entwickler diese Modelle ausschneiden und als Website-Schnittstellen gestalten.

Im WordPress-Kontext arbeitet der Front-End-Entwickler hauptsächlich mit dem Thema der Site und kann ein benutzerdefiniertes Thema erstellen, das den Anforderungen des Kunden entspricht.

Front-End-Entwickler arbeiten mit folgenden Programmiersprachen:

  • Hypertext Markup Language (HTML)
  • Cascading Style Sheets (CSS)
  • JavaScript (JS)

Back-End-Entwickler

Back-End-Arbeiten sind für die Website-Besucher nur als Daten sichtbar – der Text einer Schaltfläche, die Überschriften von Posts als Text usw. Wenn wir an eine Website-Schaltfläche denken, ist die Back-End-Arbeit für die Daten verantwortlich und nicht für die Art und Weise, wie die Schaltfläche angezeigt wird. Alles, was dazu führt, dass diese Daten den Endbenutzer erreichen, ist das Jobformat des Backend-Entwicklers, das sie analysiert, analysiert, ändert und speichert.

Back-End-Entwickler sind auch für die Verwaltung des Benutzerverwaltungssystems verantwortlich, bei dem Benutzer authentifiziert und ihre Daten gespeichert werden. Sie können APIs von Drittanbietern erstellen, was den Benutzerregistrierungsprozess vereinfacht.

Sie geben beispielsweise eine Website ein und möchten einen Newsletter abonnieren. Sie müssen Ihre E-Mail-Adresse und Ihren Namen hinterlassen. Sowohl der Designer als auch der Front-End-Entwickler haben ein Formular erstellt, in das Sie Ihre Daten ausfüllen müssen. Wenn diese Informationen zu einem späteren Zeitpunkt gespeichert und abgerufen werden müssen, ist eine Datenbankverbindung zu dem Server erforderlich, auf dem sie gespeichert werden sollen. Dies wird von einem Back-End-Entwickler durchgeführt.

Im WordPress-Kontext arbeiten Back-End-Entwickler über dem WordPress-Kerncode, der kostenlos installiert und verwendet werden kann. Die Entwickler verwenden das, was WordPress bietet, als Grundlage und erstellen damit Plugins und Theme-Funktionen.

Einige der häufigsten Back-End-Sprachen sind:

  • PHP
  • SQL
  • Rubin
  • Python
  • C ++
  • Java

Im Kontext von WordPress werden jedoch am häufigsten PHP und teilweise SQL verwendet. Als neuerer Trend ist JavaScript auch eine Sprache, die auf der Serverseite häufiger zum Verwalten und Anzeigen von Inhalten aus WordPress verwendet wird.

The post Webdesign vs. Webentwicklung: Den Unterschied kennen appeared first on Marketing.

]]>
Was ist ein SEO-Berater? Und was macht er? https://www.mediaart-jena.de/index.php/2020/06/23/seo-berater/ Tue, 23 Jun 2020 12:53:18 +0000 https://www.mediaart-jena.de/?p=188 Beratung zur Suchmaschinenoptimierung (SEO) wird heutzutage sehr populär, und das aus gutem Grund… Das Internet wächst rasant, daher ist es wichtiger denn je, in Suchmaschinen wie Google einen hohen Rang einzunehmen! Als Geschäftsinhaber könnten Sie sich jedoch diese Fragen stellen: Was ist ein SEO-Berater? Was macht eigentlich ein SEO-Spezialist? Muss ich jemanden einstellen, der die […]

The post Was ist ein SEO-Berater? Und was macht er? appeared first on Marketing.

]]>
Beratung zur Suchmaschinenoptimierung (SEO) wird heutzutage sehr populär, und das aus gutem Grund…

Das Internet wächst rasant, daher ist es wichtiger denn je, in Suchmaschinen wie Google einen hohen Rang einzunehmen!

Als Geschäftsinhaber könnten Sie sich jedoch diese Fragen stellen:

  • Was ist ein SEO-Berater?
  • Was macht eigentlich ein SEO-Spezialist?
  • Muss ich jemanden einstellen, der die SEO für meine Firmenwebsite übernimmt?

Lassen Sie uns reinhauen und Ihnen helfen, diese Fragen zu beantworten…

Was ist ein SEO-Berater & warum brauche ich einen?
Nun, typischerweise ist ein “Berater” jeglicher Art ein Experte für ein bestimmtes Thema, und er wird dafür bezahlt, Ratschläge zu diesem Thema von Einzelpersonen oder Unternehmen zu geben, die ihn benötigen. Auf diese Weise ist ein SEO-Berater also nicht anders. Sie sind ein Experte für Suchmaschinenoptimierung und werden von Unternehmen und Website-Eigentümern bezahlt, um ihnen Ratschläge zu geben, wie sie höhere Rankings, mehr zielgerichteten Verkehr und letztendlich mehr Gewinn für ihre Websites erzielen können.

SEO-Beratung

Zumindest sollte ein professioneller SEO-Berater oder eine SEO-Beratungsfirma über viel Erfahrung und Fachwissen in den folgenden Bereichen (und noch viel mehr) verfügen…

On-Page SEO


Das ist das Zeug, das Sie auf Ihrer Website machen. Die meisten Leute neigen dazu, SEO als eine Off-Site-Strategie zu betrachten, was normalerweise Link Building und soziale Signale bedeutet, aber es gibt eine Menge Dinge, die auf Ihrer Website getan werden müssen, bevor eine der anderen Techniken funktioniert. Grundsätzlich muss Ihre Website “suchmaschinenfreundlich” sein, um gut platziert zu werden, ganz gleich, was Sie tun, und Ihr SEO-Berater sollte in der Lage sein, Sie zu beraten, was Sie auf Ihrer Website tun müssen, um sie für das Ranking vorzubereiten.

Hier sind einige der On-Page-Faktoren, bei denen Ihr Beratungsunternehmen Ihnen behilflich sein sollte:

  • Titel-Tags – Einen Titel-Tag richtig zu setzen ist viel schwieriger, als Sie vielleicht denken. Und ein richtig optimiertes Title-Tag kann für SEO Wunder wirken.
  • Beschreibungs-Tags – Über dieses Tag lässt sich so ziemlich das gleiche sagen wie über den Titel. Es ist sehr wichtig für die Suchmaschinenoptimierung vor Ort, aber es ist nicht einfach, “richtig” zu machen, es sei denn, Sie sind ein Profi.
  • Meta-Tags – Zusätzlich zum Titel und der Beschreibung gibt es eine Menge anderer Meta-Tags, die je nach Ihrer speziellen Website und Situation wichtig oder unwichtig sein können. Der SEO-Guru, den Sie einstellen, sollte in der Lage sein, Sie diesbezüglich zu beraten.
  • Qualitativ hochwertiger Inhalt – Der wichtigste Teil jeder Website und entscheidend für das Erreichen hoher Platzierungen in Suchmaschinen. Aber sind Ihre Seiten aus der Sicht von Google, Bing, Yahoo und anderen Suchmaschinen tatsächlich gut geschrieben und mit wirklich hochwertigem Inhalt versehen? Wahrscheinlich denken Sie das, aber Sie könnten überrascht sein!
  • Keyword-Dichte – Etwas anderes, das Sie nicht vermasseln wollen. Zu wenig und Sie werden vielleicht nie für die Begriffe rangieren, für die Sie rangieren möchten, zu viel und Sie könnten für eine Überoptimierung bestraft werden. Es ist ein schmaler Grat zu gehen!
  • LSI (Latent Semantic Indexing) – Die grundlegende Zusammenfassung von LSI ist, dass der Inhalt einer Website von Google und anderen SE’s gecrawlt wird, wobei die häufigsten Wörter oder Phrasen zusammen mit ihren Synonymen und verwandten Wörtern als Schlüsselwörter für jede Seite identifiziert werden.

Wenn der Titel Ihrer Seite zum Beispiel “Animal Facts” lautet, würden die Suchmaschinen erwarten, andere Wörter zu finden, die mit dem Inhalt der Seite verwandt sind – wie z.B. Hunde, Katzen, Vögel, usw…

Dies hilft Ihnen dabei, einen höheren Rang einzunehmen, weil die SE erkennen, dass es auf Ihrer Seite/Seite wirklich um das Thema geht. Außerdem können Sie zusätzlich zu Ihren Hauptschlüsselwörtern auch nach LSI-Begriffen rangieren.

  • Site-Struktur – Verwenden Ihre Seiten strukturierte Daten zur Unterstützung von Listings? Können Suchmaschinen Ihre Website leicht durchsuchen? Werden Probleme mit doppelten Inhalten auf der Website korrekt behandelt? Ist das Design SEO-freundlich? All dies sind Dinge, die Ihr Berater Ihnen sagen und Ihnen bei Bedarf helfen sollte.
  • Überschriften – Verwenden Ihre Überschrift und Unterüberschriften die richtigen HTML-Tags und die richtigen Schlüsselwörter?
  • Website-Geschwindigkeit – Die SEO-Bedeutung nimmt zu, da alles im Internet immer schneller und schneller wird. Die Menschen sind ungeduldig, daher muss Ihre Website sehr schnell geladen werden, um beste Ergebnisse zu erzielen.
  • Mobilfreundlich – Sites werden auf Geräten wie Smartphones und Tabellen in der Regel ganz anders angezeigt als auf normalen Computern. Die Welt wird immer mobiler, und mehr Menschen gehen heutzutage über mobile Geräte online als über Computer. Daher ist es sehr wichtig, dass Ihre Website mobilfreundlich und korrekt dafür optimiert ist.
  • Strukturierte Daten / Schema-Markup – Strukturierte Daten ermöglichen es Suchmaschinen wie Google, Ihre Website wirklich zu verstehen, was bei der Suchmaschinenoptimierung (SEO) enorm hilfreich sein kann.

…und eine Menge anderer Dinge! Sie müssen sehr gut darin sein, Ihre Website zu optimieren oder Ihnen beizubringen, wie Sie es selbst tun können. Sie stellen sie ein, weil sie Experten auf diesem Gebiet sind, also stellen Sie sicher, dass sie es wirklich sind, bevor Sie ihnen Ihr Geld übergeben.

The post Was ist ein SEO-Berater? Und was macht er? appeared first on Marketing.

]]>
Wie ich Websites erstelle: Der Prozess der Webentwicklung https://www.mediaart-jena.de/index.php/2020/05/19/wie-ich-websites-erstelle-der-prozess-der-webentwicklung/ Tue, 19 May 2020 00:32:29 +0000 https://www.mediaart-jena.de/?p=169 Viele Leute, insbesondere Anfänger, denken, dass es bei der Entwicklung einer Website nur um Codierung geht, aber das ist nicht so. Es gibt viele andere Dinge, die Sie tun müssen, wenn Sie mindestens eine anständige Website erstellen möchten. Der Teil, wenn Sie tatsächlich eine Website mit Code oder mit WordPress oder einem anderen CMS erstellen, […]

The post Wie ich Websites erstelle: Der Prozess der Webentwicklung appeared first on Marketing.

]]>
Viele Leute, insbesondere Anfänger, denken, dass es bei der Entwicklung einer Website nur um Codierung geht, aber das ist nicht so. Es gibt viele andere Dinge, die Sie tun müssen, wenn Sie mindestens eine anständige Website erstellen möchten. Der Teil, wenn Sie tatsächlich eine Website mit Code oder mit WordPress oder einem anderen CMS erstellen, ist nur ein kleiner Teil.

Es ist relativ einfach, eine Website zu erstellen, wenn Sie genau wissen, wie sie aussehen und funktionieren wird. Für mich ist es am schwierigsten, Ideen zu entwickeln, wie die Website aussehen wird und welche Funktionen sie bietet. In diesem Artikel werde ich Ihnen zeigen, wie der Prozess der Erstellung einer Website für mich aussieht.

Hinweis: Ich spreche hier hauptsächlich von Websites, die mit Code erstellt wurden. Dieser Vorgang kann jedoch auch für die Erstellung beliebiger Websites angewendet werden.

1. Was die Website tun wird

Der erste Teil besteht darin, so viele Informationen wie möglich darüber zu erhalten, was die Website tun wird. Wenn Sie eine Website für sich selbst erstellen, wird dies relativ einfach sein. Wenn Sie jedoch eine Website für eine andere Person erstellen, müssen Sie so viele Details wie möglich abrufen, damit Sie wissen, was Sie tun müssen.

In diesem ersten Schritt schreibe ich normalerweise alles, was ich tun muss, und ich schreibe auch in der Reihenfolge, in der ich das tun muss. Zum Schreiben benutze ich einfach den Notizblock, du kannst alles benutzen, was du willst, es ist nicht wirklich wichtig.

2. Erstellen einer Sitemap

Als zweites erstelle ich eine Sitemap. Eine Sitemap erklärt im Grunde, wie Dinge miteinander verbunden sind und in welcher Beziehung sie zueinander stehen. Das können Webseiten, Datenbanken oder irgendetwas anderes sein. In der Abbildung unten sehen Sie beispielsweise alle Teile dieser Website, in denen jede Seite Sie und kurze Funktionen, die die Seite haben wird, unterstützen kann und nicht.

Zum Erstellen von Sitemaps können Sie jedes gewünschte Tool verwenden. Es kann Paint, Photoshop oder irgendetwas anderes sein. Ich persönlich benutze Microsoft Word oder habe in letzter Zeit ein Online-Tool namens  Figma verwendet , das ich wahrscheinlich immer verwenden werde, weil es kostenlos und wirklich einfach ist.

3. Entwerfen einer Website

3. Entwerfen einer Website

Der dritte Teil und der Teil, den die meisten Leute mit dem Erstellen einer Website verbinden, ist das eigentliche Design. Das Entwerfen einer Website vor dem eigentlichen Erstellen ist sehr wichtig, da es einfacher ist, eine Website in einer Drag & Drop-Software zu entwerfen, die im Code selbst enthalten ist. Auf diese Weise können Sie leicht etwas ändern, wenn Sie es nicht mögen oder wenn die Person, für die Sie eine Website erstellen, es nicht mag.

Zum Entwerfen verwende ich auch Figma, weil es einfach und kostenlos ist. Sie können verwenden, was Sie möchten, aber das Wichtigste ist, dass Sie diese Software mögen. Wenn das Design für mich oder die Person, für die ich es erstelle, gut aussieht, kann ich tatsächlich mit dem Erstellen einer Website mit Code beginnen.

4. Erstellen einer Website mit Code

Schließlich kamen wir zu dem Teil, in dem wir tatsächlich eine Website erstellen. Ich erstelle Websites mit Code, aber wenn Sie den gleichen Prozess verwenden können, um eine Website mit WordPress oder einem anderen CMS zu erstellen. In beiden Fällen sollte dies nicht der Teil sein, in dem Sie das Design erstellen, sondern der Teil, in dem Sie das Design erstellen, das Sie zuvor erstellt haben.

In Bezug auf die Technologien, die ich verwende, verwende ich HTML, CSS, JavaScript und etwas Bootstrap, um das Front-End zu erstellen. Manchmal verwende ich auch jQuery. Für das Backend verwende ich Python mit dem  Flask-  Framework. Und für die Datenbank verwende ich SQLAlchemy. Hier sind einige Kurse, die ich persönlich zum Lernen verwendet habe:

5. Testen und Starten der Website

Der letzte Teil besteht darin, zu testen, ob alle von Ihnen erstellten Funktionen funktionieren, nicht korrigierte Probleme zu beheben. Wenn Sie wissen, dass Sie eine voll funktionsfähige Website ohne Fehler haben, können Sie sie live starten, damit die Benutzer sie sehen können. Zum Starten einer Website benötigen Sie einen Webhosting-Server und einen Domainnamen. Es gibt viele gute Orte, an denen Sie sie bekommen können. Ich persönlich benutze  Bluehost  für beide.

Fazit

Wie Sie sehen, umfasst das Erstellen einer Website viel mehr Schritte als nur das Codieren. Wenn Sie alle diese Schritte zusammenführen, können Sie eine schöne Website erstellen.

Ich hoffe, dass ich Ihnen bei diesem Artikel geholfen habe. Wenn Ihnen dieser Artikel gefallen hat, stellen Sie sicher, dass Sie ihn mit Ihren Freunden teilen.

The post Wie ich Websites erstelle: Der Prozess der Webentwicklung appeared first on Marketing.

]]>
Der beste Weg, um die Frontend-Webentwicklung zu lernen https://www.mediaart-jena.de/index.php/2020/04/17/der-beste-weg-um-die-frontend-webentwicklung-zu-lernen/ Fri, 17 Apr 2020 00:30:16 +0000 https://www.mediaart-jena.de/?p=168 Warum Webentwicklung? Webentwicklung ist ein Bereich, der nicht so schnell irgendwohin führt. Das Web bewegt sich schnell und es gibt regelmäßige Verbesserungen an den Geräten, die viele Menschen täglich verwenden. Cloud-basierte Anwendungen haben es uns ermöglicht, das schwere Heben in der Cloud zu erledigen und den Browser als Brücke zu verwenden, um leistungsstarke Backend-Server mit […]

The post Der beste Weg, um die Frontend-Webentwicklung zu lernen appeared first on Marketing.

]]>
Warum Webentwicklung?

Webentwicklung ist ein Bereich, der nicht so schnell irgendwohin führt. Das Web bewegt sich schnell und es gibt regelmäßige Verbesserungen an den Geräten, die viele Menschen täglich verwenden.

Cloud-basierte Anwendungen haben es uns ermöglicht, das schwere Heben in der Cloud zu erledigen und den Browser als Brücke zu verwenden, um leistungsstarke Backend-Server mit weniger leistungsfähigen und leistungsstarken Frontends zu verbinden.

Jetzt ist der beste Zeitpunkt, um Webentwicklung zu lernen, wenn Sie etwas lernen möchten.

Die Webentwicklung eröffnet Ihnen als Einzelperson nicht nur eine Vielzahl von Möglichkeiten, sondern Sie können auch komplette Projekte durchgängig codieren und bereitstellen, die von fast jedem auf der Welt genutzt werden können.

Da die meisten Benutzer Zugriff auf einen Browser haben, ist jede Person nur eine einzige URL von der von Ihnen codierten Web-App entfernt. Wenn Sie dies mit einer Desktop-Anwendung oder einem hardwarebasierten Produkt vergleichen, werden Sie feststellen, dass es im Vergleich zum Web einfach nicht so skalierbar ist.

Nachdem wir festgestellt haben, dass das Web derzeit der beste Weg ist, wollen wir sehen, wie Sie die Webentwicklung bestmöglich erlernen.

Das Web ist riesig – fangen Sie klein an und halten Sie es klein

Sie haben wahrscheinlich eine große Anzahl von JavaScript-Frameworks und -Bibliotheken wie React, Angular, Vue, Ember, jQuery, XYZ usw. gesehen.

Einige sehr häufige Fragen, die ich als YouTuber beim Posten von Webentwicklungsinhalten bekomme, sind folgende:

Soll ich X lernen?

Ist X besser als Y?

Was ist der Umfang von Z?

Denken Sie immer an zwei Dinge über Technologie, insbesondere über das Web:

  1. Ihr Tech-Stack spielt fast immer keine Rolle. Wenn Sie mit Ihrer Sprache / Ihrem Framework gut genug sind, werden Sie jedes Mal gewinnen.
  2. Sie müssen nie alles lernen. Noch nie. Sie können ein Alleskönner sein, aber stellen Sie sicher, dass Sie ein Meister sind.

Um diesen Abschnitt zusammenzufassen, müssen Sie zu Beginn sehr klein denken . Es ist super einfach, sich von diesem heißen Framework, das gerade veröffentlicht wurde, mitreißen zu lassen. Versuchen Sie einfach nicht, mit alten Technologien voranzukommen und neue Technologien anzupassen, ohne entsprechende Nachforschungen anzustellen.

Beginnen Sie mit HTML und CSS

Ich kann das nicht genug betonen. Es schmerzt mich, wenn eine Menge Leute mir Fragen zu ihren React-Projekten stellen, wenn die Antwort in einfachem HTML oder CSS liegt.

JavaScript war anfangs nur eine Browser-Skriptsprache. Und obwohl es jetzt viel mehr als das ist, ändert es nichts an der Tatsache, dass es im Web HTML und CSS ergänzt.

Mit den Fortschritten bei den Webstandards können Sie allein in CSS so viel erreichen. Für viele Dinge wird JavaScript nicht einmal benötigt.

Animationen? Du hast es. Drag & Drop? HTML kann damit umgehen. Layouts? Testen Sie die Flexbox- oder Grid-CSS-APIs!

Es gibt so viele Dinge, die Sie über HTML und CSS lernen können! Stürzen Sie sich nicht einfach in JavaScript, denn alle coolen Kids auf dem Block stehen auf Angular. Diese Bibliotheken und Frameworks gehen nirgendwo hin. Nehmen Sie sich Zeit .

Weit gehen oder tief gehen?

Es gibt zwei Ansätze, wenn Sie Webentwicklung lernen – weit gehen oder tief gehen.

Wenn Sie weit gehen, lernen Sie viele Dinge zusammen. Dies könnte für einige Leute funktionieren, aber nicht für andere. Sie könnten sich mit Tutorials, Übungen, Videos und Blogs überwältigen und schließlich aufgeben.

Tief gehen bedeutet, dass Sie eine Sache lernen und versuchen, so viel wie möglich darüber zu lernen. Dies hat seine eigenen Vor- und Nachteile. Sie könnten sich langweilen oder aufgeben, weil Sie keine Ergebnisse sehen.

Was ist die Lösung? Die Antwort ist überraschenderweise beides nicht. Wählen Sie einen kleinen Tech-Stack wie HTML / CSS / JavaScript und gehen Sie mäßig tief in alle drei ein. Dies hat einige Vorteile:

  1. Sie werden sich nicht langweilen, da alle drei relativ unterschiedliche Zwecke haben und Sie sie unterschiedlich schreiben.
  2. Sie können alle drei Elemente mischen und ohne monatelangen Aufwand schnell etwas Sinnvolles erstellen und sehen (was normalerweise in anderen Sprachen wie C / C ++ erforderlich ist). So bleiben Sie motiviert, weiterzumachen.

Wählen Sie nicht React, Angular oder Vue

Wenn Leute anfangen, mit JavaScript zu arbeiten, besteht der Drang, eine Bibliothek wie React, ein UI-System wie Material UI, in die Hand zu nehmen und großartige Dinge zu entwickeln.

Leider führt dies nur dazu, dass Sie sich in den Fuß schießen. Mit diesen Frameworks können Sie niemals Projekte für Fortgeschrittene erstellen, wenn Sie die Grundlagen von JavaScript nicht verstehen. Das Anwenden von JavaScript dauert einige Zeit.

Beachten Sie, dass ich im vorherigen Satz das Wort “Anwenden” und “Nicht Lernen” verwendet habe. Es gibt einen großen Unterschied zwischen dem Lernen und dem Anwenden von etwas, das Sie gelernt haben.

Erstellen Sie ein kleines, aber funktionierendes Projekt mit HTML / CSS / JavaScript. Wenn Sie dies tun, erstellen Sie ein weiteres und dann ein anderes Projekt.

Steigern Sie bei jedem Schritt die Komplexität des Projekts und auch die Erwartungen, bis Ihre Codebasis nicht mehr verwaltet werden kann. An diesem Punkt sind Sie an dem angekommen, was ich gerne als Grenze des überlegenen Lernens bezeichne .

Sie sehen, es gibt Frameworks, um sich wiederholende Arbeiten von Ihnen zu entfernen. Sie existieren nicht, so dass Sie ignorieren, was wirklich unter der Haube vor sich geht, und sich auf die Tatsache verlassen, dass alles Magie ist.

Das erste Mal, wenn Sie ein Framework wie React oder Angular für Ihre Projekte auswählen, sollten Sie sicher sein, dass Sie dieses Projekt ohne React oder Angular erstellen können .

Meister eines Gewerbes

Wenn Sie mit HTML / CSS / JavaScript gut umgehen können, ist es an der Zeit, zu Industriestandards überzugehen. Die Wahrheit ist, egal wie gut Sie als JavaScript-Entwickler sind, Sie müssen häufig mit modernen Frameworks wie React arbeiten – und nur mit Ihrem JavaScript-Wissen können Sie es nicht sofort beherrschen.

Es wird einige Zeit dauern, um die Terminologie, die Konzepte und die Funktionsweise dieses Frameworks unter der Haube zu lernen und zu verstehen. Nehmen Sie also ein Framework auf und meistern Sie es.

Wie könnte man fragen? Die Antwort ist einfach – es liegt an Ihnen. Erstellen Sie ein einfaches Projekt in allen wichtigen Frameworks (Angular, Vue und React) und finden Sie heraus, welches am besten zu Ihnen passt. Wählen Sie eine und schauen Sie nicht zurück

Erstellen Sie dann alle Ihre Projekte mit diesem Framework. Ziel ist es, etwas zu tun, von dem Sie noch nicht wissen, wie es geht. Dies ist der beste Weg, um sich aus Ihrer Komfortzone herauszudrücken und neue Dinge zu lernen .

Aber vergiss die anderen nicht

Ebenso wichtig ist es, auch andere Kandidaten im Auge zu behalten. Dies betrifft nicht nur direkte Konkurrenten Ihres “Lieblings” -Frameworks, sondern auch einige wertvolle Webentwicklungstools.

Sie müssen diese anderen Tools nicht “beherrschen”, da sie häufig nur eine einmalige Einrichtung mit regelmäßiger Wartung erfordern. Aber es ist immer schön, sie auf Ihrer Checkliste zu halten.

Dies kann verschiedene Dinge umfassen – wie Unit-Tests mit Jest, End-to-End-Tests mit Cypress, Webpack, Babel oder Parcel, ein bisschen Devops, Linux-Shell-Scripting, Server-Bereitstellungen und so weiter.

Sie können die Grundlagen dieser Fähigkeiten immer schnell erlernen, da sie schon lange existieren, sodass ihnen viele hilfreiche Materialien zur Verfügung stehen.

Mach weiter

Vertrauen Sie mir, es ist ein komisches Gefühl – aber sobald Sie viele Projekte entwickelt und viel Code mit Ihrem Lieblingsstapel geschrieben haben, haben Sie das Gefühl, dass Sie alles tun können. An diesem Punkt können Sie einen Job bekommen und einfach das Gleiche tun – das ist völlig in Ordnung. Oder Sie können Ihre Fähigkeiten durch das Dach verbessern und weitermachen.

Das Netz. Ist. Riesig.

Wenn Sie mit HTML / CSS / JavaScript / React / Angular / Vue fertig sind, wechseln Sie zu Servern. Erfahren Sie mehr über Serverbereitstellung, NGiNX, HAProxy, Lastausgleich, Einrichten der Cloud-Infrastruktur, Firewalls und automatische Skalierung.

Auch damit fertig? Wechseln Sie zu WebAssembly, der Sprache für die nächste Iteration des Webs.

WebAssembly abgeschlossen? Ähm, ich weiß es dann nicht. Vielleicht zu anderen Programmierbereichen übergehen oder kochen? 🙂 🙂

Fazit

In der heutigen Welt fällt es Ihnen so leicht, die Fehler, die ich beim Erlernen der Webentwicklung selbst gemacht habe, nicht zu wiederholen. Weil all diese Fehler jetzt öffentlich sind und jeder sie lesen kann!

Ihnen stehen so viele Ressourcen zur Verfügung, und ich habe an einer gearbeitet, die Webentwickler lernen können! Hier ist mein YouTube-Kanal, auf dem ich dir beibringe, wie man großartige Dinge programmiert. Und hier ist die codedamn-Plattform – die eigentliche Plattform, mit der Sie ein großartiger Entwickler werden können, indem Sie eine Reihe von Videos, Artikeln und Übungen kombinieren .

Lassen Sie mich über meine Twitter- und Instagram- Handles wissen, was Sie über diesen Artikel und die Webentwicklung im Allgemeinen denken . Ich würde mich gerne mit dir da draußen verbinden!

The post Der beste Weg, um die Frontend-Webentwicklung zu lernen appeared first on Marketing.

]]>
Web-Programmiersprachen: Die besten Sprachen für die Webentwicklung https://www.mediaart-jena.de/index.php/2020/03/09/web-programmiersprachen-die-besten-sprachen-fuer-die-webentwicklung/ Mon, 09 Mar 2020 11:30:35 +0000 https://www.mediaart-jena.de/?p=160 Egal, ob Sie Videos auf YouTube ansehen, sich mit Geschäftspartnern auf LinkedIn vernetzen oder einen Artikel auf Wikipedia lesen, diese großen, häufig besuchten Websites funktionieren im Allgemeinen reibungslos. Die Frage, welche Skripte im Hintergrund laufen und wie sie programmiert wurden, stellt sich in der Regel erst dann, wenn Sie selbst eine Website erstellen möchten . Die Webentwicklung erfordert eine Reihe […]

The post Web-Programmiersprachen: Die besten Sprachen für die Webentwicklung appeared first on Marketing.

]]>
Egal, ob Sie Videos auf YouTube ansehen, sich mit Geschäftspartnern auf LinkedIn vernetzen oder einen Artikel auf Wikipedia lesen, diese großen, häufig besuchten Websites funktionieren im Allgemeinen reibungslos. Die Frage, welche Skripte im Hintergrund laufen und wie sie programmiert wurden, stellt sich in der Regel erst dann, wenn Sie selbst eine Website erstellen möchten . Die Webentwicklung erfordert eine Reihe von Entscheidungen, die im Voraus getroffen werden müssen. Sie müssen beispielsweise überlegen, ob Sie eine gute Programmiersprache auswählen müssen, ob Sie einen Entwickler einstellen möchten, der über die erforderlichen Fähigkeiten verfügt, oder ob Sie als Programmierer selbst eine Web-Programmiersprache auswählen müssen, die Ihre Kenntnisse verbessert Wissen und verbessern Sie Ihr Portfolio.

Mit Web-Programmiersprachen können komplexe logische Anweisungen und Prozesse definiert werden . Während Auszeichnungssprachen wie HTML nur zum Generieren von Dokumenten verwendet werden können, können Sie mit Programmiersprachen Programme jeder Größe erstellen, die Ihren Anforderungen entsprechen. Welche Programmiersprachen eignen sich besonders für den Einsatz im Web? Wofür werden sie benutzt? Welche Sprachen am vielseitigsten sind und welche für Programmieranfänger relativ einfach zu erlernen sind, erfahren Sie in unserem Artikel über das Erlernen des Programmierens . Diese Übersicht der Webentwicklungssprachen beantwortet diese Fragen.

Java

Java ist eine Open Source und plattformunabhängige Programmiersprache, die dank ihrer Vielseitigkeit für nahezu jede Situation einsetzbar ist. Es ist wie die meisten Web-Programmiersprachen objektorientiert . Das heißt, der Fokus liegt auf konkreten Anwendungen. Durch die große Anzahl von Web-Frameworks und -Bibliotheken, die in der Regel über eine umfassende Dokumentation verfügen, ist es einfacher, auch hochkomplexe Webprojekte zu erstellen. In Java geschriebene Programme sind einfach zu erweitern, können nach Bedarf skaliert und einfach gewartet werden, vorausgesetzt, der Programmierer, der sie geschrieben hat, wusste, was sie taten.

Da Java vergleichsweise schwer zu erlernen ist und weniger Experten für diese Programmiersprache zur Verfügung stehen, müssen sich Kunden mit höheren Kosten als bei Verwendung anderer Programmiersprachen auseinandersetzen. In der Zwischenzeit dürften Programmierer mit Java-Kenntnissen ein vergleichsweise hohes Einkommen haben.

JavaScript

Trotz des Namens hat diese dynamische, objektorientierte Skriptsprache nichts mit Java zu tun, abgesehen davon, dass beide auf C basieren. 1995 entwickelte Netscape JavaScript, ursprünglich als LiveScript bezeichnet, mit dem Ziel, HTML und CSS zu erweitern, um Programmierern zu ermöglichen um Benutzerinteraktionen auszuwerten und Inhalte dynamisch anzuzeigen. Heutzutage wird JavaScript nicht nur für Webbrowser, sondern auch für Mikrocontroller und Server verwendet . Der Name JavaScript wurde nur wegen der Popularität von Java gewählt. Zu dieser Zeit wollten die Menschen damit in Verbindung gebracht werden. Das war ein großer Erfolg. Heutzutage verwenden fast alle gängigen Websites JavaScript als Programmiersprache auf der Client-Seite. Zusätzlich,JavaScript verfügt über umfangreiche Frameworks und Bibliotheken .

Diese Programmiersprache ist dynamisch typisiert und klassenlos . Es gibt Programmierern die Wahl zwischen objektorientierter, prozeduraler oder funktionaler Programmierung, was es zu einer äußerst vielseitigen Programmiersprache macht. Dies zeigt sich besonders in Webbrowsern. Beispielsweise kann JavaScript verwendet werden, um Websites dynamisch zu ändern, Formulareinträge zu validieren, bevor sie an den Zielserver gesendet werden, Dialogfelder zu wechseln sowie Skripts zum Herunterladen und Hochladen zu integrieren. JavaScript ist auch ein unverzichtbares Werkzeug für das Online-Marketing geworden , da viele Anzeigen damit programmiert sind. Diese Sprache kann auch zum Lesen und Schreiben von Cookies verwendet werden , was moderne Marketingstrategien wie Targeting ermöglichtmöglich. Kurz gesagt, JavaScript hat das moderne Internet mitgeprägt und ist ein wesentlicher Bestandteil des heutigen Webbrowsers.

PHP

Hypertext Preprocessor, besser bekannt unter dem alten Akronym PHP, ist eine Skriptsprache, die auf C und Perl basiert. Es wird hauptsächlich zum Programmieren dynamischer Websites und Webanwendungen verwendet . PHP gilt als anfängerfreundlich und kann in HTML integriert werden. Daher ist es oft eine der ersten Sprachen, die ein angehender Programmierer lernt. Viele Webseitenbetreiber verlassen sich auch heute noch auf PHP, obwohl die Sprache allgemein als etwas veraltet angesehen wird. Zu den wichtigsten Vorteilen zählen die breite Unterstützung verschiedener Datenbanken und die effiziente Integration des Internetprotokolls. PHP hat seit seiner Erstellung mehrere Updates erhalten und ist derzeit auf Version 7. Diese Sprache hat eine Open-Source-Lizenz und ist kostenlos erhältlich. Trinkgeld

Mit unserem PHP-Tutorial für Anfänger können Sie die Grundlagen dieser Skriptsprache erlernen .

PHP verarbeitet den Code auf der Serverseite und umgeht dabei die Interpretation des Webbrowsers, die normalerweise in anderen gängigen Internet-Programmiersprachen verwendet wird. Dies bedeutet auch, dass PHP zustandslosem HTTP unterliegt und den abgefragten Webserver viel stärker belastet als Programmiersprachen, die den Quellcode nur an einen dedizierten Webbrowser senden. PHP wird auch für seine schwache Typisierung und das Fehlen standardisierter Fehlerbehandlungsfunktionen kritisiert . Die Tatsache, dass viele große Websites immer noch PHP verwenden, ist jedoch ein Beweis für seine Beliebtheit. Probleme können jedoch auftreten, wenn Website-Betreiber veraltete PHP-Versionen verwenden, die die Sicherheit und Stabilität der Website gefährden.

Python

Python ist als Programmiersprache auf hohem Niveau bekannt und verwendet kompakten, aber leicht verständlichen Code. Python ist auch einfach zu tippen, da Sie Codeblöcke nicht durch Sonderzeichen, sondern durch Einrücken trennen müssen. Aus diesem Grund wird das Erlernen und Verwenden der Sprache als angenehm empfunden . Sie können es je nach Bedarf für die objektorientierte, aspektorientierte oder funktionale Programmierung verwenden. Python ist ebenfalls dynamisch und wird daher häufig als Skriptsprache verwendet . Python wird von einer aktiven Community unterstützt und von der gemeinnützigen Python Software Foundation auf dem neuesten Stand und relevant gehalten. Diese Sprache ist frei verfügbar und kann mit den meisten aktuellen Betriebssystemen verwendet werden.

Viele beliebte Webdienste wie YouTube und andere Google-Projekte basieren teilweise auf Python. Die Videospielindustrie hat diese Programmiersprache ebenfalls angenommen. Gleiches gilt für wissenschaftliche Projekte . Python ist für diesen Zweck sehr populär geworden, vor allem, weil die meisten wissenschaftlichen Datenbanken leicht in die Sprache integriert werden können und weil Aufgaben, bei denen empirische Daten gesammelt werden, mit ihr effizient ausgeführt werden können. Python ist daher eine besonders wichtige Programmiersprache für Anfänger in diesen Bereichen. Es wurde jedoch für seine relativ niedrige Ausführungsgeschwindigkeit und für die Langlebigkeit der Definitionen seiner Methoden kritisiert.

Rubin

Ruby ist eine weitere Programmiersprache auf hohem Niveau. Es wurde Mitte der 1990er Jahre von Yukihiro Matsumoto entwickelt. Diese rein objektorientierte Programmiersprache bietet dynamische Typisierung und Reflexion sowie automatische Speicherbereinigung . Rubys Hauptunterscheidungsmerkmal ist der objektorientierte Fokus, bei dem jeder Wert und jede Klasse ein Objekt ist. Im Gegensatz zu anderen objektorientierten Programmiersprachen gibt es in Ruby keine primitiven Datentypen. Kurz gesagt: “Alles ist ein Objekt.”

Rubys Syntax ist bequem flexibel. Beispielsweise ist die Verwendung von Klammern häufig optional. Dadurch ist die Sprache einfach zu lesen und sieht häufig wie eine Auszeichnungssprache aus. Trotzdem ist Ruby sehr umfangreich und ermöglicht auch Metaprogrammierung, mit der Programmierer Methoden generieren, die Vererbungshierarchie ändern und andere Konstanten in der Programmiersprache nach Belieben ändern können. Aus diesem Grund gilt Ruby als „ leicht zu erlernen, aber schwer zu meistern”. Kritiker äußerten Bedenken hinsichtlich der negativen Folgen von Tippfehlern im Programmcode. In solchen Fällen können unerwartete Laufzeitfehler zu mühsamen Debugsitzungen führen. Ruby wird oft als Skriptsprache für Webserver verwendet, aber auch überraschend oft in der Videospielbranche. Diese Sprache ist für alle aktuellen Betriebssysteme verfügbar.

C ++

C ++ basiert auf C, einer der ältesten Programmiersprachen. Die Entwicklung dieser Sprache, die damals als Erweiterung von C gedacht war, begann 1979, wurde aber erst 1985 der Öffentlichkeit zugänglich gemacht. Sie ist bis heute sehr beliebt. C ++ ist eine der Programmiersprachen mit einem ISO-Standard (International Organization for Standardization) . Es gilt auch als maschinenorientiert und effizient sowie hochgradig abstrahierbar und komplex. C ++ ist grundsätzlich leicht zu erlernen , insbesondere weil die Kernsprache aus ungefähr 60 Schlüsselwörtern besteht. Die Sprache wird durch ihre Standardbibliothek komplexer und umfassender.

Die größten Stärken von C ++ sind die Kombinationsvielfalt und die effiziente maschinenorientierte Programmierung . Dadurch können hochkomplexe Prozesse in Grundfunktionen integriert werden. Infolgedessen können C ++ – Programmierer Zeit sparen, indem sie sich auf die Kernsprache und die Standardbibliothek verlassen. Aufgrund der Tatsache, dass es stark auf C basiert, hat diese Programmiersprache einige Nachteile, wie zum Beispiel ihre vergleichsweise chaotische Syntax . Dennoch ist C ++ heute eine der beliebtesten Programmiersprachen, wenn es um System- und Anwendungsprogrammierung geht. In Bezug auf Web-Programmiersprachen muss C ++ jedoch einen niedrigeren Rang als Java, JavaScript und C # haben.

C #

Die relativ neue Programmiersprache C #, ausgesprochen als „Cis“, wurde 2001 veröffentlicht und gilt als Allzwecksprache . Es ist typsicher, objektorientiert und grundsätzlich plattformunabhängig. Es wurde jedoch speziell von Microsoft für .NET Framework entwickelt . C # wird häufig auch als “Visual C #” bezeichnet, hauptsächlich für Implementierungen. Konzeptionell ist die Sprache unter anderem mit Java und C ++ verwandt, erweitert jedoch das objektorientierte Modellenthalten Attribute welche speichern Informationen über Klassen, Objekte und Methoden sowie die Delegierten , die sich auf Verfahren für bestimmte Klassen beziehen. Dies führt in erster Linie zu einer genaueren Fehlerbeschreibung beim Kompilieren von Code, was Entwicklern viel Zeit spart.

Viele Leute glauben, dass C # die wichtigste Programmiersprache ist, die Webentwickler neben Java lernen sollten. Als objektorientierte Webprogrammiersprache bietet C # die beste Kombination aus Funktionalität und Tiefe . Kritiker haben gewarnt, dass die Verwendung von C # Sie mit dem .NET Framework von Microsoft verbindet. Trotzdem nutzen Programmierer es für einen großen Teil des Marktes. Viele Programmierer verlassen sich jetzt auf C #, sei es für die Entwicklung für Windows-Systeme oder für Videospiele auf Xbox und PC. C # wird hauptsächlich als Webprogrammiersprache für Web-APIs und verschiedene Webanwendungen verwendet.

Perl

Die freie Programmiersprache Perl erschien 1987 und lieferte die Inspiration als interpretierte Programmiersprache und Skriptsprache für Sprachen wie PHP, JavaScript, Ruby und Python. Die Programmierer verwendeten hauptsächlich Programmiersprachen der C-Familie. Diese Sprache ist grundsätzlich plattformunabhängig und wurde ursprünglich für die Netzwerk- und Systemadministration entwickelt . Seitdem hat sich Perl auch als eine der beliebtesten Programmiersprachen für Web-Software, Bioinformatik und Finanzen etabliert.

Programmierer, die Perl verwenden, profitieren von einem hohen Maß an Freiheit und einer effizienten Problemlösung . Beispielsweise können Sie Texte mit regulären Ausdrücken ändern. Darüber hinaus gibt es viele frei verfügbare Module für Perl, die aus der CPAN-Bibliothek von Perl abgerufen werden können . Die Programmiersprache Perl wurde mit dem Ziel entwickelt, Programmierern immer mehrere Möglichkeiten zur Erreichung ihrer Ziele zu bieten, dabei aber einfach und effizient zu bleiben und kontextsensitiv zu arbeiten. Perl spielte eine Schlüsselrolle bei der Verbreitung des World Wide Web und spielt auch heute noch eine große Rolle als Web-Programmiersprache . Perl wird seltener verwendet, wenn die Nähe zur Hardware (z. B. Webserver) und die Geschwindigkeit (z. B. Treiber) eine Rolle spielen.

Diese Web-Programmiersprachen werden von den beliebtesten Websites verwendet.

Programmieranfänger sind oftmals überwältigt von den zahlreichen Optionen, die in verschiedenen Sprachen verfügbar sind. Sie können jedoch auf wichtigen Websites nach Hinweisen suchen. Welche Programmiersprachen verwenden Facebook, Twitter oder Google? Welche eignen sich am besten für die Clientseite und welche für die Serverseite? Trinkgeld

Heutzutage müssen Sie keine Programmiersprache beherrschen, um eine Website einzurichten. 1 & 1 bietet mit MyWebsite eine intuitive Toolbox, mit der Sie schnell und einfach Ihre Website erstellen können.

Die folgende Tabelle zeigt, dass alle genannten Websites clientseitig mit JavaScript arbeiten, serverseitig jedoch auf verschiedene Programmiersprachen angewiesen sind. Nur Yahoo verwendet PHP auf der Serverseite.

The post Web-Programmiersprachen: Die besten Sprachen für die Webentwicklung appeared first on Marketing.

]]>
28. Januar 2019 Bemerkungen 5 Grundlegende Fähigkeiten, die jeder Front-End-Entwickler im Jahr 2019 lernen muss https://www.mediaart-jena.de/index.php/2020/02/18/28-januar-2019-bemerkungen-5-grundlegende-faehigkeiten-die-jeder-front-end-entwickler-im-jahr-2019-lernen-muss/ Tue, 18 Feb 2020 11:30:32 +0000 https://www.mediaart-jena.de/?p=159 Was braucht es, um 2019 ein Front-End-Webentwickler zu sein? Suchen Sie eine Karriere als Front-End-Webentwickler? Dies ist eine großartige Zeit, um ein Front-End-Webentwickler zu sein, da die Zahl der Webentwicklungsjobs und die damit verbundenen hohen Gehälter stetig steigen. Was sind die Fähigkeiten, die Sie benötigen, um sich 2019 als kompletter Front-End-Webentwickler zu bezeichnen? In diesem Blog-Beitrag […]

The post 28. Januar 2019 Bemerkungen 5 Grundlegende Fähigkeiten, die jeder Front-End-Entwickler im Jahr 2019 lernen muss appeared first on Marketing.

]]>
Was braucht es, um 2019 ein Front-End-Webentwickler zu sein?

Suchen Sie eine Karriere als Front-End-Webentwickler? Dies ist eine großartige Zeit, um ein Front-End-Webentwickler zu sein, da die Zahl der Webentwicklungsjobs und die damit verbundenen hohen Gehälter stetig steigen.

Was sind die Fähigkeiten, die Sie benötigen, um sich 2019 als kompletter Front-End-Webentwickler zu bezeichnen?

In diesem Blog-Beitrag werden wir die Fähigkeiten und Tools untersuchen, die Sie benötigen, um ein erfolgreicher Front-End-Webentwickler zu sein. Der Beitrag enthält Links zu den besten Ressourcen, die heute verfügbar sind, um diese Fähigkeiten zu erlernen. Folgen Sie uns und erfahren Sie, was es heißt, 2019 ein Front-End-Webentwickler zu sein.

Fähigkeit 1: HTML

HTML ist das erste, was Sie lernen müssen, um mit der Webentwicklung zu beginnen. HTML ist eine Standardauszeichnungssprache, die zum Erstellen von Webseiten verwendet wird. Es ist der Beginn Ihrer Reise zur Webentwicklung. Es ist über die Jahre ein langer Weg gegangen, und heute ist HTML 5 der neueste Standard.

HTML ist leicht zu erlernen und es gibt viele kostenlose Ressourcen zum Erlernen von HTML.

Eine meiner Top-Tipps zum Erlernen von HTML ist der unten erwähnte freeCodeCamp-Kurs.

Lernen Sie HTML 5 – Free Code Camp Course völlig kostenlos

Fähigkeit 2 – CSS

Jetzt kennen Sie sich mit HTML aus, stellen jedoch möglicherweise fest, dass Ihre einfache HTML-Website hässlich aussieht. Sie müssen Ihren Webseiten Stil und Geschmack verleihen. CSS macht genau das. CSS lässt Ihre Webseiten großartig aussehen und bietet Ihren Benutzern eine großartige Benutzererfahrung.

Das Hinzufügen von Farben, das Ändern der Größe von Schaltflächen, Hintergrundbildern, die Reaktionsfähigkeit Ihrer Website auf dem Desktop und auf Mobilgeräten und vieles mehr kann mit CSS erfolgen.

Tatsächlich werden viele UI-Entwickler CSS-Experten und verdienen mit dieser Fähigkeit eine Menge Geld. freeCodeCamp bietet eine großartige Ressource zum Erlernen von grundlegendem CSS.

Erfahren Sie grundlegende CSS – Free Code Camp

CSS-Präprozessoren

Sobald Sie die Grundlagen von CSS kennen und sich mit dem Gestalten Ihrer Webseite vertraut gemacht haben, ist es an der Zeit, mehr zu erfahren.

Präprozessoren erweitern Ihr CSS um mehr Funktionen. Es gibt viele Optionen, Sass, Less, PostCSS, Stylus usw.

Wenn ich mir einen aussuchen würde, würde ich mich für Sass entscheiden . PostCSS gewinnt ebenfalls an Popularität, auf die Sie nach dem Lernen von Sass zurückgreifen können.

Liste der Tutorials für Sass

Fähigkeit 3 ​​- JavaScript

Mit HTML und CSS haben Sie schöne Webseiten entworfen, die aber eigentlich nichts bewirken. Wo lebt all unsere Geschäftslogik? Ich stelle mir JavaScript gerne als das Gehirn Ihrer Website vor.

JavaScript steuert die Benutzerinteraktionen auf Ihrer Website. Dynamische und komplexe Webanwendungen erfordern fundierte Kenntnisse in JavaScript.

Wussten Sie, dass JavaScript von der StackOverflow-Umfrage als beliebteste Programmiersprache des Jahres 2018 eingestuft wird ?

Das Erlernen von JavaScript führt Sie zu einem großen Erfolg bei Ihrer Arbeit.

Mosh hat einen großartigen Kurs über JavaScript verfasst. Der Kurs ermöglicht es Ihnen, die Grundlagen von JavaScript zu erlernen

Sie können eine Vorschau des Kurses unten anzeigen:

JavaScript-Grundlagen für Anfänger | Code mit Mosh

Fähigkeit 4: JavaScript-Bibliotheken und Frameworks

Obwohl Sie Ihre gesamte Webanwendung mit JavaScript, HTML und CSS schreiben können, erleichtern Ihnen moderne JavaScript-Frameworks und -Bibliotheken die Arbeit.

Sie werden mit Mustern und Best Practices geliefert, die die Entwicklung erheblich erleichtern. Wenn Sie sich fragen, warum es moderne JavaScript-Frameworks gibt, ist dieser Artikel eine gute Lektüre, um sich einen Überblick zu verschaffen.

Sie helfen beim Schreiben komplexer Apps mit einer effizienten und einfach zu wartenden Benutzeroberfläche. Hinter diesen Rahmenbedingungen verbirgt sich eine starke Gemeinschaft, in der sich viele Menschen gegenseitig zum Erfolg verhelfen.

Die drei wichtigsten Frameworks, die es zu lernen gibt, sind:

Option 1. Reagieren

Wenn Sie noch nicht von React gehört haben, ist es die beliebteste JavaScript-Bibliothek, die heute verwendet wird. Es hat über 120.000 Sterne auf Github . React wurde von Facebook als Open-Source-Version veröffentlicht und ist in der Community sehr präsent. Heutzutage werden viele moderne Webanwendungen mit React erstellt.

Wenn Sie mehr über React erfahren und es meistern möchten, lesen Sie den Mosh-Kurs über React, der es Ihnen ermöglicht, ein erfolgreicher React-Entwickler zu werden.

Mastering React – Alles, was Sie über React wissen müssen .

Option 2 – Winkel

Angenommen, Sie sind nicht von React beeindruckt oder suchen nach anderen Optionen. Angular ist eine vollständige JavaScript-Bibliothek, die genauso beliebt ist wie React.

Wenn Sie einen Vergleich zwischen den beiden Frameworks suchen, lesen Sie unseren Blog-Beitrag zu Angular vs. React , um ein besseres Verständnis für deren Vergleich zu erhalten.

Wenn Sie mehr über Angular erfahren und es beherrschen möchten, lesen Sie Moshs Kurs über Angular, der es Ihnen ermöglicht, ein erfolgreicher Angular-Entwickler zu werden.

Master Angular – Anfänger bis Profi

Option 3 – Vue

Vue.js ist das neue Kind auf dem Block. Es hat Ideen von Angular und React. Es ist ein vergleichsweise leichtes Framework, das in letzter Zeit immer beliebter wird.

Weitere Informationen zum Vergleich von Vue.js mit React finden Sie in unserem Blog-Beitrag zu React vs. Vue .

Egghead.io hat einige Kurse zu Vue.js und die offizielle Dokumentation zu Vue.js ist sehr gut organisiert und sehr nützlich.

Vue.js offizielle Dokumentation

Fähigkeit 5 – Code testen

Testen ist ein sehr wichtiger Aspekt beim Schreiben von sauberem, wartbarem und fehlerfreiem Code. Gut getesteter Code zahlt sich auf lange Sicht aus und Sie werden den Aufwand Jahre später zu schätzen wissen. Es gibt verschiedene Arten von Tests, die Sie schreiben können, darunter Unit-Tests, Integrationstests, Funktionstests usw.

JavaScript bietet viele Testoptionen und ich werde einige der beliebtesten Test-Frameworks auflisten. Denken Sie daran, dass Sie nicht alle lernen müssen. Sie müssen auswählen, was Sie möchten und Tests mit ihnen schreiben.

Option 1: Scherz

Eines der beliebtesten Test-Frameworks von Facebook ist Jest. Dies ist zufällig auch mein persönlicher Favorit zum Testen von Code. Jest funktioniert sehr gut mit React-Anwendungen, obwohl es mit jedem modernen JavaScript-Framework verwendet werden kann.

Scherz ist einfach einzurichten und zu lernen.

Offizielle Scherzdokumentation und APIs

Option 2: Mokka

Mokka ist ein weiteres beliebtes Test-Framework, das eine Alternative zu Jest sein kann. Mocha ist ein funktionsreiches JavaScript-Testframework, das auf  Node.js  und im Browser ausgeführt wird und das asynchrone Testen einfach und unterhaltsam macht.

Offizielle Mokka-Dokumentation und APIs

Option 3: Enzym (Komponententest)

Enzyme ist ein JavaScript-Testprogramm für React, mit dem Sie die Ausgabe Ihrer React Components leichter bestätigen, manipulieren und durchlaufen können.

Dies ist kein Komponententest, sondern ein Test des Komponentenlebenszyklus. Es ist sehr beliebt in der React-Community.

Offizielle Enzymdokumentation und APIs

Option 4: Andere Frameworks

Es gibt viele andere Testoptionen für JavaScript. Die Umfrage zum Stand von JavaScript 2018 enthält eine ganze Liste weiterer gängiger Test-Frameworks, die Sie untersuchen können, bevor Sie sich für eine Verwendung entscheiden.

Weitere Testoptionen

Tools für die moderne Frontend-Webentwicklung

Sobald Sie die Fähigkeiten zum Codieren erworben haben, sollten Sie sich als Nächstes mit den modernen Tools vertraut machen, die zur Verfügung stehen. Kommen wir zu den verschiedenen Werkzeugoptionen für einen Webentwickler.

Erstellen Sie Tools

Moderne Build-Tools sind immens hilfreich beim Erstellen und Bündeln Ihres Codes und helfen auch bei der Entwicklung.

Webpack

Das beste Tool, das es seit 2019 gibt, um Ihren Code zu bündeln und zu erstellen. Es ist ein statischer Modulbündler für moderne JavaScript-Anwendungen.

Sie können alles darüber erfahren und es in der folgenden offiziellen Dokumentation einrichten:

Webpack-Dokumentation und Setup

Aufrollen

Eine Alternative zu Webpack ist Rollup. Rollup ist ein Modulbündler für JavaScript, der kleine Codeteile zu etwas Größerem und Komplexerem kompiliert, z. B. einer Bibliothek oder einer Anwendung. Es verwendet das neue standardisierte Format für Codemodule, die in der ES6-Revision von JavaScript enthalten sind.

Rollup-Dokumentation und Setup

Paketmanager

Paketmanager werden zum Installieren, Freigeben und Verteilen von Code verwendet. Sie verwalten auch Abhängigkeiten in Ihren Projekten.

NPM

Es ist mit Abstand der am häufigsten verwendete Paketmanager für JavaScript.

Offizielle NPM-Dokumentation

Garn

Garn ist mein persönlicher Favorit und kann alles, was NPM tut. Es scheint schneller und einfacher zu sein als NPM und viele Leute ziehen heutzutage zu Yarn um.

Offizielle Garndokumentation

Linters und Formatierer

Nach all dem komplexen Lernen möchten Sie nun sicherstellen, dass Ihr Code sauber und gut formatiert ist. Sauberer Code ist wartbar und lesbar. Es gibt auch Tools, mit denen Sie sich um die Formatierung und das Flusen Ihres Codes kümmern können.

ESLint

ESLint ist der am häufigsten verwendete Linter in der Branche. Es übernimmt die Formatierung und Sie können Regeln definieren, die auf Ihrem Team- / persönlichen Codierungsstandard basieren. Der Linter erkennt die Fehler für Sie.

Offizielle ESLint-Website für Einrichtung und Dokumentation

Schöner

Dies ist eine alternative Option, wenn Sie nach etwas anderem als ESLint suchen.

Schönere offizielle Website und Dokumentation

Dead Technologies – Fügt 2019 keinen Wert hinzu

Sie fragen sich vielleicht, warum in diesem Artikel nicht über JQuery gesprochen wird? Nun, es ist 2019 und JQuery ist großartig, aber es bringt keinen Mehrwert für Ihre Fähigkeiten im Jahr 2019. Die Webentwicklung hat einen langen Weg zurückgelegt und dank der Verwendung moderner Front-End-Frameworks müssen Sie keine Zeit damit verschwenden, alte Technologien wie z JQuery.

Einige andere Technologien, die ich diesem Bucket hinzufügen würde, wären Frameworks wie Ember und KnockoutJS. Diese waren großartig, als sie eingeführt wurden, aber mit leistungsstarken Frameworks wie React und Angular werden sie bald überholt sein.

Haftungsausschluss:  Wenn Sie älteren Code unterstützen müssen, der diese alten Technologien verwendet, müssen Sie immer noch Zeit damit verbringen, sie zu erlernen.

Fazit

Herzlichen Glückwunsch zum Ende des Artikels! Dies kann zu Beginn überwältigend sein, wenn Sie noch nicht mit der Front-End-Entwicklung vertraut sind. Mit den grundlegenden Programmierkenntnissen sind Sie jedoch in der Lage, als Front-End-Webentwickler erfolgreich zu sein, wenn Sie die verfügbaren Optionen mit Bedacht auswählen.

Wenn Ihnen dieser Beitrag gefallen hat, teilen Sie ihn bitte mit anderen.

The post 28. Januar 2019 Bemerkungen 5 Grundlegende Fähigkeiten, die jeder Front-End-Entwickler im Jahr 2019 lernen muss appeared first on Marketing.

]]>