Web Development Special Class

[Msamiati]

Trust me i am a good student of yours.

For you nitajitahid wiki hii tuendelee

 

[Tiger]

For you nitajitahid wiki hii tuendelee

Thank you brother, we are waiting.

 

[PowerWithin]

Msamiati vp class tena kimya sana!

 

[albin]

Visual Studio is dog poop. LOL I just use Notepad. Im not really a developer. What programming language/s do you use?

 

[Msamiati]

Kabla ya kuingia kwenye Kipengele kinachofata, leo tutamalizia maeneo mawili muhimu ambayo tuliyaacha kipolo wiki hii, Ambayo ni eneo la kati la website pamoja na eneo la chini.

Kugawa maeneo yaliyobaki kwenye website yetu haliwezi kuwa zoezi gumu tena kwani tutaenda kutumia elment ileile ya Mgawanyo <div>.

Na ili kurahisisha zaidi unaweza ku-copy na ku-paste kodi tulizotumia kugawa eneo la juu kwa malengo ya kutengeneza nakala zinazofanana, baada ya kukopy mara tatu kwa aajili ya kupata eneo kuu na eneo la chini, basi kodi zako zitaonekana kama hivi:

[SIZE=4]
<div style="width:100%; height:300px; background-color:black"> Hili ni eneo la Juu </div>

<div style="width:100%; height:300px; background-color:black"> Hili ni eneo La kati </div>

<div style="width:100%; height:300px; background-color:black"> Hili ni eneo Chini</div>[/SIZE]

Baada ya kusevu kod hizi kwenye website yako, ukiifungua kwenye browser utaona eneo kubwa jeusi likiwa limeziba sura yote ya webpage. Hii ni kutokana na maeneo yote matatu kuungana bila kuacha nafasi kati ya eneo na eneo.

kunanjia nzuri za kitaalamu zinazoweza kutumika kuweka nafasi kati ya element na element kwenye webPage lakini kwa sasa tutumie njia hii nyepesi ya breack <br>.

Tukiongeza breack baada ya kila element, kila baada ya eneo moja lililotengwa kutakuwa na kinafasi kidogo na kufanya maeneo tuliyotenga yaonekane.

Kitu kingine tutakachofanya ni kutofautisha ukubwa wa eneo la katikati na eneo la juu na la chini, kwakuwa eneo la kati kati ndio eneo kuu, basi linatakiwa kuwa na nafasi kubwa kuliko maeneo mengine.

Hivyo basi tutabadili kipambizo cha sifa ili kulipa eneo la kati kati urefu mkubwa zaidi na kuacha maeneo ya juu na chini yakilingana, Vile vile ukiangalia maeneo yote tuliyogawanya yana rangi moja ambayo ni nyeusi hivyo basi tutaweka rangi tofauti ili kuyatofautisha zaidi maeneo yetu.

[SIZE=3]<div style="width:100%; height:100px; background-color:grey"> Hili ni eneo la Juu </div>[/SIZE][SIZE=3]

<br>
[/SIZE]
[SIZE=3]<div style="width:100%; height:400px; background-color:blue"> Hili ni eneo La kati </div>[/SIZE]
[SIZE=3]
<br>
[/SIZE]
[SIZE=3]<div style="width:100%; height:100px; background-color:grey"> Hili ni eneo Chini</div>
[/SIZE]

Baada ya kubadilisha eneo la juu na la chini na kuyapa rangi ya grey, kisha kuyapunguzia urefu mpaka 100 na kuongeza urefu wa eneo la kati na kulibadili rangi kuwa ya blue sasa webpage yetu itakuwa na muonekano mzuri ambao umegawanywa katika maeneo matatu.

kwenye eneo la juu tubadili neno "Hili ni eneo la juu" kuwa Heading ya website na tuiite Swahili Web Development Class. Tumeshajifunza kila kitu, tumejifunza jinsi ya kutengeneza element, na jinsi ya kuiweka ndani ya element nyingine.

Hapa kwanza tutatengeneza element yetu ya Heading kwa kutumia heading tag <h1>,

<h1>Swahili Web Development Class</h1>.

