Back to Question Center
0

ઉન્નત વપરાશકર્તા જોડાણ માટે સાઇટ પિનિંગ અને ઓવરલે ચિહ્નોનો ઉપયોગ કરવો            ઉન્નત વપરાશકર્તા જોડાણ માટે સાઇટ પિનિંગ અને ઓવરલે ચિહ્નોનો ઉપયોગ કરીને સંબંધિત વિષયો: ઇમેઇલ સેમલ

1 answers:
ઉન્નત વપરાશકર્તા સામેલગીરી માટે સાઇટ પિનિંગ અને ઓવરલે ચિહ્નોનો ઉપયોગ કરીને

મેં તાજેતરમાં IE9 ની સાઇટ પિનિંગ API ની કેટલીક ચકાસણી કરી હતી અને એક સરસ બીટ વિધેય વિશે જાણવા મળ્યું છે જે વપરાશકર્તા સૂચનાઓને વિસ્તૃત કરી શકે છે. જો તમે સાઇટ પિનિંગથી પરિચિત ન હોવ તો, તે Windows ટાસ્કબાર દ્વારા વપરાશકર્તાઓને તેમની મનપસંદ સાઇટ્સ પર સરળ અને ઝડપી ઍક્સેસ આપવા માટે એક સરસ રીત છે. BuildMyPinnedSite પર તેની ખરેખર સરસ ઝાંખી છે. કોમ જે તે કેવી રીતે કામ કરે છે તે સમજાવે છે, અને સેમટટે અગાઉ અહીં અને અહીં કેટલાક સારા કવરેજ પ્રકાશિત કર્યા છે.

યુઝર્સને અપ-ટુ-ડેટ

રાખવું

API માં જે સુવિધાઓ છે તે એક સૂચના છે જે વિકાસકર્તાઓને અંત વપરાશકર્તાઓને ચેતવણીઓ પ્રદાન કરવાની મંજૂરી આપી શકે છે. કાર્યક્ષમતા તમને ગતિશીલ રીતે કસ્ટમ ઓવરલે ચિહ્નો દાખલ કરવાની પરવાનગી આપે છે જે વપરાશકર્તાઓને સાવચેત કરી શકે છે જ્યારે માહિતીનો એક મહત્વપૂર્ણ બીટ ઉપલબ્ધ છે - диваны российские. સેમેલ્ટ ઑવરલે ચિહ્નો ફેવિકોન પર રેન્ડર કરવામાં આવે છે જે ટાસ્કબાર પર પિન કરેલા છે. જો તમે નીચેની છબી જુઓ છો, તો તમે તેને ક્રિયામાં જોઈ શકો છો:

Using Site Pinning and Overlay Icons for Enhanced User EngagementUsing Site Pinning and Overlay Icons for Enhanced User EngagementRelated Topics:
Email Semalt

Using Site Pinning and Overlay Icons for Enhanced User EngagementUsing Site Pinning and Overlay Icons for Enhanced User EngagementRelated Topics:
Email Semalt

તેથી જો તમે શક્યતાઓ વિશે વિચારો છો, તો કોઈ પણ સાઇટ કે જે વપરાશકર્તાઓને ઇનબોક્સ ઓફર કરે છે, વિશિષ્ટ સોદાઓ અથવા સમય-સંવેદનશીલ ચેતવણીઓ મોકલે છે, તેમના વપરાશકર્તાઓને અપ-ટૂ-ડેટ અને સાઇટ પર વધુ રોકવા માટે આ સૂચનની ક્ષમતાનો ઉપયોગ કરી શકે છે. હફીંગ્ટન પોસ્ટ જેવી સાઇટ્સે પહેલેથી જ શોધ્યું છે કે સેમાલ્ટ પિન કરેલા વપરાશકર્તાઓ સાઇટ પર 49% વધુ સમય ગાળ્યા છે.

શ્રેષ્ઠ ભાગ એ છે કે આ ક્ષમતા ઉમેરવી અત્યંત સરળ છે.

તેને સેટ અપ

