Kuinka luoda oma kartta satelliittinavigointia varten. Muunna tilannekuva OziExplorer-muotoon

Melko usein joudut vastaamaan kysymykseen "Miksi sivusto ei tuota odotettua tulosta?" Ulkoiset merkit: huono haku etenee, käyttäjä lähtee hyvin nopeasti, näkymiä on, mutta ei ostoksia jne. (lisää tarpeen mukaan).

Kukaan ei halua myöntää käyttäjän yksinkertaisinta vastausta: sivusto on hankala. Tähän voi olla monia syitä. Suunnittelu, liikelogiikka, sijoittelu, edistäminen ovat huomioimisen arvoisia erillisessä artikkelissa. Tänään puhutaan hieman mukavuuden tarjoamisesta potentiaaliselle käyttäjälle käyttäjän näkökulmasta. Harkitse kapeaa aihetta "sivustonavigointi".

Navigointipalkki

Tai kuullen tutumpi valikko pitäisi olla joka resurssissa. Se voi olla muotoiltu mitä tahansa, mutta päävaatimus on, että sen on oltava käyttäjälle ymmärrettävä ja sen on annettava tiedot luokittain. Redundanssi tekee kipeää tässä. Olin esimerkiksi aina hämmästynyt valikon logiikasta alussa Nokian puhelimet... Tämän seurauksena en pitänyt niistä täysin. Sama pätee sivustoihin ja tuotteisiin. Valikkologiikan tulee olla käyttäjälle selkeä. Tämä vaatimus on ennen kaikkea tärkeä. On olemassa sääntö: haluttu sivu on saavutettava 3 napsautuksella. Ja looginen valikko edistää tätä. Suuria sisäkkäisten kappaleiden määrää tulee välttää. Yli 3 valikkotasoa vaikeuttavat navigointia.

"leivänmurut"

Suurilla sivustoilla, erityisesti joissa on paljon tuote- tai sisältökohteita, korppumurut ovat välttämättömiä. Miksi: käyttäjä haluaa ymmärtää missä hän on, varsinkin kun hän ensimmäisen kerran tuli resurssiin. Jos ihminen eksyy kolmeen männyyn, hänestä tulee epämukava ja käsittämätön, ja sivusto alitajuisesti rekisteröityy epämukavaksi tai poistuu tarkoituksella.

Korostus hyvin todistettu erillisessä värissä nykyinen valikkokohta tai hakemisto. Tämä antaa ymmärryksen siitä, kuinka päästä tähän paikkaan uudelleen. Muuten, Breadcrumbs mahdollistaa valikkotoiminnon osittaisen korvaamisen (esimerkiksi palaaminen tuotteesta luokkaan) eikä valikon "pää"-painiketta käytä. Toisin kuin valikossa, jossa on suuria painikkeita, "murut" voivat olla pieniä ja pitkässä rivissä - yleensä tämä koetaan suotuisasti - on tärkeämpää ymmärtää missä olet.

Logo

On hyvä käytäntö antaa linkki kotisivu logossa. Sillä ei ole väliä, edustaako logo tekstiä, kuvaa vai molempia. Jälleen paluu etusivulle napsauttamalla logoa antaa sinulle mahdollisuuden säästää rahaa valikon "etusivu"-painikkeella.

Sivujen otsikot

Älä unohda selkeitä ja ytimekkäitä sivujen otsikoita, joista pitäisi olla selvää, mikä se on tai mistä keskustellaan. Huomaa sivun otsikon ja aliaksen yhdistelmä. Useimmissa järjestelmissä alias luodaan automaattisesti nimestä ja voi olla liian pitkä. Manuaalinen hallinta tai korjaaminen - se kannattaa. Jotkut ihmiset pitävät kyrillisistä aliaksista. Käytössä tämä vaihe tämä paha. Vaikka resurssin vierailijat ovat kaikki venäjänkielisiä. Hakukoneet, selaimet ja muut ohjelmistot eivät ole kovin ystävällisiä kyrillisten aakkosten kanssa. Lisäksi sinun on tarkkailtava huolellisesti oikeaa koodausta.

Sisäänkirjautumislomake

Jos sivustolla rekisteröintiä käytetään, kirjautumislomake sisään Henkilökohtainen alue on oltava helposti ymmärrettävissä ja sijoitettava kätevästi. Sen tulee olla selvästi näkyvissä, jos sivusto on kirjautunut sisään Tämä hetki(näyttää avatarin, kirjautumistunnuksen, lempinimen jne.) Joissakin tapauksissa rekisteröintilomakkeen on oltava "piilotettu". Pienissä projekteissa robotit ja käyttäjät, jotka naiivisti ajattelevat, että rekisteröinti vaaditaan, voivat aiheuttaa paljon ongelmia. Huomaa, että rekisteröintimääräys liittyy liiketoimintalogiikkaan ja sitä käsitellään erikseen.

