Телефон орналасу үлгісі

Жұмыс түрі: Дипломдық жұмыс
Тегін: Антиплагиат
Көлемі: 38 бет
Таңдаулыға:

МИРАС УНИВЕРСИТЕТІ

Назаров Батыржан Ержанұлы

Мобильдік құрылғылар үшін веб-сайтты жоспарлау мен құру

ДИПЛОМДЫҚ ЖҰМЫС

6В06102 - Бағдарламалау және бағдарламалық пакеттер әзірлеу білім беру бағдарламасы

Шымкент, 2022
МИРАС УНИВЕРСИТЕТІ

ІТ және телекоммуникациялар секторы

ҚОРҒАУҒА ЖІБЕРІЛСІН
Білім беру бағдарламасының менеджері
________ Манатқызы Ж.
___ _________ 2022 ж.

ДИПЛОМДЫҚ ЖҰМЫС

тақырыбы: Мобильдік құрылғылар үшін веб-сайтты жоспарлау мен құру

6В06102 - Бағдарламалау және бағдарламалық пакеттер әзірлеу

Орындаған

Назаров Б.Е.
Ғылыми жетекші

т.ғ.к., аға оқытушы
Юнусова А.А.

Шымкент, 2022

Мирас университеті

Университет Мирас
ІТ және телекоммуникациялар
секторы

Сектор
ІТ и телекоммуникации
БЕКІТЕМІН

УТВЕРЖДАЮ
Білім беру бағдарламасының менеджері

Менеджер образовательной программы

Манатқызы Ж.

[(қолыподпись)]

[(А.Ж.Т.Ф.И.О.)]

2021 ж.

дипломдық жұмысты орындауға
ТАПСЫРМА

Студент
Назаров Батыржан Ержанұлы
Тобы
ҚО 157-91

БББ

6В06102 - Бағдарламалау және бағдарламалық пакеттер әзірлеу

1.Жұмыстың тақырыбы
Мобильдік құрылғылар үшін веб-сайтты жоспарлау мен құру
университет бойынша №

2021 ж.
бұйырығымен бекітілген
2. Аяқталған жұмысты тапсыру мерзімі

3. Жұмысқа бастапқы мәліметтер
Мамандық бойынша дипломдық
жұмысты орындауға арналған әдістемелік нұсқама және Мирас
университетінің академиялық саясаты

4. Дипломдық жұмыста өңдеуге жататын мәселелер тізімі немесе жұмыстын қысқаша мазмұны
а)
есептің қойылымы, қолданыстағы ақпараттық жүйелер мен қолданбаларды
қарау және талдау, автоматтандыру тапсырмасын анықтау;
б)
бағдарламалық өнімді жобалау, бағдарламалық өнім архитектурасын әзірлеу,
деректер базасын құру, бағдарламалық модуль әзірлеу;
в)
бағдарламалық өнімді практикалық іске асыру, бағдарламалық өніммен

жұмыс істеу нұсқаулары, бағдарламалық өнімді енгізу шаралары.

Жұмыстың жетекшісі

[]
Юнусова А.А.

[(]қолы[)]

[(]Т.А.Ә.[)]
Тапсырма берілген күн

2021 ж.

Тапсырманы орындауға қабылдады

[]
Назаров Б.Е.

[(]қолы[)]

[(]Т.А.Ә.[)]

АНЫҚТАМАЛАР, ТЕРМИНДЕР ЖӘНЕ ҚЫСҚАРТУЛАР

Stack Overflow мобильді қосымшасы
-
сұрақтар мен жауаптардан тұратын интерактивті жүйесі
Android Studio
-
Google компаниясының Android операциялық жүйесіне арнап шығарған жаңа және толықтай интеграцияланған қосымшаны әзірлеу ортасы. Бұл өнім қосымшалар жасауға және қазіргі уақытта ең танымал әзірлеу ортасы болып табылатын
Firebase
-
бұл қолданушы аудиториясын кеңейту мен табысты арттыруға, сапалы мобильді қосымшаны тез әзірлеуге мүмкіндік беретін бұлтқа негізделген қызметтер мен қосымшалардың провайдері.
UML
-
бағдарламалық қамтаманың сызбасын көрсететін стандартты құрал
АТ
-
ақпараттық технология
Модельдеу тілі
-
жүйенің тұжырымдамалық және физикалық көрінісіне бағытталған ереже, тіл және сөздік
Google Play
-
мобильді қосымшалар дүкені Google компаниясы қосымшаларына арналған. Android операциялық жүйесінде әр түрлі мобильді қосымшалардың ақылы және де ақысыз бағдарламаларды жүктеуіне арналған.

МАЗМҰНЫ

КІРІСПЕ ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
6
1 Мобильді құрылғылар мен смартфондарға веб-сайттар құру

1.1 Мобильді құрылғыларға арналған веб-сайт дизайны ... ... ... ... ... ... ... ... ..
7
1.2 Қолданыстағы Adobe Muse веб-сайтына" Телефон " макетін қосу ... ... ...
8
1.3 Үлгі бетін орнату және ортақ веб-бет элементтерін қосу ... ... ... ... ... ... ...
10
1.4 Сайтты жылжыту үшін еренсілтемелерді қосу ... ... ... ... ... ... ... ... ... ... ... .
11
2 Мобильді веб-сайт ресурстарын оңтайландыру және жаңарту

