Grundlegende Fähigkeiten zum Entwerfen von Web-Frontend-Schnittstellen

Grundlegende Fähigkeiten zum Entwerfen von Web-Frontend-Schnittstellen

[Erforderlich] Benutzeroberfläche
PhotoShop/Feuerwerk-Design
    Arbeiten Sie mit dem Künstler zusammen, um die Skizze in ein spezifisches Design umzuwandeln, das der Webseite entspricht. Möglichkeit, schnell geschichtete PSD- und PNG-Dateien in hoher Qualität zu erstellen. Möglichkeit, den Inhalt von PSD- und PNG-Dateien schnell in HTML-Codes wie Div, CSS oder Tabellen umzusetzen.

Flash-Design
    Grundlegende Animationseffekte und komplexes interaktives Systemdesign, Verständnis von SWF-Hilfsdesignsoftware von Drittanbietern und komplexem interaktiven Systemdesign sowie starke Integrationsfunktionen für verschiedene externe Ressourcen (PNG, JPG, MP3, WAV usw.). Kenntnisse in einiger Hilfsdesignsoftware von Drittanbietern (AE, SwishMax, Swift3D usw.)

[Erforderlich] Browserseitig (Webanwendung)
XHTML/CSS
    Das Grundlayout wird plattformübergreifend, konsequent, mit elegantem HTML-Code, möglichst standardkonform und unter Berücksichtigung von SEO umgesetzt. Es bleibt auf jeder Plattform und in jedem Browser grundsätzlich konsistent. Es ist nicht erforderlich, verschiedene CSS-Hacks zu kennen, aber man sollte wissen, wie man bei Problemen Informationen nachschlägt, um sie schnellstmöglich zu lösen. Es kann JavaScript-Entwicklern die beste DOM-Struktur bieten, sodass JS-Entwickler während der Entwicklung davon ausgehen können, dass „alles bereit“ ist, anstatt „bis zum Äußersten ausgelastet“ zu sein.

JavaScript/Ajax/DOM
    Grundlegende DOM-Operationen, AJAX verstehen, grundlegende DOM-Operationen für die Datenkommunikation implementieren, effizienten OOP-Code schreiben können, um Wartungskosten zu senken. Je nach Bedarf unterschiedliche Entwicklungen durchführen, das entsprechende Framework auswählen, die höchste Codeeffizienz, die beste Benutzererfahrung und den geringsten Code-Download erzielen und die Code-Wiederverwendung in einer oder sogar mehreren Produktlinien maximieren.

Flash-Entwicklung
    Basierend auf der ActionScript-Operation von Timeline kann es einfache Interaktionen und Master-A realisieren und Datenschichtkommunikation (mit dem Server und lokalem SharedObject) realisieren. Beherrscht AS1-3 und kann je nach Bedarf verschiedene RIAs entwickeln. Unabhängig davon, ob die Anforderung darin besteht, Flash Player 8 oder Flash Player 9 zu unterstützen, kann höchste Entwicklungseffizienz und maximale Flexibilität (wie etwa Schnittstellendesign für die HTML-Ebene usw.) erreicht werden.

[Erforderlich] Clientseitig (Desktopanwendung)
Apollo
    Verpackung auf Produktebene, grundlegendes technisches Verständnis (wie man verpackt, wie man HTML und JavaScript hinzufügt usw.). Während Sie dies beherrschen, können Sie die API von Apollo verwenden, um OS-Datei-E/A-Funktionen unabhängig zu entwerfen und zu entwickeln. Während Sie sich grundlegende Fähigkeiten aneignen, erlangen Sie auch ein Verständnis für das „3D-Konzeptsystem“. „3D“ steht hier für: Design, Entwicklung und Bereitstellung. Apollo
    Windows Presentation Foundation, WPF/E (Silverlight)
    (Wird noch festgelegt, gerne können Sie hinzufügen)