Favicon

Pikku asia, jonka monet ihmiset unohtavat, on favicon. Kuva, joka näkyy selaimen sivuvälilehdellä. Lisää mukavuutta navigoitaessa sivustolle, kun selain on auki suuri määrä välilehdet.

Hae

Hakutoiminto. Se on erittäin tarpeellinen verkkokauppojen tai paljon sisältöä sisältävien resurssien sivustoilla. On toivottavaa, että jokaisella sivulla on kätevä hakukenttä. Useimmissa tapauksissa sinun tulee rajoittua sivuston etsimiseen ja sammuttaa hakutoiminto koko Internetistä - älä pakota kävijää poistumaan ...

Hakua on järkevää täydentää suodatus- ja hakutoiminnoilla arkistosta (jos arkistoa käytetään sivustolla). Konkreettinen ratkaisu riippuu liikelogiikasta. Tämä osa sisältää myös erilaisia "herkkuja", kuten kalenterihaun, valikoiman tuotteita hinnan mukaan tai hakua sisällönkuvauskenttien perusteella. Suurissa projekteissa tarkennettu haku (suodatus) useiden parametrien mukaan on perusteltua. Ei tunnisteilla! Käyttäjä tarvitsee yksinkertaiset valintaruudut (valintanapit). Ja iso painike "HAKU"!

Navigointi fyysisessä maailmassa

Jos organisaatio tai kauppa sijaitsee todellisessa fyysistä maailmaa tai siinä on jonkinlainen alaosasto (esimerkiksi varasto tuotteiden luovuttamista varten), niin:

Kaupungin/alueen valintaa varten tulee olla toiminnallinen, jos edustustoja on eri paikkakunnilla,
Organisaation aukioloajat tai tavaroiden ja palveluiden tilausaika.
Luettelo viestintätavoista: puhelin, sähköposti, lomake palautetta, skype, tilaa takaisinsoitto jne. Sinun ei pitäisi rajoittua vain puhelimeen, koska puhelujen hinnat ovat täysin erilaisia, eikä joku halua kuluttaa rahaa puheluun. Lomakkeet "Online-konsultti" ja "Tilaa takaisinsoitto". Mutta jos nämä muodot eivät ole liian tunkeilevia.
Kartta, jossa näkyy tarkka osoite, reitti autolla julkinen liikenne ja kävelyreittiä... Hyvän muodon merkki on aktiivinen sisäänrakennettu kartta jostakin palvelusta, paikkamerkki "ihmiskartalla", navigaattorin koordinaatit, asiaankuuluva osoite tai maantieteelliset koordinaatit (jotta ei tarvitse etsiä), kyky piirtää ja tulostaa reitin.

Ja kuten luvattiin, vain vähän SEO:sta. Valitse resurssin verkkotunnus viisaasti. Nimi samieluchshieyuristivgorode.ru saattaa kuvastaa hyviä lakimiehiä käsittelevän sivuston merkitystä, mutta yritä sanella se puhelimella tai syöttää se manuaalisesti käyntikortista. Lisäksi tällainen nimi saa sinut hikkaa (ja useammin kuin kerran) ei vain SEO-schnick.

Tarkista isoäitien resurssit. Jos isoäitisi voi löytää / lukea / tilata / tulostaa sivustolta ilman kehotteitasi, tämä on todella kätevää (vaikka täydellisyydellä ei ole rajaa). Jos hän sulkee sivuston syvään huokauksella, todellinen arvio työsi - mitä isoäiti mutisee hengitystään, koska kunnolliset ihmiset eivät ilmaise itseään ääneen.

Resurssin tai tuotteen tulee olla ennen kaikkea kätevä loppukäyttäjä, eikä kehittäjän kykyjen osoittamiseksi: tätä varten on portfolio ja työ "esittelyyn".

Ihmisten verkkosivustot: ammatti "".

Jotta sivustolla navigoi kätevästi, tarvitset navigoinnin, jota tein käyttäen HTML-skriptit ja CSS. Työni tuloksena näet kahdenlaisia valikoita (pysty ja vaaka). Ja nyt yritän kertoa sinulle tehtävistä, jotka, kuten minusta näyttää, sivuston valikon tulisi suorittaa:

