-
Notifications
You must be signed in to change notification settings - Fork 10
/
index.html
393 lines (353 loc) · 23.3 KB
/
index.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
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
<!--
_ _ _ _____ _____ _____ _____ _____ _____ __ _____ _____ _____
| | | | __| __| | | | | | | | | __ | __|
| | | |__ |__ | --| | | | | | |__ _| | | -| | |
|_____|_____|_____|_____|__|__|_____|_____|_____|_|_____|__|__|_____|
(C) 2014 - Sallar Kaboli <[email protected]>
Web Standards School <wsschool.org>.
This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License along
with this program; if not, write to the Free Software Foundation, Inc.,
51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
-->
<!doctype html>
<html lang="en">
<head>
<title>اولین همایش تخصصی طراحی واکنش‌گرا</title>
<meta charset="UTF-8">
<meta name="author" content="Sallar Kaboli">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<meta property="og:title" content="اولین همایش تخصصی طراحی واکنش‌گرا"/>
<meta property="og:site_name" content="مدرسه استانداردهای وب"/>
<meta property="og:description" content="اولین همایش تخصصی طراحی واکنش‌گرا به منظور معرفی جدیدترین تکنیک‌ها و ابزارهای مورد استفاده در این نوع طراحی از امسال در ایران برگزار میشود."/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://conf.wsschool.org/rwd/"/>
<meta property="og:image" content="http://conf.wsschool.org/rwd/static/img/share.png"/>
<link rel="stylesheet" href="static/css/style.css" media="all">
</head>
<body>
<header class="masthead">
<div class="overlay"></div>
<section class="masthead__content">
<figure></figure>
<h1>اولین همایش تخصصی طراحی واکنش‌گرا</h1>
</section>
<footer class="masthead__arrow">
<h2>۱۴ آذر ۱۳۹۲</h2>
<a href="#"><i class="fa fa-chevron-circle-down fa-2x"></i></a>
</footer>
</header>
<!-- Main Wrapper -->
<section class="main-wrapper show-side-nav">
<!-- Intro -->
<section class="section section--intro" id="intro">
<section class="wrapper">
<header class="section-header">
<h1>اولین همایش تخصصی طراحی واکنش‌گرا</h1>
<h3>پنجشنبه، ۱۴ آذر ۱۳۹۲.</h3>
</header>
<section class="grid-wrap col-set-one-half tablet-col-set-full">
<article class="grid-col">
<p>حالا که رشد استفاده موبایل‌وب از دسکتاپ پیشی گرفته است، طراح‌ها و توسعه‌دهندگان وب با مشکلات فراوانی مواجه شده‌اند تا بتوانند طرح‌هایشان را با تمام دستگاه‌های جدید و مختلف سازگار کنند. اما میشود این مشکلات را کنترل کرد.</p>
<p>اولین همایش تخصصی طراحی واکنش‌گرا به منظور معرفی جدیدترین تکنیک‌ها و ابزارهای مورد استفاده در این نوع طراحی از امسال در ایران برگزار میشود.</p>
<a href="http://myevent.ir/rwd1_conf" target="_blank" class="btn"><i class="fa fa-ticket"></i> ثبت‌نام در همایش</a>
<p class="small"><i class="fa fa-info-circle"></i> هزینه شرکت در همایش هر نفر ۸۰ هزار تومان و هزینه شرکت به صورت آنلاین ۴۰ هزار تومان است.</p>
</article>
<article class="grid-col">
<figure class="showcase"></figure>
</article>
</section>
<section class="social">
<p><i class="fa fa-twitter"></i> از هش‌تگ <span class="hash"><a href="https://twitter.com/intent/tweet?hashtags=RWDConf92&via=wsschool_org" target="_blank">#RWDConf92</a></span> در شبکه‌های اجتماعی استفاده کنید.</p>
</section>
</section>
</section>
<svg class="bigTriangle white-to-gray" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 102" preserveAspectRatio="none">
<path d="M0 0 L50 100 L100 0 Z" />
</svg>
<!-- /Intro -->
<!-- People -->
<section class="section section--people" id="speakers">
<section class="wrapper">
<header class="section-header">
<h1><i class="fa fa-microphone"></i> سخنران‌ها</h1>
<h3>چه کسانی در همایش طراحی واکنش‌گرا با شما خواهند بود؟</h3>
</header>
<section class="grid-wrap col-set-one-third tablet-col-set-one-half phone-col-set-full">
<a href="http://ir.linkedin.com/in/parhamb" class="grid-col" target="_blank">
<img src="static/img/people/parham.jpg" alt="پرهام باغستانی">
<h2>پرهام باغستانی</h2>
<h3>طراح تجربه کاربری</h3>
</a>
<a href="http://ir.linkedin.com/pub/amir-abbas-abdolali/37/196/337" class="grid-col" target="_blank">
<img src="static/img/people/amirabbas.jpg" alt="سالار کابلی">
<h2>امیرعباس عبدالعلی</h2>
<h3>طراح و توسعه‌دهنده وب</h3>
</a>
<a href="http://ir.linkedin.com/pub/arash-milani/64/140/3bb" class="grid-col" target="_blank">
<img src="static/img/people/arash.jpg" alt="آرش میلانی">
<h2>آرش میلانی</h2>
<h3>طراح و توسعه‌دهنده وب</h3>
</a>
<a href="http://amirsorouri.com" class="grid-col" target="_blank">
<img src="static/img/people/amir.jpg" alt="امیر سروری">
<h2>امیر سروری</h2>
<h3>طراح رابط کاربری</h3>
</a>
<a href="http://ir.linkedin.com/in/mohsenbarati" class="grid-col" target="_blank">
<img src="static/img/people/mohsen.jpg" alt="محسن براتی">
<h2>محسن براتی</h2>
<h3>توسعه‌دهنده وب و موبایل</h3>
</a>
<a href="http://ir.linkedin.com/in/shaho" class="grid-col" target="_blank">
<img src="static/img/people/shaho.jpg" alt="شاهو طوفانی">
<h2>شاهو طوفانی</h2>
<h3>طراح و توسعه‌دهنده وب</h3>
</a>
</section>
</section>
</section>
<svg class="bigTriangle gray-to-white" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 102" preserveAspectRatio="none">
<path d="M0 0 L50 100 L100 0 Z" />
</svg>
<!-- /People -->
<!-- Schedule -->
<section class="section section--schedule" id="schedule">
<section class="wrapper">
<header class="section-header">
<h1><i class="fa fa-calendar-o"></i> برنامه برگزاری</h1>
<h3>یک روز با طراحی واکنش‌گرا</h3>
</header>
<section class="schedule">
<article class="schedule__row">
<aside>۰۸:۰۰ - ۰۸:۳۰</aside>
<section class="dim">
<h3>پذیرش</h3>
</section>
</article>
<article class="schedule__row">
<aside>۰۸:۳۰ - ۰۹:۰۰</aside>
<section class="dim">
<h3>پذیرایی</h3>
</section>
</article>
<article class="schedule__row">
<aside>۰۹:۰۰ - ۰۹:۳۰</aside>
<section>
<h3>سخنان آغازین</h3>
<h4>مجید علوی‌زاده</h4>
<p>اکنون که تولید سایتها و نرم افزارهای وب به خارج از دسکتاپ رسیده و رشد استفاده موبایل‌وب نیز روز به روز از استفاده دسکتاپ بیشتر می شود، طراحان و توسعه دهندگان وب با مشکلات فراوانی در این خصوص مواجه شده اند. یکی از دغدغه های طراحان و توسعه دهندگان وب، سازگاری طرح‌هایشان با دستگاه های جدید و مختلف است. اما با رعایت اصول و استانداردهای طراحی وب واکنش‌گرا می‌توان این مشکلات و دغدغه ها را کنترل و از بین برد.</p>
</section>
</article>
<article class="schedule__row">
<aside>۰۹:۳۰ - ۱۰:۱۵</aside>
<section>
<h3>طراحی موبایل اپلیکیشن برای دستگاه‌های مختلف با استفاده از <span>Media Query</span></h3>
<h4>محسن براتی</h4>
<p>اگر قصد طراحی صفحات وب برای نمایش در تلفن های همراه هوشمند یا تبلت ها را دارید پیش از هرچیز نیاز به دانستن اطلاعات صحیحی در مورد محدودیت ها، ابعاد و قابلیت های دستگاه های مورد نظر خود برای خروجی را خواهید داشت، در این ارائه سعی خواهد شد تا اصول و استانداردهای طراحی برای پلتفرم موبایل بصورت عملی و همراه با مثال و نمونه های اجرایی مطرح گردد.</p>
</section>
</article>
<article class="schedule__row">
<aside>۱۰:۱۵ - ۱۰:۴۵</aside>
<section>
<h3>استفاده از <span>CSS Preprocessor</span> ها برای طراحی واکنش‌گرا</h3>
<h4>امیرعباس عبدالعلی</h4>
</section>
</article>
<article class="schedule__row">
<aside>۱۰:۴۵ - ۱۱:۰۰</aside>
<section class="dim">
<h3>استراحت</h3>
</section>
</article>
<article class="schedule__row">
<aside>۱۱:۰۰ - ۱۱:۴۵</aside>
<section>
<h3>طراحی قالب واکنش‌گرا و استفاده از گرید فریم‌ورک‌های موجود جهت طراحی واکنش‌گرا</h3>
<h4>شاهو طوفانی</h4>
<p>در این ارائه به متدهای طراحی واکنش‌گرا با تاکید بر استفاده از سیستم های مبتنی بر گرید پرداخته میشود که شامل طراحی شناور (<span>Fluid-based Design</span>)، مفاهیم گرید، گریدهای ریسپانسیو و استفاده از سیستم گرید فریم‌ورک های شناخته شده مانند <span>Bootstrap،</span> <span>Foundation</span> و ... خواهد بود.</p>
</section>
</article>
<article class="schedule__row">
<aside>۱۱:۴۵ - ۱۲:۳۰</aside>
<section>
<h3>استفاده از <span>Flexbox</span> در طراحی واکنش‌گرا</h3>
<h4>آرش میلانی</h4>
</section>
</article>
<article class="schedule__row">
<aside>۱۲:۳۰ - ۱۲:۴۵</aside>
<section class="dim">
<h3>استراحت</h3>
</section>
</article>
<article class="schedule__row">
<aside>۱۲:۴۵ - ۱۳:۰۰</aside>
<section>
<h3>سخنرانی مبین‌نت</h3>
</section>
</article>
<article class="schedule__row">
<aside>۱۳:۰۰ - ۱۳:۴۵</aside>
<section>
<h3>تجربه کاربری و استراتژی محتوی در طراحی واکنش‌گرا</h3>
<h4>پرهام باغستانی</h4>
</section>
</article>
<article class="schedule__row">
<aside>۱۳:۴۵ - ۱۵:۰۰</aside>
<section class="dim">
<h3>ناهار و استراحت</h3>
</section>
</article>
<article class="schedule__row">
<aside>۱۵:۰۰ - ۱۵:۴۵</aside>
<section>
<h3>راه‌های بهینه‌سازی و استفاده از تصاویر در طراحی واکنش‌گرا</h3>
<h4>امیر سروری</h4>
<p>تکتولوژی ها مدرن در طراحی وب ،در جهت بهبود ارائه مناسب محتوا به مخاطبان پیشرفت می کنند. محتوا مهمترین قسمت از هر وب سایت است و تصاویر یکی از مهمترین انواع محتوا. طراحی ریسپانسیو به بهبود ارائه محتوا بسیار کمک خواهد کرد بنابراین بهینه سازی تصاویر برای طراحی ریسپانسیو نیز بسیار مهم خواهد بود . سایز ، حجم ، کانسپت های طراحی، پشتیبانی مرورگرها و دستگاه های متفاوت همگی در جهت بهینه سازی در استفاده تصاویر برای طراحی ریسپانسیو نقش خواهند داشت که در این ارائه به این موارد خواهیم پرداخت.</p>
</section>
</article>
<article class="schedule__row">
<aside>۱۵:۴۵ - ۱۶:۰۰</aside>
<section>
<h3>سخنرانی سرزمین هوشمند</h3>
</section>
</article>
<article class="schedule__row">
<aside>۱۶:۰۰ - ۱۶:۳۰</aside>
<section>
<h3>تایپوگرافی در طراحی واکنش‌گرا</h3>
<h4>سالار کابلی</h4>
</section>
</article>
</section>
</section>
</section>
<svg class="bigTriangle white-to-light-gray" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 102" preserveAspectRatio="none">
<path d="M0 0 L50 100 L100 0 Z" />
</svg>
<!-- /Schedule -->
<!-- Location -->
<section class="section section--location" id="location">
<section class="wrapper">
<header class="section-header">
<h1><i class="fa fa-map-marker"></i> محل برگزاری</h1>
<h3>اولین همایش تخصصی طراحی واکنش‌گرا</h3>
</header>
<p>تهران، خیابان کارگر شمالی، بالاتر از بزرگراه جلال آل احمد، خیابان شانزدهم (شهید فرشی مقدم)، پارک علم و فن آوری دانشگاه تهران</p>
</section>
</section>
<!-- /Location -->
<!-- Map -->
<section class="section--map">
<svg class="bigTriangle light-gray-to-nothing" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 102" preserveAspectRatio="none">
<path d="M0 0 L50 100 L100 0 Z" />
</svg>
<svg class="bigTriangle bigTriangle__bottom nothing-to-white" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 850 100" preserveAspectRatio="none">
<polygon points="0,0 0,100 425,100 850,100 850,0 425,100 "/>
</svg>
<div class="map-container"></div>
</section>
<!-- /Map -->
<!-- Sponsors -->
<section class="section section--sponsors" id="sponsors">
<section class="wrapper">
<header class="section-header">
<h1><i class="fa fa-heart"></i> حامیان</h1>
<h3>این همایش با یاری این دوستان امکان‌پذیر شده است.</h3>
</header>
<section class="sponsor-list">
<a href="http://mobinnet.ir" target="_blank"><img src="static/img/sponsors/mobinnet.svg" alt="مبین‌نت" class="size-xl-v"></a>
<a href="http://majidonline.com" target="_blank"><img src="static/img/sponsors/majidonline-black.svg" alt="مجیدآنلاین" class="size-l-v"></a>
<a href="http://www.ut.ac.ir" target="_blank"><img src="static/img/sponsors/ut.svg" alt="دانشگاه تهران" class="size-xl-v"></a>
<a href="http://stp.ut.ac.ir" target="_blank"><img src="static/img/sponsors/ut-stp.svg" alt="پارم علم و فناوری دانشگاه تهران" class="size-xl-v"></a>
</section>
</section>
</section>
<svg class="bigTriangle white-to-green invert-side-nav" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 102" preserveAspectRatio="none">
<path d="M0 0 L50 100 L100 0 Z" />
</svg>
<!-- /Sponsors -->
<!-- Organizers -->
<section class="section section--people section--organizers" id="organizers">
<section class="wrapper">
<header class="section-header">
<h1><i class="fa fa-cogs"></i> برگزارکنندگان</h1>
<h3>این همایش را چه کسانی برگزار می‌کنند.</h3>
</header>
<section class="grid-wrap col-set-one-third phone-col-set-full">
<a href="http://ir.linkedin.com/pub/majid-alavizadeh/11/751/42" class="grid-col" target="_blank">
<img src="static/img/people/majid.jpg" alt="مجید علوی‌زاده">
<h2>مجید علوی‌زاده</h2>
<h3>دبیر کنفرانس</h3>
</a>
<a href="http://linkedin.com/in/sallarkaboli" class="grid-col" target="_blank">
<img src="static/img/people/sallar.jpg" alt="سالار کابلی">
<h2>سالار کابلی</h2>
<h3>دبیر علمی</h3>
</a>
<a href="http://ir.linkedin.com/pub/saber-vanaki/7a/2b/a25" class="grid-col" target="_blank">
<img src="static/img/people/saber.jpg" alt="صابر ونکی">
<h2>صابر ونکی</h2>
<h3>دبیر اجرایی</h3>
</a>
</section>
</section>
</section>
<svg class="bigTriangle green-to-dark-gray" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 102" preserveAspectRatio="none">
<path d="M0 0 L50 100 L100 0 Z" />
</svg>
<!-- /Organizers -->
<!-- Footer -->
<footer class="section section--footer">
<section class="wrapper">
<p>
ما را در <a href="https://twitter.com/wsschool_org" target="_blank"><i class="fa fa-twitter"></i></a> دنبال کنید.<br>
کپی‌رایت ۱۳۹۲. مدرسه استانداردهای وب، تحت حمایت <a href="http://majidonline.com" target="_blank">مجید آنلاین</a> فعالیت می‌کند. <a href="mailto:[email protected]">تماس</a>.<br>
</p>
<hr>
<p class="small">
<a href="http://sallar.me" target="_blank">
طراحی: سالار کابلی
</a>
</p>
</section>
</footer>
<!-- /Footer -->
</section>
<!-- /Main Wrapper -->
<!-- Side Nav -->
<nav class="side-nav">
<a href="#" class="toggle"><i class="fa fa-reorder"></i></a>
<section class="inner">
<a href="#intro" class="active"><span>معرفی</span></a>
<a href="#speakers"><span>سخنران‌ها</span></a>
<a href="#schedule"><span>برنامه</span></a>
<a href="#location"><span>محل برگزاری</span></a>
<a href="#sponsors"><span>حامیان</span></a>
<a href="#organizers"><span>برگزارگنندگان</span></a>
</section>
</nav>
<!-- /Side Nav -->
<!-- IE Notice -->
<div class="ie-notice">
<div class="inner">
<h1>این وب‌سایت با مرورگرهای قدیمی سازگار نیست.</h1>
<h2>لطفا از مرورگرهای مدرن استفاده کنید.</h2>
</div>
</div>
<!-- /IE Notice -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="static/js/vendor/jquery.gomap.min.js"></script>
<script src="static/js/app.js"></script>
</body>
</html>