[Ergänzung] Serverseitig (Edit: Nach Überlegung wird dieser Skill nicht in die Wertung miteinbezogen)
Ursprünglich wurden „1. Einfache serverseitige Technologien und Skripte“ und „2. MediaServer (Red5)-Schnittstelle“ als Kriterien (Fähigkeiten auf Server- und Datenlogikebene) für die „Fähigkeitsliste für Web-Frontend-Ingenieure“ aufgeführt. Viele Freunde scheinen jedoch skeptisch zu sein, ob Front-End-Ingenieure über serverseitige Kenntnisse verfügen müssen. Tatsächlich ist es nicht einfach, die oben genannten Fähigkeiten der Präsentationsschicht zu beherrschen, und Front-End-Ingenieure sind in der Tat sehr fleißig. Aber was ist andererseits der Grund für die harte Arbeit? Ich weiß nicht, ob Sie jemals darüber nachgedacht haben, wenn Sie Tag und Nacht mit div CSS kämpfen. Meiner Erfahrung nach liegt die harte Arbeit des Frontends in den folgenden Aspekten:
Es gibt viel sich wiederholende Arbeit. Eine große Anzahl von Div und CSS wird wiederholt. Selbst wenn Sie kopieren und einfügen können, kann es sehr mühsam sein, einen Eingang in dem Ozean von Tausenden von Div-Zeilen zu finden. Die Anforderungen ändern sich mehr. Oftmals lösen Sie das plattformübergreifende Problem endlich nach mehreren Stunden harter Arbeit, und derselbe Effekt kann unter IE6, 7 und Firefox angezeigt werden, und sogar die JavaScript-Interaktion ist fast abgeschlossen. Plötzlich hieß es, die Anforderungen würden sich ändern. Dies ist zweifellos sehr ärgerlich.
Vielleicht hat dies oberflächlich betrachtet nichts mit Server-Kenntnissen zu tun, aber ich denke, dass gute Kenntnisse der Server-Seite auf jeden Fall hilfreich sind (natürlich können dadurch nicht alle Probleme gelöst werden). Schließlich sind Informationsstruktur und Datenbank eng miteinander verbunden und der Server ist der einzige Kanal zur Verbindung mit der Datenbank (zumindest ist dies bei den meisten B/S-Anwendungen der Fall). Für Entwickler ist es sehr wichtig, grundlegende serverseitige Fähigkeiten zu beherrschen, um Schnittstellen auf derselben Logikebene zu entwerfen. Darüber hinaus hängt die Trennung der HTML-Präsentationsschicht von den Daten während der Entwicklung auch mit verschiedenen Template-Technologien auf der Serverseite zusammen. Zum Beispiel die Smarty-Vorlage in PHP (die ich schon einmal verwendet habe), das Model2-Konzept von JSP und so weiter. Für die Gestaltung der HTML-Struktur, die Wiederverwendung von HTML und sogar für die Entwicklung von OOP auf der HTML-Ebene (der Front-End-Entwicklungsprozess, den ich derzeit für meine neue Produktlinie entwerfe) ist Serverunterstützung erforderlich. Zumindest müssen Sie dem PHP-Programmierer mitteilen, was Sie benötigen. Wenn Sie absolut nichts über PHP wissen, hat es keinen Sinn, damit anzufangen.
Hinzu kommt, dass Unternehmerteams oft nur über sehr begrenzte Personalressourcen verfügen. Um die Betriebskosten zu minimieren, muss das gesamte technische Personal über ein gewisses Verständnis der serverseitigen Technologie verfügen. Wenn Sie einen PHP-Programmierer bitten müssen, eine Verbindung zum Remote-Server herzustellen, nur um den Titel einer Webseite zu ändern, erhöht das die Betriebskosten des gesamten Unternehmens erheblich.
Zusammenfassung: Ich denke, dass Sie die technischen Details nicht verstehen müssen, aber Sie sollten die Prinzipien kennen. Am besten wäre es, wenn Sie ein oder zwei Sätze Designideen beherrschen (schließlich ist die Datenlogik vollständig vorhanden und das bloße Betrachten von HTML und JavaScript ist immer noch auf das Wissen der Leute beschränkt, und diese Einschränkung hat meine Zeit lange Zeit eingeschränkt). Das wird ein wertvoller Vorteil sein.
【Ergänzung】Mobile Seite (nicht in der Bewertung enthalten)
Wenn ich sehe, wie viele Freunde Nachrichten hinterlassen, in denen sie sagen, dass Front-End-Ingenieure keine Zukunft haben, frage ich mich, ob die Beherrschung mobiler Geräte auch notwendig ist, um ihre Zukunft zu verbessern? Lassen Sie mich hier noch ein paar Worte sagen. Was die Zukunft des technischen Personals in China betrifft, kann man sie tatsächlich als „düster“ bezeichnen. Die ungestüme Atmosphäre führt oft dazu, dass technische Talente ihre technische Karriere vorzeitig aufgeben, und die allgemeine moralische Intrige macht einfaches technisches Personal unglücklich (es gibt zu viele Fälle um mich herum, na ja, ich werde nicht ins Detail gehen, haha).
Als Techniker und Entwickler müssen Sie nicht nur eine absolut engagierte Haltung beibehalten (das ist die Voraussetzung, ohne sie gibt es nichts zu besprechen), sondern auch lernen, wie Sie sich selbst schützen und stärken können. Die Gesellschaft wird kein Mitleid mit Ihnen haben, nur Sie selbst können sich schützen.
Taschenlampe
(Wird noch festgelegt, gerne können Sie hinzufügen)
Java?
 (Wird noch festgelegt, gerne können Sie hinzufügen)

