Przeglądarka dokumentów może być technicznie funkcjonalna, a jednocześnie nieprzyjazna na wąskim ekranie. Gęste paski narzędzi, małe kontrolki, przerośnięte panele boczne 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 zapewnia wbudowane SDK przeglądania dokumentów biznesowych, plików PDF, rysunków CAD, plików e‑mail oraz obrazów. Twoja aplikacja nadal kontroluje otaczający układ, uwierzytelnianie, autoryzację, przechowywanie i przepływ pracy dokumentu.

Ten przewodnik koncentruje się na otaczającym doświadczeniu: jak dać wbudowanej 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 .NET po stronie serwera

Projektowanie responsywne 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 komputera 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 panele dodatkowe mogą się zwinąć lub przenieść za przycisk?

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.

Zaplanowanie układu w oparciu o dostępną przestrzeń

Zachowanie responsywne powinno podążać za dostępną przestrzenią komponentu, a nie za założeniami dotyczącymi konkretnej nazwy urządzenia.

Układ szeroki

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

Miniaturę dokumentu lub panel nawigacji
Główną powierzchnię dokumentu
Dodatkowy panel przepływu pracy dla komentarzy lub metadanych
Pełny zestaw akcji aplikacji

Gdy dodatkowy panel staje się szufladą, dodaj zachowanie dialogu, zarządzanie fokusem oraz dostępne etykietowanie wymagane przez Twój system projektowy.

Uczyń kontrolki aplikacji przyjazne dotykowi

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

Praktyczne wytyczne obejmują:

Zapewnij interaktywnym kontrolkom obszar docelowy o przybliżonych wymiarach 44 × 44 pikseli CSS.
Zostaw wystarczająco dużo miejsca między destrukcyjnymi a często używanymi akcjami.
Nie polegaj na najechaniu, aby ujawnić istotne informacje.
Utrzymuj widoczne wskaźniki fokusu dla użytkowników klawiatury.
Zapewnij dostępne nazwy dla przycisków zawierających tylko ikony.
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 domyślnych selektorów lub nieudokumentowanych zmiennych CSS. Korzystaj z oficjalnych zasobów dla zainstalowanej wersji SDK i stosuj reguły responsywne do kontenerów i kontrolek należących do aplikacji.

Traktuj panele boczne jako opcjonalną przestrzeń roboczą

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

Na kompaktowych układach:

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

Jeśli przeglądarka udostępnia własne panele, przetestuj ich udokumentowane zachowanie responsywne przed dodaniem drugiego systemu nawigacji na poziomie aplikacji wokół nich.

Utrzymaj szybkie środowisko pracy dokumentu

Projektowanie responsywne to nie tylko wygląd. Duże dokumenty mogą ujawniać ograniczenia pamięci, przepustowości i renderowania, szczególnie gdy strona zawiera także złożone pulpity lub animacje.

Zredukuj konkurencyjną pracę

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

Zarezerwuj przestrzeń układu

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

Ładuj dodatkowe funkcje celowo

Komentarze, historia audytu i duże panele metadanych nie muszą zawsze ładować się wraz z pierwszą stroną dokumentu. Odłóż ich ładowanie, aż 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 ujawnia granic produkcyjnego doświadczenia.

Utrzymaj 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.

Dla aplikacji ASP.NET Core standardowe mechanizmy, takie jak middleware uwierzytelniające, polityki, roszczenia, atrybut [Authorize] oraz autoryzacja oparta na zasobach, mogą chronić trasę serwera, która rozwiązuje dokument.

Aplikacja powinna:

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

Ukrywanie akcji pobierania, drukowania lub menu kontekstowego może wspierać zamierzony przepływ pracy, ale nie zastępuje autoryzacji po stronie serwera i nie może zapobiec każdej formie przechwycenia po wyświetleniu treści.

Integracja Doconut w responsywne doświadczenie

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

Sensowna kolejność wdrażania to:

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

Skonsultuj zweryfikowaną Strona produktu Doconut Viewer w celu uzyskania aktualnych informacji o produkcie. Użyj oficjalnej strony pobierania i dokumentacji dla instrukcji instalacji i integracji specyficznych dla wersji, zamiast kopiowania nieudokumentowanych przykładów SDK z postów osób trzecich.

Lista kontrolna przeglądarki responsywnej

Układ

Przeglądarka otrzymuje największy użyteczny udział strony.
Stałe szerokości nie wymuszają przewijania w poziomie.
Panele dodatkowe zwijają się płynnie.
Układ pozostaje użyteczny, gdy wysokość widoku jest ograniczona.
Stany ładowania i błędów rezerwują odpowiednią przestrzeń.

Interakcja

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

Dokumenty

Duże pliki PDF pozostają nawigowalne.
Szerokie arkusze kalkulacyjne można przeglądać bez zaburzania układu strony.
Szczegółowe rysunki zachowują użyteczną przestrzeń do powiększania i przesuwania.
Długie nazwy plików i komunikaty o błędach nie wychodzą poza obszar.
Zmiana rozmiaru układu nie powoduje niepotrzebnego restartu dokumentu.

Bezpieczeństwo i operacje

Serwer autoryzuje każde żądanie dokumentu.
Szczegóły przechowywania pozostają prywatne.
Zasady przechowywania plików i danych tymczasowych są udokumentowane.
Błędy i logi nie zawierają wrażliwych informacji.
Limity zasobów i zachowanie przy równoczesnych sesjach są testowane.

Częste pytania

Czy aplikacja powinna utrzymywać osobne 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 kontener hosta oraz własne kontrolki aplikacji. Używaj wyłącznie punktów dostosowywania udokumentowanych dla wersji Doconut, którą wdrażasz.

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

To decyzja produktowa, a nie granica bezpieczeństwa. Jeśli akcja jest dozwolona, ale nie mieści się w układzie, 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. Powtórz zestaw po zmianach SDK, .NET, Windows Server lub układu.

Podsumowanie

Silne mobilne doświadczenie dokumentu 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 wewnątrz Twojej aplikacji .NET opartej na Windows. Twój zespół może wtedy skoncentrować się na responsywnej powłoce aplikacji, regułach bezpieczeństwa i przepływie pracy, które sprawiają, że przeglądarka staje się naturalną częścią produktu.