Helppokäyttöisyys;
Navigointi sivuston kaikissa osissa tulisi luoda;
Jokaisella sivuston sivulla on oltava uloskäynti pääsivulle;
Siirry mille tahansa sivuston sivulle enintään kolmella napsautuksella.

Tässä yritän tiivistää materiaalin valikon luomiseen mahdollisimman paljon, valmistaudu, monilla voi olla vaikeuksia, minulla on vähintään ne nousivat. Joten, aloitetaan!

Ensinnäkin kerron sinulle, kuinka se tehdään. Ensin kirjoitamme käsikirjoituksen tyylitaulukkoon:

#navigointi (leveys: 560px; korkeus: 50px; marginaali: 0; täyttö: 0; taustakuva: url (img / gor_menu.jpg); taustatoisto: ei toistoa; taustan sijainti: keskellä;) #navigation ul (luettelotyyli: ei mitään; marginaali: 0; täyttö: 0;) #navigation ul li (näyttö: rivi; marginaali: 0px;) #navigation ul li a (korkeus: 28px; näyttö: lohko; float: vasen; väri: # 333333; tekstin koristelu: ei mitään; fonttiperhe: Arial; fontin koko: 12px; fontin paino: lihavoitu; taustakuva: url (img / menu_separatorline.jpg); taustan toisto: ei toistoa; tausta- sijainti: oikea keskellä; täyte-ylä: 17px; täyttö-oikea: 15px; täyte-ala: 0; täyte-vasen: 15px;) #navigointi ul li a: hover (väri: #FFF; taustakuva: url (img) /button_hover.jpg); taustatoisto: toisto-x; taustan sijainti: vasen yläosa ; tausta-asento: vasen ylhäällä;)

Älä huolestu, tässä koodissa ei ole mitään vikaa. Jotta asia olisi sinulle selkeämpi, kirjoitan HTML-koodin tästä valikosta:

Kuten näet, olemme tekemisissä luettelon kanssa, joka ei ole hyvä ilman tyylitaulukkoa. Div-lause kutsuu muuttujia ulkoisesta taulukosta CSS-tyylejä, niin listamme muuttuu ja muuttuu mielestäni mukavaksi vaakasuuntaiseksi valikoksi.

Nyt sinun on selvennettävä hieman, mikä viittaa mihin, niin luulen, että ymmärrät sen itse:

- sisältää koko valikkorakenteen. Ylin kuva, jonka valmistin etukäteen Photoshopissa, lisätään siihen;

...

- valikon runko sisältää järjestämättömän luettelon. Siihen lisätään kuva, joka toistetaan pystysuunnassa ja luodaan tausta. Ehkä valitsin liian kirkkaat värit, mutta mielestäni ne eivät vahingoita silmiä;

- sisältää itse valikon rungon;

Verkkosivuston valikon luominen

- tämä on yksi kohdista, jossa sinun on lisättävä tarvittava linkki kohtaan href = "#";

- sisältää alaosan.

Ja tämä on itse asiassa CSS-tyylisivumme käsikirjoitus:

Div # menu (leveys: 144px; tausta: url (img / menu_1.jpg) ylhäältä ei toistoa; täyttö-ylä: 40px;) div # menubody (tausta: url (img / menu_2.jpg) toista-y; täyte- vasen: 15px;) div # menubottom (korkeus: 16px; tausta: url (img / menu_4.jpg) bottom no-repeat;) ul # menulist (leveys: 100px; list-style-type: ei mitään;) ul # menulist li (korkeus: 32px; tausta: url (img / menu_3.gif) bottom toista-x;) ul # menulist a (leveys: 100px; korkeus: 25px; reunus vasen: # 75c5de 10px kiinteä; fontti: lihavoitu 10px Verdana, Arial , sans-serif; väri: #ffffff; tekstin koristelu: ei mitään; täyte: 5px 0 0 5px; näyttö: block! tärkeä; näyttö: inline-block;) ul # menulist a: hover (tausta: url (img / menu_5) .jpg) vasen toisto-y; väri: # 000) ul # menulist #active a (tausta: url (img / menu_5.jpg) vasen toista-y;)

Mielestäni sinun ei tarvitse selittää CSS-koodia. Jos jokin on epäselvää, voit aina kysyä.

