-
Notifications
You must be signed in to change notification settings - Fork 0
/
technologie.html
320 lines (310 loc) · 18 KB
/
technologie.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
<!DOCTYPE html>
<html lang="cs" class="subpage">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Technologie pro vývoj hybridních aplikací | hybridniaplikace.cz</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="shortcut icon" href="img/favicon.ico" />
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500" rel="stylesheet">
<meta name="description" content="Používáme speciální technologie (Apache Cordova a jeho nástroje) pro rychlý vývoj . Hybridní aplikace děláme kvalitně a včas.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="font/font-awesome/css/font-awesome.min.css">
<!-- Google Tag Manager -->
<script>
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-NP4CWL3');
</script>
<!-- End Google Tag Manager -->
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript>
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NP4CWL3"
height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<!-- End Google Tag Manager (noscript) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="js/script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<div class="container-fluid">
<a href="#scroll" class="arrow-link"><div id="arrow" class="arrow animated bounce ico-shadow center-block"></div></a>
<a href="https://www.iquest.cz/"><img src="img/iquest.png" style="width: 277px; height: 80px;" class="img-responsive logo" loading="lazy"></a>
<div class="navigation">
<ul class="navbar">
<li><a href="https://www.hybridniaplikace.cz/" class="nav home small"><i class="fa fa-lg fa-home home-icon"></i></a></li>
<li><a href="technologie.html" class="nav-item"><span class="text">Technologie</span></i></a></li>
<li><a href="vyhody.html" class="nav-item"><span class="text">Výhody</span></a></li>
<li><a href="srovnani.html" class="nav-item"><span class="text">Srovnání<br />aplikací</span></a></li>
<li><a href="budoucnost.html" class="nav-item"><span class="text">Budoucnost</span></a></li>
</ul>
</div>
<div class="row part-1">
<div class="circles" style="top: 0px;">
<div data-aos="zoom-in" class="circle index1 yellow"></div>
<div data-aos="zoom-in" class="circle index2 yellow"></div>
<div data-aos="zoom-in" class="circle index3 yellow"></div>
<div data-aos="zoom-in" class="circle index1 orange"></div>
<div data-aos="zoom-in" class="circle index2 orange"></div>
<div data-aos="zoom-in" class="circle index3 orange"></div>
<div data-aos="zoom-in" class="circle index1 blue"></div>
<div data-aos="zoom-in" class="circle index2 blue"></div>
<div data-aos="zoom-in" class="circle index3 blue"></div>
<div data-aos="zoom-in" class="circle index1 green"></div>
<div data-aos="zoom-in" class="circle index2 green"></div>
<div data-aos="zoom-in" class="circle index3 green"></div>
</div>
<div class="col-md-offset-2 col-md-8 col-xs-12" data-aos="fade-up">
<!--<div class="row"><div class="col-xs-12"><div class="ico-shadow center-block"><img src="img/zarovka.png" class="img-responsive center-block"></div></div></div>-->
<div class="row"><div class="col-xs-12"><h2 class="subtitle-1">Hybridní mobilní aplikace</h2></div></div>
<div class="row"><div class="col-xs-12"><h1 class="title-1"><strong>Technologie pro vývoj</strong></h1></div></div>
</div>
</div>
<div class="row padding anotation" data-aos="fade-up">
<div class="col-md-offset-2 col-md-8 col-md-10">
<p>Ještě před několika lety nebyl vývoj <a href="https://www.iquest.cz/podnikove-mobilni-aplikace/">mobilních aplikací</a> prostřednictvím JavaScriptu nic jiného než zvláštní experiment. Myšlenka, že by se mohly vytvářet aplikace pro iOS a Android, aniž by se muselo pracovat s Java a Objective C, se zdála být pro mnoho <a href="https://www.iquest.cz/">vývojářů</a> atraktivní. Nyní existuje spousta frameworků, které nás přinášejí blíže než kdy jindy k vytvoření mobilních aplikací s použitím pouze webových technologií.</p>
<p class="text-left">Rozebereme tu nejlepší a nejpopulárnější frameworky pro vývoj hybridních mobilních aplikací. Některé frameworky, popsáné v tomto článku, jsou součástí platformy <a href="https://www.iquest.cz/technologie/cordova">Apache Cordova</a>.</p>
</div>
</div>
<div class="row padding text-center white-background">
<div class="col-md-offset-2 col-md-8 col-xs-12" data-aos="fade-up">
<h2 id="scroll">Ember JS</h2>
<div class="row">
<div class="col-md-offset-2 col-md-8 col-md-12">
<img src="img/emberjs.jpg" alt="ilustracni obrazek" class="illustration" loading="lazy">
</div>
</div>
<p class="text-left"><a href="https://www.iquest.cz/technologie/emberjs/">EmberJS</a> je přední javascriptový framework pro tvorbu stále více populárnějších aplikací. Díky přenesení logiky na klientskou část (webový prohlížeč) se stává aplikace rychlejší, uživatelsky přívětivější a méně zatěžuje server. Ember JS je populární nejen u desktopových aplikací, ale i mobilních, napříč všemi předními platformami (Android, iOS, Windows).</p>
</div>
</div>
<div class="row padding text-center gray-background">
<div class="col-md-offset-2 col-md-8 col-xs-12" data-aos="fade-up">
<h2>Angular JS</h2>
<div class="row">
<div class="col-md-offset-2 col-md-8 col-md-12">
<img src="img/angularLogo.png" alt="ilustracni obrazek" class="illustration" loading="lazy">
</div>
</div>
<p class="text-left">AngularJS přidává šarm vývoji nativních aplikací již dlouho. Zaměřuje se na tvorbu single-page aplikací tvořených HTML kódem, do kterého jsou vloženy speciální formátovací značky, které určují, jaká data či operace se kam se vloží. AngularJS 2.0 je rozšířená verze zahrnující Model View Model (MVVM) a architekturu Model View Controller (MVC), což vede k vytvoření bohaté mobilní aplikace.</p>
</div>
</div>
<div class="row padding text-center white-background">
<div class="col-md-offset-2 col-md-8 col-xs-12" data-aos="fade-up">
<h2>React Native</h2>
<div class="row">
<div class="col-md-offset-2 col-md-8 col-md-12">
<img src="img/l_react-native-logo.png" alt="ilustracni obrazek" class="illustration" loading="lazy">
</div>
</div>
<p class="text-left">Hlavním účelem tohoto frameworku je vytvořit nativní aplikaci místo hybridní aplikace, která běží ve web view. Vývoj je však stále zcela realizován pomocí React a JavaScript. Tento framework není přizpůsoben pro začínající <a href="https://www.iquest.cz/">vývojáře</a>, ale jeho obrovská komunita pomůže začátečníkům ve vývoji. Poslední verze tohoto frameworku má také podporu pro Android, takže s jeho pomocí můžete vytvořit opravdovou multiplatformní aplikaci. React Native používá stejné základní stavební UI bloky jako běžné aplikace iOS a Android.</p>
</div>
</div>
<div class="row padding text-center gray-background">
<div class="col-md-offset-2 col-md-8 col-xs-12" data-aos="fade-up">
<h2>Phonegap</h2>
<div class="row">
<div class="col-md-offset-2 col-md-8 col-md-12">
<img src="img/phonegap-logo.png" alt="ilustracni obrazek" class="illustration" loading="lazy">
</div>
</div>
<p class="text-left">Zde se jedná zejména o framework pro balení a zveřejnění <a href="https://www.iquest.cz/webove-aplikace-na-miru/">aplikace</a>. PhoneGap je založen na open source platformě Cordova. Jedná se o komerční verzi, kterou vlastní Adobe. Pro práci s PhoneGap je možné použít jakýkoliv JavaScript nebo UI framework. Jakmile končí kódování, PhoneGap načítá kód a obalí ho podle plánované platformy pro publikování. Aplikace vytvořené pomocí PhoneGap používají pro zobrazení obsahu webový pohled. Má minimální množinu webových API pro přístup k hardwaru telefonu.</p>
</div>
</div>
<div class="row padding text-center white-background">
<div class="col-md-offset-2 col-md-8 col-xs-12" data-aos="fade-up">
<h2>IONIC</h2>
<div class="row">
<div class="col-md-offset-2 col-md-8 col-md-12">
<img src="img/Ionic_Logo.png" alt="ilustracni obrazek" class="illustration" loading="lazy">
</div>
</div>
<p class="text-left">IONIC je jedním z nejslibnějších HTML5 frameworků pro vývoj mobilních aplikací. Používá framework JavaScript MVVM, AngularJS pro poskytování struktury aplikace, zatímco IONIC se zaměřuje hlavně na vzhled a uživatelské rozhraní vaší aplikace. Pokud jde o uživatelské rozhraní, zde ukazuje IONIC svůj potenciál, který je v jeho jednoduchosti a rychlosti. </p>
</div>
</div>
<div class="row padding text-center gray-background">
<div class="col-md-offset-2 col-md-8 col-xs-12" data-aos="fade-up">
<h2>Framework 7</h2>
<div class="row">
<div class="col-md-offset-2 col-md-8 col-md-12">
<img src="img/framework7.png" alt="ilustracni obrazek" class="illustration" loading="lazy">
</div>
</div>
<p class="text-left">Jednou z nejlepších vlastností tohoto frameworku je to, že nemá žádné vnější závislosti jako React nebo Angular. Použitím tohoto frameworku se aplikace chová a vypadá jako nativní, má poutavé animace a náležitě stylizované komponenty. Každý <a href="https://www.iquest.cz/">vývojář</a>, který má znalosti o CSS, HTML a JavaScript, může snadno vytvářet aplikace bez psání spletitého kódu. Tento framework neobsahuje žádný nástroj pro balení nebo emulaci aplikací, proto je nutné jej kombinovat s PhoneGap nebo Cordova.</p>
</div>
</div>
<div class="row padding text-center white-background">
<div class="col-md-offset-2 col-md-8 col-xs-12" data-aos="fade-up">
<h2>Xamarin</h2>
<div class="row">
<div class="col-md-offset-2 col-md-8 col-md-12">
<img src="img/xamarin-logo.png" alt="ilustracni obrazek" class="illustration" loading="lazy">
</div>
</div>
<p class="text-left">Xamarin je nejvyspělejší hybridní vývojový framework pro mobilní aplikace. Používá programovací jazyk C#, který je možné poté kompilovat do nativních aplikací různých platforem. S Xamarinem mohou vývojáři používat na každé platformě oblíbené knihovny přenosných tříd jako SQLite, Json.NET nebo Reactive UI. Xamarin Component Store poskytuje přístup k vysoce kvalitním komponentům, které mohou být přidány přímo do aplikace z IDE. Tyto komponenty zahrnují řadu ovládacích prvků, API webových služeb a další. Také umožňují integraci s populárními backendovými řešeními, jako je například Salesforce.</p>
</div>
</div>
<div class="row padding text-center gray-background">
<div class="col-md-offset-2 col-md-8 col-xs-12" data-aos="fade-up">
<h2>Onsen UI</h2>
<div class="row">
<div class="col-md-offset-2 col-md-8 col-md-12">
<img src="img/onsen_with_text.png" alt="ilustracni obrazek" class="illustration" loading="lazy">
</div>
</div>
<p class="text-left">Pomocí tohoto open source frameworku mohou vývojáři vytvářet aplikace kombinací nativních komponent.. Tento snadno použitelný framework spolupracuje se systémem Angular JS, ovšem je schopen pracovat i bez něj. Má také dobrou dokumentaci, která obsahuje hodně layoutů a příkladů pro obecnou strukturu aplikace. Jedinou nevýhodou tohoto frameworku je to, že nabízí pouze iOS vzhled, ačkoli v dalších verzích frameworku slibují nabízet další podporu.</p>
</div>
</div>
<div class="row padding text-center white-background">
<div class="col-md-offset-2 col-md-8 col-xs-12" data-aos="fade-up">
<h2>Nativescript</h2>
<div class="row">
<div class="col-md-offset-2 col-md-8 col-md-12">
<img src="img/nativescript-logo.png" alt="ilustracni obrazek" class="illustration" loading="lazy">
</div>
</div>
<p class="text-left">Pomocí NativeScript můžou vývojáři vytvořit multiplatformní aplikace bez web view. NativeScript je psaný v JavaScript a TypeScript. NativeScript přímo podporuje AngularJS framework. Aplikace, které jsou postaveny na tomto frameworku, jsou plně nativní. Skvělou vlastností NativeScript je to, že umožňuje vývojářům napsat funkcionalitu v JavaScriptu pouze jednou a poté může ji může změnit v souladu s iOS, Android a Windows Phone. Tento framework však vyžaduje hluboké znalosti kódování, což je ovšem kompenzováno dostupností rozsáhlé dokumentace.</p>
</div>
</div>
<div class="row padding text-center gray-background">
<div class="col-md-offset-2 col-md-8 col-xs-12" data-aos="fade-up">
<p><strong>Zde je několik nejlepších frameworků, které mohou být použity pro vývoj hybridních mobilních aplikací. Každý framework má svoje výhody a nevýhody, je potřeba je nastudovat a vybrat ten, který odpovídá Vašim zkušenostem a představě.</strong></p>
<p><strong>Pokud hledáte společnost, která Vám vytvoří hybridní mobilní aplikaci, obraťte se na <a href="https://www.iquest.cz/">iQuest</a>. Pracujeme s Apache Cordova a dalšími jeho nástroji. Hybridní aplikace děláme kvalitně a včas.</strong></p>
</div>
</div>
<div class="row footer">
<div class="col-md-4 col-xs-12 map">
<div id="map"></div>
</div>
<div class="col-md-4 col-xs-12 contact v-center">
<div class="full-width">
<div class="row">
<div class="col-xs-12">
<h1>Kontakty</h1>
<!--<hr class="hr-contact">-->
<a class="btn btn-ghost btn-lg btn-go-iquest" href="https://www.iquest.cz/mobilni-aplikace-nove-generace/">Přejít na web <img src="img/logo4.png" style="width: 100px; height: 29px;" class="img-responsive center-block logo-button" loading="lazy"></a>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<a class="contact" href="tel:+420777314768">
<div class="contact">
<div class="contact-data">
+420 777 314 768
</div>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<a class="contact" href="mailto:vyvojari@iquest.cz">
<div class="contact">
<div class="contact-data">
vyvojari@iquest.cz
</div>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<a class="contact " target="_blank" href="https://goo.gl/maps/dEbKdDzYVShADZ236">
<span class="glyphicon glyphicon-footer glyphicon-map-marker"></span><br>
<b><u>Sídlo</u></b><br>
iQuest s.r.o. <br>
Sněmovní 9 <br>
118 00, Praha - Malá Strana
</a>
</div>
<div class="col-xs-6">
<a class="contact contact-address" target="_blank" href="https://www.google.cz/maps/place/iQuest+s.r.o./@49.1976357,16.6156609,17z/data=!3m1!4b1!4m5!3m4!1s0x47129458816c7ced:0xe77fcfbabc0fa54!8m2!3d49.1976357!4d16.6178496?hl=cs">
<span class="glyphicon glyphicon-footer glyphicon-map-marker"></span><br>
<b><u>Pobočka</u></b><br>
iQuest s.r.o. <br>
Cejl 494/25 <br>
602 00 Brno
</a>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-xs-12 map">
<div id="map2"></div>
</div>
</div>
</div>
<div class="copyright"><p><b>© iQuest s.r.o., 2020</b></p></div>
<div class="under-copyright"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAT79g0yz7iWCU1kZ4iNXaayEI_gcC_ZxA"></script>
<script>
/* global google */
// var map;
// var map2;
function initMap() {
// var mapCanvas = document.getElementById("map");
var map = new google.maps.Map(document.getElementById("map"), {
streetViewControl: true,
mapTypeControl: true,
zoomControl: true,
//scaleControl: true,
//rotateControl: true,
center: new google.maps.LatLng(50.089979,14.403729),
zoom: 14,
scrollwheel: false
});
// var map = new google.maps.Map(mapCanvas, mapOptions);
var coords = {lat: 50.089979, lng: 14.403729};
var iquest = new google.maps.Marker({
position: coords,
animation: google.maps.Animation.DROP,
map: map,
title: 'iQuest'
});
}
function initMap2() {
// var mapCanvas2 = document.getElementById("map2");
var map2 = new google.maps.Map(document.getElementById("map2"), {
streetViewControl: true,
mapTypeControl: true,
zoomControl: true,
//scaleControl: true,
//rotateControl: true,
center: new google.maps.LatLng(49.197625,16.617850),
zoom: 14,
scrollwheel: false
});
// var map2 = new google.maps.Map(mapCanvas2, mapOptions2);
var coords2 = {lat: 49.197625, lng: 16.617850};
var iquest2 = new google.maps.Marker({
position: coords2,
animation: google.maps.Animation.DROP,
map: map2,
title: 'iQuest'
});
}
initMap();
initMap2();
</script>
<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
<script>
AOS.init({
offset: 50,
duration: 800,
disable: 'mobile',
});
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-96574201-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>