დაიწყეთ HTML5 / CSS3: რჩევები, ვიზუალიზაციები და ნიმუშების კოდირება

HTML5 სულ უფრო მეტ პოპულარობას იძენს და იწყებს ევოლუციის პროცესს მთლიანი ვებ ინტერფეისით. ზოგიერთ ვებ-დეველოპერსაც კი უთქვამს, რომ HTM5 ელემენტები და ვიზუალური ეფექტები Flash- ს შედარებულია. ახალი სკრიპტირების სტილი მარტივია გასაგები და ვებ – ინტერფეისის გასაუმჯობესებლად შესაძლებლობები უსაზღვროა. რამდენად საინტერესოა მაინც ეს HTML5?


ეს სტატია მიზნად ისახავს მკითხველს იმის გარკვევას, თუ რა უნდა იცოდეთ HTML5- ს შესახებ და რაც მთავარია რამდენიმე რჩევა & მცირე ხერხები, მსუბუქი, მიმზიდველი და ინტერაქტიული HTML5 გვერდების შექმნაზე.

Contents

1. ძირითადი HTML5

HTML5

სანამ ამ თემის შემდგომ HTML5- ში დავიწყებთ, კარგი იქნება, პირველ რიგში, თქვენი მიმდინარე ბრაუზერის შემოწმება. რადგან მრავალი ბრაუზერი ჯერ კიდევ განვითარების რეჟიმშია (HTML5– ის განსახორციელებლად), აქ ნახსენები ზოგიერთი ფუნქცია შეიძლება არ იყოს მხარდაჭერილი.

აქ არის სწრაფი რჩევები, რომ შეამოწმოთ თქვენი ბრაუზერის თავსებადობა.

გარკვეული ბრაუზერის შეზღუდვის შემდგომი გასაგებად, შეიძლება მიმართოთ აქ.

2. ტექსტის ეფექტები – HTML5- ში დაამატეთ ჩრდილის დამატება და ტექსტის ეფექტის წინასწარ გაზრდა

ტექსტური ეფექტები HTML5- ში

ძირითადი ჩრდილის ეფექტი ტექსტზე

ეს არის უმარტივესი ერთი სიმებიანი კოდი, რომელიც გარდაქმნის თქვენს ჩვეულებრივ სათაურს მაგარი ტექსტით. არასოდეს შეაფასოთ ჩრდილის ეფექტი. მსგავსი მსგავსი ეფექტის შესაქმნელად, საჭიროა, რომ დიზაინერმა გაიაროს სურათის რედაქტირების მრავალი ეტაპი Photoshop- ში. ახლა კი ყველა საჭირო ხდება მხოლოდ ერთი ხაზის კოდი. ჩრდილის მანძილი, ფერი შეიძლება შეიცვალოს თქვენი გულის შინაარსით.

კოდირების ნიმუში

#shadow h1
text-ჩრდილი: 0px 1px 1px rgba (0,0,0, .2);
}

ტექსტი წინასწარ ცეცხლის მსგავსი ეფექტის შესახებ

შემდეგი რჩევა არის გაჩვენოთ, თუ როგორ შეიძლება HTML5 კოდირება შეიძლება უფრო მაგარი ტექსტის შემცველობით. თუ საკმარისად ექსპერიმენტს აკეთებთ, ან სხვა მაგალითებს იპოვით, ეფექტების მორგების შესაძლებლობები უსასრულოა. შენიშვნა: ეს მაგალითი არ არის შექმნილი ნებისმიერი გამოსახულების რედაქტირების პროგრამით. უბრალოდ კოდების HTML5.

კოდირების ნიმუში

# ცეცხლი h1
text-გასწორება: ცენტრი;
ზღვარი: 200px ავტომატი;
შრიფტი-ოჯახი: "ლიგა-გოთური", კურიერი;
შრიფტის ზომა: 200px; ტექსტი-ტრანსფორმაცია: დიდი;
ფერი: #fff;
text-ჩრდილი: 0 0 20px # fefcc9, 10px -10px 30px # feec85, -20px -20px 40px # ffae34, 20px -40px 50px # ec760c, -20px -60px 60px # cd4606, 0 -80px 70px # 973716, 10pp 80px # 451b0e;
}

სხვა შესანიშნავი მაგალითი: http://mudcu.be/labs/HTML5Rocks/Text-Effects.html#spaceage

3. მომრგვალებული კუთხე HTML5

მომრგვალებული კუთხე HTML5

