HTML & CSS

Es muss ein qualitativ hochwertiges, responsives und modernes Layout gemäß dem bereitgestellten Mockup erstellt werden. Anforderungen an die Ausführung: Moderne CSS: Verwendung von CSS Grid, Flexbox, CSS-Variablen, relativen Maßeinheiten (rem), modernen Grafikformaten (WebP usw.). Responsivität und Qualität: semantischer, cross-browser-fähiger und reaktionsschneller Code für alle Gerätetypen. JavaScript: Schreiben von sauberen Skripten gemäß den neuesten ECMAScript-Standards (ES6+). Architektur und Build: komponentenbasierter Entwicklungsansatz unter Verwendung von Gulp. Wichtig: Bewerbungen ohne Verweis auf ein Portfolio mit Beispielen Ihrer Arbeiten werden nicht berücksichtigt.

Wir suchen einen Layout-Designer für das gesamte Projekt, das sowohl die Desktop-Version als auch die App umfasst. Das Layout muss identisch mit dem Mockup sein. Zunächst, wie viel Zeit wird benötigt und wie viel wird es kosten, ein solches Landingpage zu erstellen?

Aufgabe - Gestaltung der Website. Es gibt ein fertiges, entwickeltes Layout, das auf einem Baukasten erstellt wurde und in WP umgestaltet werden muss. Es handelt sich um eine kleine (4-5 Seiten) zweisprachige Informationswebsite mit der Möglichkeit, WooCommerce anzuschließen. Die Website muss für SEO optimiert sein.

Erstellen und gestalten Sie eine responsive Master-Vorlage für E-Mail-Newsletter in Stripo (zum Export nach SendPulse).⚙️ Was zu tun ist:Entwickeln Sie ein visuelles Konzept und Design für die Blöcke (Header, Banner, Produktkarten, Footer).Gestalten Sie eine responsive HTML-Vorlage in Stripo mit der Möglichkeit des späteren Exports nach SendPulse.Testen Sie die Darstellung in Gmail, Apple Mail, Outlook und im Dunkelmodus. Anforderungen:Sichere Kenntnisse in Figma und praktische Erfahrung in der Gestaltung mit Stripo.Verständnis der technischen Einschränkungen im E-Mail-Marketing.Portfolio mit realisierten E-Mail-Newsletter (E-Commerce/Fashion).