Molemmat valikot ovat valmiina. Huomaa, että emme käyttäneet JavaScriptiä niissä, ja tämä on pikemminkin "pluss", kun indeksoimme sivustomme hakukoneiden mukaan, no, ei todellakaan "miinus", koska hakukoneet eivät indeksoi JavaScriptiä. Vaikka tällä hetkellä Googlen hakukone alkaa jo tunnistaa sen.

Olet varmaan huomannut jo kauan sitten, että sivustolla on enemmän kuin kaksi menua ja niillä on erilainen rakenne. Artikkelia, kuten edellistä, en muokannut.

On jäljellä täyttää sivustomme sivut sisällöllä ja voimme turvallisesti sanoa, että puolet työstä on tehty, mutta puhun tästä seuraavassa artikkelissa.

Kirjailijalta: Hei ystävät, tänään kerron teille verkkoresurssien käytettävyydestä. Kommenteissa kysyt yhä useammin, mitä pitää tehdä, jotta vierailtu resurssi olisi tehokas ja mitkä suunnitteluhuomiot pelottavat käyttäjiä. Jos olet kyllästynyt itkemään epäonnistuneen Internet-projektisi vuoksi ja päätät toimia, tämä artikkeli on "mitä lääkäri määräsi"! Puhun siitä, kuinka sivustolla navigointi tehdään kätevästi ja mitä virheitä käytettävyydessä tulisi välttää. Artikkelin lukemisen jälkeen katsot maailmaa eri tavalla - menestyvän ja määrätietoisen ihmisen silmin!

Mitä "käytettävyys" tarkoittaa?

Jos työskentelet Internet-resurssien parissa, sinun pitäisi suunnilleen ymmärtää, millainen "peto" tämä on, käytettävyys. Tämä englannista käännetty sana tarkoittaa "helppokäyttöä". Mitä korkeampi resurssin mukavuusaste on, sitä suurempi on sen liikenne ja sitä onnistuneempi koko projekti. Toisin sanoen, jos sivustosi on epämukava vierailijoille, he eivät halua käyttää sitä eivätkä näin ollen osta tarjoamiasi palveluita tai tuotteita.

Käytettävyyden määrää kaksi tekijää - resurssin sisältö ja muoto. Epäilemättä projektin sisällöllä on vierailijoille suuri merkitys, mutta mitä hyötyä siitä on, jos he eivät saa selville, miten tarvittava tieto pääsee käsiksi.

Verkkoresurssin muoto sisältää kätevän navigoinnin sivustolla, toimivien painikkeiden läsnäolon, hyvän valikon ja tietysti yrittää tehdä miellyttävän ja laadukkaan web-suunnittelun. Joten jos päätät, huolehdi sen käytettävyydestä kehityksen aikana, älä vuosien epäonnistumisen jälkeen. Suosittelen, että kiinnität erityistä huomiota sivustolla liikkumiseen.

JavaScript. Nopea aloitus

Mihin tehokas navigointi on tarkoitettu?

Kuvitellaan, että päätät navigoida sivustolla itse ja sinun on poimittava levy tuntemattomalta metroasemalta. Muutit äskettäin tähän kaupunkiin ja löysit itsesi metrosta ensimmäistä kertaa. Sinusta näyttää siltä, että kaikki on hämmentävää ja monimutkaista, koska jotkut linjat kulkevat ympyrää, toiset - kaupungin eri suuntiin.

Vain osoittimet voivat pelastaa tilanteen. Ei ole väliä minne pitää päästä, metrossa on kaikissa näkyvissä paikoissa opasteet, joiden avulla löydät helposti reitin - mihin junaan sinun tulee mennä ja mihin suuntaan. Asemalle saavuttuasi seuraat tarkempia kylttejä, jotka osoittavat liittymään halutulle kadulle.

Navigoinnin helppous piilee siinä, että sekä tosielämässä että paikan päällä et ehkä muista tietä, vaan seuraa vain opasteita ja pääset haluttuun paikkaan. Jos sivuston "osoittimet" on rakennettu oikein, käyttäjä voi navigoida resurssissa ilman vaikeuksia ja löytää tarvittavan materiaalin.

Millaiset navigointityypit sinun tulisi valita?

Ymmärtääksemme, mitä meillä on tarjota vierailijoille, katsotaanpa tärkeimpiä sivustonavigointityyppejä ja valitaan, mitkä niistä sopivat meille ja mitkä eivät.

Pääasiallinen. Tämä sisältää resurssin osiot ja kaikki pääsivulle johtavat linkit;

kieli - antaa käyttäjän valita halutun kielen ja tarkastella verkkoresurssia jo sillä;