Kisha tutaiongeza element hii ndani ya eneo la juu ambalo tumeligawa kwenye webpage yetu.

Ondoa "Hili ni eneo la Juu"

<div style="width:100%; height:100px; background-color:grey"> Hili ni eneo la Juu </div>

Weka element yetu: <h1>Swahili Web Development Class</h1> utapata:-


<div style="width:100%; height:100px; background-color:grey"> <h1>Swahili Web Development Class</h1> </div>


Huu ndio muonekano wa webpage yetu kwa sasa:

 

[Ndesalee]

Class zuri sana..

 

[mnyongeni]

Darasa zuri
Tena sana. Ila mkuu jitahidi lessons zisiwe zinachelewa sana. Ili kumfanya mwanafunzi wako asiwe na ombwe la ujifunzaji.

 

[Msamiati]

mnyongeni, nitajitahidi sana kuongeza speed nawashukuru wote

 

[Msamiati]

[video=youtube_share;hHhPmRHvMRI]http://youtu.be/hHhPmRHvMRI[/video]
​

SWDC Hii Kozi inayohusia na taaluma ya uundaji na utengenezaji wa tovuti katika viwango vinavyokidhi teknolojia ya karne ya ishirini na moja.

Hii ni kozi ambayo itakupa Taaluma mpya itakayokuwezesha kuingia kwenye soko jipya na linalokuwa kwa kasi la teknolojia za webite ukiwa kama Muundaji wa taswira za website mwenye ushindani wa hali ya huu(Frontend web Developer).

Vigezo Kusoma Kozi hii

Ili uweze kufatilia na kuielewa kozi hii unatakiwa uwe na vigezo vifatavyo

1. Uwe unajua kuzima na kuwasha kompyuta
2. Uwe unajua kuandika neno "Nipo tayari kujifunza" kwa kutumia program ya microsoft word.
3. Uwe unajua kusoma Kiswahili

Gharama: Kozi hii ni Bure Kabisa Haina gharama zozote

Mwisho wa kozi hii tunatarajia utakuwa na uwezo wa kutengeneza na kusimamia website.

Karibu!

 

[Msamiati]

Mpaka sasa tunaweza kutengeneza web page ambayo imegawanywa katika maeneo matatu kwa mpangilio maridhawa.

Ngoja tumalizie vipengele vichache vilivyo baki na punde tu, utagundua kuwa unauwezo wa kutengeneza muonekano wa website yoyote duniani, lakini kikubwa zaidi utaweza kutumia ujuzi huu kubuni page zenye muonekano wa kipekee kabisa.

Kabla hatujasogea mbele Wiki hii ngoja tuanze na kitu kimoja kinachoitwa Nukuu.

Tulisha jifunza tafsiri ya website inayosema kuwa website ni mahali penye muunganiko wa webpage moja ama zaidi zinazohusiana. Tafsiri hii inatuonesha kuwa kwenye website kunaweza kuwa na kurasa (webpage) nyingi kutokana na mahitaji ya mteja.

Sasa tatizo linakuja kujitokeza pale ambapo website inakuwa na page nyingi na code nyingi. Fikiria, mfano umetengeneza page ina mistari 700 ya kodi, inakuwaje pale unapotaka kubadili au kuboresha sehemu ya pege yako?

Bila shaka itakupa ugumu kuanza kufatilia mpaka ukumbuke au uipate sehemu ambayo inatakiwa kubadilishwa.

Sasa basi, kwakuwa website ni kitu kinachohitaji maboresho ya mara kwa mara ambayo yatakurudisha kwenye kodi zako, kwenye teknolojia hii tunakitu kinachoitwa Nukuu au Comments kwa maneno ya kingereza.

NUKUU(comments).

Nukuu ni sentensi ambayo developer unaiweka mahali popote ili kuweka kumbu kumbu au maelezo kuhusiana na code.

Nukuu pia zinasaidia sana pale unapozitumia kama switch ya kuizuia browser isisome baadhi ya kodi ambazo pengine hujataka zitumike muda huo na hutaki kuzifuta kutoka kwenye webPage.