Aufgabenbeschreibung Ein erfahrener Frontend-Entwickler oder Layout-Spezialist wird für die schrittweise Aktualisierung einer großen bestehenden Website benötigt. Die Website ist seit vielen Jahren in Betrieb, enthält eine erhebliche Anzahl von Seiten, verschiedene Arten von Inhalten, Formulare, Tabellen und interaktive Blöcke. Es wird ein eigenes Serversystem verwendet, vorhandenes Legacy-HTML/CSS ist vorhanden. Eine vollständige Ersetzung der Technologien oder des Content-Management-Systems ist nicht geplant. Im ersten Schritt muss ein neues responsives Gesamtlayout der Website entwickelt werden. Nach erfolgreichem Abschluss des ersten Schrittes ist eine schrittweise Aktualisierung der internen Seiten geplant. Der Name der Website, die URL, Design-Mockups und aktuelle Ausgangsdateien werden einer begrenzten Anzahl von Kandidaten nach einer Vorauswahl anhand von Portfolio und Erfahrung zur Verfügung gestellt.Was im ersten Schritt enthalten ist Es muss eine allgemeine visuelle Hülle umgesetzt werden: Header für Desktop- und Mobile-Versionen; Haupt- und mobile Navigation; Hilfselemente des Headers; Allgemeiner Container und Seitenraster; Navigationstrack („Breadcrumbs“); Basis-Interface-Elemente: Buttons, Links, Eingabefelder; Allgemeine Typografie-Stile mit der Möglichkeit ihrer schrittweisen Aktivierung; Footer; Responsive Verhalten des Templates; Kompatibilität der neuen Hülle mit Seiten, die vorübergehend im alten Design bleiben. Einzigartige interne Blöcke einzelner Seiten müssen im ersten Schritt nicht vollständig überarbeitet werden.Besonderheiten des Projekts Große bestehende Website mit vielen Seitentypen. Vorhandenes Legacy-CSS und stellenweise veraltete HTML-Markup. Das neue Design wird schrittweise implementiert. Eine gleichzeitige vollständige Ersetzung aller Seiten ist nicht möglich. Der Auftragnehmer erhält keinen Zugriff auf den Server, das CMS und das Arbeitsprojekt. Der Auftraggeber integriert das vorbereitete Layout selbst. Dem Auftragnehmer werden aktuelle CSS-Dateien, Mockups, Grafiken, HTML-Fragmente und Seitenbeispiele im Rahmen der für die Durchführung der Arbeit erforderlichen Informationen zur Verfügung gestellt. Es sind mehrere Iterationen nach der Testintegration in das reale Projekt vorgesehen.Technischer Ansatz Es wird eine Anbindung des neuen CSS über die vorhandenen Stile mit anschließender schrittweiser Migration und Entfernung veralteter Regeln vorgesehen. Erlaubt sind: Erstellung neuer CSS/SCSS-Dateien; Vorschläge zur Änderung des HTML der allgemeinen Teile des Templates; Änderungen bestehender CSS-Regeln, die die Umsetzung behindern; Vorschläge zur Verbesserung der DOM-Struktur; Erstellung neuer wiederverwendbarer Komponenten. Änderungen des vorhandenen CSS müssen separat in Form von: Patch/Diff-Datei; einer separaten Kompatibilitätsdatei; oder einer dokumentierten Liste geänderter Regeln und Selektoren übermittelt werden. Zu vermeiden sind: unkontrollierte Verwendung von !important; tief verschachtelte und fragile CSS-Selektoren; Bindung von Stilen an Text oder die Reihenfolge von Elementen; Duplizierung des gesamten Markups separat für Desktop- und Mobile-Versionen; Einbindung schwerer Frameworks ohne vorherige Genehmigung; globale Regeln, die die Darstellung noch nicht aktualisierter Seiten beeinträchtigen können.Qualitätsanforderungen Das Projekt ist auf eine langfristige Entwicklung ausgelegt. Es wird nicht nur eine einmalige „Anpassung an einen Screenshot“ benötigt, sondern ein sauberes, professionelles und wartungsfreundliches Layout. Erwartet werden: verständliche Komponentenstruktur; wiederverwendbare CSS-Klassen; CSS-Custom-Properties für Farben, Größen, Abstände und andere Design-Token; vernünftige Spezifität der Selektoren; semantisches HTML5-Markup; korrekte Hierarchie der Überschriften; Fehlen überflüssiger DOM-Wrapper; Fehlen von Duplikaten des indexierbaren Inhalts; korrekte Verwendung von header, nav, main, section, footer; Verwendung von Buttons und Links gemäß ihrer Bestimmung; Barrierefreiheit der Benutzeroberfläche über die Tastatur; Zustände hover, focus, active und disabled; Fehlen von horizontalem Scrollen der Seite; korrekte Verarbeitung von dynamischen Inhalten unterschiedlicher Länge; verständlicher und professionell organisierter Code.SEO und Leistung Die Aktualisierung des Templates darf die technischen SEO-Kennzahlen der Website nicht verschlechtern. Erforderlich sind: Beibehaltung der Semantik des Hauptinhalts; keine Erstellung separater Duplikate des DOM für mobile und Desktop-Versionen ohne begründeten Bedarf; keine Verbergung wichtiger Inhalte für die Indizierung durch JavaScript; keine Verletzung der Hierarchie der Überschriften; keine Entfernung vorhandener SEO-, Analyse- und Strukturattribute aus den bereitgestellten HTML-Fragmenten; Minimierung zusätzlicher JavaScript; keine Verwendung schwerer Bibliotheken ohne Genehmigung; Berücksichtigung der Bildgrößen und Vermeidung auffälliger Layoutverschiebungen beim Laden; keine merkliche Verschlechterung der Lighthouse- und Core Web Vitals-Kennzahlen nach der Integration. Der Auftragnehmer muss verstehen, dass qualitativ hochwertiges CSS die DOM-Struktur nicht von selbst korrigiert. Wenn für ein professionelles Ergebnis eine Änderung des Markups erforderlich ist, müssen die entsprechenden HTML-Fragmente vorbereitet und dem Auftraggeber übergeben werden.Responsivität Die Überprüfung des Layouts muss mindestens bei folgenden Breiten erfolgen: 1440 px; 1200 px; 1024 px; 768 px; 390 px; 360 px; 320 px. Zwischen den Kontrollgrößen muss die Benutzeroberfläche ebenfalls korrekt und funktional bleiben. Horizontales Scrollen der gesamten Seite ist nicht zulässig. Ausnahmen für einzelne Komponenten, wie große Tabellen, müssen im Voraus genehmigt werden.Ergebnis des ersten Schrittes Der Auftragnehmer übergibt: Neues CSS oder SCSS zusammen mit dem fertigen gebündelten CSS. Eine eigenständige Demoseite im HTML-Format. HTML-Fragmente des Headers, Menüs und Footers, falls das Markup geändert wurde. Eine separate Patch/Diff-Datei für Änderungen am Legacy-CSS. Neue SVGs, Bilder, Icons und Schriftarten. Eine Anleitung zur Anbindung und Integration. Eine Beschreibung der CSS- und Komponentenstruktur. Eine Liste neuer und geänderter Klassen und Selektoren. Screenshots des Ergebnisses in den Kontrollgrößen. Eine Liste bekannter Einschränkungen und Abweichungen von den Mockups. Empfehlungen für die weitere Migration interner Seiten.Iterationen Die Kosten für den ersten Schritt müssen Folgendes umfassen: Abstimmung der allgemeinen Struktur und der Desktop-Version. Responsive Nachbearbeitung der Tablet- und Mobile-Versionen. Behebung von Problemen, die der Auftraggeber nach der ersten Testintegration festgestellt hat. Zusätzliche Arbeiten außerhalb des vereinbarten ersten Schrittes werden separat bewertet.Was in der Bewerbung angegeben werden muss Bitte angeben: Erfahrung mit großen bestehenden Websites und Legacy-CSS; Beispiele für komplexe responsive Layouts; Beispiele für Code oder Links zu Repositories, falls verfügbar; Ansatz zur Organisation der CSS-Architektur; Erfahrung mit schrittweiser Migration des Designs ohne vollständige Stilllegung der Website;