2.1 Макет үшін мобильді құрылғыларға байланысты қосымша функциялары ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .

18
2.2 Мобильді құрылғыларға арналған макеттерді пайдалана отырып, сайтты жариялау ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .

20
3 Stack Overflow мобильді қосымша сы

3.1 Stack Overflow сайтының мүмкіндіктері ... ... ... ... ... .. ... ... ... ... ... ... ...
22
3.2 Stack Overflow мобильді қосымшасын құру үшін
пайдаланылған құралдар ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...

24
4 Мектеп оқушыларының білім алуына арналған 10 мобильді қосымша ... ...
38
ҚОРЫТЫНДЫ ... ... ... ... ... ... .. ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
41
ПАЙДАЛАНЫЛҒАН ӘДЕБИЕТТЕР ТІЗІМІ ... ... ... ... ... ... ... . ... ... ... ... ... ...
42

КІРІСПЕ

Заманауи цифрлық технологиялардың алға жылжығаны соншалық, бұрын дыбысты қашықтан таратуға арналған құрылғы ғана болған, бүгінде байланыс құрылғыларынан басқа әмияндар, кілттер, журналдар, фотоаппараттар, бейне ойнатқыштар және т.б. ретінде пайдаланылады.
Бүгінде біз барлығына қолжетімді үлкен ақпараттық кеңістікте өмір сүріп жатырмыз. Біз оның мүмкіндіктерін басқа адамдармен қарым-қатынас жасау, әлемде не болып жатқанын білу және сұрақтарымызға жауап іздеу үшін пайдаланамыз.
Жергілікті қолданбалар қолданбалардың ең көп таралған түрі болып табылады. Олар Android, Windows Phone және iOS сияқты операциялық жүйелерге арналған бағдарламалау тілдеріне негізделген. Осы қолданбалардың арқасында сіз GPS, бейнекамера немесе жеделдету сенсорларының мүмкіндіктерін толық пайдалана аласыз. Жергілікті қолданбалардың басты артықшылығы - Интернетке қосылуды қажет етпестен офлайн режимінде жұмыс істеу мүмкіндігі. Қолданбаның бұл түрі Play Market, AppStore және басқа қолданбалар дүкендері арқылы таратылады. Әртүрлі электронды кітапханалар да жергілікті қолданбалар бола алады.
Веб-қосымшалар мобильді құрылғыда жұмыс істеу үшін WEB технологиясын пайдаланады. Мұндай қосымшалардың негізгі және сөзсіз артықшылығы - барлық түрлер үшін бірыңғай платформа құру мүмкіндігі. Сондай-ақ, сайттың мобильді нұсқасы айтарлықтай артықшылыққа ие - кросс-платформа. Дегенмен, бұл қолданбалардың смартфондағы камераны немесе орын функциясын пайдалануға рұқсат бермейтінін және қолданбалар дүкенінен жүктеп алу мүмкін емес екенін ескеріңіз.
Android бағдарламалауы араластырусыз жұмыс істей алмайды. Олар біріктірілген жергілікті және веб-қосымшалар. Гибридті қосымшалардың негізгі артықшылықтары веб-технологиялардағы кросс-платформа және смартфонның немесе басқа мобильді құрылғының функцияларына қол жеткізу мүмкіндігі болып табылады. Гибридті iOS қолданбаларын жасау қолданбалардың басқа түрлерін әзірлеуге қарағанда әлдеқайда қымбат. Көптеген танымал әлеуметтік желілерде гибридті қосымшалар бар, оларды интернет-дүкеннен тегін жүктеп алуға болады.

1 Мобильді құрылғылар мен смартфондарға веб-сайттар құру

1.1 Мобильді құрылғыларға арналған веб-сайт дизайны

Adobe Muse-де жауап беретін веб-дизайнды қолдана отырып, мобильді веб-сайттар құруға болады. Жауапты орналасуда барлық құрылғыларға, соның ішінде мобильді құрылғыларға веб-сайттар құру үшін бір Muse файлын пайдалануға болады.
Сайт жасалынған шолғыш терезесінің енін анықтау керек. Содан кейін сіз сайтты құруды жалғастыра аласыз. Жауап беретін макеттерді қолдана отырып, мобильді веб-сайттар құру туралы қосымша ақпаратты жауап беретін веб-сайттар құру бетінен қараңыз.
Мобильді құрылғыларға балама макеттер жасау туралы білу үшін осы мақаланы оқып шығуды ұсынамыз.
Adobe Muse веб-материалдарды жұмыс үстелінде, смартфондарда және планшеттерде көрсету үшін веб-сайттардың макеттерін жасауға мүмкіндік береді. Мобильді құрылғыларға арналған веб-сайтты жобалау мүмкіндіктері телефондар мен планшеттер үшін де, жұмыс үстелі үшін де қосымша веб-сайт макеттерін жасауға мүмкіндік береді.
Adobe Muse-тің экран ені мен түзету режимі сияқты бірқатар параметрлері. төменгі деректеме қазіргі уақытта сатылатын әртүрлі құрылғылардың экрандарында қосымшада жасалған веб-беттерді оңтайлы визуализациялауды қамтамасыз етеді. Adobe Muse сізге әдеттегі жұмыс процестерін қолдана отырып, кез-келген мөлшердегі экрандарға қатысу әсерімен дизайн нұсқаларын жасауға мүмкіндік береді.
Мобильді құрылғыларға балама орналасу үшін келесі әрекеттерді орындаңыз.
1. Adobe Muse бағдарламасын ашып, Файл Жаңа сайт таңдаңыз.

