Przeglądarka dokumentów może być technicznie funkcjonalna, a jednocześnie nieprzyjemna w użyciu na wąskim ekranie. Gęste paski narzędzi, małe przyciski, przerośnięte boczne panele i kontenery o stałych wymiarach szybko zamieniają prosty podgląd w frustrujące doświadczenie.

Dla aplikacji opartych na Windows, ASP.NET i .NET, Doconut udostępnia wbudowany SDK do przeglądania dokumentów biznesowych, plików PDF, rysunków CAD, wiadomości e‑mail oraz obrazów. Twoja aplikacja wciąż kontroluje otaczający układ, uwierzytelnianie, autoryzację, przechowywanie i przepływ pracy dokumentów.

Ten przewodnik koncentruje się na otaczającym doświadczeniu: jak dać osadzonej przeglądarce wystarczająco miejsca, uczynić kontrolki aplikacji wygodnymi w użyciu, obsłużyć zmiany orientacji oraz testować realistyczne dokumenty bez polegania na niezweryfikowanym kodzie źródłowym SDK.

Responsywne układy przeglądania dokumentów połączone z komponentem po stronie serwera .NET

Responsywny projekt zaczyna się poza przeglądarką

Przeglądarka może korzystać jedynie z przestrzeni, którą zapewnia jej rodzicielski układ. Jeśli aplikacja umieści ją w wąskiej karcie, nada mu stałą szerokość typową dla pulpitu lub otoczy wieloma stałymi panelami, obszar dokumentu pozostanie ciasny.

Zacznij od trzech pytań:

Jaka jest główna czynność na tej stronie?
Które kontrolki aplikacji muszą pozostać widoczne podczas czytania?
Które dodatkowe panele mogą się zwijać lub ukrywać za przyciskiem?

Dla dedykowanej strony dokumentu przeglądarka powinna zazwyczaj być dominującym elementem. Metadane, komentarze, zatwierdzenia i akcje przepływu pracy mogą pozostać dostępne, nie zajmując stałej przestrzeni dokumentu.

Zaplanuj układ w oparciu o dostępną przestrzeń

Responsywne zachowanie powinno wynikać z dostępnej przestrzeni dla komponentu, a nie z założeń dotyczących konkretnego typu urządzenia.

Szeroki układ

Na szerokim widoku strona może wyświetlać:

Miniaturę lub panel nawigacji dokumentu
Główną powierzchnię dokumentu
Dodatkowy panel przepływu pracy z komentarzami lub metadanymi
Pełny zestaw akcji aplikacji

Gdy dodatkowy panel zamieni się w szufladę, dodaj zachowanie dialogu, zarządzanie fokusem i dostępne etykiety wymagane przez Twój system projektowy.

Uczyń kontrolki aplikacji przyjazne dotykowi

Elementy wokół przeglądarki powinny być wygodne w aktywacji bez precyzyjnego ruchu wskaźnika.

Praktyczne wytyczne obejmują:

Zapewnij interaktywnym kontrolkom obszar docelowy o wymiarach około 44 × 44 pikseli CSS.
Zachowaj wystarczającą odległość między destrukcyjnymi a często używanymi akcjami.
Nie polegaj na najechaniu (hover), aby ujawnić istotne informacje.
Utrzymuj widoczne wskaźniki fokusu dla użytkowników klawiatury.
Dostarczaj dostępne nazwy dla przycisków wyświetlających jedynie ikonę.
Unikaj umieszczania krytycznych kontrolek w pobliżu obszarów gestów przeglądarki lub systemu.

Nie nadpisuj wewnętrznych stylów Doconut przy użyciu zgadywanych selektorów lub nieudokumentowanych zmiennych CSS. Korzystaj z oficjalnych zasobów dla zainstalowanej wersji SDK i stosuj własne reguły responsywne do kontenerów i kontrolek zarządzanych przez aplikację.

Traktuj boczne panele jako opcjonalną przestrzeń roboczą

Miniatury, wyniki wyszukiwania, adnotacje, metadane i historia przepływu pracy są cenne, ale nie powinny jednocześnie konkurować z dokumentem.