temaattinen - auttaa navigoimaan saman aiheen muistiinpanoissa ja artikkeleissa jaksosta toiseen;

auttaa sivuston navigoinnissa. Hämmästyttävä esimerkki on "leivänmurut". Vierailija voi aina seurata tiensä pääsivulta sille, jolla hän tällä hetkellä sijaitsee;

JavaScript. Nopea aloitus

Opi JavaScriptin perusteet käytännön esimerkin avulla verkkosovelluksen rakentamisesta

pudotusvalikko - resurssissa on avattavia elementtejä, kuten tilauslomake tai kyselylomake.

Jos omistat suuren verkkoresurssin, sinun on käytettävä laajennettua navigointia, eli otettava käyttöön kaikki yllä mainitut tyypit. Siinä tapauksessa, että Internet-projekti on "vaatimaton", et todennäköisesti tarvitse pudotusvalikkoa ja kielikohtaista valikkoa.

Äläkä unohda suunnitella 404-sivua, jolle sivustosi kävijät tulevat, jos he tulevat olemattomaan osoitteeseen. 404-sivun suunnittelun tulee olla yhdenmukainen verkkoresurssi tyylin kanssa. Sen on myös sisällettävä kaikki tarvittavat navigointielementit, jotta et menetä vierailijoita, jotka vaelsivat siihen vahingossa.

Kätevä menu on avain menestykseen!

Henkilönä, jolla on kokemusta verkkoresurssien kehittämisestä ja edistämisestä, suosittelen, että kiinnität välittömästi huomiota valikon mukavuuteen. Tässä on muutamia vinkkejä, joiden avulla voit suunnitella selkeän ja käyttäjäystävällisen valikon:

valikko tulee sijoittaa tavallisiin paikkoihin. Älä yritä keksiä pyörää uudelleen, koska käyttäjien on paljon helpompaa nähdä painikkeet samoissa paikoissa kuin muissa Internet-resursseissa. F-muotoinen kuvio on erittäin suosittu - pääpainikkeet sijaitsevat ylhäältä alas ja vasemmalta oikealle;

painikkeiden on oltava interaktiivisia. Monet verkkoresurssien vierailijat eivät edes epäile, että jokin elementti on napsautettava, joten yritä erottaa valikko muista sivun elementeistä, jotta käyttäjä ymmärtää välittömästi sivuston rakenteen;

korosta valikkoa visuaalisesti. Anna painikkeille visuaalinen korostus, jotta vierailijat ymmärtävät yhdellä silmäyksellä, että tämä ei ole vain tekstiä.

käytä kontrastivärejä painikkeiden taustalle ja tekstille;

aktiivisen valikkokohdan tulee olla korostettuna. Tee siitä niin, että käyttäjä voi navigoida milloin tahansa missä hän on. Täällä apunasi "leivänmurut" tai valaistus (voit käyttää molempia);

käytä selkeää kieltä. Vaikka olet luonut resurssi yksinomaan ammattilaisia varten, älä käytä monimutkaisia termejä. Selvitä, mitä ihmiset todennäköisimmin etsivät Internetistä, ja mukauta sitten painikkeet sisällön mukaan.

suurilla resursseilla käytä monitasoista valikkoa esikatselulla, jotta kun viet hiiren valikoiden päälle, ne avautuvat;

ryhmittele samanlaisia elementtejä. Sijoita samankaltaisia luokkia tai tuotteita lähialueelle;

Käytä keskikokoisia painikkeita, jotta vierailijat voivat napsauttaa niitä helposti. Painikkeiden on toimittava, vaikka graafiset elementit on poistettu käytöstä - sivuston navigoinnin ei pitäisi kärsiä tästä. Avainelementit voidaan kopioida alatunnisteeseen;

pitkillä sivuilla valikko tulee kiinnittää niin, että vierittäessäsi käyttäjä voi siirtyä mihin tahansa kohtaan nousematta ylös ja suorittamatta tarpeettomia toimia.

Sivuston sivuilla liikkumisen ei pitäisi millään tavalla masentaa käyttäjää, joten älä tuhlaa aikaa keksiäksesi jotain poikkeuksellista. Jotta resurssistasi tulisi kätevä ja tehokas, eivätkä asiakkaat karkaa sitä huimaa vauhtia, riittää, kun vastaat vierailijoiden odotuksiin. Mitä yksinkertaisempi sivustosi on, sitä todennäköisemmin sitä mainostetaan.

Ensi kertaan! Tilaa blogimme ja jaa linkki ystävillesi!

JavaScript. Nopea aloitus