ვებ – გვერდის განლაგება HTML5– ში CSS– ის დანერგვიდან არც ისე ადვილი ყოფილა. ახლა კი თქვენი განლაგების ელემენტების მომრგვალებული კუთხეებიც კი შეგეძლებათ! წარმოიდგინეთ ეს; აღარ არის დაჭრილი ფონის სურათი, აღარ არის ბინძური სურათის ფრაგმენტები. ეს უამრავ სიხარულს მოუტანს ვებ დიზაინერებს იქ.

კოდირების ნიმუში

div {
საზღვარი: 2px მყარი # 434343;
padding: 10px;
ფონი: # e3e3e3;
-moz-border-radius: 10px;
-ვებკიტ-სასაზღვრო-რადიუსი: 10px;
სიგანე: 500px;
}

შენიშვნა: Moz ნიშნავს Mozilla, ხოლო ვებკიტა Safari და Chrome- სთვის.

სხვა შესანიშნავი მაგალითი: http://fjd1.com/roundcorner.html

4. მასშტაბური ვექტორი გრაფიკული (SVG) HTML5

HTML 5 სახელმძღვანელო, სახელმძღვანელო და ნიმუშები

მასშტაბური ვექტორი გრაფიკული ან საყოველთაოდ ცნობილია, როგორც (SVG) არის 2 განზომილების ვექტორიანი გრაფიკა, რომელიც განსაზღვრულია XML ტექსტურ ფაილებში. სხვა სიტყვებით რომ ვთქვათ, რადგან მათი დნმ ემყარება XML ტექსტურ ფაილს, ისინი შეიძლება შექმნან ან რედაქტირება მოახდინონ ვებ – პლატფორმაზე. რაც ასევე ნიშნავს, რომ შესაძლებელია მასშტაბის მარტივად ჩატარება, ხოლო საძიებო სისტემებს შეუძლიათ სურათის წაკითხვა და გაგება.

ნიმუშის კოდი

სხვა შესანიშნავი მაგალითები:

5. ფილმის ფაილის ინტეგრირება HTML5- ში

ვიდეო HTML5

აქ არის კიდევ ერთი საინტერესო ნაწილი HTML5 შესაძლებლობების გამოსახატად. ბევრი ვიდეო ინტერნეტით, ჩვეულებრივ, ვებგვერდზე არის წარმოდგენილი Flash- ის სახით. ბოლო დრომდე, HTML5– ში ვიდეოს ჩასმა ნელ – ნელა იძენს (YouTube კარგი მაგალითია) და Flash ნელ – ნელა კარგავს მიმზიდველობას. Რატომ არის ეს ასე? მობილური მომხმარებლები. თუ გსურთ, რომ თქვენს ვიდეოს შეეძლოს თამაში როგორც iPhone, ასევე Android ტელეფონებში, HTML5 არის წინსვლის გზა.

ვიდეოს ჩასატარებლად, თქვენ უნდა იცოდეთ ამჟამად 3 ფორმატის მხარდაჭერა, რომლებიც სხვადასხვა ბრაუზერის მიერ არის მხარდაჭერილი; .mp4 (H.264 + AAC), .ogg (თეორა + ვორბისი), .webm (VP8 + Vorbis)

ნიმუშის კოდი

სხვა შესანიშნავი მაგალითი: https://www.html5rocks.com/en/tutorials/video/basics/

6. სლაიდ პრეზენტაცია HTML5

HTML 5 სახელმძღვანელო, სახელმძღვანელო და ნიმუშები

Powerpoint არის სინონიმის სახელი ასოცირებული სლაიდების პრეზენტაციასთან. რატომ უნდა შემოიფარგლოს საკუთარი პრეზენტაციით, სადაც შეგიძლიათ შექმნათ ვებ – აუდიტორიისთვის განკუთვნილი სლაიდები? HTML5 მოვიდა სამაშველოში, როდესაც შექმნის ძალიან მძლავრი პრეზენტაციის სლაიდებს, დასრულებულია გადასვლისა და სანავიგაციო მენიუს საშუალებით. საუკეთესო ნაწილი ის არის, რომ თქვენს პრეზენტაციაზე 3D ტრანსფორმაციასაც კი შეძლებთ.

ნიმუშის კოდი

წინასწარი {
გადასვლა: ყველა 1s მარტივია- inout;
}

წინასწარი: hover
ფონის ფერი: # F2F5FE;
სასაზღვრო ფერი: შავი;
}

div {
გარდაქმნა: rotate3d (1,1,0, 45deg);
}

სხვა შესანიშნავი მაგალითები:

7. რედაქტირებადი შინაარსი HTML5

HTML 5 სახელმძღვანელო, სახელმძღვანელო და ნიმუშები

სტატიკური ტექსტი ისეთი ძველი სკოლაა იმ ხანაში, სადაც მოქნილობა და დინამიკა მართავს მსოფლიოს. HTML5- ში შეგიძლიათ განსაზღვროთ ტექსტური ტერიტორია, რომელიც მას რედაქტირდება ვებ – მომხმარებლის მიერ, ტექსტური რედაქტორის გარეშე.