Сурет 1.1. Adobe Muse бағдарламасының жаңа сайты
Мобильді веб-сайттар құру үшін "тұрақты ені" таңдаңыз.
2. "Тұрақты ені" тармағын таңдап, сол тілқатысу терезесіндегі "Қосымша параметрлер" түймесін басыңыз.
Жаңа сайт құру кезінде қосымша параметрлер.
3. Беттің максималды енін көрсетіңіз.
Мобильді құрылғыларға арналған шолғыштың енін анықтаңыз және мәнді енгізіңіз.
4. Мобильді веб-сайт үшін "өрістер" және "шегіністер" опцияларының мәндерін енгізіңіз. Келесі ақпаратты енгізіңіз.
* Беттің ені мен биіктігі: беттің бастапқы өлшемдерін орнатуға мүмкіндік береді. Muse автоматты түрде беттің биіктігін арттырады, өйткені оған мазмұн қосылады, сондықтан беттің максималды биіктігі орнатылмайды.
* Бағандар және олардың ені: бағандар Muse веб-бетін визуалды түрде тең бөліктерге бөледі, бұл дизайн элементтерін дәл туралауға мүмкіндік береді. Muse бағанның енін көрсетілген бағандар санына және медианалық мәнге сәйкес автоматты түрде орнатады.
* Өрістер мен шегіністер: өрістер -- бұл дизайн аймағынан тыс веб-беттің айналасындағы бос аймақ. Шегініс веб-бет дизайнының периметрі бойынша аймақты тазартуға мүмкіндік береді.
"ОК" түймесін басыңыз[1].
Сіз мобильді құрылғыларға арналған веб-сайттардың макеттерін жасауды бастай аласыз.

1.2 Қолданыстағы Adobe Muse веб-сайтына" Телефон " макетін қосу

Жаңа жобаны жасай отырып, бір орналасуды жасауға болады, содан кейін сол MUSE файлын қолдана отырып, сайттың балама орналасуын жасаңыз. Adobe Muse сайтына сайтты жариялау немесе экспорттау кезінде sitemap деп аталатын файл автоматты түрде жасалады.барлық орналасулар үшін барлық беттердің тізімін қамтитын xml. Sitemap файлы.xml сайттың басқа ресурстарымен бірге жүктеледі. Бұл іздеу жүйелерінде веб-сайтты оңтайландыруды жақсартуға мүмкіндік береді, іздеу жүйелеріне веб-сайтты индекстеуге көмектеседі, осылайша беттер іздеу нәтижелерінде дұрыс жіктеледі.
Жаңа "Телефон" макетін жасау үшін алдымен смартфон веб-сайтының нұсқасында қандай мазмұн элементтері көрсетілуі керек екенін анықтау керек. Смартфон қолданушылары көбінесе сайттарды жолда ашып, оларды кішкене экранда көретіндіктен, сайттың дизайнын жеңілдету және сенсорлық экранда өзара әрекеттесетін пайдалы мазмұнды көрсету өте маңызды.
1. Телефонның балама орналасуын қосу үшін бар Muse файлын ашыңыз.
2. Жобадағы әр бетті ашып, бет балама орналасуды қосу Телефон тармағын таңдаңыз.

Сурет 1.1. "Телефон" макеті

Мобильді веб-сайт жасау үшін "Телефон" макетін қосыңыз.
3. Мәзірді пайдаланып, оның көшірмесін жасау үшін бар орналасуды таңдауға болады. Біздің мысалда телефондардың орналасуын жасау үшін компьютердің орналасуын таңдаңыз.
Сайт жоспарын, бет атрибуттарын және шолғышты толтыруды көшіру мүмкіндігі бар екенін ескеріңіз. Қолданыстағы жұмыс үстелі веб-сайтының орналасу деректерін "Телефон"орналасуына көшіру үшін әдепкі параметрлерді өзгертпеңіз.
4. Тілқатысу терезесін жауып, Телефон орналасуын қосу үшін "ОК" түймесін басыңыз.
Muse қосымшасы "Телефон"орналасуы үшін сайт жоспарын жасайды. Онда көшірілген бет атаулары, сайт құрылымы және үлгі бет атрибуттары болады. Енді "Телефон" орналасу батырмасы атауының жанында плюс ( + ) белгішесі пайда болмайды, өйткені бұл орналасу Muse жобасына қосылды.
Беттің нақты мазмұны "Телефон"орналасуы үшін беттің нобайына қосылмағанына назар аударыңыз. Бұл сізге мобильді құрылғыларға арналған орналасудың әр бетіне орналастырылуы керек мазмұнды ғана көшіруге мүмкіндік береді. Қажетті мазмұнды парақтарға ауыстырған кезде оның өлшемін мобильді құрылғының кішкене экранына сәйкес болатындай етіп өзгертуге болады[2].
Басты бет нобайының оң жағындағы қосу белгішесін (+) басу арқылы жаңа беттерді қосуға болады. Сайт картасын орнатқаннан кейін мобильді шешімнің дизайнын бастауға болады.
"Телефон" орналасуы үшін үлгі беттерін орнату туралы ақпаратты келесі бөлімнен қараңыз.

Сурет 1.2. Сайт картасы

Жаңа беттерді қосу арқылы "Телефон" орналасуы үшін сайт картасын жасаңыз.