Opi JavaScriptin perusteet käytännön esimerkin avulla verkkosovelluksen rakentamisesta

Tämän artikkelin idea syntyi uudenvuoden lomien aikoihin, kun selitin, kuinka tehdään satelliittikuviin perustuvia navigointikarttoja. Sitten suurin osa kuvakaappauksista otettiin, mutta artikkelin valmistelu jäi pölyämään kovalevyn takapihalle. Ja nyt paistaa aurinko voimalla ja lumi sulaa, uusi vaelluskausi lähestyy, ja vihdoin voitin laiskuuden ja sain tekstin valmiiksi.

Nyt monilla on laitteita, jotka on jotenkin varustettu satelliitti-GPS-navigaatiolla. Se voi olla älypuhelin, taskutietokone, kommunikaattori tai pelkkä navigaattori. Monissa tapauksissa esiasennettujen karttojen laatu on heikko, etenkin retkeilyssä. Satelliittikuvien ja karttojen online-lähteet voivat auttaa tässä. Riittää, kun vertaat kahta kuvaa samalta alueelta:

Vasen - satelliittikuva Google Maps, oikea - sama alue kartalla. Kumpi näyttää yksityiskohtaisemmalta?

Täysimittaisen rasterikartan luomiseksi tarvitsemme kahden ohjelman joukon, tietyn ajan ja Internet-liikenteen. Saatuja karttoja voidaan käyttää missä tahansa laitteessa, jolle OziExplorer-ohjelma tai sen analogit ovat saatavilla.

Ohjeet ovat vaihe vaiheelta, kuvattu yksityiskohtaisesti, ja niiden tulisi olla selvät kaikille aloittelijoille.

Satelliittikuvan tai -kartan saaminen alueelta

Tässä vaiheessa tarvitsemme SAS.Planeta-ohjelman, jonka voi ladata viralliselta verkkosivustolta sasgis.ru

Ensimmäinen vaihe on määrittää Internet ja välimuisti tietolähteeksi:

Ja valitse myös haluamasi korttityyppi. Mikä se on - satelliitti tai Google-kartta, Yandex-kartat tai satelliittikuvat Roscosmos-geoportaalista tai jopa yleiset henkilökunnan kartat - riippuu vain henkilökohtaisista mieltymyksistäsi ja lähteen laadusta vaaditulla alueella.

Joten löydämme halutun alueen visuaalisesti, koordinaattien tai sisäänrakennetun haun avulla. Määritä tarvittava yksityiskohta zoomaamalla kuvaa. Nykyinen asteikko näytetään vasemmalla asteikkopalkin alla suhteellisissa tasoissa (z14, z16 ja niin edelleen). Siitä on meille hyötyä seuraavassa vaiheessa. Keskittyä tarvittavat esineet olivat hyvin erotettavissa eivätkä "hämärtyneet". Mutta älä unohda, että jokainen yksityiskohtataso kasvattaa tuloksena olevan kartan kokoa.

Pienennä mittakaavaa, kunnes koko kartan haluttu alue näkyy näytössä. Valitse "suorakulmainen valinta" -työkalu (toinen työkalurivin vasemmasta painikkeesta tai näppäimistön Ctrl + R -yhdistelmä) ja valitse tulevan karttamme reunat.

Kun valinta on valmis, Select Area Operations -valintaikkuna tulee näkyviin. Nyt olemme kiinnostuneita "Lataa"-välilehdestä. Haluttu tyyppi kartta on jo valittu, ja vaadittu yksityiskohta on valittava pudotusvalikosta (selvitimme sitä hieman aikaisemmin). Jää vain napsauttaa "Käynnistä" -painiketta.

Jonkin ajan kuluttua (riippuen kartan yksityiskohdista ja alueesta) sen osat ladataan ja ikkunassa näkyy viesti "Tiedoston käsittely valmis". Voit sulkea latausikkunan ja siirtyä seuraavaan vaiheeseen - kuvien yhdistämiseen.

Valitse valintavalikosta kohta "Edellinen valinta" tai paina näppäimistöltä Ctrl + B, jotta et enää valitse samaa aluetta, niin meille tuttu ikkuna tulee näkyviin.

Tällä kertaa olemme kiinnostuneita "Liima"-välilehdestä. Täällä sinun on määritettävä lisää parametreja:

Tuloksena oleva muoto- kuvamuoto, jossa karttamme tallennetaan. Jatkokäsittelyä varten on suositeltavaa valita BMP, vaikka se vie enemmän tilaa, sen ymmärtävät kaikki ohjelmat, eikä siinä ole koodaushäviöitä.
Missä säästää- Tässä sinun on määritettävä kansio ja sen tiedoston nimi, johon kartta tallennetaan.
Korttityyppi- nykyinen lähde korvataan automaattisesti.
Mittakaava — Älä unohda asettaa halutun tarkkuuden. Oletuksena ohjelma on asettanut matalan yksityiskohdan, joka näkyy nyt näytöllä.
päällekkäin- Täällä voit lisätä karttaan lisätasoja. Kuten Hybridille Google Kartat missä päätiet näytetään ja legenda... Joskus hyödyllinen satelliittikuvien tarkentamiseen tai merkitsemiseen siirtokunnat... Tätä varten älä unohda ladata ylimääräistä kerrosta vaaditulla yksityiskohtaisuudella yllä kuvatulla menetelmällä.
Luo sidontatiedosto- valitse ruutu ".map", se on hyödyllinen meille seuraavassa vaiheessa. Tiedosto tallennetaan maantieteelliset koordinaatit tuloksena olevan kuvan kulmat.

Paina "Aloita"-painiketta ja hetken kuluttua määritetyssä kansiossa saamme kaksi tiedostoa - kuvan kartalla ja .map-tiedoston koordinaatteihin sitomista varten. Jonkin verran navigointiohjelmat voi käyttää tällaisia kuvia suoraan. Mutta kannettaville laitteille, joilla on rajalliset resurssit, on parempi tallentaa kartta erityiseen muotoon.

Kuvankäsittely grafiikkaeditorissa

Usein satelliittikuvat ovat "sokeat" epäsuotuisten valaistusolosuhteiden tai häiritsevän sumun vuoksi tai jostain muusta syystä, varsinkin kun ne näkyvät mobiililaitteen näytöllä kirkkaana aurinkoisena päivänä. Parannuksen vuoksi voit tehdä pienen korjauksen mihin tahansa graafinen editori... Näytän tämän esimerkkinä ilmaisella XnView'lla, mutta voit käyttää mitä tahansa muuta sopivaa (IrfanView'sta Photoshopiin), menettely on sama kaikkialla.

Mutta jos olet täysin tyytyväinen edellisessä vaiheessa saadun kuvan laatuun ja kontrastiin, voit ohittaa tämän vaiheen.

Yllä oleva kuvakaappaus näyttää alkuperäisen kuvan ja Auto Levels -valikkokohdan sijainnin, jonka avulla voit säätää kontrastia automaattisesti. Alla oleva kuva näyttää tämän toimenpiteen tuloksen. Kuten näette, kuvan väri ja kontrasti ovat lisääntyneet, myös teiden ja vesistöjen näkyvyys on hieman parantunut.

Voidaan myös käyttää Manuaalitila- kontrastin ja gammakorjauksen muokkaus (lisää molempia):

tai Sävy / Kylläisyys / Vaaleus. Keskity olosuhteisiisi sopivampaan vaihtoehtoon.

Muunna tilannekuva OziExplorer-muotoon

Tarvitsemme img2ozf-apuohjelman, jotta voimme muuntaa kuvan edelleen kompaktimpaan muotoon, jonka OziExplorer ymmärtää. Voit ladata sen ilmaiseksi viralliselta OziExplorer-sivustolta: oziexplorer3.com/img2ozf/img2ozf.html. Linkki - uusin versio apuohjelman tallennus ozfx3-muodossa. ozf2-tiedostoille (käytetään vanhemmissa OziExplorerin versioissa) sinun on löydettävä apuohjelman vanhempi versio. Haku auttaa sinua tässä.

Asenna ja suorita ohjelma. Määritä Lähdekuvakansio -kenttään polku, jossa valmistetut kuvat ja vastaavat .map-tiedostot sijaitsevat. Merkitse Kohdekansio-kenttään mihin muunnetut kortit sijoitetaan (jos napsautat sinistä nuolta vasemmalla, kansio, jossa on lähdetiedostot). Voit leikkiä värien määrällä (Numerovärit-kenttä vasemmalla). Miten enemmän määrää värit, sitä tasaisempi kuva, mutta isompi koko tuloksena oleva tiedosto.

Valitse kuvien muuntamiseen tarvittavat ruudut ja napsauta iso painike Käsittele kuvatiedostot OZF-tiedostoiksi.

