מציג מסמכים יכול להיות תפקודי מבחינה טכנית ועדיין להרגיש בלתי שמיש במסך צר. סרגלי כלים צפופים, פקדים קטנים, לוחות צד גדולים מדי ומכולות עם ממדים קבועים ממירים במהירות תצוגה מקדימה פשוטה לחוויה מתסכלת.
ליישומי ASP.NET ו‑.NET מבוססי Windows, Doconut מספק SDK משולב לתצוגת מסמכים עבור מסמכי עסקים, קבצי PDF, שרטוטי CAD, קבצי דוא"ל ותמונות. היישום שלכם עדיין שולט בפריסת הסביבה, באימות, באישור, באחסון ובזרימת העבודה של המסמכים.
מדריך זה מתמקד בחוויית הסביבה: כיצד לתת למציג המשולב מספיק מקום, להפוך את פקדי היישום לנוחים לשימוש, להתמודד עם שינויי כיוון, ולבדוק מסמכים ריאליים מבלי להסתמך על קוד מקור של ה‑SDK שלא אומת.
עיצוב רספונסיבי מתחיל מחוץ למציג
המציג יכול להשתמש רק במרחב שהפריסה ההורית שלו מספקת. אם היישום ממקם אותו בתוך כרטיס צר, נותן לו רוחב קבוע למחשב שולחני, או מקיף אותו במספר לוחות קבועים, אז אזור המסמך יישאר צפוף.
התחילו עם שלוש שאלות:
- מה המשימה הראשית בדף זה?
- אילו פקדי יישום חייבים להישאר גלויים בזמן הקריאה?
- אילו לוחות משניים יכולים להתכווץ או לעבור מאחורי כפתור?
לדף מסמך ייעודי, המציג צריך בדרך כלל להיות האלמנט הדומיננטי. מטא‑נתונים, תגובות, אישורים ופעולות זרימת עבודה יכולים להישאר זמינים מבלי לתפוס מקום קבוע מהמסמך.
תכנן את הפריסה לפי המרחב הזמין
התנהגות רספונסיבית צריכה לעקוב אחרי המרחב הזמין לרכיב, ולא אחרי הנחות לגבי שם מכשיר מסוים.
פריסה רחבה
במבט רחב, הדף עשוי להציג:
- תמונת ממוזערת של המסמך או לוח ניווט
- קנבס המסמך הראשי
- לוח זרימת עבודה משני לתגובות או מטא‑נתונים
- סט מלא של פעולות היישום
כאשר לוח משני הופך למגירה, הוסיפו את התנהגות הדיאלוג, ניהול הפוקוס והתיוג הנגיש הנדרש על ידי מערכת העיצוב שלכם.
הפוך את פקדי היישום לידידותיים למגע
פקדים סביב המציג צריכים להיות נוחים להפעלה ללא תזוזת מצביע מדויקת.
- תנו לפקדים אינטראקטיביים שטח מטרה של כ‑44 על 44 פיקסלים ב‑CSS.
- השאירו מרווח מספיק בין פעולות הרסיות לפעולות שבשימוש תדיר.
- אל תסתמכו על ריחוף (hover) לחשיפת מידע חיוני.
- שמרו על מצביעי פוקוס גלויים למשתמשי מקלדת.
- ספקו שמות נגישים לכפתורים המורכבים רק מאייקון.
- הימנעו ממיקום פקדים קריטיים קרוב לאזורי מחוות של הדפדפן או המערכת.
אל תעקפו את הסגנונות הפנימיים של Doconut באמצעות בוררים משוערים או משתני CSS לא מתועדים. השתמשו במשאבים הרשמיים לגרסת ה‑SDK המותקנת, והחילו את חוקי הרספונסיביות שלכם על המכולות והפקדים שבבעלות היישום.
התייחס ללוחות הצד כמרחב עבודה אופציונלי
תמונות ממוזערות, תוצאות חיפוש, אנוטציות, מטא‑נתונים והיסטוריית זרימת עבודה הם בעלי ערך, אך הם לא צריכים להתחרות כולם עם המסמך במקביל.
בפריסות קומפקטיות:
- פתחו לוח צד רק כאשר המשתמש מבקש זאת.
- החזירו את הפוקוס לכפתור שפתח אותו לאחר הסגירה.
- לכדו את הפוקוס בתוך לוחות מודאליים במקומות המתאימים.
- תנו ללוח כותרת ברורה ופעולת סגירה.
- שמרו על המיקום הנוכחי של המסמך כאשר הלוח נפתח או נסגר.
אם המציג מספק לוחות משלו, בדקו את ההתנהגות הרספונסיבית המתועדת שלהם לפני הוספת מערכת ניווט ברמת היישום השנייה סביבם.
שמור על מרחב העבודה של המסמך מהיר
עיצוב רספונסיבי אינו רק חזותי. מסמכים גדולים יכולים לחשוף מגבלות בזיכרון, ברוחב פס וביצירת רינדור, במיוחד כאשר הדף מכיל גם לוחות מחוונים מורכבים או אנימציות.
הפחת עבודה מתחרה
השהו אנימציות קישוטיות בזמן שהמשתמש קורא, הימנעו מאפקטים יקרים סביב המציג, והסירו צופים או מאזיני אירועים מיותרים.
שמור מרחב פריסה
תנו למארח המציג גובה יציב לפני הטעינה. זה מונע שינויי פריסה גדולים ומפחית את הסיכון שהמשתמשים ילחצו על פקד שגוי.
טען תכונות משניות במכוון
תגובות, היסטוריית ביקורת ולוחות מטא‑נתונים גדולים אינם תמיד צריכים להיטען יחד עם דף המסמך הראשון. דחו אותם עד שהמשתמש פותח את הלוח הרלוונטי כאשר זה תואם לזרימת העבודה שלכם.
בדוק קבצים מייצגים
השתמשו בקבצי PDF ארוכים, גיליונות אלקטרוניים רחבים, שרטוטי CAD מפורטים, תמונות גדולות, ומסמכים עם גופנים בלתי רגילים. קובץ דוגמה קטן אינו יכול לחשוף את מגבלות חוויית הייצור.
שמור על בקרת גישה בשרת
הצגה רספונסיבית אינה משנה את אחריות האבטחה של היישום. כל בקשת מסמך עדיין צריכה לעבור אימות והסמכה ספציפית למסמך.
ליישומי ASP.NET Core, מנגנונים סטנדרטיים כגון middleware לאימות, מדיניות, תביעות, התכונה [Authorize], והסמכה מבוססת משאבים יכולים להגן על נתיב השרת שמפענח מסמך.
היישום צריך:
- להשתמש במזהי מסמכים שנוצרו בשרת.
- לאמת שהמשתמש הנוכחי יכול לגשת למסמך המבוקש.
- להשאיר את פרטי האימות של האחסון והנתיבים הלא מוגבלים הרחק מהלקוח.
- לטהר שגיאות המוצגות בדף המציג.
- להחיל כללי שמירה מפורשים על קבצים מקוריים וזמניים.
- להימנע מתיעוד תוכן המסמך, סודות או כתובות URL גישה רגישות.
הסתרת פעולות הורדה, הדפסה או תפריט הקשר עשויה לתמוך בזרימת העבודה המיועדת, אך היא אינה מחליפה את ההסמכה בצד השרת ולא יכולה למנוע כל צורת לכידה לאחר שהתוכן נראה.
שילוב Doconut בחוויה הרספונסיבית
Doconut מספק את שכבת תצוגת המסמכים המשולבת, בעוד שהיישום מספק את המעטפת הרספונסיבית וזרימת העבודה העסקית.
רצף יישום הגיוני הוא:
- אשרו פורמטים נדרשים ותכונות מציג.
- שילבו את חבילת Doconut הנתמכת עבור היישום .NET שלכם.
- הגנו על פתרון המסמך באמצעות הסמכה בצד השרת.
- מקמו את המציג במכולת מארח נוזלית שבבעלות היישום.
- עצבו מצבים קומפקטיים עבור סרגלי כלי היישום ולוחות משניים.
- בדקו שינוי גודל, כיוון, פוקוס, טעינה והתנהגות שגיאות.
- אמתו את התוצאה עם מסמכים דמויי ייצור והפעלות מקבילות.
התייעצו עם דף מוצר Doconut Viewer למידע עדכני על המוצר. השתמשו ב-דף ההורדה והתיעוד הרשמי להתקנה והוראות אינטגרציה ספציפיות לגרסה במקום להעתיק דוגמאות SDK שלא תועדו מפוסטים של צד שלישי.
רשימת בדיקה של מציג רספונסיבי
פריסה
- המציג מקבל את החלק הגדול והיעיל ביותר של הדף.
- רוחבים קבועים אינם מאלצים גלילה אופקית.
- לוחות משניים מתכווצים בצורה חלקה.
- הפריסה נשארת שמישה כאשר גובה תצוגת החלון מוגבל.
- מצבי טעינה ושגיאה משאירים מרחב מתאים.
אינטראקציה
- לפקדי היישום יש גדלי מטרה נוחים.
- פעולות חיוניות אינן תלויות בריחוף.
- לפקדים המורכבים רק מאייקון יש שמות נגישים.
- הפוקוס נשאר גלוי ועוקב אחרי סדר לוגי.
- מגירות ודיאלוגים מחזירים את הפוקוס כראוי.
מסמכים
- קבצי PDF גדולים נשארים ניתנים לניווט.
- גיליונות אלקטרוניים רחבים ניתנים לבחינה מבלי לשבור את פריסת העמוד.
- שרטוטים מפורטים שומרים על מרחב זום והזזה שניתן להשתמש בו.
- שמות קבצים ארוכים והודעות שגיאה אינם חורגים.
- שינוי גודל הפריסה אינו מאתחל את המסמך ללא צורך.
אבטחה ותפעול
- השרת מאשר כל בקשת מסמך.
- פרטי האחסון נשארים פרטיים.
- שמירת קבצים ונתונים זמניים מתועדת.
- שגיאות ורשומות לא כוללות מידע רגיש.
- מגבלות משאבים והתנהגות של הפעלות מקבילות נבדקות.
שאלות נפוצות
האם היישום צריך לשמור על דפי מציג נפרדים לטלפונים ולמחשבים שולחניים?
בדרך כלל, לא. דף רספונסיבי יחיד הוא קל יותר לתחזוקה. שנו את הפריסה בהתאם למרחב הזמין והציגו בהדרגה פקדים משניים.
האם היישום יכול לעקוף את ה‑CSS הפנימי של המציג?
הימנעו מבוררים ומשתנים לא מתועדים. עצבו את מכולת המארח ואת פקדי היישום שלכם. השתמשו רק בנקודות ההתאמה המצוינות בתיעוד לגרסת Doconut שבה אתם משתמשים.
האם יש להסתיר כפתורי הורדה והדפסה בפריסות קומפקטיות?
זהו החלטת מוצר ולא גבול אבטחה. אם פעולה מותרת אך אינה מתאימה, מקמו אותה בתפריט גלישה נגיש. אם היא לא מותרת, אכפו מדיניות זו בשרת.
איך יש לבדוק מסמכים גדולים?
בנו אוסף בדיקות מנוקה המשקף ספירת עמודים אמיתית, גדלי קבצים, גופנים, שרטוטים וגיליונות אלקטרוניים. חזרו על הסדרה לאחר עדכוני SDK, .NET, Windows Server או שינויי פריסה.
סיכום
חוויית מסמך מובייל חזקה מתחילה במכולת נוזלית, פריסה שממקדת את המסמך, פקדים נוחים, לוחות צד אופציונליים, התנהגות שינוי גודל צפויה, והסמכה בצד השרת.
Doconut יכול לספק את יכולת הצפייה בתוך היישום .NET מבוסס Windows שלכם. הצוות שלכם יכול לאחר מכן להתמקד במעטפת הרספונסיבית של היישום, כללי האבטחה, וזרימת העבודה שהופכות את המציג לחלק טבעי מהמוצר.