1.3 Үлгі бетін орнату және ортақ веб-бет элементтерін қосу

1. "Жоспар" қарау режимінде a телефондары үшін "үлгі-а" бетін екі рет басыңыз; бет дизайнды қарау режимінде ашылады.
2. Фондық суретті орнату үшін браузерде толтыру интерфейсін ашыңыз.
3. "Сурет" бөлімінде суреттерді қосу түймесін басыңыз. Фондық сурет ретінде орнатқыңыз келетін файлға өтіп, оны таңдаңыз. Бетке фондық суретті қосыңыз

Сурет 1.3. "Телефон" орналасу үлгісі.

4. Сәйкестік ашылмалы тізімінен "толтыру" тармағын таңдап, орталық позицияны басыңыз.
5. Бетті жабу үшін беттің сыртында немесе Басқару тақтасындағы кез-келген жерде сұр аймақты нұқыңыз толтыру шолғышта[3].

1.4 Сайтты жылжыту үшін еренсілтемелерді қосу

Adobe Muse қосымшасындағы еренсілтеме функциясы сыртқы беттерге, жүктелетін файлдарға, сол беттегі бөлімдерге және басқа нысандарға оңай сілтеме жасауды қамтамасыз етеді. Веб-сайт бойынша жылжуды дұрыс орнату келушілер үшін оның беттерін қараудың ыңғайлылығын қамтамасыз етеді. Сонымен қатар, сайтты ұтымды ұйымдастыру іздеу жүйелері үшін веб-сайтты оңтайландыруды жеңілдетеді. Қосымша ақпарат алу үшін еренсілтемелерді жасау бөлімін қараңыз.
Еренсілтемелер ашылмалы тізімінде сайт картасына қосылған беттер немесе сілтеме сілтемелері көрсетілген. Тиісті сілтемелерді табу үшін беттің немесе якорьдің атын теруді бастаңыз. "Еренсілтемелер" мәзіріне бірнеше алғашқы әріптерді енгізген кезде осы әріптер бойынша сүзу қолданылады, оның нәтижесі ашылмалы тізімде көрсетіледі. Бұл тез жаңартылуы керек сілтемелерге қол жеткізуді жеңілдетеді[4].

Сурет 1.4. "Еренсілтемелер" мәзірі

Сілтемелер мәзірінің мәтін жолағына алғашқы бірнеше әріптерді енгізу арқылы тізімдегі сілтемелерді сүзу.
"Телефон" үлгісінің беттеріне мазмұн қосу
Басты беттің соңғы дизайнынан бастайық.
1. Ішкі бет (телефон) қойындысына өтіңіз. Төрт батырмадан тұратын топты көшіріңіз.
2. Бетке өту құралы арқылы басты бетке (телефон) өтіп, көшірілген нысандар тобын қойыңыз. Алдыңғы бөлімде қосылған сілтемелер сақталады, сондықтан қазір басты бетте және ішкі үлгі бетінде сайтты шарлау кезінде бірдей элементтер қолданылады.
3. Таңдау элементінің көмегімен батырмаларды басты беттің ортасына төменгі колонтитулдың жанына қойыңыз.
4. Жоба бетіне өту үшін жоба қойындысын (компьютер) нұқыңыз. Сақталатын мәтіндік жақтауды "There' s more than one way to solve a problem" саласындағы сол жақта.
5. Басты бет (телефон) қойындысына өтіп, көшірілген мәтінді қойыңыз. Таңдау құралын пайдаланып, мәтіндік жақтауды беттің ортасына шарлау түймелерінің үстіне қойыңыз.

Сурет 1.5. Дайын басты беттің дизайны.