Ohjelma jyrisee hetken ja käsittelee tiedostoja. Tässä tapauksessa nykyiset toiminnot näkyvät tilarivillä. Ohjelma luo useita yksityiskohtia eri suurennoksille, jotta mobiililaitteen resursseja ei tuhlata uudelleenlaskentaan suuria kuvia... Siksi koodaus tapahtuu useissa vaiheissa.

Heti kun tilariville tulee teksti Valmis, muunnos on valmis. Kohdekansiossa määritettyyn kansioon ilmestyy kaksi tiedostoa - .ozfx3 (tai .ozf2 vanha versio) ja vastaava .map-tiedosto (jolla, toisin kuin alkuperäisellä, on samanlainen nimi kuin alkuperäinen_nimi _ozf.map).

Nyt on vielä ladattava molemmat tiedostot mobiililaite ja kerro OziExplorerille missä he ovat.

Esimerkiksi Windows Mobilessa satelliittikuvia sisältävä OziExplorer-ikkuna näyttää tältä:

Siinä kaikki, kortit ovat valmiit.

Jos jokin jää epäselväksi - kysy kommenteissa - yritän vastata.

Hei rakkaat tilaajat!

Juuri lopetettu työ seuraava projekti... Päävalikon lisäksi se sisälsi myös navigointi... Ja ajattelin, että olisi mukavaa näyttää, kuinka tällainen asia voidaan tehdä muutamalla koodirivillä. Ja tämä tehdään yksinomaan html:n ja css:n avulla.

Tällainen navigointi sijoitetaan yleensä sivuston vasemmalle puolelle. Sen kehityksessä ei ole mitään monimutkaista. Jokainen navigointikohde on suljettu tunnisteeseen

…

... Siihen laitetaan linkki.

PSD-malli Tämän koulutuksen kohteen voi ladata.

Samalla tavalla tämä oppitunti saatavilla video versio jonka voi ladata täältä:

No, yleensä kaikki! Katsotaanpa koodia ja kaikki tulee vihdoin selväksi.

TIETOJA KESKUSTA

KUVAGALLERIA

HINTA LISTA

YHTEYSTIEDOT

Teemme loput tyyleillä.

.bar-menu-luokassa vaaditaan tyylit vierekkäisten lohkojen sijainnin perusteella. Esimerkissäni sivulla ei ole muuta kuin tämä navigointi, joten asetan sen leveyden.

Koska teksti on keskitetty, helpoin tapa keskittää se on asettaa tunniste

tekstin keskitasaus.

Kuvat leikattu pois, aloitetaan kirjoittaminen css-koodi navigointia varten. Tarkemmin navigointilinkkejä varten! Meillä on jo loput tyylit.

kirjasinperhe: Tahoma;

fontin paino: lihavoitu;

Ja mitä me näemme?

Miksi niin? Tosiasia on, että taustakuva sijoitetaan linkkiin juuri niin kauan kuin teksti sen sallii. Eli linkin leveys ja korkeus määräytyvät siinä olevan tekstin mukaan. Tämä on muuten selvä merkki upotetut tunnisteet... Asetetaan leveys ja korkeus:

tausta: url (kuvat / bg-menu-main.jpg) center center;

kirjasinperhe: Tahoma;

fontin paino: lihavoitu;

leveys: 190 pikseliä;

korkeus: 27px;

Silti mikään ei ole muuttunut.

tausta: url (kuvat / bg-menu-main.jpg) center center;

kirjasinperhe: Tahoma;

fontin paino: lihavoitu;

näyttö: lohko;

Näyttää siltä, että navigointi alkaa saada tarvitsemamme muotoa:

Lisää pehmusteet jokaisen linkin alaosaan. Lisäämme jokaiseen linkkiin myös pehmusteen ja unohtumattoman vähentämme sen korkeudesta:

tausta: url (kuvat / bg-menu-main.jpg) center center;

kirjasinperhe: Tahoma;

fonttikoko: 10px; väri: # 056e04;

fontin paino: lihavoitu;

korkeus: 21px;

marginaali-ala: 10px;

täyte-top: 6px;

Saamme mitä tarvitsemme:

Baari-menu h2 a : leijuu{

tausta: url (kuvat / bg-menu.jpg) center center;

kirjasinperhe: Tahoma;

väri: #ffffff;

fontin paino: lihavoitu;

marginaali-ala: 10px;

täyte-top: 6px;

teksti-koriste: ei mitään;

Meidän omamme siis osoittautui navigointivalikko:

Toivottavasti tämä opetusohjelma on sinulle hyödyllinen. Andrey oli kanssasi. Kiitos huomiostasi. Nähdään seuraavilla tunneilla!