<<:  Docker ermöglicht mehrere Port-Mapping-Befehle

>>:  MySQL verwendet Binlog-Protokolle zur Implementierung der Datenwiederherstellung

Artikel empfehlen

Neues CSS3-Layout: ausführliche Flex-Erklärung

Flex-Grundkonzepte Flex-Layout (Flex ist die Abkü...

Detaillierte Erklärung zur Installation und vollständigen Deinstallation von MySQL mit apt-get unter Ubuntu

1. Installieren Sie MySQL: udo apt-get installier...

Detaillierte Erklärung zur Verwendung des Schlüsselworts ESCAPE in MySQL

MySQL-Escape Escape bedeutet die ursprüngliche Se...

Detaillierte Erläuterung des Implementierungsprozesses der Dual-Master-Synchronisierung von Teiltabellen in MySQL 5.7

Vorwort Kürzlich stieß ich auf eine Anforderung. ...

Detaillierte Erläuterung der Lösung für den Fehler bei der Verwendung von systemctl zum Starten des Dienstes im Docker

Docker-Version: [root@localhost gae_proxy]# Docke...

Centos7-Installation und Konfiguration von Mysql5.7

Schritt 1: Holen Sie sich die MySQL YUM-Quelle Ge...

So zeigen Sie Bildinformationen in Docker an

In diesem Artikel müssen wir lernen, wie man Bild...

JavaScript implementiert den Farbänderungseffekt durch Klicken mit neun Rastern

In diesem Artikel wird der spezifische JavaScript...

Vollständige Liste der CentOS7-Firewall-Betriebsbefehle

Inhaltsverzeichnis Installieren: 1. Grundlegende ...

Farbschemata für Websites Die richtigen Farben für Ihre Website auswählen

Beeinflusst Farbe die Website-Besucher? Vor einig...

Unsere Gedanken zur Karriere als UI-Ingenieur

Ich bin seit langer Zeit depressiv, warum? Vor ein...

Einfache Implementierungsmethode der bidirektionalen Datenbindung im JS-Projekt

Inhaltsverzeichnis Vorwort Publish-Subscriber-Mus...

Detaillierte Erläuterung des Implementierungsprozesses der Nginx-Protokoll-Timing-Aufteilung in CentOS 7

1. Schreiben Sie ein Split-Skript (splitNginxLog....

Implementierungsmethode für die Produktion und Bereitstellung von Docker Nginx-Containern

Schnellstart 1. Suchen Sie das Nginx-Image auf Do...

Vue-Anweisungen für benutzerdefinierte V-HAS, Schritte zur Beurteilung der Schaltflächenberechtigung

Inhaltsverzeichnis Anwendungsszenario Einfach aus...