Содан кейін Section 01 бетіне мазмұн қосыңыз[5].
1. Жоба бетіне өту үшін жоба қойындысын (компьютер) нұқыңыз. Фон ретінде пайдаланылатын дөңгелек жиектері бар ақ тіктөртбұрышты және сол жақтағы екінші аймақта орналасқан үш мәтіндік жақтауды таңдаңыз. Осы үш мәтіндік жақтауларға осы бөлім үшін мәтінді алмастыратын 01 нөмірлі шеңбер және қызғылт сары телефон түймесі кіреді. Таңдалған элементтерді көшіріңіз.
2. Пәрмен+J (Mac) немесе Басқару+J (Windows) пернелерін басып, бөлім атауының алғашқы бірнеше әріптерін енгізіңіз бөлім 01. Section 01 бетін таңдау үшін төмен көрсеткі түймесін басыңыз, содан кейін оны дизайн көрінісінде ашу үшін Enter немесе Return пернесін басыңыз.
3. Көшірілген элементтерді "Телефон" орналасуының Section 01 бетіне қойыңыз. Таңдау құралын пайдаланып, оларды біраз уақытқа көрсетілетін бағыттағыштармен беттің ортасына туралаңыз.
Section 01 бетінде компания туралы қысқаша ақпарат, сондай-ақ мобильді құрылғыларды пайдаланушылар компанияға оңай қоңырау шала алатын элемент болады. Мобильді құрылғыларға арналған веб-сайттарды жасау кезінде сілтеменің жаңа түрін қосуға болады, оның көмегімен келушілер смартфон экранына тиіп, теру терезесін шақыра алады. Бұл сайттың мобильді нұсқасын әдеттегіден ерекшелендіреді, өйткені әлеуетті клиенттер компанияға телефон арқылы хабарласа алады[6].
Телефон нөмірін теру сілтемесін "Телефон" орналасуына қосу үшін төмендегі әрекеттерді орындаңыз.
1. Таңдау құралын пайдаланып Телефон түймесін таңдаңыз.
2. Сілтемелер мәзірінің мәтін жолағына "tel:+1" енгізіп, келесі мәтінді енгізіңіз:
tel:+14155551234
Бұл мобильді браузерлер телефон нөміріне сілтеме ретінде танылатын формат.
3. Сілтемені сақтау үшін Return немесе Enter пернесін басыңыз.
Ескерту. Егер сіз электрондық пошта мекен-жайына сілтеме жасағыңыз келсе, сілтеме мәзірінің мәтін жолағына келесі мәтінді енгізіңіз:
mailto:designers@design-is-fun.com
Түймеге сілтеме қосқаннан кейін телефон бет дизайны Section 01 аяқталды деп санауға болады.
1. Жоба бетіне өту үшін жоба қойындысын (компьютер) нұқыңыз. Фон ретінде пайдаланылатын дөңгелек жиектері бар ақ тіктөртбұрышты, 02 нөмірі бар жасыл шеңберді, 02 бөлім мәтіндік жақтауын, кірістірілген картаны және Жасыл карта түймесін таңдаңыз. Таңдалған элементтерді көшіріңіз.
2. Пәрмен+J (Mac) немесе Басқару+J (Windows) пернелерін басып, Section 02 бет атауының алғашқы бірнеше әріптерін енгізіңіз. Section 02 бетін таңдау үшін төмен көрсеткі түймесін басыңыз, содан кейін оны дизайн көрінісінде ашу үшін Enter немесе Return пернесін басыңыз.
3. 1-әрекетте көшірілген элементтерді "Телефон" орналасуының Section 02 бетіне қойыңыз. Таңдау құралын пайдаланып, оларды парақтың ортасына бағыттағыштармен туралаңыз.
Section 02 бетінде Google Maps веб-сайты жасаған интерактивті картаның HTML коды бар.
"Muse-мен жұмысты бастау" нұсқаулығында Google картасының веб-сайтынан бастапқы кодты көшіру және оны параққа қою үшін ендірілген HTML элементтерімен жұмыс істеу үшін Muse функциясын қолдану процесі егжей-тегжейлі қарастырылады.
Бақытымызға орай, Google картасының коды сенсорлық экранда саусақтардың қимылын тануды қолдауды қамтиды, сондықтан сайтқа кірушілер картамен оңай байланыса алады. Жобаның бұл мысалында карта өлшемі өзгертілген.
Алайда, ендірілген HTML мазмұнының өлшемін өзгерту қажет болса, тиісті терезеде HTML кодын көру үшін тінтуірдің оң жақ түймесімен және пәрменмен осындай мазмұнды басуға болады. Картаның өлшемдерін құрылғының кішкентай экранының өлшемдеріне сәйкес өзгерту үшін кодтағы биіктік пен ен мәндерін өзгертуге болады.

Сурет 1.6. Өлшемдерді енгізу

Егер ендірілген HTML элементтерінің өлшемдерін өзгерту қажет болса, кодтағы тиісті мәндерді жаңартуға болады[7].
Егер сіз HTML өңдеу терезесін ашсаңыз, оны өзгертпестен жабу үшін "ОК" түймесін басыңыз.
4. Карта түймесін таңдаңыз.
Бұл жолы біз басқа веб-сайтқа (Google Карталары) сілтеме қосамыз, осылайша сайттың мобильді нұсқасына кірушілер жаңа шолғыш терезесінде картаның толық нұсқасын көре алады.
5. Төмендегі сілтемені көшіріп, сілтеме мәзірінің мәтін жолағына қойыңыз.
https:maps.google.commaps?q=adob e+systems,+san+francisco&hl=en&sll= 37.269174,-119.306607&sspn=17.49254 6,19.160156&hq=adobe+systems,&hnear =San+Francisco,+California&t=m&z=14
6. Сілтеме мәзірінің сол жағындағы "сілтемелер" сөзін басыңыз. Ашылған тілқатысу терезесінде сілтемені жаңа терезеде немесе жаңа қойындыда ашу құсбелгісін қойыңыз. Сонымен қатар, кеңес өрісіне келесі мәтінді енгізіңіз: Adobe Fremont-қа Map.

Сурет 1.8. Жаңа шолғыш терезесінде ашылатын сілтемені орнату және кеңестер қосу

