Lectia 1 – Introducere in jQuery Mobile

Acum cateva zile am hotarat sa realizez un tutorial complex cu titlul Optimizare pentru mobil. Cursul este recomandat pentru studenti / elevi,dar vreau sa ma adresez catre programatori cu sau fara experienta . Pentru programatorii cu experienta primele 10 tutoriale vor fi prea simple, va necesita 1-2 minute, iar pentru ceilalti maxim 10 minute. In aceste lectii voi folosi cod php, dar se poate transforma cu usurinta intr-un alt limbaj. Voi pune accent pe HTML5, CSS3 si bineinteles pe jQuery Mobile Framework. Pentru aceste lectii poti folosi orice sistem de operare cu editorul de text preferat.

Sa incepem!

Pas1. Construim un fisier standard HTML5

Este vorba despre un simplu fisier html5. Deschidem editorul de text, introducem urmatorul continut si salvam cu numele l1ex.html.

<!DOCTYPE html>
<html>
    <head>
    <title>Lectia 1 - Introducere in jQuery Mobile</title>
    </head>
<body> 

<!-- aici urmeaza continutul -->

</body>
</html>

Pas2. Includem jQuery Mobile

Pentru a include functionalitatea de „mobile”, adica jQuery Mobile Framework, vom adauga inainte de </head> urmatorul cod

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

Pas3. Cream o schema pentru prima pagina.

Schema pentru o pagina mobile si bineinteles tot continutul vom introduce intre etichetele <body> si </body> .

  <div data-role="page" id="home">
	<div data-role="header">
	<h1>Lectia 1 - Introducere in jQuery Mobile</h1>
	</div>

	<div data-role="content">
	<p><center>...Cursul este recomandat pentru studenti / elevi,dar vreau sa ma adresez catre programatori cu sau fara experienta . Pentru programatorii cu experienta primele 10 tutoriale vor fi prea simple, va necesita 1-2 minute, iar pentru ceilalti maxim 10 minute...</center></p>

	</div>

	<div data-role="footer">
	<a href="http://www.sandorkovacs.ro/" title="Site oficial - Sandor Kovacs">Viziteaza site-ul lui Sandor</a>
	</div>
</div>

Sa analizam codul de mai sus:

  • fiecare pagina pentru mobil este intr-un div cu atributul data-role=”page”. Va recomand sa definiti si un id ( identificator ) pentru fiecare pagina, in cazul in care aveti mai multe pagini.
  • o pagina poate sa aiba un antet. Antetul este un div cu atributul data-role=”header”
  • continutul paginii este introdus intr-un div cu atributul data-role=”content”
  • o pagina poate sa aiba si un subsol. Subsolul este un div cu atributul data-role=”footer”

Testare

Daca ai urmat pasii, deschizand in browser fisierul html vei vedea urmatoarea pe ecran:

Fisier Demo l1ex1.html .

Atentie! Fiindca lucram cu fisier standard HTML5 si browserul trebuie sa suporte HTML5. Pe browserele IE7 si IE8 puteti testa fara rost. Va recomand sa folositi Chrome sau Firefox pentru testing sau orice alt browser ce suporta HTML5.

V-am pregatit un fisier demo, pentru cei care vor sa vada rezultatul inainte sa parcurga lectia.
Vizualizeaza DEMO

Feedback si Share

Astept feedback si intrebari sub forma de comentariu.

Sprijina aceste lectii prin FB LIKE si SHARE, GOOGLE +1, TWEET, etc.

Anunțuri

3 păreri la “Lectia 1 – Introducere in jQuery Mobile”

  1. Pe ‘local’, respectiv pe ‘browser-ul’ de la desktop, paginile mobile arata bine. Doar ca ‘live’ pe mobil (de ex. SGS), scrisul este mic, iar daca dau zoom pe pagina, nu se redimensioneaza/rearanjeaza dupa tel, ci ramane mare. Am cautat pe net si zice ca trebuie adaugat in :

    pentru a se vedea bine pe telefoane. Am incercat si merge (http://lazar-horea.com/jQueryMobile/).

    1. Se intampla pentru ca SGS din cate stiu are rezolutie foarte mare. Nu se mai vede ce ai adaugat sa se vada bine, dar cred ca referi la meta name=”viewport” content=”width=device-width, initial-scale=1″, unde poti defini lungimea paginii dinamica ( sa ia dimensiunea in functia de rezolutia device-ului) si initial-scale, ce reprezinta nivelul de zoom initial. Ca sa se vada bine trebuie sa aiba valoarea 1.

      Multumesc pentru observatii!

Lasă un răspuns

Completează mai jos detaliile tale sau dă clic pe un icon pentru a te autentifica:

Logo WordPress.com

Comentezi folosind contul tău WordPress.com. Dezautentificare / Schimbă )

Poză Twitter

Comentezi folosind contul tău Twitter. Dezautentificare / Schimbă )

Fotografie Facebook

Comentezi folosind contul tău Facebook. Dezautentificare / Schimbă )

Fotografie Google+

Comentezi folosind contul tău Google+. Dezautentificare / Schimbă )

Conectare la %s