ორიგინალური ჩანართის დიზაინი html-ში. როგორ შევქმნათ ადაპტური ჩანართები (ჩანართები) css-ის გამოყენებით სკრიპტების გამოყენების გარეშე. css-ის შექმნა ახალი html ჩანართისთვის
კორპორატიული ინფორმაციის პორტალი(Enterprise Information Portal, EIP) - ასევე ცნობილია როგორც კორპორატიული პორტალი. ავტომატიზირებული საინფორმაციო სისტემა, რომელიც თანამშრომლებს ერთიანი წესით უზრუნველყოფს საჭირო სერვისებს. კორპორატიულ პორტალს აქვს როგორც შეზღუდული წვდომა თანამშრომლებისთვის, ასევე (თუ თავად კომპანიას სურს) უფასო წვდომა ყველასთვის. ნებისმიერ შემთხვევაში, EIP სისტემა უზრუნველყოფს უსაფრთხო წვდომას ერთ რესურსზე (ყველაზე ხშირად ვებ ინტერფეისის საშუალებით) და ზოგადად, კორპორატიული პორტალი არის ინფორმაციის აგრეგაციისა და პერსონალიზაციის საშუალება.
პირველი პორტალების დანიშნულება ნათლად არის მითითებული ტერმინის პირველი განმარტებით: „საწარმოთა საინფორმაციო პორტალები (EIP) არის აპლიკაციები, რომლებიც კომპანიებს საშუალებას აძლევს გაამჟღავნონ ინფორმაცია ორგანიზაციის შიგნით და მის ფარგლებს გარეთ და თითოეულ მომხმარებელს მიაწოდონ წვდომის ერთი წერტილი. მისთვის განკუთვნილ ინფორმაციას, რომელიც საჭიროა ინფორმირებული მენეჯმენტის გადაწყვეტილებების მისაღებად“ (Christopher C. Shilakes and Julie Tylman, "Enterprise Information Portals", 1998 წლის ნოემბერი).
პირველი პერიოდის პორტალები გამოიყენებოდა როგორც მენეჯმენტიდან კომპანიის თანამშრომლებისთვის ინფორმაციის გამოქვეყნების საშუალება. ისინი წარმოადგენდნენ ვებსაიტს, სადაც განთავსებული იყო ინფორმაცია კომპანიის შესახებ, რომლის ერთ-ერთ გვერდზე მარტივი შიდა ფორუმის მოწყობა შეიძლებოდა. პორტალზე შეიძლებოდა მიიღოთ ინფორმაცია კომპანიაში მიმდინარე ორგანიზაციული ცვლილებების შესახებ და წაიკითხოთ სიახლეები. გარდა ამისა, პორტალი ემსახურებოდა მარტივი ფაილების შესანახად.
ტექნოლოგიების განვითარებასთან ერთად გაფართოვდა პორტალების ფუნქციები. 2000 წლიდან კომპანიის თანამშრომლებმა დაიწყეს პორტალით სარგებლობა საჭირო ინფორმაციის მოსაპოვებლად მათ კითხვებზე პასუხების მისაღებად. პორტალური ტექნოლოგიები განვითარდა მონაცემების სტრუქტურირებისა და კლასიფიკაციის, საჭირო ინფორმაციის ძიების სიჩქარისა და ეფექტურობის გაზრდის, ასევე მიღებული შედეგების წარმოდგენის საჭირო ფორმატის უზრუნველყოფის მიმართულებით. ამ პერიოდში კორპორატიულმა პორტალებმა დაიწყეს ცოდნის ბაზების ფუნქცია კომპანიის საქმიანობასთან დაკავშირებულ სხვადასხვა საგნობრივ სფეროებში.
Gartner განმარტებები
EIP: შერჩევა და განხორციელება
კორპორატიული პორტალების და გადაწყვეტილებების მწარმოებლები
| მწარმოებელი | პროდუქტის დასახელება | ტექნიკა | ლიცენზია | პორტალი API | რუსიფიცირებული |
|---|---|---|---|---|---|
| Apache Software Foundation (ASF) | Jetspeed 2.1.3 | J2EE | Apache License v2.0 | JSR-168 | უცნობი |
| ATG | ATG პორტალი | J2EE | კომერციული | JSR-168 | უცნობი |
| საზურგე | მდიდარი პორტალი | RIA, J2EE, .NET | კომერციული | ვებ ორიენტირებული არქიტექტურა | უცნობი |
| Broadvision | Broadvision პორტალი 8.0 | J2EE | კომერციული | უცნობი | უცნობი |
| eXo პლატფორმა SAS | eXo პორტალი 2.5 | J2EE | Affero General Public License | JSR-286 | უცნობი |
| ფასიჰი | Fasihi Enterprise პორტალი 2.0 | J2EE | კომერციული | JSR-286 | უცნობი |
| IBM | WebSphere Portal Server 6.1 | J2EE | კომერციული | JSR-286 | დიახ |
კორპორატიული პორტალი არის ავტომატური სისტემა ორგანიზაციის შიდა საინფორმაციო რესურსების მართვისთვის, ასევე პროექტებზე, ამოცანებზე, დოკუმენტებზე და კომპანიის თანამშრომლებსა და კლიენტებს შორის კომუნიკაციისთვის.
კორპორატიული პორტალების დაყენება შესაძლებელია როგორც კორპორატიულ სერვერებზე, ასევე ღრუბელში. ვინაიდან კორპორატიული პორტალი არის ერთიანი რესურსი ინფორმაციის შეგროვებისა და მუშაობისთვის, მას უსაფრთხოდ შეიძლება ეწოდოს შიდა კორპორატიული სოციალური ქსელი ფუნქციების მთელი რიგით.
კორპორატიული პორტალის ძირითადი ფუნქციები
კორპორატიული პორტალები ფართოდ გავრცელდა მათი ფუნქციების მდიდარი ნაკრების გამო, რომელიც მოიცავს ორგანიზაციის თანამშრომლების თანამშრომლობისთვის აუცილებელ თითქმის ყველა სფეროს. პირველ რიგში ეს:
- შიდა და გარე კომუნიკაციები
პორტალები გვაძლევს საშუალებას დავაჩქაროთ თანამშრომლებთან და კლიენტებთან კომუნიკაციის პროცესი ჩვენთვის ნაცნობი მესინჯერებისა და სოციალური ქსელებიდან ჩვენთვის ნაცნობი სხვა ინსტრუმენტების წყალობით. როგორიცაა "ცოცხალი საკვები", გაფრთხილებები და ა.შ. სხვადასხვა ბიზნეს ჩეთების შექმნის შესაძლებლობა ბიზნეს სფეროს ან პროექტის მიხედვით აჩქარებს კომუნიკაციის პროცესს და საჭირო გადაწყვეტილებების მიღებას. ბევრი პორტალი საშუალებას გაძლევთ დარეკოთ კოლეგებთან, რომლებიც არ არიან ონლაინ. ასევე, თანამედროვე კორპორატიული პორტალები საშუალებას გაძლევთ ისაუბროთ სამუშაო ჯგუფებში და კომპანიის კლიენტებთან მიმდინარე პროექტების შესახებ და მოაგვაროთ მიმდინარე საკითხები.
- დავალების და პროექტის მენეჯმენტი
ამოცანები და პროექტები ნებისმიერი ორგანიზაციის სამუშაო პროცესის განუყოფელი ნაწილია. კორპორატიულ პორტალებს, როგორც წესი, აქვთ მათთან მუშაობის მოსახერხებელი ხელსაწყოების ფართო სპექტრი. დაწყებული დავალების დაყენებიდან, კალენდარული ვადების მართვა, დელეგირების მექანიზმები, საკონტროლო სიები, მზა შაბლონები, დამთავრებული სხვადასხვა კონსტრუქტორებითა და ფილტრებით. ეს ყველაფერი საშუალებას გაძლევთ თვალყური ადევნოთ დაკისრებული ამოცანების დროულად შესრულებას და შეაფასოთ თანამშრომლების მუშაობა, მიიღოთ მათგან შესაბამისი ანგარიშები.
- ითანამშრომლეთ დოკუმენტებთან
მრავალი კორპორატიული პორტალის ფუნქციონალობა ძალიან კომფორტულს ხდის დოკუმენტებთან მუშაობას. დოკუმენტებზე წვდომის დონის შექმნა, რედაქტირება, შენახვა, კონფიგურაცია და ა.შ. ამავდროულად, ძალიან ხშირად, დოკუმენტთან მუშაობისთვის, არ გჭირდებათ მისი კომპიუტერში ჩამოტვირთვა და დასრულების შემდეგ განახლებული ვერსიის უკან ატვირთვა. მესამე მხარის ონლაინ სერვისები, როგორიცაა Google Docs და MS Office, საშუალებას გაძლევთ იმუშაოთ დოკუმენტებთან პირდაპირ პორტალზე. კორპორატიული პორტალი საშუალებას გაძლევთ მოხერხებულად გააზიაროთ დოკუმენტები კოლეგებთან, შექმნათ დოკუმენტების გარე ბმულები, როგორც კოლეგებისთვის, ასევე კლიენტებისთვის.
- სამუშაო საათების დაგეგმვა და აღრიცხვა
ორგანიზაციის ეფექტურობა დიდწილად დამოკიდებულია სამუშაო დისციპლინაზე. კორპორატიული პორტალების გამოყენებით, შეგიძლიათ თვალყური ადევნოთ თანამშრომლების სამუშაო საათებს. ისინი აღნიშნავენ სამუშაო დღის დაწყებას და დასასრულს, ასევე ყველა სახის შესვენებას, გაცდენას, მივლინებას და ა.შ. მთელი ეს ინფორმაცია ხელს შეუწყობს პროექტებსა და ამოცანებზე დახარჯული დროის ოპტიმიზაციას. ბევრ პორტალს აქვს შეხვედრის ხელსაწყოების კარგი ნაკრები. მოსაწვევების მასობრივი გაგზავნა, შეხვედრების დაგეგმვა კალენდრებში, ასევე ყველა მონაწილის ინფორმირება და შეხვედრის შედეგებისა და ამოცანების შესახებ.
- CRM:კლიენტები და გაყიდვები
ბევრი კორპორატიული პორტალი გთავაზობთ CRM სისტემის ფუნქციებს, რაც საშუალებას გაძლევთ შეინახოთ კლიენტებისა და პარტნიორების კონტაქტების მონაცემთა ბაზა, რომლებთანაც თანამშრომლობთ. ყველა ზარისა და ელფოსტის ჩაწერის შესაძლებლობა არ მოგცემთ გამოტოვოთ ყველაზე მნიშვნელოვანი მომენტები, ხოლო გაყიდვების ძაბრი დაგეხმარებათ თვალყური ადევნოთ თქვენი გაყიდვების განყოფილების ეფექტურობას.
- HR:პერსონალის მართვა
კორპორატიული პორტალები გაადვილებს თქვენი კომპანიის სტრუქტურის წარდგენას და მართვას. ყველა საჭირო ინფორმაცია თანამშრომლების შესახებ, როგორიცაა საკონტაქტო ნომრები, გაფართოების ნომრები, ელ.ფოსტა და ა.შ. ყოველთვის იქნება ხელთ. ადვილი მისახვედრია, ვინ არის სამსახურში, ვინ არ არის, ვინ არის მივლინებაში, ვინ ვის ანაცვლებს დროებით და ვის აქვს დღეს დაბადების დღე.
- ბიზნეს პროცესების ავტომატიზაცია
არაფერი აჩქარებს კომპანიის მუშაობას და დაზოგავს დროს, როგორც ამას ავტომატიზირებული ბიზნეს პროცესები აკეთებს. კორპორატიული პორტალი გთავაზობთ კომპანიაში ძირითადი ბიზნეს პროცესების ავტომატიზაციას. რუტინული ოპერაციები, როგორიცაა მივლინებები, შვებულებები, გადასახადების დამტკიცება და გადახდა, შეიძლება ბევრჯერ უფრო სწრაფად დასრულდეს.
ვის სჭირდება კორპორატიული პორტალი და რატომ?
კორპორატიული პორტალი, უპირველეს ყოვლისა, ძალიან მოსახერხებელი ინსტრუმენტია კომპანიებისთვის, რომლებსაც აქვთ დიდი რაოდენობით დისტანციური თანამშრომელი ან ფილიალის სტრუქტურა. სადაც ადამიანები არ არიან განლაგებული იმავე ოფისში ან ბევრს მოძრაობენ თავიანთი სამუშაოს ბუნებიდან გამომდინარე. კორპორატიული პორტალი შეიძლება იყოს მათთვის მობილური სამუშაო ადგილი. მაგრამ მუდმივი პერსონალის მქონე კომპანიებისთვის და ერთი მდებარეობით, კორპორატიული პორტალი ძალიან სასარგებლო იქნება შემდეგი მიზეზების გამო:
- სამუშაო დროის დაზოგვა
იპოვნეთ და დაამუშავეთ თქვენთვის საჭირო ინფორმაცია უფრო სწრაფად. უფრო ეფექტური კომუნიკაცია კოლეგებთან და დააჩქარეთ დაკისრებული ამოცანების შესრულება.
- გაზარდეთ თანამშრომლების პროდუქტიულობა
კორპორატიული პორტალის დახმარებით ყველამ ყოველთვის იცის, რა უნდა გააკეთოს და რა ვადებში. სამუშაო ჯგუფები მოგვცემს ამის საშუალებას უფრო ეფექტურად, და მთელი დაგროვილი ცოდნა დაგროვდება და გადაიცემა კომპანიის შიგნით.
- ბიზნეს პროცესების ოპტიმიზაცია
მიეცით საშუალება, რომ თქვენი დოკუმენტები და ინფორმაცია სიტყვასიტყვით გაფრინდეს თქვენს ორგანიზაციაში, ვიდრე ოფისიდან ოფისში ცოცვით.
- მოიპოვეთ კონტროლი და მართვადობა
თქვენ ყოველთვის შეგიძლიათ იცოდეთ ვინ სად არის, რაზე მუშაობს და რამდენ ხანს. თანამშრომლებისთვის გამოხმაურება ბევრად უფრო სწრაფი და ეფექტური გახდება.
- მენეჯმენტის გადაწყვეტილებების ხარისხის გაუმჯობესება და ბიზნესის ეფექტურობა
დავალებების შესრულების შესახებ მოხსენება და თანამშრომლების დატვირთვის ანალიზი დაგეხმარებათ უკეთესი გადაწყვეტილებების მიღებაში. შედეგად, გაიზრდება კომპანიის მუშაობის ხარისხი და მისი კონკურენტუნარიანობა.
კორპორატიული პორტალის შერჩევა და განხორციელება
ამ დროისთვის, შესაძლოა, სამი ვარიანტია ასარჩევად:
- მზა კოლოფიანი ხსნარის შეძენა
- კორპორატიული პორტალი, როგორც ღრუბლოვანი გადაწყვეტა
- პორტალის განვითარება ნულიდან (მორგებული გადაწყვეტა)
თითოეულ ვარიანტს აქვს თავისი დადებითი და უარყოფითი მხარეები, ამიტომ საბოლოო გადაწყვეტილება დამოკიდებულია ორგანიზაციის ზომაზე, მის ამოცანებსა და განხორციელების მიზნებზე.
ეძებთ ინსტრუმენტებს, რათა დაეხმაროთ თქვენს გუნდს ეფექტურად ითანამშრომლოს?
გაგზავნეთ მოთხოვნა უფასო კონსულტაციისთვის
წინა სტატიებში ისწავლეთ როგორ გააკეთოთ ჩანართები ვებსაიტისთვის და. და ჩვენ გავარკვიეთ, როგორ მივაღწიოთ სოციალურ ქსელებს.
მაგრამ ხანდახან გჭირდებათ უმარტივესი ჩანართის გაკეთება html და css-ის კომბინაციით და განათავსეთ იგი საიტის გვერდზე სადმე, მიუხედავად იმისა, თუ რა cms-ს იყენებთ.
ასეთ ჩანართში შეგიძლიათ განათავსოთ ნებისმიერი შინაარსი ან კოდი. ამისათვის თქვენ არ გჭირდებათ რაიმე დამატებითი ბიბლიოთეკისა და სკრიპტის დაკავშირება - შიშველი Html და CSS.
html css ჩანართის მაგალითი გვერდზე:
html ჩანართის შექმნა
1 ნაბიჯი. ჩანართებისთვის ჩვენ ვწერთ მარტივ კოდს:
ჩანართის 1 შიგთავსი
ჩანართის 2 შიგთავსი
ჩანართის 3 შიგთავსი
ჩანართის შიგთავსი 4
css-ის შექმნა ახალი html ჩანართისთვის
ნაბიჯი 2. ჩვენ ვწერთ სტილებს გარე დიზაინისთვის.
სტილში შეგიძლიათ შეცვალოთ ყველაფერი და როგორც გსურთ. ამ მაგალითში ჩანართებს აქვთ მომრგვალებული კუთხეები. თუ ეს არ გჭირდებათ, უბრალოდ წაშალეთ ეს ბლოკი.
/* CSS დოკუმენტი */ .tabs ( გამჭვირვალობა: 0; ხილვადობა: დამალული; ) .tab( პოზიცია:აბსოლუტური; ხილვადობა: დამალული; z-ინდექსი: 10; ფერი:#000; შრიფტი: თამამი 9pt arial; ) .tabs: target+.tab (გაუმჭვირვალობა: 1; ხილვადობა: ხილული; ) .tabsLink a(ფონის ფერი:#F06406; padding:2px; შრიფტი: თამამი 10pt arial; ფერი:#fff; ტექსტის დეკორაცია:არცერთი; /* დამრგვალებული ჩანართების დაწყება */ -webkit-border-top-left-radius: 10px-border-top-right-radius: -moz-border-radius-topleft: 10px; -ზედა-მარჯვნივ-რადიუსი: 10px /* ბოლო მომრგვალებული ჩანართები */ )
როგორც ხედავთ, არსებობს მრავალი ვარიანტი რეგულარული ჩანართების შესაქმნელად, შინაარსის დასამალად არააქტიურ ჩანართებში. და ეს არის უმარტივესი, კეთდება 5 წუთში.
2019 წლის 25 ოქტომბერი პოსტი განახლდა
იური ნემეტსი
ლამაზი ჩანართების შერჩევა - საიტისთვის ლამაზი ჩანართების ნაკრები
დღეს თქვენს ყურადღებას ვაქცევ ლამაზი და ორიგინალური ჩანართების არჩევანს. ამ ეფექტების შესაქმნელად გამოყენებული იქნა ფსევდო ელემენტები, SVG სურათები და CSS გადასვლები. ყველა ჩანართის დიზაინი შესრულებულია თანამედროვე სტილში და შესაფერისია თითქმის ნებისმიერი საიტისთვის. შეხედეთ ამ ჩანართების მაგალითებს და გაგიკვირდებათ, რამდენად უჩვეულოდ შეგიძლიათ შექმნათ ის, რაც, როგორც ჩანს, არის საიტზე ხშირად გამოყენებული ელემენტი.
ლამაზი ჩანართების არჩევანი
ჩამოტვირთვა
ლამაზი ჩანართების არჩევანი
თუ დემო ვერსიას უყურებდით, შეამჩნევდით, რომ ყველა მაგალითი ერთ გვერდზეა. ამიტომ, თუ გადმოტვირთავთ და გახსნით წყაროებს, დაინახავთ გრძელ გვერდს, როგორც გამოსახულება მარცხნივ. ნუ გეშინია! იქ ყველაფერი ლამაზად არის მოწყობილი. თქვენ უბრალოდ უნდა აიღოთ კოდის სასურველი „ნაჭერი“ და ჩასვათ იგი თქვენს ვებსაიტზე.
ყოველი ახალი მაგალითი განლაგებულია ცალკეულ ბლოკში
იგივე ხდება სტილის ფაილთან დაკავშირებით. ის ასევე დიდია, მაგრამ იქ ყველაფერი კომენტირებულია, ამიტომ არანაირი პრობლემა არ უნდა იყოს.
თუ ვინმეს ჯერ კიდევ არ უყურებს დემო ვერსია, მე გავაკეთე თქვენთვის რამდენიმე ეკრანის სურათი :)
დასკვნა
ჩანართების კარგი არჩევანი არასტანდარტული ეფექტებითა და გადასვლებით. დაუთმეთ რამდენიმე წუთი თქვენს დროს და გადახედეთ ყველა ჩანართს. ისე ხდება, რომ უყურებ და ფიქრობ: „აბა, ჩვეულებრივი ჩანართები, რა არის ამაში ცუდი. და არა ნამდვილად და მე მჭირდება ისინი. ” მაგრამ ერთი, რაღაც უჩვეულო დიზაინი იმდენად დასამახსოვრებელია, რომ როდესაც თქვენ გჭირდებათ ჩანართების დანერგვა საიტზე, ზუსტად ასე გსურთ მათი გაკეთება. და ვერც კი გახსოვთ სად ნახეთ ისინი!
ამიტომ, არ დაგავიწყდეთ ჩემი საიტის დამატება სანიშნეებში თქვენს ბრაუზერში (ეს კეთდება კლავიატურის მალსახმობით CTRL + D) 😉 .
გამარჯობა, ძვირფასო მკითხველებო. ამ ცივ დღეს ჩვენ გავაკეთებთ თქვენთან ერთად ლამაზი ჩანართები CSS და JQuery-ის გამოყენებით. გამოდის, რომ ეგრეთ წოდებული ჩანართები ძალიან სასარგებლოა საიტისთვის, მათ შეუძლიათ მნიშვნელოვნად დაზოგონ სივრცე გვერდზე. ისინი შეიძლება განთავსდეს ყველგან, გვერდითა ზოლში, ან უშუალოდ თავად შინაარსში, სტატიაში.
ასევე, ჩანართებს, რომლებსაც ჩვენ გავაკეთებთ, აქვთ ლამაზი დიზაინი, ისინი მნიშვნელოვნად დაამშვენებს თქვენს საიტს. როგორ :-) ლამაზი და სასარგებლო, მეჩვენება იშვიათი დამთხვევა. უფრო მეტიც, ისინი მზადდება მხოლოდ , შესაბამისად: სწრაფად იტვირთება და სერვერზე არანაირ დატვირთვას არ იტვირთება.
JQuery
$(დოკუმენტი).ready(function() ($("#content div").hide(); // დამალული კონტენტი $("#tabs li:first").attr("id","მიმდინარე"); // რომელი ჩანართი უნდა აჩვენოს პირველი $("#content div:first").fadeIn( // პირველი ჩანართის ჩვენება $("#tabs a").click(function(e) (e.preventDefault() $ ("#content div").დამალვა ("#tabs li").attr("id",""). .attr ("id","მიმდინარე" // იდენტიფიკატორების გააქტიურება $("#" + $(this).attr("title")).fadeIn()) () ;ეს, ძირითადად, ყველაფერია, მთავარია ექსპერიმენტი. თქვენ შეგიძლიათ დაამატოთ ფონის სურათები ამ ჩანართებში, რაც მნიშვნელოვნად გააუმჯობესებს მათ გარეგნობას, მაგრამ მათ ჩატვირთვას უფრო მეტი დრო დასჭირდება.
ბრაუზერის თავსებადობა
ამ ჩანართებს მხარს უჭერს თითქმის ყველა ბრაუზერი, მხოლოდ ზოგიერთში ისინი ოდნავ განსხვავებულად გამოიყურებიან, რადგან ბევრს ჯერ არ აქვს CSS3-ის მხარდაჭერა.
სულ ესაა, იმედია მოგეწონათ :-) თუ რამე გაუგებარია, აუცილებლად იკითხეთ კომენტარებში. მალე გნახავ.