7. Сілтеме тілқатысу терезесін жабу үшін жұмыс ортасының кез келген жерін нұқыңыз.
Содан кейін Section 03 бетіне мазмұн қосыңыз.
1. Жоба бетіне өту үшін жоба қойындысын (компьютер) нұқыңыз. Фон ретінде пайдаланылатын дөңгелек жиектері бар ақ тіктөртбұрышты, 03 нөмірі бар күлгін шеңберді, 03 бөлім мәтіндік жақтауын, байланыс ақпаратын және жіберу түймесін таңдаңыз. Таңдалған элементтерді көшіріңіз.
2. Пәрмен+J (Mac) немесе басқару+J (Windows) пернелерін басып, бөлім атауының алғашқы бірнеше әріптерін енгізіңіз бөлім 03. Section 03 бетін таңдау үшін төмен көрсеткі түймесін басыңыз, содан кейін оны дизайн көрінісінде ашу үшін Enter немесе Return пернесін басыңыз.
3. 1-әрекетте көшірілген элементтерді "Телефон" орналасуының Section 03 бетіне қойыңыз. Таңдау құралын пайдаланып, оларды парақтың ортасына бағыттағыштармен туралаңыз. Байланыс ақпараты пішінінің виджетін "Телефон" макетіне көшіргенде, ол үшін "Компьютер"макетінде қолданылған стильдер сақталады. Мобильді құрылғыларға арналған веб-сайттың орналасуына арналған форманың соңғы дизайны үшін жасалатын жалғыз нәрсе-пішіннің өлшемін және оның элементтерін құрылғының кішкентай экранының өлшемдеріне сәйкес өзгерту.
Section 03 бетінде серверлік сценарийлер мен Business Catalyst деректер базасын пайдаланатын деректерді өңдеу үшін байланыс ақпараты формасының виджеті бар. Muse бағдарламасынан сайт файлдарын жариялау және жіберу түймесін басқан кезде бұл форма автоматты түрде жұмыс істейді[8].
Ескерту. Muse-де құрылған дайын веб-сайтты орналастыру үшін сіз кез-келген басқа жеткізушінің қызметтерін пайдалана аласыз, бірақ Business Catalyst-тен басқа серверлер пайдаланылса, байланыс ақпаратының нысаны жұмыс істеуі үшін қосымша код фрагменттерін пайдалану қажет екенін есте ұстаған жөн.
Жұмыстың бұл мысалында байланыс ақпаратының нысаны CAPTCHA сұрауын қамтымайды. CAPTCHA сұрауын қосу мәзірде Байланыс ақпараты пішінінің виджеті үшін параметрлерді көрсетуге болады. Бұл сұрау Робот бағдарламаларынан қорғау үшін қолданылады. CAPTCHA бөлімінде пайдаланушы толтырылған байланыс ақпаратын жіберу үшін тиісті жолға енгізуі керек таңбалар жиынтығы бар сурет көрсетіледі. Бұл сұраныс Робот бағдарламаларынан қорғануға мүмкіндік беретініне қарамастан, мобильді құрылғыларды пайдаланушылар үшін сайтпен жұмыс істеудің ыңғайлылығы туралы ұмытпау керек. Егер байланыс ақпаратының нысанын толтыру өте қиын болса, келушілер өз хабарламаларын жібермеу туралы шешім қабылдауы мүмкін.
Бұл жерде Section 03 бетін құру аяқталды. Жіберу батырмасы сілтеме жасаудың қажеті жоқ, өйткені ол Байланыс ақпараты формасының виджетінде орнатылған[9].
"Телефон" орналасуының соңғы беті, 04 бөлім беті слайд-шоу виджетін қамтиды. Muse-дегі виджеттер жұмыс үстеліндегі және мобильді құрылғылардағы барлық заманауи шолғыштармен үйлесімді, сондықтан слайд-шоудың сенсорлық экранда жұмыс істеуі үшін ешқандай өзгертулер енгізудің қажеті жоқ.
Жоба бетінің мазмұнын жұмыс үстелінің орналасуынан телефон орналасуындағы 04 бөлім бетіне жылжыту үшін келесі әрекеттерді орындаңыз.
1.Жоба бетіне өту үшін жоба қойындысын (компьютер) нұқыңыз. Фон ретінде пайдалану үшін дөңгелек жиектері бар ақ тіктөртбұрышты, 04 нөмірлі қызыл шеңберді, слайд-шоу виджетін және 04 бөлімнің мәтіндік жақтауын таңдаңыз. Барлық элементтерді бірден таңдау үшін таңдау құралын пайдалануға болады. Таңдалған элементтерді көшіріңіз.
2. Пәрмен +J (Mac) немесе басқару +J (Windows) түймесін басып, бөлім атауының алғашқы бірнеше әріптерін 04-бөлімге енгізіңіз. 04 бөлім бетін таңдау үшін төмен көрсеткіні нұқыңыз, содан кейін оны Конструктор режимінде ашу үшін Enter немесе Return түймесін басыңыз.
3. in әрекет 1. көшірілген элементтерді "телефон" орналасуының 03-бөлімінің бетіне қойыңыз. Оларды парақтың ортасындағы бағыттағыштарға туралау үшін бөлектеу құралын пайдаланыңыз. Байланыс ақпараты формасының виджетін "телефон" орналасуына көшірген кезде, "компьютер" орналасуында қолданылатын стильдер сақталады. Ұялы телефондарға арналған веб-сайттың макеті үшін форманың түпкілікті дизайны үшін жасай алатын жалғыз нәрсе - пішіннің өлшемін және оның элементтерін құрылғының кішкентай экранының өлшеміне сәйкес өзгерту. Интерактивті мүмкіндіктері бар виджеттерді (мысалы, слайд-шоу виджеті) Muse-де жасалған мобильді макеттерге қосқан кезде, олар үшін Параметрлер мәзірінде жылжуға рұқсат беру мүмкіндігі бар екенін көруге болады. Бұл опция әдепкі бойынша орнатылады, сондықтан мобильді құрылғының орналасуына қосылған кез-келген виджеттер сенсорлық экрандағы саусақ пен қимылды тануға автоматты түрде бейімделеді. 04-бөлімнің бетінде слайд-шоу виджеті бар, ол нобайды басқан кезде сәйкес суретті көрсетуге қызмет етеді. Слайд-шоу галереядағы суреттерді өзгерткен кезде көлденең өтулерді қолданады. Бұл мысалда пайдаланушылар фотосуреттерді көру үшін виджетпен өзара әрекеттесуі керек, алайда қаласаңыз, бетті жүктеген кезде суреттерді автоматты түрде ойнату үшін слайд-шоу виджетін теңшей аласыз[10].
Ескерту. Go виджетінде көлденең немесе тік қолданған кезде, код автоматты түрде саусақпен қозғалысты тану функциясын қосады, осылайша сайтқа кірушілер сенсорлық экрандағы слайд-шоу суреттерін айналдыра алады.
Келесі бөлімде мобильді құрылғыларға арналған сайт дизайнын әзірлеу Muse-де барлық мобильді платформалар үшін ресурстарды жаңарту процесі, сондай-ақ мобильді құрылғылардың әр орналасуын қолдана отырып, Muse-де құрылған сайтты жариялау тәртібі қарастырылады.