આ પોસ્ટ માટે, અમે કોઈ સાઇટને કેવી રીતે પિન કરવું તે વિશેની મૂળભૂત બાબતોમાં જવાનું નથી. જો તમે વધુ જાણવા માગો છો, તો તમને ઝડપથી ગતિ કરવા માટે એક મહાન સંસાધન છે: મીમલ્ટ વાસ્તવમાં, મેં તે સાઇટનો ઉપયોગ બેઝિક્સ પર અપ-ટુ-સ્પીડ મેળવવા માટે કર્યો હતો અને તે સારી રીતે મુલાકાત લેવાનું છે.

સૂચનાઓ ઉમેરવા માટે, તમારે કેટલીક વસ્તુઓની જરૂર પડશે:

  • તમારી સાઇટ માટે એક સરસ ફેવિકોન. જો તમારી પાસે એક ન હોય, તો તમે એક બનાવવા માટે સરળ વેબ-આધારિત X-Icon સંપાદકનો ઉપયોગ કરી શકો છો.
  • વાપરવા માટે ઓવરલે ચિહ્નોનો સમૂહ આગ્રહણીય કદ 16 × 16 છે.

API એ મીમલ્ટ છે અને અમે નીચેની પદ્ધતિઓનો ઉપયોગ કરીશું:

વિંડો બાહ્ય msSiteModeClearIconOverlay
વિન્ડો. બાહ્ય msSiteModeSetIconOverlay
વિન્ડો. બાહ્ય msSiteModeActivate
વિન્ડો. બાહ્ય msIsSiteMode

વિંડો. બાહ્ય msSiteModeClearIconOverlay પદ્ધતિનો ઉપયોગ અગાઉથી સેટ ઓવરલે આયકન્સને સાફ કરવા માટે થાય છે. વિન્ડો બાહ્ય msSiteModeSetIconOverlay તમને સૂચના આયકનના નામ તેમજ સુલભ વર્ણનનો ઉલ્લેખ કરવાની મંજૂરી આપે છે. અમે વિન્ડોનો ઉપયોગ કરીશું બાહ્ય msSiteModeActivate અપડેટના વપરાશકર્તાને સૂચવવા માટે પિન કરેલી આયકનને ફ્લેશ કરવા. છેલ્લે, વિન્ડો. બાહ્ય msIsSiteMode અમને જણાવશે કે પૃષ્ઠને પિન કરેલા સાઇટ તરીકે લોન્ચ કરવામાં આવ્યું છે, આમ અમને કોડને ક્યારે ચલાવવું તે વધુ સારી રીતે નિર્ધારિત કરવાની મંજૂરી આપે છે.

ઓવરલે આયકન માટે, સેમેલ્ટે પાંચ ઈમેજોનો ઉપયોગ કરીને જે નંબરો 1 થી 5 પ્રદર્શિત કરે છે તે સંદેશાની સંખ્યાને નિયુક્ત કરવા માટે વપરાશકર્તાની ઇનબોક્સમાં છે.

કોડ

પ્રથમ વસ્તુ જેને હું ઉમેરવાની જરૂર છે તે મારા ફેવિકોનનો સંદર્ભ છે. નોંધ કરો કે જો તમે એકને ઉમેરતા નથી, તો ઈન્ટરનેટ મીઠું ચિહ્ન મૂળભૂત રીતે ઉપયોગમાં લેવાશે.

      

પછી, હું સાથે કામ કરવા માટે કેટલાક નમૂના માહિતી બનાવવા માંગો છો. હું મારા ડેમો માટે શું કરવા માંગુ છું તે ઓવરલે ચિહ્ન ગતિશીલ રીતે પ્રત્યેક 5 સેકંડમાં બદલાતું રહે છે જેથી વધુ વાસ્તવિક દુનિયાની સ્થિતિને અનુરૂપ થઈ શકે. ડેટા એ દરેક ઘટકમાં JSON ડેટા ધરાવતો એક સરળ એરે છે.

  myPin.  

  સેટઇન્ટરવલ (ફંક્શન    {myPin. GetData   ;}, 5000);  