Ni mazoea mazuri na ya uandishi wa kodi katika viwango vya kimataifa kutumia Nukuu(comments) mara nyingi uwezavyo unapotengeneza webpage yako. Faida kubwa ni kwamba, hata kama atakuja developer mwingine kuboresha au kuendeleza kazi yako basi itamrahisishia sana kujua mtiririko wa kazi yako.

Kwenye HTML Nukuu huandikwa kwa kutumia alama mbili ambazo alama ya kwanza hufungua nukuu <!-- Na alama ya pili hufunga nukuu --> .

Kwenye HTML page, Madeveloper huwa wanaandika vitu vingi sana na kila kinacho andikwa husomwa kwa namna yake kwenye Browser, tunapokuja kwenye swala la Nukuu(comments), Browser huwa inaruka kila kitu kilichopo ndani ya Nukuu na kukiacha bila kukifanyia kazi. Hivyo kufanya Nukuu iwepo kwaajili ya development tu.

Mfano: Katika kodi tulizotengeneza darasa lililopita ili kuigawa page yetu katika maeneo matatu, tungeweza kutumia Nukuu(comments) ili kuweka maelezo yatakayoonesha kazi ya kila kipengele.

Kurasa yetu (Web Page) mwanzo mwisho & Nukuu

Tulianza kwa kuandika kodi zinazounda web Page.

<!DOCTYPE html>
 
<html>
 
    <head>     
        <title> SWDC Website &#8211; Home </title>
    </head> 


    <body> 
       <!-- Weka hapa element zote zitakazoonekana kwenye website-->
    </body>


</html>

Mstari kwa mstari

Hizi ni kodi zinazo andaa Webpage yako, na kuipa sifa ya kuwa WebPage au HTML Document. Tulijifunza kuhusiana na kodi hizi kwenye madarasa yaliyopita, lakini hapa tutajaribu kupitia tena haraka haraka ili kuweka uelewa sawa.

<!DOCTYPE html> Hii ni code tunayoweka mwanzo kabisa mwa webPage ili kuisaidia browser kugundua aina ya File inayofungua.

<html> Hii ni tag inayotumika kuunda element kuu kwenye WebPage. Element zingine zote zitakuwa ndani ya element hii <html> </html>



<Head> Hii ni Tag inayounda element ambayo kazi yake ni kukusanya taarifa zinazohusiana na WebsPage pamoja na element ya title, kwa sasa tutaweka element ya title tu kwenye element hii.


<body> Hii ni tag ambayo hutumika kutengeneza element kuu, element ambayo ndani yake huwekwa element zote zinazobeba taarifa zinazotakiwa kuonekana kwa mtembeleaji wa website yetu. Hapa ndio mahali ambapo developer hupoteza muda mwingi zaidi kupaandaa kuliko sehemu zote za website

Sasa tumalizie kwa kuweka element za kugawa webPage yetu kwenye maeneo matatu kama tulivyotengeneza kwenye darasa lililopita. Tutaongeza element zote na kuziwekea Nukuu kama tulivyojifunza.

Note: Element hizi tunaziongeza ndani ya element kuu <body> </body>

<!DOCTYPE html>
 
<html>
 
    <head>     
        <title> SWDC Website &#8211; Home </title>
    </head> 

   <body> 
       <!-- Weka hapa element zote zitakazoonekana kwenye website-->
            
            <!-- Kichwa (Head)-->
        <div style="width:100%; height:100px; background-color:grey"> Hili ni eneo la Juu </div>
        <br>
            
            <!-- Eneo la Kati -->
        <div style="width:100%; height:400px; background-color:blue"> Hili ni eneo La kati </div>
        <br>
            
            <!-- Eneo la chini (Footer)-->
        <div style="width:100%; height:100px; background-color:grey"> Hili ni eneo Chini</div>
    </body>

</html>

Kwenye kodi hizi hapa juu ni rahisi kabisa developer yoyote duniani kuja kufanya maboresho au marekebisho kwakuwa zimetengenezwa kwenye viwango vya kimataifa, kwanza zimepangiliwa vizuri katika aya(indentation), lakini pili zimewekewa nukuu vizuri (good comment), comments nzuri inatakiwa kuwa fupi na inayoeleweka.