2 Мобильді веб-сайт ресурстарын оңтайландыру және жаңарту

2.1 Макет үшін мобильді құрылғыларға байланысты қосымша функциялары

Смартфондар мен планшеттер қуаттан едәуір артта қалады. 2 есептеу үстелі, жад көлемі және қосылу жылдамдығы. Сонымен, бұл сәттерді ескеру керек және оны мобильді құрылғыларда жасау керек.
Бағдарламалық жасақтаманың шабыттандыратын функциясы оңтайландырылған мобильді құрылғы фильмдерді ыңғайлы және жылдам көруге мүмкіндік береді.
Пәрмен Басқару + 7 пернесін басып, компьютердің орналасуын сипаттаңыз, содан кейін екі рет басыңыз файл орналасуы-бет үлгісін ашу үшін компьютерге файл қосыңыз.
Бұл ресурстарды басқару құралдар тақтасында орналасқан. Ол таңдау сіз терезесін жабу болса.
Жасыл түсті таңдаңыз және үлкен фон үлгісін алыңыз. Панель үшін таңдалған ресурстарды таңдаңыз.
Мұнда ресурс атауы бойынша басыңыз (background.jpg), неге сайттар тізімі кеңейтілді? Бұл суретте фондық файлдың тізімі үш рет көрсетілгеніне назар аударыңыз. Сонымен қатар, ол түсініктеме береді екі себепке байланысты ол "Телефон", "Компьютер"және т.б. макетін қолданатын суреттерді көреді.

Сурет 2.1. Фондық файлдың тізімі

Бұл мысалда шағын сайтты құру үшін пайдалану оңай, бірақ үлкен жобаларды құру кезінде бұл тізім өте көлемді және іздеу қиын болуы мүмкін[11].
Ресурстар тізіміне өтуді жеңілдету үшін әр ресурстың бірінші данасын таңдап, даналар тізімін кішірейту үшін сол жақтағы көрсеткі белгішесін нұқыңыз. Веб-сайт жобасында қолданылатын ресурс даналарының толық тізімін кеңейту үшін көрсеткі белгішесін тағы бір рет басыңыз.
Егер белгілі бір орналасу үшін пайдаланылатын ресурстарды табу қажет болса, ресурстар тақтасының оң жағында компьютер, телефон немесе планшет белгішелері көрсетілген баған тақырыбын нұқыңыз. Бұл ресурстар тізімін сұрыптауға мүмкіндік береді, осылайша әр орналасу үшін ресурстар біріктірілген жиынтықта көрсетіледі.

Сурет 2.2. Ресурстар тізімін сұрыптау

Графикалық нысанды өзгерту және оның барлық даналарын жаңарту үшін (барлық орналасуларда) ресурстың атын тінтуірдің оң жақ түймесімен басып, пайда болған контекстік мәзірден"түпнұсқаны Өңдеу" пәрменін таңдаңыз[12].

Сурет 2.3. Өңдеу" пәрмені

Бүкіл сайттың ресурсын жаңарту үшін "түпнұсқаны Өңдеу" пәрменін таңдаңыз.
Орналастырылған бастапқы файл Photoshop, Fireworks қосымшасында немесе ол жасалған суретті өңдеу бағдарламасында ашылады, содан кейін кескінге қажетті өзгерістерді тез енгізуге болады.
Өзгертілген бастапқы файлды сақтағаннан кейін және Muse қосымшасына оралғаннан кейін, осы элементтің жанында "ресурстар" тақтасында сәйкес келмейтін белгіше пайда болады, бұл сайттағы графикалық нысанның нұсқасы енді бастапқы файлға сәйкес келмейді. Файлды тінтуірдің оң жақ түймесімен қайтадан нұқыңыз және пайда болған контекстік мәзірден осы графикалық нысанның барлық даналарын жаңа нұсқаға сәйкес жаңарту үшін "ресурсты жаңарту" пәрменін таңдаңыз[13].

Сурет 2.4. "Ресурсты жаңарту" пәрмені

2.2 Мобильді құрылғыларға арналған макеттерді пайдалана отырып, сайтты жариялау