W układach kompaktowych:

Otwieraj boczny panel tylko na żądanie użytkownika.
Po zamknięciu przywróć fokus do przycisku, który go otworzył.
Zablokuj fokus wewnątrz modalnych paneli, gdy ma to sens.
Nadaj panelowi wyraźny tytuł i przycisk zamknięcia.
Zachowaj bieżącą pozycję w dokumencie przy otwieraniu i zamykaniu panelu.

Jeśli przeglądarka dostarcza własne panele, przetestuj ich udokumentowane zachowanie responsywne, zanim dodasz drugi system nawigacji na poziomie aplikacji.

Utrzymaj szybkie środowisko pracy dokumentu

Responsywny projekt to nie tylko wygląd. Duże dokumenty mogą obciążać pamięć, przepustowość i renderowanie, szczególnie gdy strona zawiera także złożone pulpity nawigacyjne lub animacje.

Zmniejsz konkurencyjne obciążenia

Wstrzymaj dekoracyjne animacje, gdy użytkownik czyta, unikaj kosztownych efektów wokół przeglądarki i usuń niepotrzebne obserwatory oraz nasłuchiwacze zdarzeń.

Zarezerwuj miejsce w układzie

Nadaj hostowi przeglądarki stabilną wysokość przed jej załadowaniem. Zapobiega to dużym przeskokom układu i zmniejsza ryzyko przypadkowego stuknięcia w niewłaściwą kontrolkę.

Ładuj dodatkowe funkcje celowo

Komentarze, historia audytu i obszerne panele metadanych nie muszą ładować się razem z pierwszą stroną dokumentu. Odłóż ich pobranie do momentu, gdy użytkownik otworzy powiązany panel, zgodnie z Twoim przepływem pracy.

Testuj reprezentatywne pliki

Używaj długich plików PDF, szerokich arkuszy kalkulacyjnych, szczegółowych rysunków CAD, dużych obrazów oraz dokumentów z nietypowymi czcionkami. Mały plik próbny nie ujawni granic produkcyjnego doświadczenia.

Zachowaj kontrolę dostępu po stronie serwera

Responsywna prezentacja nie zmienia obowiązków bezpieczeństwa aplikacji. Każde żądanie dokumentu powinno nadal przechodzić przez uwierzytelnianie i autoryzację specyficzną dla dokumentu.

W aplikacjach ASP.NET Core standardowe mechanizmy, takie jak middleware uwierzytelniania, polityki, roszczenia, atrybut [Authorize] oraz autoryzacja oparta na zasobach, mogą chronić trasę serwera, która zwraca dokument.

Aplikacja powinna:

Używać identyfikatorów dokumentów generowanych po stronie serwera.
Weryfikować, czy bieżący użytkownik ma dostęp do żądanego dokumentu.
Trzymać poświadczenia magazynu i nieograniczone ścieżki z dala od klienta.
Oczyszczać błędy wyświetlane na stronie przeglądarki.
Stosować wyraźne zasady przechowywania oryginalnych i tymczasowych plików.
Unikać logowania treści dokumentów, sekretów lub wrażliwych adresów URL dostępu.

Ukrywanie przycisków pobierania, drukowania lub menu kontekstowego może wspierać zamierzony przepływ pracy, ale nie zastępuje autoryzacji po stronie serwera i nie zapobiega wszystkim formom przechwytywania po wyświetleniu treści.

Integracja Doconut w responsywnym doświadczeniu

Doconut dostarcza warstwę wbudowanego przeglądania dokumentów, a aplikacja zapewnia responsywną powłokę i przepływ pracy biznesowej.

Sensowna kolejność wdrożenia wygląda następująco:

Potwierdź wymagane formaty i funkcje przeglądarki.
Zintegruj obsługiwany pakiet Doconut z aplikacją .NET.
Zabezpiecz rozdzielczość dokumentu przy użyciu autoryzacji po stronie serwera.
Umieść przeglądarkę w płynnym, zarządzanym przez aplikację kontenerze.
Zaprojektuj kompaktowe stany pasków narzędzi i dodatkowych paneli.
Przetestuj zachowanie przy zmianie rozmiaru, orientacji, fokusu, ładowania i błędów.
Zweryfikuj wynik przy użyciu dokumentów podobnych do produkcyjnych oraz równoczesnych sesji.