Es muss das fertige Design der Website (Landingpage für den Kurs, Infobiz) von Figma auf Weblium innerhalb eines Tages übertragen werden.

Es müssen Änderungen an 3 (drei) verschiedenen Formularen, Rechnern und Dateneingabeseiten auf der Website gemäß dem Lastenheft vorgenommen werden. Die Umsetzung der Rechner und Seiten ist in zwei Sprachen erforderlich. Es ist möglich, bestehende Formulare und Rechner zu überarbeiten oder neue zu erstellen, wenn dies einfacher für die Ausführung ist. Das Lastenheft wird bereitgestellt. Während der Ausführung der Aufgabe können kleine Ergänzungen oder Klarstellungen zu den Änderungen an den Rechnern oder Formularen (Vorlagen) vorgenommen werden.

Dies ist ein unausgereiftes Plugin für After Effects: https://drive.google.com/drive/u/0/folders/1Nq9a672OK6ep9Com1lqelUhZxbx3_3f1 Wenn ich richtig verstehe, handelt es sich um ein CEP-Plugin (Adobe Extension) für After Effects. Es ist ein HTML/JavaScript-Panel über Adobe CSXS, das mit After Effects über ExtendScript interagiert. Das Ziel war es, den Prozess der Videoproduktion im "Maze Challenge"-Stil zu automatisieren, Referenz auf YouTube GOALRUSH-f8x oder ähnlich. Video der manuellen Bearbeitung: https://drive.google.com/file/d/1Ylzvax6w2JGDwaBqeCdbD49jh5wB5buY/view?usp=sharing Datei eines der Projekte: https://drive.google.com/file/d/15vKd1L9VfHtDqK2wtLQdYEmDpH1d8Jvy/view?usp=sharing Neben der "Fehleranfälligkeit" des Systems durch Vibe-Coding (deshalb sind Vibe-Coder ausgeschlossen), waren solche Details (reale Änderungen) nicht akzeptabel: https://docs.google.com/spreadsheets/d/18Svc6GoQ34PgLe1HY7gNX5tPLH0Cpv9E4mfjCRBCMFU/edit?gid=0#gid=0 Es muss ein System erstellt werden, das Projekte in After Effects mit allen notwendigen Video-Komponenten generiert, die in Base.pdf aufgeführt sind, detailliertere Logik in Form von Fotos, Textdokumenten und Mindmaps zur Verständnis aller möglichen Variationen auf dem Laufwerk: https://drive.google.com/drive/folders/1Uf4Pnw3SKmwpmhL7sjPZFnfAbN0arUjr?usp=sharing Noch detaillierter (mit einer umfassenderen Beschreibung und Links zu Zeitcodes in den Referenzen) wird das Lastenheft im Arbeitsbereich des Projekts ausgearbeitet. Das Endergebnis ist ein System, das Videos erstellt: von 40 Sekunden bis 1 Minute, vollständig einzigartiger Inhalt bei jeder Erstellung, ohne KI-Metadaten in der Videodatei, es sollte eine verständliche Handlung enthalten (Fallen, Sackgassen, verschiedene Emotionen der Charaktere-Prominenten als Ergebnis von Handlungswendungen im Video), Sounddesign passend zur Handlung (Schreie und andere Emotionen, Explosionen usw.), stilistisch nicht von den Referenzvideos des Kanals abweichen.