Muse қосымшасында жұмыс үстелі сайттарын жариялаудың әдеттегі әдісін қолдана отырып, бірнеше орналасуды қолдана отырып, веб-сайттарды жариялауға болады. Алдымен сайттың сынақ нұсқасын жариялау, содан кейін оның мазмұны мобильді құрылғылардың шағын экрандарында қалай көрсетілетінін тексеру ұсынылады.
Сайт файлдарын орналастыру серверіне беру үшін жариялау түймесін басыңыз немесе Файл FTP серверіне жіберу тармағын таңдаңыз.
Muse сайтын бірнеше орналасулармен жариялау кезінде оған қол жеткізу үшін бір URL қолданылады. Сондықтан домен атауын тіркеу қажет, мысалы, төменде көрсетілгендей:
http:www.my-site.com
Екі немесе үш түрлі орналасуы бар веб-сайтты жариялау кезінде Muse қосымшасы анықтау сценарийлерін қамтитын веб-сайт үшін код жасайды. Олар компьютердің немесе құрылғының түрін, сондай-ақ келуші бетті қарау үшін пайдаланатын шолғыш түрін анықтауға қызмет етеді.
Бұл код платформаны және шолғыштың нұсқасын анықтайды, содан кейін тиісті орналасуды автоматты түрде көрсетеді. Сізге ешқандай әрекет жасаудың қажеті жоқ, өйткені планшеттерді қолданатын келушілер планшеттерге арналған веб-сайттың орналасуын, ал смартфон қолданушылары үшін телефондардың орналасуын көрсетеді. Мұның бәрі автоматты түрде фонда болады.
Muse қосымшасында мобильді макеттерді құрудың жаңа мүмкіндіктері мобильді пайдаланушылар қажет емес үлкен файлдарды жүктемеуі үшін осы орналасуларды оңтайландыруға мүмкіндік береді. Балама орналасуларды көрсету үшін тек өзгертілген өлшемдегі кішкентай кескін файлдары жүктеледі, соның арқасында сайт кез-келген платформада және кез-келген шолғышта керемет ашылады.
Muse қосымшасымен жұмыс істеу туралы қосымша ақпаратты Adobe Muse анықтамалық ақпарат бетіндегі мақалалар мен нұсқаулықтардан қараңыз.
Сайт мазмұнын бір орналасудан екіншісіне көшіру үшін "бетке өту" құралын пайдалану.
Дизайн көрінісінде "Компьютер" орналасу үлгісі бетін ашу үшін үлгі қойындысын (компьютер) басыңыз.

Muse қосымшасында сіз бетке өту үшін шарлау құралын пайдаланып бір орналасудан екіншісіне оңай ауыса аласыз. Бұл батырма бірнеше орналасуы бар кез-келген жоба үшін дизайн көрінісінде көрсетіледі[14].

3 Stack Overflow мобильді қосымша сы

3.1 Stack Overflow сайтының мүмкіндіктері

Stack Overflow - көптеген бағдарламашылар кәсіби сұрақтар қойып, әріптестерінен жауап алатын сүйікті сайт.
Бұл жобаны бұрын ешкім білмейтін екі белгісіз жігіт жазған. Stack Overflow блогерлері мен жұлдыздары Джефф Атвуд пен Джоэл Спольски. Осы тұрғыдан алғанда, Stack Overflow атақты мейрамханаға ұқсайды. Джоэлдің айтуынша, бұл интернет-ресурсты бүкіл әлем бойынша бағдарламашылардың 13 бөлігі пайдаланады, сондықтан онда пайдалы және қызықты нәрсе болуы керек.
Stack Overflow -- 2008 жылы Джефф Атвуд пен Джоэл Спольский жасаған жеке меншік веб-сайт, стек алмасу желісінің флагмандық сайты. Бұл компьютерлік бағдарламалау тақырыптарының, сұрақтар мен жауаптардың кең ауқымы бар веб-сайт немесе қолданба. Ол Expert-Exchange сияқты Q&A сайттарына ашық балама ретінде жасалған.
Пайдаланушылар өздеріне ұнаған жауаптарға дауыс бере алады және ұнамаған жауаптарға дауыс бере алады. Сонымен қатар, сұрақ қойған пайдаланушы ресми жауап ретінде бір жауапты ала алады.
Тегтер тапсырмаларды ұйымдастыру үшін қолданылады. Пайдаланушылар кем дегенде бір тегті мақұлдау керек және сұрақ қойған кезде бес тегке дейін тіркеле алады. Сұрақтар мен жауаптарды өңдеу пайдаланушыларға олардың сапасын жақсартуға және сұрақтар мен жауаптарды вики тәрізді құрылымдарға айналдыруға мүмкіндік береді. StackOverflow мобильді қосымшасы сайттың функцияларын толығымен қайталайды, пайдаланушыға дауыс беруге, түсініктеме беруге және жаңа сұрақтарды жариялауға мүмкіндік береді. Мақала жарияланған уақытта iOS қызметінің iOS нұсқасымен жұмыс аяқталды, ал Android қолданбасы бета-тестілеуде және интерфейс жаңартуларын күтуде.
Сұрақтың түрі жақсы жауаптың жалғыз факторы емес. Басқа факторлар: қарастырылып отырған технология, пайдаланушының жеке басы, сұрақтың уақыты мен күні, код үзіндісі немесе сұрақтың ұзақтығы? Болашақ зерттеулерде біз осы факторларды зерттеуді жалғастырамыз.
Кез келген зерттеу әдісі сияқты, әдістерді таңдауда шектеулер бар. Бірінші ... жалғасы

Сіз бұл жұмысты біздің қосымшамыз арқылы толығымен тегін көре аласыз.