Un visualizzatore di documenti può essere tecnicamente funzionale e allo stesso tempo risultare inutilizzabile su uno schermo stretto. Barre degli strumenti dense, controlli minuscoli, pannelli laterali sovradimensionati e contenitori con dimensioni fisse trasformano rapidamente un semplice anteprima in un'esperienza frustrante.

Per le applicazioni ASP.NET e .NET basate su Windows, Doconut fornisce un SDK di visualizzazione di documenti incorporato per documenti aziendali, file PDF, disegni CAD, file email e immagini. La tua applicazione controlla comunque la disposizione circostante, l'autenticazione, l'autorizzazione, l'archiviazione e il flusso di lavoro dei documenti.

Questa guida si concentra sull'esperienza circostante: come dare al visualizzatore incorporato spazio sufficiente, rendere i controlli dell'applicazione comodi da usare, gestire i cambi di orientamento e testare documenti realistici senza fare affidamento su codice sorgente SDK non verificato.

Layout di visualizzazione di documenti responsivi collegati a un componente server-side .NET

Il Progettazione Responsiva Inizia Fuori dal Visualizzatore

Il visualizzatore può utilizzare solo lo spazio che la disposizione genitore gli fornisce. Se l'applicazione lo inserisce in una scheda stretta, gli assegna una larghezza fissa da desktop, o lo circonda con più pannelli persistenti, l'area del documento rimarrà angusta.

Inizia con tre domande:

Qual è il compito principale in questa pagina?
Quali controlli dell'applicazione devono rimanere visibili durante la lettura?
Quali pannelli secondari possono essere compressi o spostati dietro un pulsante?

Per una pagina dedicata al documento, il visualizzatore dovrebbe solitamente essere l'elemento dominante. Metadati, commenti, approvazioni e azioni di flusso di lavoro possono rimanere disponibili senza occupare spazio permanente dal documento.

Pianifica la Disposizione in Base allo Spazio Disponibile

Il comportamento responsivo dovrebbe seguire lo spazio disponibile per il componente, non supposizioni su un nome di dispositivo specifico.

Disposizione ampia

Su un viewport ampio, la pagina può mostrare:

Un'anteprima o pannello di navigazione del documento
La tela principale del documento
Un pannello secondario di flusso di lavoro per commenti o metadati
Un set completo di azioni dell'applicazione

Quando un pannello secondario diventa un cassetto, aggiungi il comportamento di dialogo, la gestione della messa a fuoco e le etichette accessibili richieste dal tuo sistema di progettazione.

Rendi i Controlli dell'Applicazione Touch-Friendly

I controlli intorno al visualizzatore dovrebbero essere comodi da attivare senza movimenti precisi del puntatore.

Linee guida pratiche includono:

Assegna ai controlli interattivi un'area obiettivo di circa 44 × 44 pixel CSS.
Lascia spazio sufficiente tra azioni distruttive e quelle usate frequentemente.
Non fare affidamento sul passaggio del mouse per rivelare informazioni essenziali.
Mantieni gli indicatori di messa a fuoco visibili per gli utenti da tastiera.
Fornisci nomi accessibili per i pulsanti solo icona.
Evita di posizionare controlli critici vicino alle aree di gesto del browser o del sistema.

Non sovrascrivere gli stili interni di Doconut con selettori indovinati o variabili CSS non documentate. Usa le risorse ufficiali per la versione SDK installata e applica le tue regole responsivi ai contenitori e ai controlli di proprietà dell'applicazione.

Tratta i Pannelli Laterali come Spazio di Lavoro Opzionale

Miniature, risultati di ricerca, annotazioni, metadati e cronologia del flusso di lavoro sono utili, ma non dovrebbero competere tutti contemporaneamente con il documento.

Su disposizioni compatte:

Apri un pannello laterale solo quando l'utente lo richiede.
Riporta la messa a fuoco al pulsante che lo ha aperto dopo la chiusura.
Intrappola la messa a fuoco all'interno dei pannelli modali quando opportuno.
Fornisci al pannello un titolo chiaro e un'azione di chiusura.
Conserva la posizione corrente del documento quando il pannello si apre o si chiude.

Se il visualizzatore fornisce i propri pannelli, verifica il loro comportamento responsivo documentato prima di aggiungere un secondo sistema di navigazione a livello di applicazione intorno a essi.

Mantieni Rapido lo Spazio di Lavoro del Documento

Il progetto responsivo non è solo visivo. Documenti di grandi dimensioni possono esporre limiti di memoria, larghezza di banda e rendering, specialmente quando la pagina contiene anche cruscotti o animazioni complesse.

Riduci il lavoro concorrente

Metti in pausa le animazioni decorative mentre l'utente legge, evita effetti costosi intorno al visualizzatore e rimuovi osservatori o listener di eventi non necessari.

Riserva spazio di disposizione

Assegna al contenitore host del visualizzatore un'altezza stabile prima del caricamento. Questo previene grandi spostamenti di disposizione e riduce la probabilità che gli utenti tocchino il controllo sbagliato.

Carica le funzionalità secondarie in modo deliberato

Commenti, cronologia di audit e pannelli di metadati voluminosi non devono sempre caricarsi con la prima pagina del documento. Rimandali finché l'utente non apre il pannello correlato, in linea con il tuo flusso di lavoro.

Testa file rappresentativi

Usa PDF lunghi, fogli di calcolo ampi, disegni CAD dettagliati, immagini grandi e documenti con caratteri insoliti. Un piccolo file di esempio non può rivelare i limiti dell'esperienza di produzione.