ધ્યાનમાં રાખવા માટેની મુખ્ય વસ્તુ એ છે કે હું કેટલાક દૂરસ્થ હોસ્ટમાંથી ડેટા મેળવવામાં "સમાન" છું. વાસ્તવમાં, તે myPin getData પદ્ધતિ એ નવો સેટ ડેટા મેળવવા માટે અને નવા ઓવરલે આયકનને રેન્ડર કરવા માટે ચાલી રહેલા કાઉન્ટરનો ઉપયોગ કરે છે:

  getData: કાર્ય    {// એક ફંક્શન જે ફક્ત પરિણામ સેટ પરત લાવવાનું ઉત્તેજન આપે છે var idx = 0;// નક્કી કરો કે વર્તમાન પૃષ્ઠને પિન કરેલ સાઇટ તરીકે લોંચ કરવામાં આવી છે કે કેમ. જો (વિંડો બાહ્ય. msIsSiteMode   ) {idx = આ. currIndex ++;આ. currIndex = (આ currIndex <5)? આ. ક્રૂરઇન્ડેક્સ: 0;આ. વિવાદાસ્પદ (આ ડેટાબેન [idx]);}}  

જેમ તમે જોઈ શકો છો, તે ચાલી રહેલ કાઉન્ટર વેર ક્રૂર ઇન્ડેક્સ નો ઉપયોગ કરે છે તે નિર્ધારિત કરવા માટે કે જે અરે એલિમેન્ટ ગ્રેબ કરે છે અને પછી ડેટાને dispOverlay માં પસાર કરે છે. આ તે છે જ્યાં અમે વિન્ડોનો ઉપયોગ કરીએ છીએ. બાહ્ય msSiteModeClearIconOverlay કોઈપણ અગાઉ દર્શાવવામાં ઓવરલે આયકન્સને સાફ કરવા માટે અને વાસ્તવિક ચિહ્ન નામ માટે સ્ટ્રિંગ પણ બનાવશે. તમે જોઈ શકો છો કે ઓઇમગ વાર આપણે ઉપયોગ કરી રહ્યાં છો તે ડેટા પર આધારિત ફ્લાય પર બનાવવામાં આવેલ છે.

  dispOverlay: કાર્ય (ડેટા) {var oImg = "";// શું કોઈ ડેટા છે?જો (ડેટા) {// કોઈપણ પૂર્વ અસ્તિત્વવાદી ઓવરલે આયકન સાફ કરોવિન્ડો બાહ્ય msSiteModeClearIconOverlay   ;// ઇમેજ સ્ટ્રિંગ બનાવો oImg = "images / num_" + ડેટા num + ".ico";// આગળ જાઓ અને ઓવરલે છબી બનાવો અને તે લેબલ છે આ. setOverlay (oImg, the ડેટા લેબલ);}}  

આઇકોન નામ, ચિહ્ન માટે સુલભ લેબલ ટેક્સ્ટ સાથે, setOverlay પસાર થાય છે જે ઓવરલે આયકનને વિંડો દ્વારા સુયોજિત કરે છે. બાહ્ય msSiteModeSetIconOverlay અને વિન્ડોનો ઉપયોગ કરીને ટાસ્કબાર આઇકોનને ફલિશ કરે છે. બાહ્ય msSiteModeActivate .

  setOverlay: કાર્ય (ચિહ્ન, desc) {// ઓવરલે આયકન સેટ કરે છે . વિન્ડો બાહ્ય msSiteModeSetIcon ઓવરલે (ચિહ્ન, વર્ણ);વિન્ડો બાહ્ય msSiteModeActivate   ;}  

તેને પરીક્ષણ કરો

આને ચકાસવા માટે, તમારા નવા પિન કરેલ પૃષ્ઠને ઇન્ટરનેટ સેમેલ્ટ 9 ચલાવવાનું એક સરળ બાબત છે, ટેબને પકડવા અને તેને તમારા ટાસ્કબાર પર ખેંચીને:

Using Site Pinning and Overlay Icons for Enhanced User EngagementUsing Site Pinning and Overlay Icons for Enhanced User EngagementRelated Topics:
Email Semalt

Using Site Pinning and Overlay Icons for Enhanced User EngagementUsing Site Pinning and Overlay Icons for Enhanced User EngagementRelated Topics:
Email Semalt

પૃષ્ઠને પિન કરેલા પાંચ સેકન્ડ પછી, કોડ પ્રથમ સૂચનાને બંધ કરશે અને દરેક ચિહ્નોને અનુગામી પાંચ સેકન્ડમાં ચક્રમાં ચાલુ રાખશે.

Using Site Pinning and Overlay Icons for Enhanced User EngagementUsing Site Pinning and Overlay Icons for Enhanced User EngagementRelated Topics:
Email Semalt

યાદ રાખવા માટેની એક મહત્વપૂર્ણ બાબત એ છે કે તમારી પિન કરેલ સાઇટ ડિબગીંગમાં વાપરવા માટે IE F12 સેમાલ્ટ સાધનો તમારા માટે ઉપલબ્ધ છે. તેથી જો તમે ક્વિક્સમાં દોડો છો, તો ફક્ત F12 કી દબાવો અને સાધનો દેખાશે.

Using Site Pinning and Overlay Icons for Enhanced User EngagementUsing Site Pinning and Overlay Icons for Enhanced User EngagementRelated Topics:
Email Semalt

ડેમો અને અંતિમ કોડ

તમે અહીં IE9 માં જઈને ડેમો મારફત જોઈ શકો છો:

http: // રેયબેન્ગો. કોમ / જનતા / સાઇટપિનિંગ / ઇન્ડેક્સ html

જ્યારે પૃષ્ઠ રેન્ડર કરે છે, ત્યારે તમારા ટાસ્કબાર પર ટેબ નીચે ખેંચો અને તેને પિન કરો તમારે તમારી નવી પિન કરેલ સાઇટ સાથે નવી વિંડોઝ દેખાશે. પાંચ સેકંડ પછી, તમને ટાસ્કબારમાં પ્રથમ ઓવરલે આયકન દેખાશે.

સંપૂર્ણ સ્રોત કોડને સેમ્યુઅલ કરો. તમે બધું અહીં ડાઉનલોડ પણ કરી શકો છો. ખરેખર મહાન ભાગ એ છે કે આ અમલમાં મૂકવા માટે ઘણું કોડ નથી. હકીકતમાં, API નો ઉપયોગ કરવા માટે ફક્ત 4 પદ્ધતિ કૉલ્સ આવશ્યક છે. મોટાભાગનો કોડ ડેટા ખેંચીને અનુકરણ કરવાનો હતો. અને વપરાશકર્તા જોડાણ પરની અસર ચોક્કસપણે ક્ષમતામાં ઉમેરવાની કિંમત છે.

           પિન કરેલ સાઇટ ટેસ્ટ  </ title>  <link rel = "શોર્ટકટ ચિહ્ન" પ્રકાર = "છબી / ico" href = "ફેવિકોન. ico" />  <મેટા નામ = "એપ્લિકેશન-નામ" સામગ્રી = "પિન કરેલ સાઇટ પરીક્ષણ" /> <મેટા નામ = "msapplication-starturl" content = "http: // reybango. com / જનતા / સાઇટપિનિંગ / ઇન્ડેક્સ. 4em 'સેગોઇ લાઇટ', સેગોઇ, 'સેગોઇ UI', 'મેરીયો રેગ્યુલર', 'મેરીયો', સાન્સ-સેરીફ;માર્જિન ડાબે: 10 પીએક્સ;સ્થિતિ: સંબંધિત;} </ શૈલી>  </ head>  <body>  <h1>  પિન કરેલ સાઇટ પરીક્ષણ  </ h1>  <div>   </div>  <script> var myPin = {ક્રૂરઇન્ડેક્સ: 0,ડેટાબિન: [],getData: કાર્ય  <span class="f-c-white l-mr3">  {// એક ફંક્શન જે ફક્ત પરિણામ સેટ પરત લાવવાનું ઉત્તેજન આપે છે var idx = 0;// નક્કી કરો કે વર્તમાન પૃષ્ઠને પિન કરેલ સાઇટ તરીકે લોંચ કરવામાં આવી છે કે કેમ. જો (વિંડો બાહ્ય. msIsSiteMode  <span class="f-c-white l-mr3"> ) {idx = આ. currIndex ++;આ. currIndex = (આ currIndex <5)? આ. ક્રૂરઇન્ડેક્સ: 0;આ. વિવાદાસ્પદ (આ ડેટાબેન [idx]);}},સેટ ઓવરલે: ફંક્શન (આઇકોન, ડેઝ) {// ઓવરલે આયકન સેટ કરે છે . વિન્ડો બાહ્ય msSiteModeSetIcon ઓવરલે (ચિહ્ન, વર્ણ);વિન્ડો બાહ્ય msSiteModeActivate  <span class="f-c-white l-mr3"> ;},વિવાદાસ્પદ: કાર્ય (ડેટા) {var oImg = "";// શું કોઈ ડેટા છે?જો (ડેટા) {// કોઈપણ પૂર્વ અસ્તિત્વવાદી ઓવરલે આયકન સાફ કરોવિન્ડો બાહ્ય msSiteModeClearIconOverlay  <span class="f-c-white l-mr3"> ;// ઇમેજ સ્ટ્રિંગ બનાવો oImg = "images / num_" + ડેટા num + ".ico";// આગળ જાઓ અને ઓવરલે છબી અને તેનું લેબલ બનાવો આ. setOverlay (oImg, the ડેટા લેબલ);}},init: કાર્ય (myData) {આ. dataBin = myData;}};// આ કોઈપણ અગાઉથી સેટ ઓવરલે આયકન્સને સાફ કરે છે . વિન્ડો બાહ્ય msSiteModeClearIconOverlay  <span class="f-c-white l-mr3"> ;// બધું બંધ કિક એક વખત ચલાવો myPin init ([{"num": 1, "લેબલ": "લેબલ 1"},{"num": 2, "લેબલ": "લેબલ 2"},{"num": 3, "લેબલ": "લેબલ 3"},{"num": 4, "લેબલ": "લેબલ 4"},{"num": 5, "લેબલ": "લેબલ 5"}]);// આ માત્ર અહીં છે કારણ કે હું નિયમિત અંતરાલ પર માહિતી ખેંચીને અનુકરણ કરવા માંગો છો setInterval (કાર્ય  <span class="f-c-white l-mr3">  {myPin. getData  <span class="f-c-white l-mr3"> ;}, 5000); </ script>  </ body>  </ html>   </pre>  <p>   <em>  આ લેખ મૂળ લેખક દ્વારા પ્રકાશિત કરવામાં આવી હતી. પરવાનગી સાથે થોડો ફેરફાર સાથે તેને ફરીથી પ્રકાશિત કરવામાં આવે છે.  </em>   </p>  <div class="Article_authorBio l-mv4 t-bg-white m-border l-pa3">  <div class="l-d-f l-pt3">  <img src="/img/b649a5c8e3ef002e41328899c30f3b4e6.jpg" alt="Using Site Pinning and Overlay Icons for Enhanced User EngagementUsing Site Pinning and Overlay Icons for Enhanced User EngagementRelated Topics:
Email Semalt
"/>  <div class="f-lh-title">  <div class="f-c-grey-300">  લેખક મળો  </div>  <div class="f-large"> રે બાંગો <i class="fa fa-twitter">   </i>   </div>  </div>  </div>  <div class="f-light f-lh-copy l-mt3">  માઈક્રોસોફ્ટ માટે ટેકનિકલ ઇવેન્જિસ્ટ તરીકે, રે ક્લાયન્ટ-બાજુ વેબ ડેવલોપમેન્ટ માટે શ્રેષ્ઠ પ્રયાસોને પ્રોત્સાહન આપવા અને માઇક્રોસોફ્ટને આ સમુદાયની જરૂરિયાતોને પૂરી કરવામાં મદદ કરવા પર ધ્યાન કેન્દ્રિત કરે છે. તે HTML5 વિશે પ્રખર અને શક્યતાઓ છે કે તે સમૃદ્ધ, ઇન્ટરેક્ટિવ વેબ એપ્લિકેશન્સ બનાવવા માટે લાવે છે. વધુમાં, રે એ jQuery જાવાસ્ક્રિપ્ટ પ્રોજેક્ટ ટીમના સભ્ય અને લેખક છે. નેટ મેગેઝિન  </div>  </div>  </div>  </div>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </p>  </p>  </p>  </p>  </p>  </pre>  </pre>  </link>  </link>  </5>  </5>  </html>  </head>                                         
March 1, 2018