ნიმუშის კოდი

ამ შინაარსის რედაქტირება შესაძლებელია!

სხვა შესანიშნავი მაგალითი: http://html5demos.com/contentsiable

8. ინტერაქტიული ვებ ტილო HTML5

HTML 5 სახელმძღვანელო, სახელმძღვანელო და ნიმუშები

HTMLV5- ში SVG- ის გარდა, ტილო არის შემდეგი საუკეთესო რამ, რაც კი ოდესმე მოხდა ქსელში. ტილო საშუალებას გაძლევთ 2 განზომილების ფორმის გადაღება, რაც ინტერაქტიურობას მთელს დონეზე მოაქვს, Flash– ის დახმარების გარეშე.

მიუხედავად ამისა, მარტივი კოდირება HTML5- ში, რომელიც ქმნის საოცარ ანიმაციურ ურთიერთქმედებას, აქ ნახსენებია.

სხვა შესანიშნავი მაგალითი: http://www.bestfreewebresources.com/2010/09/10-best-html5-canvas-applications.html

9. გადააადგილეთ HTML5

HTML 5 სახელმძღვანელო, სახელმძღვანელო და ნიმუშები

გადაიტანეთ და ჩამოაგდეს (ზოგჯერ ცნობილია როგორც DnD) კიდევ ერთი მაგარი მახასიათებელია, რომელიც HTML5– სთვის ხელმისაწვდომია. შესანიშნავი მაგალითია Google- ის მიერ მათი Gmail- ის განხორციელება. თუ თქვენ იყენებთ რომელიმე HTML5 დამხმარე ბრაუზერს, შეგიძლიათ უბრალოდ გადაიტანოთ ფაილი თქვენს კომპიუტერში და ჩამოაგდეთ კომპოზიციური შეტყობინებების ფანჯარაში. ის ავტომატურად დაემატება დანართად. Რამდენად მაგარია?

ნიმუშის კოდი (მშობლიური DnD)

document.addEventListener (‘dragstart’, ფუნქცია (მოვლენა) {
event.dataTransfer.setData (‘text’, ‘customized text’);
event.dataTransfer.effectAllowed = ‘ასლი’;
}, ყალბი);

სხვა შესანიშნავი მაგალითი: http://www.html5rocks.com/en/tutorials/dnd/basics/

10. სუფთა CSS მონაცემთა ცხრილი HTML5

HTML 5 სახელმძღვანელო, სახელმძღვანელო და ნიმუშები

HTML5– ის დაწყებამდე ასევე შეუძლებელია წარმოდგენილი სქემის შექმნა HTML– ში კოდირების გამოყენებით. ამასთან, მონაცემთა მნიშვნელობის შეცვლა და სქემაში ასახვა მარტივი ამოცანა არ არის. ისევ HTML5 სამაშველოში. ერთად CSS, თქვენ შეგიძლიათ შექმნათ აბსოლუტურად ლამაზი სქემა, რომელიც Microsoft Excel- ს შერცხვებათ. კოდები მარტივია და თქვენ მხოლოდ უნდა დახარჯოთ თქვენი გრაფიკის სრულყოფილი ფერის და ეფექტის შესაქმნელად.

სხვა შესანიშნავი მაგალითი: http://cssglobe.com/pure-css-data-chart/

HTML 5-ის საკმარისი მიღება შეუძლებელია?

ასეც მოვიქცეთ! აქ უფრო მეტი თემაა, წაიკითხეთ.

* HTML 5 საიტების ძალიან მაგარი მაგალითები
* დავიწყოთ HTML 5-ით
* უნდა წაიკითხოთ HTML 5 სახელმძღვანელო 2012 წელს
* შეიტყვეთ HTML 5: 10 უნდა გაეცნოთ გაკვეთილებს

ასევე, შეამოწმეთ  რობინ ნიქსონის ეს HTML 5 ავარიის კურსი. რობინ ნიქსონი არის PHP, MySQL და JavaScript სწავლის ავტორი; კურსი მოიცავს თითქმის ყველაფერს, რაც ახალმა ახალმა ადამიანმა უნდა იცოდეს HTML5– ში, მათ შორის HTML– ის ძირითადი კოდირების, HTML5 ტილო ნახატის, გეოლოკაციის, ადგილობრივი შენახვის, აგრეთვე HTML5 აუდიოსა და ვიდეოს.

თავდაპირველი სტატია პირველად ქვეყნდება WHSR ბლოგი; ის ახლა მართავს და განახლებულია BuildThis.io პერსონალის მიერ.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map