Zapoznaj się ze zweryfikowaną stroną produktu Doconut Viewer w celu uzyskania aktualnych informacji o produkcie. Skorzystaj z oficjalnej strony pobierania i dokumentacji dla instalacji i instrukcji integracji specyficznych dla wersji, zamiast kopiować nieudokumentowane przykłady SDK z postów osób trzecich.

Lista kontrolna responsywnej przeglądarki

Układ

Przeglądarka otrzymuje największy użyteczny udział w stronie.
Stałe szerokości nie wymuszają przewijania w poziomie.
Dodatkowe panele zwijają się płynnie.
Układ pozostaje użyteczny przy ograniczonej wysokości widoku.
Stany ładowania i błędów rezerwują odpowiednią przestrzeń.

Interakcja

Kontrolki aplikacji mają wygodne rozmiary celów.
Kluczowe akcje nie zależą od najechania.
Kontrolki wyświetlające jedynie ikonę mają dostępne nazwy.
Fokus pozostaje widoczny i podąża logiczną kolejnością.
Szuflady i dialogi prawidłowo przywracają fokus.

Dokumenty

Duże pliki PDF pozostają nawigowalne.
Szerokie arkusze kalkulacyjne można przeglądać bez łamania układu strony.
Szczegółowe rysunki zachowują użyteczny zakres przybliżenia i przesuwania.
Długie nazwy plików i komunikaty o błędach nie wychodzą poza granice.
Zmiana rozmiaru układu nie powoduje niepotrzebnego restartu dokumentu.

Bezpieczeństwo i operacje

Serwer autoryzuje każde żądanie dokumentu.
Szczegóły przechowywania pozostają prywatne.
Retencja plików i danych tymczasowych jest udokumentowana.
Błędy i logi nie zawierają wrażliwych informacji.
Limity zasobów oraz zachowanie przy wielu jednoczesnych sesjach są testowane.

Częste pytania

Czy aplikacja powinna utrzymywać oddzielne strony przeglądarki dla telefonów i komputerów?

Zazwyczaj nie. Jedna responsywna strona jest łatwiejsza w utrzymaniu. Zmieniaj układ w zależności od dostępnej przestrzeni i stopniowo odsłaniaj dodatkowe kontrolki.

Czy aplikacja może nadpisać wewnętrzny CSS przeglądarki?

Unikaj nieudokumentowanych selektorów i zmiennych. Stylizuj jedynie kontener hosta i własne kontrolki aplikacji. Korzystaj wyłącznie z punktów dostosowywania opisanych w wersji Doconut, którą wdrażasz.

Czy przyciski pobierania i drukowania powinny być ukryte w układach kompaktowych?

To decyzja produktowa, a nie granica bezpieczeństwa. Jeśli akcja jest dozwolona, ale nie mieści się w widoku, umieść ją w dostępnym menu przepełnienia. Jeśli nie jest dozwolona, wymuś tę politykę po stronie serwera.

Jak testować duże dokumenty?

Stwórz zweryfikowaną kolekcję testową odzwierciedlającą rzeczywistą liczbę stron, rozmiary plików, czcionki, rysunki i arkusze kalkulacyjne. Powtarzaj zestaw po zmianach SDK, .NET, Windows Server lub układu.

Zakończenie

Silne mobilne doświadczenie przeglądania dokumentów zaczyna się od płynnego kontenera, układu stawiającego dokument w centrum, wygodnych kontrolek, opcjonalnych paneli bocznych, przewidywalnego zachowania przy zmianie rozmiaru oraz autoryzacji po stronie serwera.

Doconut może zapewnić możliwość przeglądania w Twojej aplikacji Windows‑based .NET. Twój zespół może wtedy skupić się na responsywnej powłoce aplikacji, regułach bezpieczeństwa i przepływie pracy, które sprawią, że przeglądarka będzie naturalną częścią produktu.