Mantieni il Controllo degli Accessi sul Server

La presentazione responsiva non modifica le responsabilità di sicurezza dell'applicazione. Ogni richiesta di documento deve comunque passare attraverso l'autenticazione e l'autorizzazione specifica del documento.

Per le applicazioni ASP.NET Core, meccanismi standard come il middleware di autenticazione, le policy, i claim, l'attributo [Authorize] e l'autorizzazione basata su risorse possono proteggere la rotta lato server che risolve un documento.

L'applicazione dovrebbe:

Utilizzare identificatori di documento generati dal server.
Verificare che l'utente corrente possa accedere al documento richiesto.
Tenere le credenziali di archiviazione e i percorsi non limitati lontani dal client.
Sanificare gli errori mostrati nella pagina del visualizzatore.
Applicare regole esplicite di conservazione per i file originali e temporanei.
Evitare di registrare contenuti dei documenti, segreti o URL di accesso sensibili.

Nascondere le azioni di download, stampa o menu contestuale può supportare il flusso di lavoro previsto, ma non sostituisce l'autorizzazione lato server e non può impedire ogni forma di cattura dopo che il contenuto è visibile.

Integrare Doconut nell'Esperienza Responsiva

Doconut fornisce lo strato di visualizzazione di documenti incorporato, mentre l'applicazione fornisce il guscio responsivo e il flusso di lavoro aziendale.

Una sequenza di implementazione sensata è:

Conferma i formati richiesti e le funzionalità del visualizzatore.
Integra il pacchetto Doconut supportato per la tua applicazione .NET.
Proteggi la risoluzione del documento con autorizzazione lato server.
Posiziona il visualizzatore in un contenitore host fluido di proprietà dell'applicazione.
Progetta stati compatti per le barre degli strumenti dell'applicazione e i pannelli secondari.
Testa il ridimensionamento, l'orientamento, la messa a fuoco, il caricamento e il comportamento di errore.
Convalida il risultato con documenti simili a quelli di produzione e sessioni concorrenti.

Consulta la verificata pagina prodotto Doconut Viewer per le informazioni attuali sul prodotto. Usa la pagina ufficiale di download e documentazione per le istruzioni di installazione e integrazione specifiche per versione, anziché copiare esempi SDK non documentati da post di terze parti.

Lista di Controllo per la Revisione del Visualizzatore Responsivo

Disposizione

Il visualizzatore riceve la quota più grande e utile della pagina.
Larghezze fisse non forzano lo scorrimento orizzontale.
I pannelli secondari si comprimono in modo pulito.
La disposizione rimane utilizzabile quando l'altezza del viewport è limitata.
Gli stati di caricamento ed errore riservano spazio appropriato.

Interazione

I controlli dell'applicazione hanno dimensioni obiettivo comode.
Le azioni essenziali non dipendono dal passaggio del mouse.
I controlli solo icona hanno nomi accessibili.
La messa a fuoco rimane visibile e segue un ordine logico.
I cassetti e i dialoghi restituiscono correttamente la messa a fuoco.

Documenti

PDF di grandi dimensioni rimangono navigabili.
Fogli di calcolo ampi possono essere ispezionati senza rompere la disposizione della pagina.
Disegni dettagliati mantengono uno zoom e uno spazio di panoramica utilizzabili.
Nomi di file lunghi e messaggi di errore non traboccano.
Il cambiamento di dimensione della disposizione non riavvia il documento inutilmente.

Sicurezza e operazioni

Il server autorizza ogni richiesta di documento.
I dettagli di archiviazione rimangono privati.
La conservazione di file e dati temporanei è documentata.
Errori e log escludono informazioni sensibili.
Limiti di risorse e comportamento di sessioni concorrenti sono testati.

Domande Frequenti

L'applicazione dovrebbe mantenere pagine visualizzatore separate per telefoni e desktop?

Di solito, no. Una singola pagina responsiva è più facile da mantenere. Cambia la disposizione in base allo spazio disponibile e rivela progressivamente i controlli secondari.

L'applicazione può sovrascrivere il CSS interno del visualizzatore?

Evita selettori e variabili non documentati. Stila il contenitore host e i tuoi controlli dell'applicazione. Usa solo i punti di personalizzazione documentati per la versione Doconut che distribuisci.

I pulsanti di download e stampa dovrebbero essere nascosti sulle disposizioni compatte?

È una decisione di prodotto più che un confine di sicurezza. Se un'azione è permessa ma non trova spazio, posizionala in un menu overflow accessibile. Se non è permessa, applica quella politica sul server.

Come dovrebbero essere testati i documenti di grandi dimensioni?

Crea una collezione di test sanificata che rifletta il conteggio reale di pagine, le dimensioni dei file, i caratteri, i disegni e i fogli di calcolo. Ripeti la suite dopo modifiche a SDK, .NET, Windows Server o alla disposizione.

Conclusione

Una solida esperienza di documenti mobile inizia con un contenitore fluido, una disposizione incentrata sul documento, controlli comodi, pannelli laterali opzionali, comportamento di ridimensionamento prevedibile e autorizzazione lato server.

Doconut può fornire la capacità di visualizzazione all'interno della tua applicazione .NET basata su Windows. Il tuo team può quindi concentrarsi sul guscio responsivo dell'applicazione, sulle regole di sicurezza e sul flusso di lavoro che rendono il visualizzatore una parte naturale del prodotto.