Ministry of Higher Education

Bamyan University
Computer Science Department

Fundamentals of Web designing

‫مبانی طراحی وب‬
Applications and web application definition
‫تعریف اپلیکیشن و وب اپلیکیشن‬
Agenda of course ‫فهرست مطالب این کورس‬
 Fundamentals of web designing ‫ مبانی طراحی وب‬
 Some Theories ‫ برخی نظریه ها‬
 Web application introduction ‫ معرفی اپلیکیشن وب‬
 Web engineering approaches ‫ رویکردهای مهندسی وب‬
 How web works? ‫ وب چگونه کار می کند؟‬
 Web application structure ‫ ساختار برنامه وب‬
 HTML HTML 
 Web design ‫ طراحی وب سایت‬
 CSS ( Cascading Style Sheet) )‫ (برگ سبک آبشاری‬CSS 
learning objective ‫هدف یادگیری‬
 In this chapter you will learn
‫ در این فصل یاد خواهید گرفت‬
 Application
‫اپلیکیشن‬ 
 Types of application
‫انواع اپلیکیشن‬ 
 Web application
‫برنامه تحت وب‬ 
 Web application categories
‫دسته بندی برنامه های وب‬ 
 Web development
‫توسعه وب‬ 
 Web engineering
‫مهندسی وب‬ 

3
Course needs ‫نیازهای دوره‬
• Software ‫• نرم افزار‬
• Sublime text editor (coding) )‫ویرایشگر متن عالی (کد نویسی‬ •
• Wamp server (web server) )‫ (وب سرور‬Wamp •
• Google chrome or Mozilla Firefox (run the code) ‫گوگل کروم یا موزیال فایرفاکس (کد را اجرا‬ •
• Edraw Max ( design wireframes and blueprints) )‫کنید‬
‫ (طراحی وایرفریم و طرح‬Edraw Max •
)‫اولیه‬
Project topics ‫موضوعات‬
• Culture
‫فرهنگ‬ •
• Family
‫خانواده‬ •
• Government
‫دولت‬ •
• Education
‫تحصیالت‬ •
• Communication
‫ارتباط‬ •
• Medical
‫پزشکی‬ •
• Agriculture
‫کشاورزی‬ •
• Law
‫قانون‬ •
• Science
‫علوم پایه‬ •
• Art
‫هنر‬ •
• Economy
‫اقتصاد‬ •
• Engineering
‫مهندسی‬ •
What is Application? ‫اپلیکیشن چیست؟‬
• Application is a term for a set of ‫ اصطالحی است برای مجموعه‬Application •
instructions, which makes a ‫ای از دستورالعمل ها که باعث می شود‬
computer to perform a task. .‫کامپیوتر یک کار را انجام دهد‬
• The set of instructions are commonly ‫• مجموعه دستورالعمل ها معموًال به عنوان یک‬
known as a program. .‫برنامه شناخته می شوند‬
• Many programs are not ،‫• بسیاری از برنامه ها برنامه کاربردی نیستند‬
applications ,A program with a user- ‫یک برنامه با رابط کاربری یک برنامه‬
interface is an application. .‫کاربردی است‬
Application system ‫سیستم برنامه‬
• A group of related applications programs ‫گروهی از برنامه های کاربردی مرتبط که‬ •
designed to perform a specific function ‫برای انجام یک عملکرد خاص طراحی شده‬
• An application system normally consists ‫اند‬
of a user interface and a database. ‫یک سیستم کاربردی معموًال از یک رابط‬ •
• Application System is designed and .‫کاربری و یک پایگاه داده تشکیل شده است‬
implemented with Different size and ‫اندازه و معماری متفاوت طراحی و پیاده‬ •
architecture. . ‫سازی شده است‬
• Application System normally consist of: :‫سیستم برنامه معموًال شامل موارد زیر است‬ •
• Related configuration files to run the ‫فایل های پیکربندی مرتبط برای اجرای برنامه‬ •
program
‫یک مستندات سیستمی که ساختار سیستم ها را‬ •
• A system documentation, describing the ‫توصیف می کند‬
systems structure
‫ که نحوه مدیریت سیستم‬،‫مستندات کاربر نهایی‬ •
• A end user documentation, describing the ‫را توصیف می کند‬
handling of the system
 Application definition ‫تعریف برنامه از دیدگاه های‬
from different views ‫مختلف‬
• Web Engineer view: :‫نمای مهندس وب‬ •
• Related configuration files to run the ‫فایل های پیکربندی مرتبط برای اجرای برنامه‬ •
program
‫مستندات مناسب‬ •
• Suitable documentation
:‫نمای کاربر نهایی‬ •
• End-user view:
‫برنامه ای که برای او مفید است و خاص انجام می‬ •
• The program that is useful for him /her ‫دهد وظیفه برای آنها‬
and perform specific task for them.
Types of Application ‫انواع اپلیکیشن ها‬
• There are many different types of ‫• انواع مختلفی از نرم افزارهای کاربردی وجود دارد‬
Application Software but according ‫اما با توجه به دامنه استفاده آنها را به دسته های زیر‬
to usage scope we divide them in :‫تقسیم می کنیم‬
the following categories: ‫برنامه دسکتاپ‬ •
• Desktop Application ‫برنامه تحت وب‬ •
• Web Application ‫برنامه های موبایل‬ •
• Mobile applications
Desktop applications ‫برنامه های دسکتاپ‬
• Software development began with Desktop Applications ‫• توسعه نرم افزار با‬
Desktop Applications ‫آغاز شد‬
• A desktop application means any software ‫• برنامه دسکتاپ به معنای هر نرم افزاری است که‬
that can be installed on a single computer ‫می تواند بر روی یک کامپیوتر (لپ تاپ یا‬
(laptop or a desktop) and used to perform ‫دسکتاپ) نصب شود و برای انجام وظایف خاص‬
specific tasks. .‫مورد استفاده قرار گیرد‬
• Different types of desktop applications: :‫• انواع مختلف برنامه های دسکتاپ‬
• Applications for communication: Microsoft Microsoft : ‫برنامه های کاربردی برای ارتباطات‬ •
Outlook Outlook
• Applications for data analysis and diagrams: ‫برنامه های کاربردی برای تجزیه و تحلیل داده ها و‬ •
Microsoft Excel and Visio Visio ‫ و‬Microsoft Excel : ‫نمودارها‬
• Applications for presentations and Graphics: : ‫برنامه های کاربردی برای ارائه ها و گرافیک‬ •
Microsoft PowerPoint, Adobe Photoshop Microsoft PowerPoint، Adobe Photoshop
• Etc. .‫و غیره‬ •
Mobile applications ‫برنامه های موبایل‬
• A mobile application, most commonly ‫ که بیشتر به عنوان‬، ‫• برنامه تلفن همراه‬
referred to as an app, is a type of ‫ نوعی نرم افزار‬، ‫برنامه شناخته می شود‬
application software designed to run on ‫کاربردی است که برای اجرا بر روی یک‬
a mobile device, such as a smartphone or ‫ مانند یک گوشی‬، ‫دستگاه تلفن همراه‬
tablet computer. .‫هوشمند یا رایانه لوحی طراحی شده است‬
• Mobile applications frequently serve to ‫• برنامه های تلفن همراه اغلب برای ارائه‬
provide users with similar services to those ‫خدمات مشابه به کاربران در رایانه های‬
accessed on PCs ‫شخصی خدمت می کنند‬
Web application ‫برنامه تحت وب‬
• However, with the advent of internet ،‫ با ظهور اینترنت و تجارت آنالین‬،‫با این حال‬ •
and online commerce, Web .‫توسعه برنامه های کاربردی وب اهمیت پیدا کرد‬
Application development gained ‫برنامه وب سیستمی است که از استانداردها و‬ •
importance. ‫ برای ارائه منابع خاص وب‬W3C ‫فناوری های‬
• A Web application is a system that ‫به مشتریان از طریق یک مرورگر استفاده می‬
utilizes W3C standards & technologies .‫کند‬
to deliver Web-specific resources to ‫برنامه وب هر برنامه ای است که از مرورگر‬ •
clients through a browser. .‫وب به عنوان مشتری استفاده می کند‬
• A web application is any application ‫یک وب سایت خرید آنالین را می توان به عنوان‬ •
that uses a web browser as a client. ‫یک وب اپلیکیشن در نظر گرفت‬
• An online shopping website can be
considered as a web application
Web application types ‫انواع برنامه های وب‬
• Web applications can be categorized in ‫• برنامه های کاربردی وب را می توان از طرق‬
many ways there is no unique or widely ‫ هیچ راه منحصر به فرد‬،‫مختلف دسته بندی کرد‬
accepted way. .‫یا پذیرفته شده ای وجود ندارد‬
• Below different categories of Web ‫• در زیر دسته‌های مختلف برنامه‌های کاربردی‬
applications depending on their ‫وب بسته به تاریخچه توسعه و درجه پیچیدگی آنها‬
development history and their degree of ‫وجود دارد‬
complexity )‫ دانلود‬،‫• مدارک (اطالعاتی‬
• Document Centered ‫در ارتباط بودن‬ •
(Informational ,Download) ‫معامله ای‬ •
• Interactive ‫بر اساس جریان کار‬ •
• Transactional ‫محیط های کاری مشترک‬ •
• Work flow Based ‫وب معنایی‬ •
• Collaborative work environments
• Semantic Web
 Document Centered
(Informational ,Download) :)‫ دانلود‬،‫مدارک (اطالعاتی‬
:
‫ محتوای فقط خواندنی با پیمایش ساده و‬:‫• اطالعاتی‬
• Informational : read-only content is ‫پیوندها ارائه می شود‬
provided with simple navigation and links ‫ کاربر محتوا را برای‬:‫• قابل سفارشی سازی‬
• Customizable : the user customizes ‫نیازهای خاص سفارشی می کند‬
content to specific needs ‫ وب سایت شرکت‬،‫ صفحه اصلی ثابت‬:‫• مثال‬
• Example: Static homepage, company web
site
Interactive ‫در ارتباط بودن‬
• Content of a website is dynamically ‫• محتوای یک وب سایت به صورت پویا به عنوان‬
generated as response to a user ‫پاسخ به درخواست کاربر تولید می شود‬
request ،‫ پویا (فرم های ثبت نام‬HTML ‫ صفحات‬:‫• مثال‬
• Examples: dynamic HTML pages )‫موتور جستجو‬
(Registration forms, Search engine)
Transactional ‫در ارتباط بودن‬
• Complex interactions ‫• محتوای یک وب سایت به صورت پویا به عنوان پاسخ‬
• Use transaction management in database ‫به درخواست کاربر تولید می شود‬
systems ‫ موتور‬،‫ پویا (فرم های ثبت نام‬HTML ‫ صفحات‬:‫• مثال‬
• Examples: Online shopping, online )‫جستجو‬
banking, reservation systems
Work flow based ‫بر اساس جریان کار‬
• Support business processes (workflows) ‫• از فرآیندهای تجاری (جریان کاری) در‬
within respective business organization. .‫سازمان تجاری مربوطه پشتیبانی کنید‬
• Electronic version of structured flow of ‫• نسخه الکترونیکی جریان ساختار یافته فعالیت‬
activities. .‫ها‬
• Examples: E-Government, patient ‫ گردش کار بیمار‬،‫ دولت الکترونیک‬:‫• مثال ها‬
workflows in health care systems ‫در سیستم های مراقبت های بهداشتی‬
 Collaborative work ‫محیط های کاری مشترک‬
environments
‫) از افرادی مانند‬CWE( ‫• یک محیط کار مشارکتی‬
• A collaborative working environment ‫متخصصان الکترونیکی در کارهای فردی و‬
(CWE) supports people, such as e- .‫مشارکتی آنها حمایت می کند‬
professionals, in their individual and ‫• حمایت از همکاری در صورت جریان بدون ساختار‬
cooperative work. .‫فعالیت ها و درجه ارتباط باال‬
• Support cooperation in case of ‫ ویکی‬،‫ وبالگ نویسی‬،‫ کنفرانس ویدئویی‬،‫ ایمیل‬:‫• مثال‬
unstructured flow of activities and high
degree of communication.
• Examples: email, video conferencing,
blogging, wiki
Semantic Web ‫وب معنایی‬
• Information available on the web ‫• اطالعات موجود در وب (برای درک انسان کافی‬
(adequate for human understanding) )‫است‬
• Knowledge management(derivation of ‫ استفاده مجدد‬،‫• مدیریت دانش (اشتقاق دانش جدید‬
new knowledge , re-use of .)‫از دانش‬
knowledge). ‫ ویکی پدیا‬،‫ گوگل‬:‫• مثال‬
• Examples: Google, Wikipedia
 History of Web ‫تاریخچه توسعه وب‬
development
‫• در مقایسه با توسعه نرم افزار سابقه بسیار کوتاهی دارد‬
.
• Web Application development has a
very short history, compared to the ‫ تعداد زیادی از سیستم‌ها و‬، ‫• اما در مدت چند سال‬
development of software. ‫برنامه‌های کاربردی وب توسعه یافته و مورد استفاده‬
. ‫گسترده قرار گرفته‌اند‬
• But within a period of few years, a
large number of Web systems and ‫• شبکه جهانی وب (وب) به پلتفرم غالب برای اطالعات‬
applications have been developed and ‫و برنامه های کاربردی در دسترس همه جا از هر نوع‬
put into widespread use. .‫تبدیل شده است‬
• The World Wide Web (Web) has
become the dominant platform for
ubiquitously accessible information
and applications of any kind.
 What is a good web ‫وب اپلیکیشن خوب چیست؟‬
application? ‫• و احساس‬
‫• همچنین در مورد ویژگی های کیفیت مانند‬
• Good Web Application Development are ‫قابلیت استفاده‬ •
not just about nice look and feel ‫دسترسی‬ •
• It is also about quality attributes such as ‫قابلیت نگهداری‬ •
• Usability ‫سازگاری‬ •
• Accessibility ‫امنیت‬ •
• Maintainability ‫قابلیت اطمینان‬ •
• Compatibility ‫بهره وری‬ •
• Security ‫قابلیت استفاده مجدد‬ •
• Reliability
• Efficiency
• Reusability
 Why web engineering? ‫چرا مهندسی وب؟‬
• To successfully build large-scale, complex ، ‫سیستم‌های مبتنی بر وب در مقیاس بزرگ‬ •
Web-based systems , Web developers ‫توسعه‌دهندگان وب باید یک فرآیند توسعه منظم و‬
need to adopt a disciplined development ‫ از ابزارهای‬،‫روش‌شناسی صحیح را اتخاذ کنند‬
process and a sound methodology , use ‫توسعه بهتر استفاده کنند و از مجموعه‌ای از‬
better development tools, and follow a . ‫دستورالعمل‌های خوب پیروی کنند‬
set of good guidelines.
.‫مهندسی نیاز است‬ •
• Engineering approaches are needed to
meet these . ‫مهندسی به طور گسترده به عنوان یک کاربرد منظم‬ •
‫دانش علمی برای حل مسائل عملی در نظر گرفته‬
• Engineering is widely taken as a .‫می شود‬
disciplined application of scientific
knowledge for the solution of practical ‫مهندسی وب به عنوان راه حل معرفی شد‬ •
problems.
• Web engineering was introduced as
solution
What is web engineering? ‫مهندسی وب چیست؟‬
• Web Engineering uses: : ‫• مهندسی وب‬
• Scientific ‫علمی‬ •
• Engineering ‫مهندسی‬ •
• Management Principles ‫اصول مدیریت‬ •
• to successfully ‫• تا با موفقیت‬
• cost-effective Develop ‫مقرون به صرفه توسعه‬ •
• Deploy ‫مستقر کنید‬ •
• Maintain ‫حفظ‬ •
• High-quality Web systems and applications ‫• سیستم ها و برنامه های‬
• The outcome of the Web Engineering process
‫ برنامه های کاربردی وب‬،‫• نتیجه فرآیند مهندسی وب‬
are Web applications that provide Web pages
‫هستند که صفحات وب را ارائه می دهند که می‬
that can be displayed in a Web browser.
.‫توانند در یک مرورگر وب نمایش داده شوند‬
• Web engineering is a specialization in
software engineering ‫• مهندسی وب یک تخصص در مهندسی نرم افزار‬
‫است‬
Keep in mind ‫یادت باشه‬
• Web Engineering is not about ‫ و جاوا اسکریپت‬HTML ‫• مهندسی وب در مورد‬
HTML and JavaScript ‫نیست‬
• Like Software Engineering is not !‫ یا جاوا نیست‬C ‫مانند مهندسی نرم افزار در مورد‬ •
about C or Java!
‫• هدف آن توسعه سیستماتیک برنامه های کاربردی‬
• It aims at systematic development ‫وب بر اساس یک متدولوژی خاص است‬
of Web applications according to a
specific methodology ‫• استانداردها در وب مانند سایر زمینه های‬
‫مهندسی مهم هستند‬
• Standards are important in Web
like in all the other Engineering
fields
 Stakeholders in web ‫سهامداران در پروژه های‬
engineering projects ‫مهندسی وب‬
‫• بسیاری از افراد درگیر یک پروژه مهندسی‬
• Many people are involved in a Web engineering ‫وب هستند و انتظار دارند از موفقیت آن بهره‬
project and expect to benefit from its success. .‫مند شوند‬
• we classify these stakeholders into four major ‫• ما این سهامداران را به چهار دسته عمده طبقه‬
categories: :‫بندی می کنیم‬
1. Users ‫ کاربران‬.1
2. Customers ‫ مشتریان‬.2
3. Web developers ‫ توسعه دهندگان وب‬.3
4. Development Managers ‫ مدیران توسعه‬.4
• All four roles can be fulfilled by the same person ‫• هر چهار نقش را یک فرد می تواند ایفا کند‬
User ‫کاربر‬
• Those who use the Web Application ‫• کسانی که از وب اپلیکیشن استفاده می کنند‬
• Their goals include doing interesting ‫• آنها انجام کارهای جالب و حل مشکلشان‬
work and solving their problem. .‫است‬
• Quality indicators: :‫• شاخص های کیفیت‬
• SW does, what I expect ‫ آنچه من انتظار دارم‬،‫ انجام می دهد‬SW •
• Fast ‫سریع‬ •
• Easy to use ‫آسان برای استفاده‬ •
• Easy to learn ‫آسان برای یادگیری‬ •
• No errors ‫بدون خطا‬ •
• Good manual ‫کتابچه راهنمای‬ •
Customers ‫مشتریان‬
• Customers Also known as clients ‫مشتریان همچنین به عنوان مشتریان شناخته می شود‬ •
• People who make the decisions about ‫افرادی که در مورد سفارش و پرداخت هزینه وب‬ •
ordering and paying for the Web . ‫اپلیکیشن تصمیم می گیرند‬
Application . ‫ کاربران‬، ‫آنها ممکن است کاربر باشند یا نباشند‬ •
• They may or may not be users, the users ‫ممکن است برای آنها کار کنند‬
may work for them
‫آنها افزایش سود و یا صرفًا مدیریت مؤثرتر کسب و‬ •
• Their goals are to increase profit or simply ‫کارشان است‬
to run their business more effectively
:‫شاخص های کیفیت‬ •
• Quality indictors: ‫ باید تا حد امکان ارزان باشد‬SW •
• SW has to be as cheap as possible ‫حافظه کم است‬ •
• Memory usage is low ‫سریع می دود‬ •
• Runs fast •
‫وظایف به درستی انجام می شود‬
• Tasks are done correct
‫قابل انعطاف‬ •
• Flexible
‫هزینه های نگهداری بسیار پایین است‬ •
• Costs of maintaining are very low
Developers ‫توسعه دهندگان‬
• Development of a Web application requires a ‫• توسعه یک برنامه وب به تیمی از افراد با‬
team of people with diverse skills and . ‫مهارت ها و سوابق مختلف نیاز دارد‬
backgrounds.
‫• کسانی که برنامه وب را توسعه و نگهداری می‬
• Those who develop and maintain the Web ‫کنند مهندس وب نامیده می شوند‬
Application are called Web engineers
• Within the development team there are often
‫• در تیم توسعه اغلب نقش های تخصصی از جمله‬
specialized roles including: :
• Requirement specialist ‫متخصص نیاز‬ •
• Programmers ‫برنامه نویسان‬ •
• Graphic designers ‫طراحان گرافیک‬ •
• Database specialist ‫متخصص پایگاه داده‬ •
• Data communication and networking experts ‫کارشناسان ارتباطات و شبکه های داده‬ •
• Configuration management specialist ‫متخصص مدیریت پیکربندی‬ •
• Quality indicator: :‫• شاخص کیفیت‬
• Easy to design ‫آسان برای طراحی‬ •
• Reuse its parts ‫استفاده مجدد از قطعات آن‬ •
Development Managers ‫مدیران‬
• People who runs the organization that is ‫افرادی که سازمانی را اداره می کنند که در حال توسعه‬ •
developing the Web Applications ‫برنامه های کاربردی وب است‬
• They often have and educational ‫آنها اغلب دارای سوابق تحصیلی در مدیریت بازرگانی‬ •
background in business administration ‫هستند‬
• Their goal is to please the customers or ‫آنها این است که مشتریان را راضی کنند یا بیشترین وب‬ •
sell the most Web Application while ‫را بفروشند در حالی که کمترین هزینه را صرف می کنند‬
spending the least money
‫آنها باید در مورد نحوه مدیریت پروژه نرم افزاری دانش‬ •
• They must have knowledge about how
‫داشته باشند‬
to manage software project
• Web developers must keep their ‫توسعه دهندگان وب باید مدیران خود را در جریان هر‬ •
managers informed of any problems ‫گونه مشکلی قرار دهند‬
• Goals to be achieved: :‫اهداف قابل دستیابی‬ •
• Sells more ‫بیشتر می فروشد‬ •
• Pleased Customers ‫مشتریان راضی‬ •
• Costing less to develop and maintain ‫هزینه کمتر برای توسعه و نگهداری‬ •
Web Engineering Projects ‫پروژه های مهندسی وب‬
• Web Engineering work is normally ‫• کار مهندسی وب معموًال در پروژه ها سازماندهی می‬
organized into projects ‫شود‬
• We can divide software projects into ‫• ما می توانیم پروژه های نرم افزاری را به سه دسته‬
three major categories: :‫عمده تقسیم کنیم‬
1. Those that involve modifying an existing ‫ آنهایی که مستلزم اصالح یک سیستم موجود هستند‬.1
systems ‫ آنهایی که شامل شروع توسعه یک سیستم از ابتدا هستند‬.2
2. Those that involve starting to develop a ‫ آنهایی که شامل ساخت بیشتر یک سیستم جدید از‬.3
system from scratch ‫اجزای موجود هستند‬
3. Those that involve building most of a new
system from existing components
Evolutionary Projects ‫پروژه های تکاملی‬
• Most software projects are of the first type- . ‫ اصالح یک سیستم موجود‬- ‫اول هستند‬ •
Modifying an existing system.
• The term maintenance is used to describe this
‫اصطالح تعمیر و نگهداری برای توصیف این فرآیند‬ •
process ‫استفاده می شود‬
• Evolutionary or maintenance projects can be of : ‫تکاملی یا تعمیراتی می توانند انواع مختلفی داشته باشند‬ •
several different types:
‫ رفع نقص‬:‫ پروژه های اصالحی‬.1 •
• 1. Corrective projects: fixing defects
• 2. Adaptive projects: changing the system in ‫ تغییر سیستم در پاسخ به تغییرات‬:‫ پروژه های تطبیقی‬.2 •
response to changes in the environment in which ‫محیطی که نرم افزار در آن اجرا می شود‬
the software runs ‫به عنوان مثال سیستم را برای کار با نسخه جدید سیستم عامل یا‬ •
• For example change system to work with new version ‫پایگاه داده تغییر دهید‬
of Operating system or Database
‫ افزودن ویژگی های جدید برای‬:‫ پروژه های بهبود‬.3 •
• 3. Enhancement projects: adding new features for
users ‫کاربران‬
• 4. Re-engineering or perfective projects: changing ‫ تغییر سیستم در‬:‫ مهندسی مجدد یا پروژه های کامل‬.4 •
the system internally so it is more maintainable ‫داخل به طوری که قابل نگهداری تر باشد‬
Green field projects ‫پروژه های میدان سبز‬
• Projects to develop an entirely ‫• پروژه هایی برای توسعه یک سیستم نرم افزاری‬
new software system from ‫کامًال جدید از ابتدا‬
scratch ‫• توسعه دهندگان اغلب از پروژه های میدان سبز لذت‬
• Developers often enjoy green ‫ زیرا آنها آزادی بیشتری برای خالقیت در‬، ‫می برند‬
field projects ,because they ‫مورد طراحی دارند‬
have a wider freedom to be ‫• ساختن یک سیستم پیچیده از ابتدا کار زیادی دارد‬
creative about the design
• It has a lot of work to built a
complex system from scratch
Projects built from ‫پروژه های ساخته شده از اجزای‬
existing components ‫موجود‬
• These projects can be considered neither ‫توسعه ای جدید‬ •
evolutionary nor new development ‫این نوع پروژه با چارچوب یا مؤلفه هایی که قبًال‬ •
• This type of project start with framework ‫توسعه یافته اند شروع می شود‬
or components already developed ‫یک سیستم نرم افزاری است که مخصوصًا برای‬ •
• A framework is a software system ‫استفاده مجدد در پروژه های مختلف طراحی شده است‬
especially designed to be reused in ‫چارچوب یک سیستم نرم افزاری است که برخی از‬ •
different projects . ‫جزئیات مهم را از دست داده است‬
• A framework is a software system that is ‫به عنوان مثال قوانین خاص این سازمان‬ •
missing some important details.
. ‫بهره مند شوید‬ •
• E.g. Specific rules of this organization.
• Benefit from reusing reliable software.
 ‫فرآیند توسعه وب‬
Web development
!‫ به یاد داشته باشید‬- ‫• قبل از شروع‬
process
‫• تالش برای ساخت یک وب سایت بدون برنامه مانند‬
.‫تالش برای ساخت یک خانه بدون نقشه معماری است‬
• Before you Start - Remember!
• Attempting to build a website
without a plan is like trying to
construct a house without an
architectural blueprint
 Web development process ‫فرآیند توسعه وب‬
• There are numerous steps in the web . ‫• و توسعه وب سایت وجود دارد‬
site design and development process. ‫• از جمع آوری اطالعات اولیه گرفته تا ایجاد وب سایت شما و‬
• From gathering initial information, to ‫در نهایت تعمیر و نگهداری برای به روز نگه داشتن وب‬
the creation of your web site, and .‫سایت شما‬
finally to maintenance to keep your
web site up to date and current. ، ‫• روند دقیق از یک طراح به طراح دیگر کمی متفاوت است‬
.‫اما اصول اولیه به طور کلی یکسان است‬
• The exact process will vary slightly ‫ جمع آوری اطالعات‬.1
from designer to designer, but the ‫ برنامه ریزی‬.2
basics are generally the same. ‫ طراحی‬.3
1. Information Gathering ‫ توسعه‬.4
2. Planning
‫ تست و تحویل‬.5
3. Design
‫ تعمیر و نگهداری‬.6
4. Development
5. Testing and Delivery
6. Maintenance
 Phase One: Information ‫ جمع آوری و تجزیه و‬: ‫فاز اول‬
Gathering & Analyze ‫تحلیل اطالعات‬
• The first step and the most important one, in ‫• اولین قدم و مهمترین قدم در طراحی یک وب سایت‬
designing a successful web site is to gather .‫ جمع آوری اطالعات و تجزیه و تحلیل آنهاست‬، ‫موفق‬
information and analyze them.
• Conduct a Client Survey Interview:
: ‫• انجام مصاحبه نظرسنجی مشتری‬
• It involves Good understanding of company that what ‫این امر مستلزم درک خوب شرکت است که اهداف و رویاهای‬ •
business goals and dreams are ,what are their target ‫ مخاطبان هدف آنها چیست و چگونه می توان‬،‫تجاری چیست‬
audience, and how the web can be utilized to help achieve .‫از وب برای کمک به دستیابی به آن اهداف استفاده کرد‬
those goals.
: ‫خالصه خالقانه را بنویسید‬/‫• خالصه پروژه‬
• Write the Project Brief/Creative Brief: •
، ‫بر اساس اطالعات جمع آوری شده در نظرسنجی مشتری‬
• Based on the information gathered in the client survey, ‫خالصه پروژه را بنویسید‬
write the project brief
• Write the Project Technical Specifications: : ‫• فنی پروژه را بنویسید‬
• to clearly establish requirements like screen resolution, ،‫برای تعیین واضح الزاماتی مانند وضوح صفحه نمایش‬ •
browser compatibility ,download time, web standards and ‫ استانداردهای وب و پلتفرم‬،‫ زمان دانلود‬، ‫سازگاری مرورگر‬
Platforms ‫ها‬
• Develop the Project Plan/Timeline: : ‫ جدول زمانی پروژه را توسعه دهید‬/ ‫• برنامه‬
• Establish the timeline for deliverables and tasks for each
Phase of the project. Assign due dates and resources.
‫جدول زمانی برای تحویل و وظایف برای هر مرحله از پروژه‬ •
. ‫ تاریخ سررسید و منابع را تعیین کنید‬. ‫تعیین کنید‬
Cont. ‫ادامه‬
• Works to be done in information ‫• کارهایی که باید در مرحله جمع آوری اطالعات انجام‬
gathering phase: :‫شود‬
• Interviews with the clients ‫مصاحبه با مشتریان‬ •
• Mails and supporting docs by the client ‫نامه ها و اسناد پشتیبانی توسط مشتری‬ •
• Discussions Notes ‫یادداشت های بحث‬ •
• Online chat ‫چت آنالین‬ •
• Recorded telephone conversations ‫مکالمات تلفنی ضبط شده‬ •
• Output of all these works are: :‫• خروجی همه این کارها عبارتند از‬
• Work plan ‫برنامه کار‬ •
• Cost involved ‫هزینه درگیر‬ •
• Hardware-software requirements ‫نرم افزاری‬-‫الزامات سخت افزاری‬ •
• Supporting documents ‫اسناد پشتیبان‬ •
• The approval ‫تاییدیه‬ •
Phase Two: Planning ‫ برنامه ریزی‬: ‫فاز دوم‬
• Using the information gathered from ،‫• با استفاده از اطالعات جمع‌آوری‌شده از فاز اول‬
Phase one, it is time to put together a ‫زمان آن فرا رسیده است که یک برنامه برای‬
plan for your web site. .‫وب‌سایت خود تنظیم کنید‬
• This is the point where a site Structure is ‫• این نقطه ای است که یک ساختار سایت توسعه می‬
developed and The deliverables from this :‫یابد و موارد قابل تحویل از این مرحله عبارتند از‬
Phase are: ‫ طرح کلی محتوا‬.1
1. Content Outline ‫ نمودار سایت‬.2
2. Site Diagram ‫ نمودارهای شرح صفحه‬.3
3. Page Description Diagrams
‫• این سه قابل تحویل به یکدیگر وابسته هستند و باید به‬
• These three deliverables are dependent . ‫صورت متوالی تکمیل شوند‬
on each other and need to be completed
sequentially.
Cont. ‫ادامه‬
• Content Outline: : ‫• رئوس مطالب‬
• Working closely with your ‫ یک لیست دسته بندی‬،‫با همکاری نزدیک با مشتریان خود‬ •
clients, create a categories list of . ‫از تمام محتوای موجود با بازخورد نهایی ایجاد کنید‬
all existing content with final
feedback.
Cont. ‫ادامه‬
• Site Diagram: :‫• نمودار سایت‬
• Take your final content outline and ‫نهایی خود را بگیرید و یک نقشه سایت یا نمودار سایت ایجاد‬ •
create a sitemap or site diagram. . ‫کنید‬
• It is A visual representation of your ‫این یک نمایش بصری از طرح کلی محتوای شما و ساختار‬ •
content outline and site structure. . ‫سایت است‬
• You can use Visio, Edraw Max to ‫ برای ایجاد نمودار سایت‬Visio، Edraw Max ‫می توانید از‬ •
create your site diagram ‫خود استفاده کنید‬
• When you use a site map during the ‫هنگامی که از نقشه سایت در طول توسعه یک وب سایت‬ •
development of a Web site even a ‫ حتی یک وب سایت که فقط شامل چند صفحه‬، ‫استفاده می کنید‬
Web site that includes only a few ‫ می توانید شناسایی کنید‬،‫است‬
pages you can identify ‫صفحاتی که باید بسازید‬ •
• Pages that you need to build ‫نحوه ارتباط صفحات با یکدیگر‬ •
• How pages relate to each other ‫عناصر ناوبری که شما نیاز دارید‬ •
• Navigation elements that you need
Cont. ‫ادامه‬
• Page Description Diagrams: :‫• نمودارهای توضیحات صفحه‬
• Many Information Architects are ‫بسیاری از معماران اطالعات در حال حاضر استفاده از‬ •
now recommending the use of Page ‫) را به عنوان مرحله‬PDD( ‫نمودارهای توصیف صفحه‬
Description Diagrams (PDD)as a step .‫ای قبل از وایرفریم توصیه می کنند‬
before wireframes ‫ چه محتوایی در این صفحه تعلق دارد؟‬.1 •
• 1. What content belongs on this ‫ اولویت هر قسمت از محتوا چیست؟‬.2 •
page?
• 2. What is the priority of each chunk
of content?