siku moja ukiwa kama developer mkuu kwenye kampuni unaweza kumpigia simu mtu mmoja kwnye timu yako kisha ukamuagiza afanye mabadiliko kwenye body ya webPage haita mpa shida kwasababu atakuta Nukuu inayomuelekeza.

 

[Msamiati]

Baada ya kujifunza jinsi tunavyoweza ku-gawa kurasa yetu, sasa bado hatua chache tu, ili tuweze kumaliza kabisa kipengele hiki.

Tunafahamu kuwa, website yetu imekusanya mafaili mbali mbali ya taarifa. Mafaili yote ndani ya website yetu yanatakiwa kuonekana kwa mtumiaji kupitia file moja ambalo awali tulikuwa tunaliita file maalum na sasa tunaliita Web page au kurasa mtandao.

Baada ya kuona jinsi tunavyoweza kuandaa kurasa yetu, sasa moja kwa moja tuanze kuangalia ni namna gani tunaweza ku-display mafaili yaliyobaki kwenye kurasa mtandao (webpage yetu).

Katika darasa la leo tutaanza na jinsi ya ku-display Picha kwenye WebPage yetu.

Picha kwenye Web Page
Kama tulivyojifunza tangu awali, kila kitu kinachoongezwa kwenye web page ni element, picha pia ni element. Element zote huundwa na tag, tag inayotumika kuunda element ya picha ni <img>.

Tofauti na element nyingi ambazo tumeshajifunza mpaka sasa, element ya picha ni element pekee, ni aina ya element inayoundwa na Tag awali peke yake, yenyewe hujitosheleza bila tag tamati.

Ukifahamu element hii tayari utakuwa umefahamu jinsi ya kutumia mafile ya picha kwenye website yako.

Matumizi ya element ya picha
Element ya picha <img> , japokuwa haihitaji tag tamati ili kukamilika, element hii haiwezi kukamilika bila kuwa na kipambizo chazo.

Kipambizo chanzo ni kipambizo cha anuani kinachoisaidia element kufahamu sehemu ambayo picha ipo. Unapotaka kuweka picha kwenye Web Page unatumia <img> , Unakuwa umetengeneza element ya picha, lakini picha hiyo haitaweza kuonekana na kufanya element isikamilike bila kuongeza kipambizo ambacho kitaisaidia element kujua picha inayotakiwa ku-display.

Kipambizo (Attribute)
Kipambizo kinachotumika kukamilisha element ya picha ni kipambizo chanzo src, Kama tulivyojifunza kuhusu vipambizo, kipambizo hiki hufanya kazi ya kuipa element anuani ya picha unayotaka kuitumia/unayotaka ionekane kwenye element. Kipambizo hiki hutumika kama ifatavyo:-

src= "anuani".

Vitu vidogo vidogo kama hivi huwa vinafanya baadhi ya watu waone kuwa HTML ngumu kwasababu tu ya kukariri. Ngoja nikuchambulie kidogo kipambizo hiki ili uelewe na sio umeze.

Src ni kifupi cha neno source ambalo kwa maneno matamu ya Kiswahili linamaanisha chanzo, kwa hiyo kuandika src= "" ni sawa na kuandika source= "" au kusema chanzo= "".

Ndani ya funga semi na fungua semi unaweka chanzo chako(anuani). Kama picha yako umeiweka sehemu moja na web page yako, kwenye chanzo weka jina la picha tu likiwa na extension.

Ninaposema weka jina la picha likiwa na extension namaanisha kuwa, Mafaili ya picha yamegawanyika katika makundi tofauti tofauti. Kuna aina za picha ambazo ni jpeg, zingine ni png pia kuna gif, sasa unapoandika jina la picha kwenye anuani ni lazima uweke jina la picha likiwa na extension kulingana na picha husika na usipofanya hivyo picha yako haitaonekana.

Mfano: Kama picha yako inaitwa "bango" anuani yako utaiita bango.jpg au kama picha yako ni gif basi utasema bango.gif

Element ya picha ya kuongeza kwenye web page yetu tutaitengeneza kwa kufata hatua zifatazo.

1. Ongeza element ya picha

<img>