Es wird eine Überarbeitung des Arbeits-Landing-Pages -Konfigurators benötigt, der in KI erstellt wurde. Fast alle Visualisierungen und Optionen sind erstellt. Wir werden das Archiv übergeben. Es muss alles gut funktionieren, angezeigt werden und die Anpassungsfähigkeit für Mobilgeräte und PCs gewährleistet sein. Ein Screenshot des Landing Pages ist angehängt.

TECHNISCHE AUFGABE Aktualisierung des Online-Shops bp.ua Über das Projekt Aktueller Online-Shop für Parfümerie auf OpenCart 2.x. Muss auf OpenCart 4.x migriert werden, Design und Funktionalität aktualisiert, alle Daten, Integrationen und SEO beibehalten. Die Website ist zweisprachig (Ukrainisch + Russisch). Wir suchen einen Auftragnehmer (oder ein Team) für Backend und Frontend. Man kann sich auf einen Teil oder auf beide bewerben.Teil 1. Backend (OpenCart 4)Migration Bereitstellung von reinem OpenCart 4.x (letzte stabile Version), PHP 8.1+. Datenmigration: Produkte, Kategorien, Attribute, Optionen, Marken, Kunden, Bestellungen, Bewertungen, Inhaltsseiten. Beibehaltung der SEO-URLs (sprechende URLs) eins zu eins; 301-Redirect-Karte von alten Adressen. Direktes Upgrade von 2.x → 4.x ist nicht möglich: nur reine Bereitstellung + kontrollierte Migration.API-Integration mit dem Lieferanten (Priorität) Portierung der vorhandenen benutzerdefinierten Anpassung für den Austausch mit dem Lieferantenserver (Preise + Bestände). Automatische Synchronisation nach Zeitplan (Cron), Fehlerprotokoll, manuelles Starten. Verstecken/Status für Artikel, die nicht vorrätig sind. Unterstützung für einen Katalog mit 2.000+ Artikeln.Module Neue Post: Auswahl von Filialen/Paketautomaten, automatische Erstellung von Frachtbriefen aus dem Admin-Bereich. Zahlung: Anbindung eines Zahlungssystems (LiqPay / Fondy / WayForPay — abzustimmen), Nachnahme. Checkout: serverseitige Logik, Gastbestellung, Status, Benachrichtigung an den Kunden. Massendatenimport/Aktualisierung von Produkten aus einer Preisliste (xlsx/csv), Verknüpfung von Bildern nach Artikelnummer/Barcode.Zweisprachigkeit (uk / ru) Zwei Sprachen des Shops: uk-UA (Hauptsprache) und ru-RU. Zweisprachige Felder für Produkte, Kategorien, Inhaltsseiten, Meta-Tags. Separate SEO-URLs für jede Sprache, hreflang-Tags, kanonische URLs. 301-Redirects von alten URLs beider Sprachen (aktuelle Struktur überprüfen: /ru/, Subdomain oder Parameter). Kunden-E-Mails — in der Sprache der Kundensitzung.Blog Vorhandenen Artikelbereich beibehalten https://blog.bp.ua/. Vorhandene Artikel (uk/ru) mit Beibehaltung der URLs und 301-Redirects, wo nötig, migrieren. Zweisprachigkeit, korrekte SEO-Auszeichnung der Artikel. Der Blogbereich muss weiterhin aus dem Admin-Bereich bearbeitbar sein.SEO (serverseitig) Ersetzung des externen SEO-Moduls durch native Mechanismen von OC4. Generierung von sitemap.xml (separate Sprachzweige), korrekte robots.txt. Mikroauszeichnung Schema.org (Produkt, Angebot, BreadcrumbList, Artikel für den Blog).Leistung und Sicherheit Cache (OPcache + integriertes OC4), Optimierung von Anfragen, gzip/brotli, HTTP/2. Bilder: WebP, Größenänderung mit Caching. HTTPS, 2FA im Admin-Bereich, aktuelle Patches, tägliche Backups. Core Web Vitals im „grünen“ Bereich auf Mobilgeräten.Ablauf der Arbeiten Alle Arbeiten werden auf Staging durchgeführt. Die alte Website bleibt bis zur vollständigen Testung der neuen aktiv. Umstellung auf Produktion — mit der Möglichkeit eines Rollbacks innerhalb von 30 Tagen. Teil 2. Frontend (Design + Layout)Design Stil: minimalistisch, premium, viel „Luft“, Fokus auf Produktbilder. Mobile-First-Ansatz (der Großteil des Traffics ist mobil). Design-System in Figma: Farbpalette, Typografie, Komponenten, Zustände. Layouts der wichtigsten Bildschirme (Desktop + mobil): Startseite, Katalog, Produktkarte, Marken-Seite, Warenkorb, Checkout, Suche, Blog und Artikelseite.Layout Semantisches HTML5, sauberes CSS, responsiv (mobile-first). Integration in Twig-Templates von OpenCart 4 (nicht statisch), Arbeit mit Live-Daten. Bilder: WebP, Lazy-Load, srcset. Schriftart mit vollständiger Kyrillik (uk/ru). Cross-Browser-Kompatibilität: Chrome, Safari, Firefox, Edge + iOS/Android. Core Web Vitals: LCP < 2.5 s, CLS < 0.1, INP < 200 ms (mobil).Benutzeroberflächenfunktionalität Fasettenfilter im Katalog: Marke, Typ, Volumen, Note, Geschlecht, Preis. Produktkarte: Foto, Beschreibung, Noten, Format/Volumen, Bewertungen, „wird zusammen gekauft“. Schnellansicht, Wunschliste, Vergleich, Badges (Neuheit, Hit, limitierte Menge). Responsiver Checkout mit minimalen Schritten, Auto-Vervollständigung für Neue Post. Blogbereich: Liste der Artikel und Artikelseite im Stil der Website.Zweisprachigkeit (uk / ru) Sprachumschalter im Header, korrekt auf Mobilgeräten. Das Layout berücksichtigt unterschiedliche Zeilenlängen in beiden Sprachen. Alle Texte des Themas — über Sprachvariablen von OC4 (ohne „fest kodierten“ Text). Abnahme und ZusammenarbeitWas bei Abschluss übergeben werden soll Backend: Zugänge (Server, DB, Admin-Bereich, Repository), kurze Dokumentation zu Anpassungen und Cron, Anleitung zur Bereitstellung/Rollback, Liste der externen Module. Frontend: Figma-Datei mit Design-System und Bildschirmen, Code des Themas (Twig + CSS/JS), Anleitung zur Änderung von Bannern/Inhalten.Abnahmekriterien (kurz)