--- title: "Porta PRO: Strefa Architekta z plikami BIM" description: "Projekt UI/UX i wdrożenie Strefy Architekta Porta: drzwi wybierane po parametrach, pliki BIM, baza wiedzy jak poradnik i przeniesione treści." url: https://fluostudio.pl/projekty/porta-pro/ --- Porta PRO # Osobny serwis Porta dla tych, którzy drzwi wpisują do projektu. Porta PRO to dalszy ciąg naszej pracy z Porta. Zaczęliśmy od nowego standardu identyfikacji: logo zostało, a wokół niego zbudowaliśmy nowy klucz wizualny. Na nim oparliśmy Strefę Architekta, serwis tylko dla architektów. Pobiorą tu pliki BIM, znajdą realizacje do inspiracji i szybko pokażą inwestorowi, co ich inspiruje i jak dane rozwiązanie działa. Zobacz, jak działa - **53** bloki, z których zespół Porta sam składa strony - **58** artykułów bazy wiedzy przeniesionych automatycznie - **2** języki: polski i rumuński Drzwi po parametrach ## Najpierw wymagania, potem model Architekt szuka drzwi po tym, co muszą spełnić: przeciwpożarowe, antywłamaniowe, akustyczne, do wnętrz albo wejściowe zewnętrzne. Tak ułożyliśmy serwis. Drzwi wybiera się po parametrach albo po typie obiektu, a pliki do pobrania filtruje po rodzaju drzwi i cechach technicznych. Tabelę parametrów odtworzyliśmy tutaj na modelach z serwisu. Rodzaj drzwi Wewnętrzne3 Akustyczne6 Przeciwpożarowe4 Antywłamaniowe8 | Model | Klasa mechaniczna Wytrzymałość na obciążenie, skręcanie i uderzenia. | Antywłamaniowość Odporność na próby włamania, klasy RC. | Ogień i dym Odporność ogniowa i dymoszczelność. | Dźwiękoszczelność Izolacyjność akustyczna w decybelach. | | --- | --- | --- | --- | --- | | Porta Decor, Basic, CPL Basic | kl. 1–2 | – | – | – | | Porta Decor, CPL, Resist | kl. 1–3 | – | – | – | | 4 klasa mechaniczna | kl. 4 | – | – | – | | Akustyczne 27 dB | kl. 3 | – | – | 27 dB | | Akustyczne 32 dB | kl. 3 | – | – | 32 dB | | Silence 37 dB, EI30 | kl. 4 | – | EI30 | 37 dB | | Innovo 37 dB | kl. 3–4 | – | – | 37 dB | | Innovo 42 dB | – | – | – | 42 dB | | Akustyczne 42 dB | kl. 3 | – | – | 42 dB | | Przeciwpożarowe EI30 | kl. 3 | – | EI30 | 32 dB | | Steel EI30 Plus | kl. 2 | – | EI30 | 32 dB | | Przeciwpożarowe EI60 | kl. 3 | – | EI60 | 32 dB | | Steel EI60 Plus | kl. 2 | – | EI60 | 32 dB | | Agat | kl. 3 | – | – | 32 dB | | Opal | kl. 3 | RC2 | – | 32 dB | | Steel Secure RC3 | kl. 3 | RC3 | – | 37 dB | | Extreme RC2, EI30 | kl. 4 | RC2 | EI30 | 37 dB | | Extreme RC3, EI30 | kl. 4 | RC3 | EI30 | 37 dB | | Extreme RC3, EI60 | kl. 4 | RC3 | EI60 | 37 dB | | Granit klasa C | kl. 4 | RC3 | – | 32 dB | | Extreme RC4, EI30 | kl. 4 | RC4 | EI30 | 37 dB | Modele i wartości z tabeli w serwisie Porta PRO. ![Korytarz szpitala: białe drzwi do sali 14 z drewnianą listwą i rozmyta postać w ruchu](https://fluostudio.pl/media/projekty/porta-pro/realizacja-szpital-poznan.webp) Szpital Kliniczny w Poznaniu, jedna z realizacji w serwisie. Fot. Tomasz Nowicki Bloki ## Cała strona składa się z klocków Zamiast szablonu na każdą podstronę zbudowaliśmy motyw z 53 bloków. Każdy ma swoje pola, wersję na telefon i wersję językową. Zespół Porta układa z nich nowe strony i zmienia istniejące w panelu, bez programisty, a nowe realizacje, wydarzenia i nowości same trafiają na listy i na stronę główną. Rodzina bloków 01 Techniczne 11 02 Artykuły 10 03 Listy 10 04 Nagłówki i nawigacja 10 05 Sprzedaż 12 Dane, których architekt szuka w pierwszej kolejności. - Parametry drzwi - Dobór po parametrach - Drzwi według typu obiektu - Filtr produktów - Tabele wymiarów - Rysunki wymiarowe - Pliki BIM - Okleiny do CAD - Katalogi do pobrania - Inne pliki - Przewodnik po drzwiach Klocki bazy wiedzy, z których powstaje każdy artykuł. - Tekst i media - Galeria - Porównanie - Lista ze zdjęciami - Karty cech - Lista pozycji - Ramka „Uwaga” - Karuzela - Produkty w tekście - Pliki w tekście Treści, które przybywają co tydzień, układają się same. - Realizacje - Wyróżnione realizacje - Kalendarz wydarzeń - Wydarzenia - Minione wydarzenia - Webinary - Minione webinary - Nowości - Nowości produktowe - Karty bazy wiedzy Początek każdej strony i droga do następnej. - Nagłówek z wyróżnieniem - Nagłówek kontaktu - Nagłówek wydarzeń - Nagłówek rozwiązań inwestycyjnych - Nagłówek wyszukiwarki - Nagłówek z mediami - Panel wiedzy - Panel menu - Kategorie w menu - Ścieżka powrotu Bloki, które zamieniają czytelnika w kontakt. - Strefa architekta - Korzyści współpracy - Certyfikaty - Technologie - Wybierz pomysł - Kafelki z wezwaniem - Linki do rozwiązań - Przyklejane karty - Przesuwany napis - Pas logotypów - Kontakt i pytania - Zapis do bazy Baza wiedzy ## Baza wiedzy ułożona jak poradnik To największa zmiana w nowej strefie. Każdy z 58 artykułów prowadzi architekta krok po kroku: spis treści, ponumerowane sekcje, porównania systemów, karty zalet, ramki „Uwaga”, rysunki z podpisami, polecane akcesoria i pliki do pobrania. Zaprojektowaliśmy na to dziesięć stylów bloków, więc redakcja dobiera formę do treści, a artykuły i tak wyglądają spójnie. - Akustyka w pomieszczeniach Odporność ogniowa Dymoszczelność Klasa mechaniczna drzwi Antywłamaniowość Dźwiękoszczelność Deklaracje i certyfikaty Aqua Stop Wentylacja - Pomiar otworu montażowego Symbole drzwi w dokumentacji technicznej Przykładowe zestawienie stolarki drzwiowej Strona otwierania drzwi Przepisy prawne Elementy dekoracyjne Brak węgarka, co zrobić? - Drzwi wysokie Szeroki otwór drzwiowy Drzwi w ścianie gipsowo-kartonowej Łączenie progu z podłogą Osoby z niepełnosprawnością Zwierzęta w domu Samodzielne malowanie drzwi ### Ten sam artykuł przed i po Artykuł „Drzwi przesuwne” w starej Strefie Architekta na porta.com.pl i w Porta PRO. Treść jest ta sama. Z jednej kolumny tekstu powstał poradnik z piętnastu bloków w dziesięciu stylach. Wersja artykułu **Przed** Stara Strefa Architekta **Po** Porta PRO **Przed**Stara Strefa Architekta ![Stary artykuł „Drzwi przesuwne” na porta.com.pl: tytuł, zdjęcie, jedna kolumna tekstu z listami, rysunki i lista plików](https://fluostudio.pl/media/projekty/porta-pro/przed-po-stara.webp) **Po**Porta PRO ![Nowy artykuł „Drzwi przesuwne” w Porta PRO: duże zdjęcie, spis treści, galeria, porównanie systemów, karty zalet, ramka „Uwaga”, akcesoria i pliki do pobrania](https://fluostudio.pl/media/projekty/porta-pro/przed-po-nowa.webp) Języki ## Strefa Architekta, Zona Arhitectului Serwis od początku powstawał w kilku językach. Tłumaczenia przygotowaliśmy ze słownikiem pojęć Porta, żeby „ościeżnica” i „klasa mechaniczna” znaczyły w Bukareszcie to samo co w Gdańsku. Kolejny język przechodzi tę samą drogę: tłumaczenie, sprawdzenie i publikacja. Tak przygotowaliśmy już wersję angielską. Po tłumaczeniu każda wersja żyje własnym życiem, a zespół w Rumunii edytuje swoje treści niezależnie od polskiego. Wersja **PL** Polski **RO** Rumuński ![Strona główna Porta PRO po polsku: przydatne linki i napis „Strefa Architekta”](https://fluostudio.pl/media/projekty/porta-pro/jezyk-pl.webp)![Ta sama strona po rumuńsku: „Linkuri utile” i napis „Zona Arhitectului”](https://fluostudio.pl/media/projekty/porta-pro/jezyk-ro.webp) ![Drewniane drzwi otwarte do sali spotkań z okrągłym stołem i granatowymi krzesłami](https://fluostudio.pl/media/projekty/porta-pro/realizacja-biuro-att.webp) Biuro ATT pod Krakowem, jedna z realizacji w serwisie UI/UX ## Od realizacji do rysunku w trzech kliknięciach Projekt zaczęliśmy od makiety funkcjonalnej, potem powstały widoki na komputer i telefon w Figmie, a na końcu motyw WordPress. Wygląd wynika z klucza wizualnego, który opracowaliśmy dla Porta, ale mówi językiem architekta: spokojnie, z danymi na wierzchu i z miejscem na każdy aspekt oferty. Z menu jest jedno kliknięcie do plików 2D, 3D i BIM, bazy wiedzy, realizacji oraz wydarzeń i targów, a po zapisie do bazy także do webinarów. Strona Strona główna Realizacja Artykuł Dla inwestorów ![Strona główna Porta PRO: przydatne linki, powody współpracy, drzwi szyte na miarę, zapis do bazy i nowości](https://fluostudio.pl/media/projekty/porta-pro/ekran-glowna.webp)![Realizacja Teatr Szekspirowski w Gdańsku: lokalizacja, projekt, rok i galeria zdjęć](https://fluostudio.pl/media/projekty/porta-pro/ekran-realizacja.webp)![Artykuł „Akustyka w pomieszczeniach” ze spisem treści, porównaniem i produktami](https://fluostudio.pl/media/projekty/porta-pro/ekran-artykul.webp)![Strona rozwiązań inwestycyjnych: drzwi dobrane do typu obiektu](https://fluostudio.pl/media/projekty/porta-pro/ekran-inwestycje.webp) Przeniesienie treści ## Przenieśliśmy całą starą strefę Treści przenieśliśmy automatycznie. Dla każdego artykułu, realizacji, wydarzenia i nowości powstał opis w pliku migracji: stary adres, nowy adres, kategorie, kolejność bloków, zdjęcia z podpisami i pliki. Skrypt, który przygotowuje ten opis, rozumie treść i do każdego fragmentu ze starej strony dobiera blok nowej, który do niego pasuje. Skrypt importu wstawia wpisy do WordPressa, a skrypt kontrolny porównuje wynik ze źródłem. Ponowne uruchomienie poprawia ten sam wpis i nie tworzy duplikatów. Każdy stary adres ma zapisany nowy odpowiednik. Linki między artykułami przepięliśmy na nowe adresy, a końcowa kontrola nie znalazła w 58 artykułach ani jednego odnośnika do starej bazy. Rumuńskie wersje dostały własne, przetłumaczone adresy. - **58** artykułów bazy wiedzy - **87** realizacji z galeriami - **786** zdjęć realizacji, każda w swoim folderze - **24** wydarzenia - **15** nowości produktowych - **31** plików do pobrania ### Stary i nowy adres 1. porta.com.pl/strefa-architekta/baza-wiedzy/artykul/47 , nowy adres: pro.portadoors.com/drzwi-przesuwne/ 2. porta.com.pl/strefa-architekta/baza-wiedzy/artykul/12 , nowy adres: pro.portadoors.com/plyta-wiorowo-otworowa/ 3. porta.com.pl/strefa-architekta/baza-wiedzy/artykul/5 , nowy adres: pro.portadoors.com/drzwi-szklane/ 4. porta.com.pl/strefa-architekta/baza-wiedzy/artykul/17 , nowy adres: pro.portadoors.com/przepisy-prawne-drzwi-wewnatrzlokalowe/ 5. porta.com.pl/strefa-architekta/baza-wiedzy/artykul/19 , nowy adres: pro.portadoors.com/antywlamaniowosc-drzwi/ 6. porta.com.pl/strefa-architekta/baza-wiedzy/artykul/22 , nowy adres: pro.portadoors.com/dymoszczelnosc/ i 52 kolejne artykuły, a obok nich adresy realizacji, wydarzeń i nowości ## Strefa Architekta przestała być zakładką. Po wdrożeniu przeszkoliliśmy zespół Porta z pracy w panelu i nagraliśmy film instruktażowy, do którego można wrócić. Powstał też film, który zapowiada nową strefę architektom. Porta PRO to część stałej współpracy z Porta. Warsztaty, identyfikację, katalog i porta.com.pl pokazujemy na osobnej stronie. [Zobacz całą współpracę z Porta](https://fluostudio.pl/projekty/porta-drzwi/) Klient Porta Zakres Makieta, projekt UI/UX na komputer i telefon, motyw WordPress z 53 bloków, automatyczne przeniesienie treści, tłumaczenia, szkolenie i filmy Online [pro.portadoors.com](https://pro.portadoors.com/) ## Zobacz inne projekty Widok Duże kadry Siatka - [Design Optyk Rodzinna sieć salonów optycznych premium: identyfikacja bez złota, materiały do salonów i nowy sklep połączony z magazynami sześciu z siedmiu salonów.](https://fluostudio.pl/projekty/designoptyk/) - [20 lat Porta w Rumunii Identyfikacja i ponad 30 materiałów na trzydniowy jubileusz Porta w Aradzie, od zaproszenia w pięciu językach po galę.](https://fluostudio.pl/projekty/porta-rumunia-20-lat/) - [Itrons System pięciu submarek zbudowany z jednego heksagonu, identyfikacja wizualna i strona itrons.pl dla krakowskiej firmy instalacyjnej.](https://fluostudio.pl/projekty/itrons/) - [Itodi Nowa marka mebli na wymiar od zera: nazwa, logo z wydłużonym „o”, projekt sklepu z konfiguratorem, instrukcja i opakowanie.](https://fluostudio.pl/projekty/itodi/) - [Porta Drzwi Design system dla istniejącego znaku: rama z logo, siatki, ikony, rysunki, katalog, porta.com.pl, social media i materiały dla sprzedaży producenta drzwi.](https://fluostudio.pl/projekty/porta-drzwi/) - [Mily Group Rebranding dostawcy poroża jelenia: strategia komunikacji, znak, księga znaku, strona milygroup.com i materiały na targi.](https://fluostudio.pl/projekty/mily-group/) - [Grupa Dawtona Cała komunikacja Dawtony poza półką: ponad 90 projektów, od postów i stoisk targowych po cztery serwisy i animacje.](https://fluostudio.pl/projekty/dawtona/) - [Overmax Projekt UX/UI sklepu Overmax: auta RC w filmowych ujęciach, dopracowana karta produktu, menu kategorii i test, który dobiera model.](https://fluostudio.pl/projekty/overmax/) - [Fundacja MultiSport Identyfikacja z design systemem w Figmie, strona zgodna z WCAG i duet brand hero, który zachęca do ruchu.](https://fluostudio.pl/projekty/fundacja-multisport/) - [PetCuisine Zbudowaliśmy od zera markę producenta karmy z Grupy Dawtona: od nazwy i hasła, przez opakowania w 12 smakach i stronę, po stoiska na targach w Europie.](https://fluostudio.pl/projekty/petcuisine/) - [Zippy Tail Zbudowaliśmy markę Zippy Tail od zera: nazwę, strategię, etykiety ośmiu suplementów dla psów i kotów, paczkę i projekt sklepu.](https://fluostudio.pl/projekty/zippy-tail/) - [Intima Clinic Sześć marek medycznych w jednej grupie. Warsztaty, nazwy, identyfikacja, oznakowanie placówki, druki, animacje i strona intimaclinic.pl.](https://fluostudio.pl/projekty/intima-clinic/) ## Stoicie przed podobnym wyzwaniem? Opowiedzcie nam, co chcecie zmienić. Na pierwszej rozmowie sprawdzimy, czy i jak możemy pomóc, bez zobowiązań. Porozmawiajmy [Umów 30 minut konsultacji](https://calendly.com/anita-fluo/darmowa-konsultacja-30-minut)