2. Ongeza kipambizo anuani kwenye element, src= "bango.jpg"

<img src= "bango.jpg" >

Wooooh! Ni hatua mbili tu za kufata unapotaka picha yako ionekane kwenye web page, rahisi sanaaa

Note: Hakikisha picha yako ipo sehemu moja na web page yako.

Tuishie hapa kwa leo, kwenye somo lijalo tutaangalia jinsi tunavyoweza kuongeza vipambizo zaidi kwenye element yetu, ili kuipa picha sifa na muonekano tunaotaka.

 

[Msamiati]

Kipambizo cha mtindo kwenye element ya picha

Leo tutajifunza vitu viwili tu vya ziada na vya muhimu kufahamu kuhusiana na element ya picha. Kwanza ni jinsi tunavyoweza kutumia kipambizo cha mitindo kwenye element ya picha ili kuipa picha ukubwa unaotaka.

Kipengele hiki kitakuwa rahisi sana kwasababu tulishajifunza kinagaubaga kuhusu vipambizo vya mitindo kama unataka kujikumbushia pitia tena darasa la unit 13.

Kwa kutumia kanuni zile zile tunaweza kutumia kipambizo cha mitindo kwenye element ya picha mfano element yetu ikiwa hivi: <img src= "bango.jpg">

Picha hii bango.jpg ina ukubwa wa 675 kwa 90, Kama element ya picha hii tutaiweka ndani ya element ya kichwa cha website kama hivi

<!-- Kichwa (Head)-->
        <div style="width:100%; height:100px; background-color:grey"> 
        
            <img src="bana.jpg">    
        
        </div>

Picha itaonekana kupwaya kwasababu eneo la kichwa cha website tuliligawa katika ukubwa ambao upana ulikuwa 100% tukimaanisha upana wote wa browser, na urefu tuliweka 100px.

Kwahiyo kwakuwa picha yetu inasize ndogo basi itaonekana kupwaya kama inavyoonekana kwenye kielelezo hapo chini:


Picha yetu imetokea ndani ya eneo la juu la website yetu, hii haina tatizo kama umepanga ionekane hivyo kutegemeana na mahitaji yako. Lakini kwa malengo ya kujifunza tutaongeza kipambizo cha mtindo ili kuipa element ya picha ukubwa unaolingana na element ya eneo la juu la website.

Tutaongeza kipambizo cha mtindo kwenye element ya picha na kukipa size tunayotaka:

Kipambizo cha mitindo kitaonekana hivi:- style="width:100px; height:100px"

Baada ya kuongeza kipambizo cha mitindo element yetu itaonekana kama ifatavyo:

<img src="bango.jpg" style="width:100px;height:100px">

Tukiongeza element hii kwenye eneo lajuu (Header), Kode zetu zitaonekana hivi:

<!-- Kichwa (Head)-->
        <div style="width:100%; height:100px; background-color:grey"> 
        
            <img src="bana.jpg" style="widht:100%; height:100px">    
        
        </div>

Mwisho Kurasa yetu itaonekana kama hivi:

 

[Mgumu04]

asante #msamiati

 

[mm1]

msamiati pindi lini tena

 

[Wizzy the Principle]

Msamiati

Nitafanyaje ili nipate mada za mwanzo?

 

[Mpambalachuma]

Msaada jaman kwa anaefahamu software nzuri kwa kuedit videos

 

[Mr.genius]

tunashukuru saana mwl kwa hapa tulipofkia naimani somo linaendelea let me take a tym to reviw masomo yaliyopta kujipima naweza kiasi gan, tunafuatilia mkuu somo....

 

[Bufa]

Hongera Sana Msamiati kwa kutoa darasa bure na kwa lugha ya kiswahili

Kwa wanaopenda kuendelea na elimu hii kwa njia ya vitendo kuna websites kadhaa zinazofundisha programming languages buree, codeacademy humo utaweza kujifunza na kupractice hapo hapo bure

Karibuni kwenye coding world.

 

[Braltaree]

:sad::sad:Tunaomba pindi liendelee i have experience some changes since the lesson has began ....keep it up MSAMIATI

 

[Kitotonya]

Safi sana msamiati