• Save
DigitalGuru. Izveido mājas lapu pats! 1. diena
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

DigitalGuru. Izveido mājas lapu pats! 1. diena

  • 197 views
Uploaded on

Kursa mērķis ...

Kursa mērķis
Kursa nodarbību laikā katrs izveidos savu mājas lapu un uzzinās par dažādām iespējām veidot un pielāgot mājas lapu, izmantojot WordPress piedāvātos līdzekļus. Uzzinās par iespējām, kā panākt to, lai klienti vai interesenti viegli atrasu šo lapu starp tūkstošiem citu.

Mājas lapa un dizains
• mājas lapas vēstījums
• mājas lapu veidi, soļi izveidei
• dizaina veidi, iegūšanas iespējas
• fonti un to lietošana internetā
• domēna iegādāšanās

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
197
On Slideshare
193
From Embeds
4
Number of Embeds
2

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 4

http://www.linkedin.com 2
https://www.linkedin.com 2

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Izveido mājas lapu pats Signis Vāvere 1. diena
  • 2. If you want a thing done well, do it yourself. Napoleon Bonaparte
  • 3. Kursa saturs • • • • • • Mājas lapa un dizains Saturs un satura vadības sistēma Wordpress Wordpress pielāgošana HTML un CSS Publicēšana un uzturēšana
  • 4. Kursa ideja • • • • • • saprast, kāpēc vajadzīga mājas lapa saprast, no kā sastāv mājas lapa saprast, kā tikt pie mājas lapas izdarīt to pašam un kursa nodarbību laikā izdarīt to ar bezmaksas rīkiem saprast, ko darīt ar mājas lapu pēc tam
  • 5. Pirmais praktiskais darbs • • • • • iepazīšanās kura mājas lapa patīk? kāpēc? kura mājas lapa nepatīk? kāpēc?
  • 6. Signis Vāvere • • • • • • 13 gadi pieredze strādā bankā izveidojis 50+ mājas lapas skrien raksta par ēdienu pieci bērni signis.vavere@gmail.com @signis_vavere http://www.signis.lv
  • 7. Kura mājas lapa patīk?
  • 8. www.livones.net
  • 9. Kura mājas lapa nepatīk?
  • 10. ffl.vip.lv
  • 11. Baisas mājas lapas • • www.boze1.lv www.arkadija.lv
  • 12. Kā var tikt pie mājas lapas? • • • • • nopirkt ss.lv pasūtīt pie mājas lapu izstrādātājiem pieiet ar izdomu pārveidot jau esošu lapu izveidot pats
  • 13. Kā var tikt pie mājas lapas? • nopirkt ss.lv 10 000 Ls
  • 14. Piemērs http://www.kometanenak.lv • • • • • • • domēna iegādāšanās Wordpress instalācija Wordpress sākotnējā konfigurācija tēmas atrašana tēmas instalēšana tēmas konfigurēšana satura ievietošana
  • 15. www.kometanenak.lv
  • 16. www.kometanenak.lv • • • • • • • domēna iegādāšanās - 10min Wordpress instalācija - 10min Wordpress sākotnējā konfigurācija - 10min tēmas atrašana - 1h tēmas instalēšana - 10min tēmas konfigurēšana - 20min satura ievietošana - 1h
  • 17. Wordpress piemēri • • • • • • http://www.jaunasgramatas.lv/ http://www.ridzenebasketball.lv/ http://www.knivirtuve.lv/ http://www.noskrien.lv/ http://www.digitalguru.lv/ http://www.garsigalatvija.lv/ http://majaslapa.digitalguru.lv/wordpress-lapas/
  • 18. ! Kas ir mājas lapa? <!DOCTYPE html> <html id="draugiem" lang="lv"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>draugiem.lv</title> <meta charset="UTF-8"> <link rel="icon" href="/favicon.ico" type="image/x-icon" /> <meta name="ROBOTS" content="NOARCHIVE" /> <meta name="viewport" content="width=device-width, initial-scale=1.2, maximum-scale=5" /> <meta name="viewport" content="width=400" /><link rel="apple-touch-icon" href="//ifrype.com/i/logos/dr.png" /><link rel="stylesheet" type="text/css" href="//ifrype.com/v473/css/new.rel.css" /> <link rel="stylesheet" type="text/css" href="//ifrype.com/v473/css/ads.css" /> <link rel="stylesheet" type="text/css" href="//ifrype.com/v473/css/login.css" /> <link rel="stylesheet" title="Skin" type="text/css" href="//ifrype.com/v473/css/skin/0_0.css" /> <style type="text/css" media="screen, projector"> #lt {width:0px;} #ct {width:980px;} #rt {width:0px;} </style> <script type="text/javascript" src="//ifrype.com/v584/lang/lv/xGlobal.js" charset="utf-8"></script> <script type="text/javascript" src="//ifrype.com/v584/js/base.js" charset="utf-8"></script> <script type="text/javascript" src="//ifrype.com/v584/js/common.js" charset="utf-8"></script> <script type="text/javascript" src="//ifrype.com/v584/js/t.js" charset="utf-8"></script> <script type="text/javascript" src="//ifrype.com/v584/say/say.js" charset="utf-8"></script> <script type="text/javascript" src="//ifrype.com/v584/js/ads.js" charset="utf-8"></script> <script type="text/javascript" src="//ifrype.com/v584/js/login.js" charset="utf-8"></script> <script type="text/javascript" src="//ifrype.com/v584/lang/lv/xLogin.js" charset="utf-8"></script> <script type="text/javascript"> //<![CDATA[ D.PIMG = "//ifrype.com/"; D.UPL = "http://upl.draugiem.lv/"; D.VUPL = "http://vupl.draugiem.lv/"; D.ATTACH_UPL = "http://upload.draugiem.lv/"; D.ATTACH_DOWNLOAD = "http://download.draugiem.lv/"; //]]> </script> </head> <body class="langlv Chrome"> <div id="topWrap"><div id="footWrap"> <table id="loginBody"> <tr><td class=""> <table id="loginTable"><tr><td valign="middle" align="center"><a id="loginLogo" href="/" title=""><img src="//ifrype.com/i/logos/lv.png" alt="" /></a><div id="loginBox" ><form action="https:// secure.draugiem.lv/login/" name="login" method="post"> <div id="loginForm" class="bx"><div class="bxContent"><div class="formItem formItemInput" id="Forms_email"><label for="email">Tavs e-pasts</label><div class="formItemBorder radius3"> <div class="formItemPadding radius3"> <input id="email" name="email" type="email" /> </div> </div></div><!-- .formItem --><script id="semail">T.Forms._focus("email");</script><div class="formItem formItemInput" id="Forms_password"><label for="password">Tava parole</label><div class="formItemBorder radius3"> <div class="formItemPadding radius3"> <input id="password" name="password" type="password" onkeypress="return capsLock(event)" /> </div> </div></div><!-- .formItem --><script id="spassword">T.Forms._focus("password");</script><div id="capsLock" class="colorWarn" style="position: absolute; top: 60px; left: 110px;"></div> <div style="float:left"> <div class="formItem formItemCheckbox" id="Forms_remember_me"><label> <input name="remember_me" id="remember_me" type="checkbox" value="1" /> Atcerēties mani </label></div><!-- .formItem --> </div><div style="float:right;margin-top: 10px;"> <span class="button"><div class="radius3"><button class="buttonC radius3" name="login" type="submit">Ienākt</button></div> <span class="buttonDisabledO"></span></span> </div> <div class="clear"></div> </div><!-- .bxContent --></div><input name="redir" value="/" type="hidden" /><input name="lang" value="lv" type="hidden" /><input name="domain" value="www.draugiem.lv" type="hidden" /><input name="hash" value="4f01653794d3e911cd5b7276a546911e" type="hidden" /><input name="js" id="loginJS" type="hidden" /><input
  • 19. Kas ir mājas lapa?
  • 20. Mājas lapu veidi • • • • • vizītkartes tipa mājas lapa reklāmas mājas lapa bloga tipa mājas lapa servisa tipa mājas lapa portāla tipa mājas lapa
  • 21. Wikipedia mājas lapu veidu sadalījums Affiliate Affiliate Agency Archive site Attack site Blog (web log) Brand building site Celebrity website Click-to-donate site Community site Content site Classified Adssite Corporate website Dating website Electronic commerce (e-commerce) site Forum website Gallery Website Government Site Gripe site Gaming website
 Gambling website Humor site Information site Media sharingsite http://en.wikipedia.org/wiki/Website#Types_of_websites Mirror site Microblog site News site Personal website Phishing site p2p/Torrents website Political site Porn site Question and Answer (Q&A) Site Rating site Religious site Review site School site Scraper site Search enginesite Shock site Showcase site Social bookmarkingsite Social networking site Warez Webmail Web portal Wiki site
  • 22. Vizītkartes tipa mājas lapa www.reck.lv
  • 23. Reklāmas tipa mājas lapa www.nordeamaratons.lv
  • 24. Bloga tipa mājas lapa www.garsigalatvija.lv
  • 25. Servisa tipa mājas lapa www.ee-lv.lv
  • 26. Servisa tipa mājas lapa www.ezermala1.lv
  • 27. Portāla tipa mājas lapa www.noskrien.lv
  • 28. Portāla tipa mājas lapa www.ikskile.lv
  • 29. Mājas lapas izveidošanas soļi • • • • • • • mājas lapas vēstījums īpašās iespējas sadaļas un to svarīgums saturs - teksti, bildes, video dizains - stils un izskats visa salikšana kopā publicēšana
  • 30. Mājas lapas vēstījums • • • kāpēc? ko? kā?
  • 31. Īpašās iespējas Viena svarīgākā lieta ar ko mājas lapa: • • • nodarbosies izcelsies uz konkurentu fona piesaistīs uzmanību
  • 32. Sadaļas un to svarīgums • • • kādas būs galvenās sadaļas? kādas būs apakšsadaļas? vai būs vēl kādi navigācijas bloki?
  • 33. Saturs • • • • saturs ir galvenais saturs nosaka dizaina veidu saturs nosaka, vai lapa būs populāra teksti, bildes, video, audio, saites
  • 34. Dizains
  • 35. Salikšana kopā • • • • • saturs + dizains = mājas lapa satura vadības sistēma pielāgošana programmēšana pārbaude
  • 36. Publicēšana • • • domēna vārds un reģistrēšana mājas lapas izvietošana mājas lapas uzturēšana
  • 37. Mājas lapas tehniskās sastāvdaļas • • • • • Domēna vārds Dizaina sagatave Saturs Satura vadības sistēma Uzturēšana
  • 38. Domēna vārds • • • • mājas lapas vārds mājas lapas vieta internetā mājas lapas sauklis, atpazīstamība jāreģistrē un jāabonē
  • 39. Domēna dzīves cikls • • • • • domēna vārda izvēlēšanās pieejamības pārbaude - WHOIS serviss domēna vārda reģistrēšana domēna vārda apmaksa domēna vārda pagarināšana
  • 40. Domēna reģistrācija • • nic.lv - *.lv domēni ārzemju lapām (*.com, *.org, *.eu, *.net,...) • • godaddy.com domain.com
  • 41. Domēna sastāvdaļas http://www.digitalguru.lv
  • 42. Domēna piesaiste • domēnam jānorāda uz serveri, kur atradīsies mājas lapa - A ieraksti • domēnam jānorāda uz serveri, kur atrodas norādes uz mājas lapu - NS ieraksti • domēnam jānorāda uz serveri, kurš apstrādās ienākošos epastus - MX ieraksti • vēl nic.lv var norādīt AAAA, DS, CNAME, TXT, SRV
  • 43. Domēna reģistrēšanas cenas • .com - 5$ - 15$ • .net - 7$ - 15$ • .co - 20$ • .me - 10$ • .org - 7$ - 12$ • .info - 1$ - 10$ • .mobi - 8$ - 15$ • .tv - 10$ - 25$ • .eu - 5$ - 15$ • .lv - 8.70 Ls
  • 44. Domēnu tālākpārdošana • • • • • • Insure.com $16 million in 2009 Sex.com for $14 million in October 2010 Fund.com £9.99 million in 2008 Porn.com $9.5 million in 2007 Fb.com for $8.5 million in November 2010 India.com for $.5 million in November 2012
  • 45. nic.lv
  • 46. nic.lv
  • 47. Izveido mājas lapu pats • • reģistrēt jaunu domēnu • darbošanās bez sava domēna piesaistīt apakšdomēnu esošam domēnam
  • 48. Otrais praktiskais darbs • • • reģistrēšanās nic.lv • domēna reģistrēšana domēna izvēle WHOIS pakalpojuma izmantošana domēna vārda pieejamības noskaidrošanā http://majaslapa.digitalguru.lv/otrais-praktiskais-darbs/
  • 49. Dizains • • • • iegūšanas veidi uzbūve bezmaksas dizaina iegūšana mājas darbs
  • 50. Kā rodas dizains? • • • • • • • sākotnējā informācija skiču sagatavošana saskaņošana pamatdizaina zīmēšana sadaļu dizaina zīmēšana dizaina sagriešana dizaina programmēšana
  • 51. Dizaina iegūšanas veidi • • • • • • paša dizains mākslinieks un web dizaineris dizaina sagatave satura vadības sistēmas dizaina sagatave maksas/bezmaksas pielāgots dizains
  • 52. mākslinieces dizains
  • 53. paša dizains
  • 54. CMS dizaina sagatave (bezmaksas)
  • 55. mākslinieka dizains
  • 56. pielāgots dizains
  • 57. dizaina sagatave (maksas)
  • 58. mākslinieka dizains
  • 59. CMS dizaina sagatave (maksas)
  • 60. paša dizains
  • 61. mākslinieces dizains
  • 62. CMS dizaina sagatave (bezmaksas)
  • 63. dizaina sagatave (maksas)
  • 64. front-end framework
  • 65. Dizaina uzbūve Galva/Header Izvēlne/Menu Kreisā mala Saturs/Content,body Apakša/Footer Labā mala/ Sidebar, widget
  • 66. Izkārtojums
  • 67. Izkārtojums
  • 68. Izkārtojums
  • 69. Izkārtojums
  • 70. Izkārtojums
  • 71. Izkārtojums
  • 72. Izkārtojums
  • 73. Izkārtojums
  • 74. The Anatomy of an Effective Web Design http://tinyurl.com/6kjgcy4 http://baymard.com/blog/line-length-readability
  • 75. Krāsas un logo http://tinyurl.com/329b3oa
  • 76. Pielāgoties spējīgs dizains • • • • responsive design dizains pielāgots dažādām iekārtām bilžu izmēri mainās piemērots izkārtojums
  • 77. Pielāgoties spējīgs dizains http://forefathersgroup.com/
  • 78. Pielāgoties spējīgs dizains http://forefathersgroup.com/
  • 79. Vietnes dizaina iegūšanai • • http://wordpress.org/extend/themes/ google meklētājā • • • wordpress theme free wordpress design free open source wordpress theme
  • 80. Premium dizaini • http://www.templatemonster.com/ wordpress-themes.php • google meklētājā • • wordpress theme premium adekvāta cena ir ne vairāk par 50$
  • 81. Web tipogrāfija • • • • • satura kontrasts izmērs hierarhija brīvā vieta fonts typography exists to honor content
  • 82. Satura kontrasts Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, orci id dignissim sollicitudin, felis ligula vehicula felis, dictum mollis sem quam sit amet libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, orci id dignissim sollicitudin, felis ligula vehicula felis, dictum mollis sem quam sit amet libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, orci id dignissim sollicitudin, felis ligula vehicula felis, dictum mollis sem quam sit amet libero.
  • 83. Izmērs • Lorem ipsum dolor sit amet. • Lorem ipsum dolor sit amet. • Lorem ipsum dolor sit amet. • Lorem ipsum dolor sit amet. • Mazākais izmērs 12px Lorem ipsum dolor sit amet. • Lorem ipsum dolor sit amet. • Lorem ipsum dolor sit amet,
  • 84. Hierarhija
  • 85. Brīvā vieta • • • • • starp paragrāfiem starp līnijām starp burtiem brīvās vietas bloki 140% likums
  • 86. Fontu ģimenes • • • • • serif sans-serif cursive fantasy monospace
  • 87. Fontu ģimenes
  • 88. serif vs. sans-serif
  • 89. Droši fonti
  • 90. Droši fonti
  • 91. Nedroši fonti • • • • taisīt dizainu izmantojot drošu fontu dizaina elementus kā bildes dizaina elementus kā bildes viltīgi iegultie fonti
  • 92. Iegultie fonti • • • • • font-face Google Web Fonts TypeKity Cufon typeface.js
  • 93. font-face @font-face { font-family: 'DearestRegular'; src: url('Dearest-webfont.eot'); src: url('Dearest-webfont.eot?#iefix') format('embedded-opentype'), url('Dearest-webfont.woff') format('woff'), url('Dearest-webfont.ttf') format('truetype'), url('Dearest-webfont.svg#DearestRegular') format('svg'); font-weight: normal; font-style: normal; }
  • 94. Google Web Fonts
  • 95. Skaisti latviešu fonti http://mikslatvis.com/skaisti-fonti-latviesu-valodai/ ! http://hellohappy.org/beautiful-web-type/
  • 96. Mājas darbs jāizpilda līdz trešdienas vakaram • atrast trīs Wordpress dizainus, kuri varētu derēt mājas lapai • • dizaina izvērtējums • domēna piereģistrēšana mājas lapas idejas apraksts un iespējamās sadaļas majaslapa.digitalguru.lv/pirmais-majas-darbs
  • 97. Kāpēc jāpilda mājas darbs? • • If you want a thing done well, do it yourself Ja gribi ko iemācīties darīt, tad dari to
  • 98. Kurss • • • • kļūdu norādīšana kuras tēmas vajag vairāk, kuras mazāk ierosinājumi un komentāri signis.vavere@gmail.com