Atsauc gais t meklis
Download
1 / 42

Atsauc?gais t?meklis - PowerPoint PPT Presentation


  • 183 Views
  • Uploaded on

Atsaucīgais tīmeklis. Artūrs Sosins. Mobilo ierīču skaits pieaug. Paņemsim mazpazīstamu c iemu. Kur dzīvo parasti cilvēki. Strādā sēra raktuves. Un ir tikai mobilais. Tīmekļu lapas. Ir platformas neatkarīgas Ir dzelžu neatkarīgas Pazīstamas izstrādes tehnoloģija.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Atsauc?gais t?meklis' - amity


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Atsauc gais t meklis

Atsaucīgais tīmeklis

Artūrs Sosins







T mek u lapas
Tīmekļu lapas

  • Ir platformas neatkarīgas

  • Ir dzelžu neatkarīgas

  • Pazīstamas izstrādes tehnoloģija

  • Ar jaunām HTML 5 iespējam, tā ir lieliska platforma


Pats darvins teica
Pats Darvins teica

It is not the strongest of the

species that survives, nor the most

intelligent, but the one

most responsive to change.


Responsive web
Responsiveweb

  • Jauna tīmekļa lapu izstrādes tendence

  • Atbalsts ekrāniem no 480x320 līdz 2560x1440 (WQHD standarts)

  • Fluiddesign

  • Sadale kollonās

  • MediaQueries

  • Mobile First


Fluid d esign
Fluiddesign


Sadale kolon s
Sadale kolonās

  • Ekrāns ir sadalīts vairākās kolonās

  • Kolonām ir minimālais platums

  • Samazinoties ekrāna izmēra kolonas pārlec uz nākamo rindu

  • Piemērs





Media queries
MediaQueries

  • <linkrel="stylesheet” href="layout.css” media="screenand (min-width:400px)" />

  • @media (min-width:400px) { }


Media queries atbalsts
MediaQueries atbalsts



Mobile first
Mobile first

  • Standarta dizains - mobilajām ierīcēm

  • Ar MediaQuery – ielādējam dizainu pārējām ierīcēm

  • IE6, IE7 un IE8 rādīs mobilo versiju?



Crossbrowser media queries
CrossbrowserMediaQueries







N kam probl ma ir att li
Nākamā problēma ir attēli

  • Mēs varētu ielādētu attēlus priekš PC un mainīt tiem izmēru klienta pusē izmantojot CSS

  • Bet tādā gadījumā mēs ielādējam pilno attēlu kurš sver daudz vairāk

  • Un šāda veida attēls var arī slikti izskatīties


Popul r kie risin jums
Populārākie risinājums

  • Samazināt attēlu servera pusē vai nu dinamiski, vai glabājot dažādas attēla versijas

  • Izmantojot vektorgrafiku ko piedāvā SVG.


Svg raphael js framework
SVG + Raphael JS framework

  • Nav pikseļu

  • Var mainīt izmērus staipīties

  • Ļoti mazs faila izmērs

  • Raphael JS ietvars priekš atbalsta uz visām pārlūkprogrammām


K p c visi nelieto svg
Kāpēc visi nelieto SVG?

// Creates canvas 320 × 200 at 10, 50

var paper = Raphael(10, 50, 320, 200);

// Creates circle at x = 50, y = 40, with radius 10

var circle = paper.circle(50, 40, 10);

// Sets the fill attribute of the circle to red (#f00)

circle.attr("fill", "#f00");

// Sets the stroke attribute of the circle to white

circle.attr("stroke", "#fff");


Responsive video
Responsive video

  • Kas tad notiek ar video?

  • Nevar samazināt servera pusē

  • Jāsaglabā proporcijas


Risin jums
Risinājums

  • Priekš HTML5 video:

    • width: 100%;

    • height: auto;

  • Priekš embeded video:

    • Fitvid.jsJquery spraudnis, embeded video izmēra mainīšanai


Datu tabulas
Datu tabulas

  • Var būt neierobežotā platumā

  • Jāattēlo dati tik pat viegli uztverami

  • Jāvar salīdzināt rindas savā starpā






Kopsavilkums
Kopsavilkums

Samērā ātrs, lēts un viegls veids kā nodrošināt piekļuvi jūsu tīmekļa lapām no jebkuras platformas

  • Bet

  • Ir izņēmuma gadījumi

  • Ir daudz neatrisinātu problēmu

  • Nav piemēroto izstrādes rīku