এইচটিএমএল / সিএসএস লিখিতভাবে সরাসরি ডাইভিংয়ের বিরুদ্ধে একটি সম্পূর্ণ চিত্র মক আপ করার কোনও সুবিধা আছে কি?


29

অতীতে, অনেক সংস্থা এবং ওয়েব ডিজাইনারের একটি ওয়ার্কফ্লো ছিল যা দুটি বা তিনটি অংশ ছিল, ন্যূনতম - ডিজাইন, মার্কআপ, ব্যাকএন্ড। এগুলি সাধারণীকরণ এবং লাইনগুলি কিছুটা ঝাপসা হতে পারে ... তবে আমি নিশ্চিত আপনি আমার কথাটি পেয়ে গেছেন।

প্রায়শই ওয়েব ডিজাইনারটি "কেবলমাত্র ভিজ্যুয়াল" হয়ে থাকে এবং কেবল ফটোশপ বা ফায়ারওয়ার্কসের মতো চিত্র সম্পাদনা সফ্টওয়্যারটিতে একটি খুব বিস্তারিত মকআপ তৈরির জন্য দায়বদ্ধ ছিল। মকআপ (গুলি) রঙ এবং ধরণের পছন্দ থেকে শুরু করে ব্যাকগ্রাউন্ড, আইকন, ফটো এবং অন্যান্য চিত্র ব্যবহার করার জন্য কোনও ওয়েব পৃষ্ঠার প্রতিটি সম্ভাব্য দিক দেখায়। তবে "ডিজাইনার" কখনই আসল লাইভ নির্মাণ এবং বাস্তবায়নের সাথে উদ্বিগ্ন ছিল না। তারা শুধুমাত্র চেহারা উপর দৃষ্টি নিবদ্ধ ছিল।

একবার ডিজাইন অনুমোদিত হয়ে গেলে (এই চিত্র ফাইলগুলি পর্যালোচনা করে) দ্বিতীয় পর্যায়ে কাজ শুরু করা হয়েছিল - চিত্র ফাইল (গুলি) কে লাইভ এইচটিএমএল / সিএসএসে স্থানান্তরিত করে।

  • একটি একক আসন বা ফ্রিল্যান্স পরিবেশে, ওয়েব ডিজাইনার কিছু অভ্যন্তরীণ অ্যাপ্লিকেশন বিকল্পের মাধ্যমে টুকরোগুলি ব্যবহার করতে এবং HTML এ রফতানি করতে পারে। উপর বিরল অনুষ্ঠান ডিজাইনার মৌলিক HTML / CSS এর পৃষ্ঠা ফ্রেম গঠন করা যেতে পারে।

  • কিছু কর্পোরেট পরিবেশে, এই মকআপগুলি ওয়েব ডিজাইনারের জন্য একটি স্তরযুক্ত চিত্র ফাইল (.psd, .png [ফায়ারওয়ার্কসের জন্য]) আকারে থাকবে এবং ডিজাইনার কখনই কোনও মার্কআপ বা কোড প্রয়োগ করার বিষয়ে চিন্তা করবেন না । "ডিজাইনার" কখনই এইচটিএমএল বা সিএসএস তৈরি করবেন যাতে তাদের তৈরি করা এই চিত্রটি মকআপ প্রয়োগ করতে পারে তা নিয়ে তাদের কখনই উদ্বিগ্ন হওয়ার দরকার ছিল না। চিত্র ফাইলগুলি কোনও "বিকাশকারীকে" হস্তান্তরিত করা হয়েছিল / যারা এই চিত্রের সাথে মেলে এমন এইচটিএমএল / সিএসএস তৈরির জন্য দায়বদ্ধ ।

আমি কল্পনা করি এখনও কিছু এইভাবে কাজ করে। তবে মার্কআপ ল্যাঙ্গুয়েজ, সিএসএস 3 এবং ব্রাউজার সমর্থন উন্নতির ক্ষেত্রে অগ্রগতি সহ - বেশিরভাগ ক্ষেত্রে একটি সম্পূর্ণ ওয়েব পৃষ্ঠার রাস্টার উপস্থাপনাটি যত্ন সহকারে সময় ব্যয় করা বেশিরভাগ ক্ষেত্রে ব্যর্থ হতে পারে।

বর্তমান চিহ্নিতকরণের সাথে অনেকগুলি HTML নকশার প্রয়োজনগুলি সরাসরি এইচটিএমএল / সিএসএসের মাধ্যমে প্রয়োগ করা খুব সহজ এবং চিত্র প্রয়োগের ব্যবহার ছোট চিত্রের সম্পদ বা ফটোগ্রাফ তৈরি করতে সীমাবদ্ধ যা প্রয়োজন হতে পারে। (লাইব্রেরি এবং / অথবা বুটস্ট্র্যাপের মতো টেম্পলেটগুলি এই ধারণাটিকে আরও এগিয়ে দিয়েছে))

আমার নিজের কর্মপ্রবাহ আমি উল্লেখযোগ্য হল সরেছেন দূরে পুরো পাতা রূপ থেকে যতক্ষণ না তারা হয় বিশেষভাবে অনুরোধ করা হয়েছে। ডিজাইনের গতি উন্নত করতে এবং শেষ পর্যন্ত ব্রাউজারগুলিতে যা রেন্ডার করা হবে তার কাছাকাছি যা অনুমোদিত হয়েছে তা নিশ্চিত হওয়ার জন্য আমি এটি করছি। আসলে, আমি বেশ কয়েক বছরে একটি পূর্ণ পৃষ্ঠা মকআপ তৈরি করিনি। তবে আমি জানি যে এই পদ্ধতিটি ব্যবহার করে এখনও কর্মপ্রবাহ রয়েছে।

নকশা নির্মাণের জন্য এইচটিএমএল / সিএসএসে ডাইভিংয়ের আগে চিত্র সম্পাদনা অ্যাপ্লিকেশনটিতে পুরো পৃষ্ঠার মকআপগুলি তৈরি করার কোনও বাস্তব সুবিধা রয়েছে কি ?


অ্যান্ডি কীভাবে এটি "সহজ" হবে তা আমি বুঝতে পারি না। একটি CSS গ্রেডিয়েন্ট পরিবর্তন পরিবর্তনের 5+ ইমেজ ফাইল সঙ্গে গ্রেডিয়েন্ট হয়, বেশ সহজ হয় পর্যন্ত সহজ থেকে। (... এবং এখন অ্যান্ডির মন্তব্য মুছে ফেলার কারণে এই মন্তব্যটি স্থানের বাইরে বলে মনে হচ্ছে)।
স্কট

দুঃখিত দোস্ত আমি এর রেফারেশন দিতে যাচ্ছিলাম! হা হা। কেবলমাত্র ব্যক্তিগত পছন্দটি সত্যই, আমি কোড সহ আসলে ডিজাইনের লড়াই করছি। আমি অনেকটা ফটোশপে ডিজাইনিং, এবং তারপরে কোডিং পছন্দ করি। সব আলাদা করে রাখা। আমি জানি কোডে এটি পরিবর্তন করা কতটা সহজ, তবে পিএসে সমানভাবে সংযুক্ত স্তর শৈলীগুলি 2 টি ক্লিক এবং পরিবর্তিত
অ্যান্ডি হোমস

উত্তর:


17

পূর্ণ পৃষ্ঠার মকআপগুলি নির্মাণের সুবিধাটি শ্রমের বিভাজন।

বৃহত্তর সংস্থাগুলিতে যাদের ডিজাইনার এবং একজন (প্রথম প্রান্ত) উভয়ই রয়েছে, ডিজাইনারের কাজ ডিজাইন করা এবং বিকাশকারীর কাজ কোড লেখা

এই বিভাগটি থাকার ফলে ডিজাইনার ওয়েবসাইটটির চেহারা, অনুভূতি এবং ইন্টারফেসে কাজ করতে তাদের সমস্ত সময় ব্যয় করতে দেয় এবং কীভাবে এটি তৈরি হয় সে সম্পর্কে কিছু জানতে হবে না। তারা উচ্চমানের নকশা তৈরি করতে পারে এবং সিদ্ধান্তের জন্য আরও দীর্ঘ সময়ের জন্য চিন্তা করতে পারে কারণ তারা একই সাথে তারা যা চায় কোড করার জন্য কাজ করছে না।

এটি বিকাশকারীকে আরও ছোট কোড এবং ভিন্ন ভিন্ন রাজ্যগুলি সহ কীভাবে প্রদর্শিত হবে সে সম্পর্কে চিন্তা না করে আরও কোড লিখতে দেয় lets তারা প্রদত্ত সময়ে যথাসম্ভব যথাযথভাবে প্রয়োগ করে এবং অন্য প্রকল্পে যেতে পারে move


ডিজাইনারটি যদি বিকাশকারীও হয় তবে আমার মনে হয় বেশিরভাগ লোক কম-বেশি লোক আপনার সাথে কথা বলতে শুরু করেছে যে তারা আরও রুক্ষ পণ্য তৈরি করে এবং জিনিসগুলি পরীক্ষা করার জন্য দ্রুত পুনরাবৃত্তি করে। এটি পিক্সেল নিখুঁত ফটোশপ ডকুমেন্ট তৈরি করার বিপরীতে ধারণাগুলিকে দ্রুত পরীক্ষার অনুমতি দেয়।

তবে কোড ছাড়াই রুক্ষ, পুনরাবৃত্ত নকশা হ'ল বিশেষত বিন্যাস এবং কাজের প্রবাহের জন্যও একটি বৈধ এবং অবিশ্বাস্যভাবে কার্যকর পদ্ধতির। মার্কআপ ভাষা এবং নতুন প্রযুক্তি রুক্ষ ধারণা নিয়ে দ্রুত কাজ করার উদ্ভাবন করে নি :)


শ্রম বিভাগটি একেবারে বোধগম্য এবং আমি এটি বিবেচনা করেছি। আমি চিত্রের সম্পাদনার সাথে সরাসরি হাতে এইচটিএমএল হাতে না তৈরি করার জন্য আরও প্রযুক্তিগত কারণগুলির বিষয়ে ভাবছিলাম (প্রদত্ত কোনওটি চিত্র সম্পাদনা এবং বেসিক ফ্রন্ট এন্ড নির্মাণে স্বাচ্ছন্দ্যযুক্ত)।
স্কট

আপনি ফটোশপের মতো কিছু ব্যবহার না করার কোনও প্রযুক্তিগত কারণ নেই । এটি একটি কাজের / দক্ষতার সমস্যা, কোনও প্রযুক্তিগত নয়
Zach Sauceer

আমি পছন্দ করি আপনি এটিকে বিষয়হীন রেখেছেন। এটি ডিজাইনার / বিকাশকারীকে কীভাবে প্রভাবিত করে তার একটি ভাল ব্রেকডাউন! +1 টি
Möoz

1
যদিও এটি একটি অসুবিধাও বটে। প্রকৃত বিশ্ব নির্মাণ জ্ঞানের অভাবের একজন স্থপতি কেবল প্রায়শই এমন সমাধান সমাধান করতে পারেন যা নিষিদ্ধ ব্যয়বহুল বা অযৌক্তিক, তাই ডিজাইনাররা যারা ওয়েব সাইটগুলি ডিজাইন করেন এবং কীভাবে এটি তৈরি হয় সে সম্পর্কে কিছুই জানেন না '। সুতরাং, আমি বিতর্ক করব যা প্রায়শই যুক্তিযুক্ত সুবিধা, তবে বাস্তবে, এটি যতটা সুবিধা বলে মনে হয় এটি প্রায় সুবিধা নয় not
DA01

7

আমি এই উত্তর দিয়ে গুফাকে ধরতে যাচ্ছি। পরিষ্কার করে বলার জন্য, আমি একক গুফাকে খুঁজে বের করার চেষ্টা করছি না, বরং, বুলেটযুক্ত পয়েন্টগুলি আমি শুনেছি এমন সাধারণ বিষয়। আমি কিছু পাল্টা পয়েন্টও অফার করতে চাই। আমি বলছি না গুফা ভুল এবং আমি সঠিক। আমি কেবল একটি পাল্টা পয়েন্ট দিচ্ছি।

  1. এইচটিএমএল এবং সিএসএসে কীভাবে বিভিন্ন জিনিস করতে হয় তা চেষ্টা করার সময় ব্যয় করা হলে ডিজাইন প্রক্রিয়াটির সৃজনশীল অংশটি ভোগে।

যদি কেউ কোডকে সমানভাবে সৃজনশীল হিসাবে বিবেচনা না করে তবে এটি সত্য। কোনও শিল্পীর কাজ করার জন্য ফটোশপ এবং এইচটিএমএল / সিএসএস / জেএস উভয় মাধ্যম a পেইন্ট যেমন কাঠকয়ালের মতো সৃজনশীল, তেমনি ফটোশপ এইচটিএমএল / সিএসএস / জেএসের মতো একটি মাধ্যমের সৃজনশীল হতে পারে।

এবং এইচটিএমএল / সিএসএস / জেএসে সরাসরি কাজ করার বড় সুবিধা হ'ল এটির বহুমাত্রিকতা। দিনের শেষে ফটোশপটি একটি ফ্ল্যাট ক্যানভাস। এইচটিএমএল / সিএসএস / জেএস হ'ল তরলতা, মিথস্ক্রিয়া, অ্যানিমেশন ইত্যাদি সহ একটি গতিশীল ক্যানভাস is

নীচের লাইন, আমি যুক্তি দিয়েছি যে এই ক্ষেত্রে কোডটি আরও সৃজনশীল মাধ্যম।

  1. ডিজাইনার এবং কোডাররা যখন আলাদা আলাদা মানুষ হন, ডিজাইনাররা এইচটিএমএল এবং সিএসএসে বেশ ভাল হলেও কোডিংয়ে তারা খুব কমই সত্যিই ভাল। ফলাফলটি (বিভিন্ন ডিগ্রীতে) অদক্ষ কোড যা ফোলা এবং বজায় রাখা কঠিন।

এর পাল্টা পয়েন্টটি, দুঃখের বিষয়, আমি সর্বদা এটির মধ্যে চলে যাই: উত্সর্গীকৃত ভূমিকাতে কাজ করা বেশিরভাগ বিকাশকারী বৃহত্তর সংস্থায় কাজ করেন (যেখানে নিবেদিত ভূমিকা আরও আদর্শ) এবং ক্রস-শৃঙ্খলা জ্ঞানের অভাবের কারণে ( এবং প্রায়শই উপস্থাপনা স্তর কোডের সম্পূর্ণ অভাব) সর্বাধিক ফুলে যাওয়া কিছুকে আমি কখনও দেখেছি এমন ফ্রন্ট-এন্ড কোড বজায় রাখা একটি কঠিন করে তোলে।

পয়েন্ট হ'ল, আমি কারও ভিজ্যুয়াল ডিজাইনের ক্ষমতাগুলিকে তাদের কোডিংয়ের ক্ষমতার কোনও ইঙ্গিত বিবেচনা করব না। আমি আরও একধাপ এগিয়ে গিয়ে যুক্তি দিয়েছিলাম যে একজন প্রতিভাবান জেনারালিস্ট যিনি ডিজাইন এবং কোডিং জানে - এমনকি তারা সেরা ডিজাইনার বা সেরা কোডার না হলেও, প্রায়শই সত্যের কারণে অত্যন্ত বিচ্ছিন্ন দলের চেয়ে আরও ভাল সামগ্রিক পণ্য তৈরি করতে পারে তারা তৈরি করার সাথে সাথে তারা আরও বড় ছবি দেখতে পাবে। অনুবাদে হারিয়ে গেছে অনেক কম।

  1. আপনি যদি ডিজাইনটি দেখতে কেমন হবে সে সম্পর্কে আপনার স্পষ্ট ধারণা থাকার আগে আপনি কোডটি লিখতে শুরু করেন, আপনি কোডটি কীভাবে তৈরি করবেন সে সম্পর্কে অজানা পছন্দগুলি করেন। ঝুঁকিটি হ'ল এটি কোডটিকে আরও খারাপ করে দেবে এবং ডিজাইনের সম্ভাবনাগুলিকে সীমাবদ্ধ করবে।

কোডে নকশা করার অর্থ এটি আপনার উত্পাদন কোড নয়। আমি এমন প্রকল্পগুলিতে কাজ করেছি যেখানে আমাদের তৈরি করা বেশিরভাগ কোড সম্পূর্ণরূপে ডিজাইনের জন্য এবং পরে কিছু প্রোটোটাইপিংয়ের জন্য ছিল। একবার শেষ হয়ে গেলে, আমরা তখন একটি পরিষ্কার পুনর্লিখন করব। কোডিংয়ের প্রথম রাউন্ডে আমাদের প্রচুর 'গেটচাস' সন্ধান করার ফলে এটি আমাদের বাড়তি সুবিধা পেয়েছিল।

  1. এইচটিএমএল এবং সিএসএস কোড ডিজাইনের ছোট পরিবর্তনগুলির সাথে বেশ পরিবর্তন করতে পারে যা ডিজাইনের প্রক্রিয়াটিকে আরও স্থিতিশীল করে তুলবে। আপনি নিজেকে কোডের মধ্যে করা সহজ পরিবর্তনগুলির মধ্যে সীমাবদ্ধ করে ঝুঁকিপূর্ণ।

এর পাল্টা যুক্তি হ'ল ডিজাইনার নিজেকে ফটোশপে তৈরি করা সহজ পরিবর্তনগুলিতে কেবল নিজের মধ্যে সীমাবদ্ধ রাখছেন। এটি কোনওভাবেই খুব ভাল যুক্তি নয়।


আমার বলতে হবে আমি বেশিরভাগ ক্ষেত্রেই এর সাথে একমত আমি মকআপের পক্ষে একমাত্র কারণ হ'ল এমন কাজ করা থেকে বিরত থাকা যা আপনি যা করতে চেয়েছিলেন তা করার বিপরীতে কাজ করা সহজ। তবে এটি সম্পূর্ণ মকআপের পক্ষে এবং বিপক্ষে তত যুক্তি। কলম এবং কাগজের মতো ফটোশপও এই সমস্যায় ভুগছে। পয়েন্ট হচ্ছে এগুলি সমস্ত ট্রেড অফস off
joojaa

5

ডিজাইনার কোডটির সীমাবদ্ধতাগুলি বুঝতে না পারলে প্রথমে ফটোশপ মকআপ না করার একমাত্র কারণ। আপনি কখনই ক্লায়েন্টকে এমন কোনও কিছুর সংকলন দিতে চান না যে তার ফাইনালে থাকতে পারে না।

যতক্ষণ না পিএসএস এমন কিছু প্রতিনিধিত্ব করে যা সিএসএস / এইচটিএমএলে (ক্রস-ব্রাউজার এবং ক্রস-মিডিয়া সীমাবদ্ধতা দেওয়া) খুব কাছাকাছিভাবে প্রতিরূপিত করা যায়, আমি ফটোশপে এটি করতাম (বা ইনডিজাইন - আমি কয়েকজন ডিজাইনারকে জানি যে এতে কমপাল রয়েছে)। চিত্রগুলি ম্যানিপুলেট করা এটি দ্রুত এবং অনেক সহজ। সিএসএসে মশকরা করা আমার কোডিংয়ের আগে কোডিং হবে, যদি তা বোঝা যায়।


2
এবং এটি কেবল সীমাবদ্ধতাগুলি বোঝা নয়, ক্ষমতাগুলিও। কোড কেবল একটি ভিন্ন মাধ্যম।
DA01

1

কোড জেনারেশন উপাদান থেকে ডিজাইন উপাদান আলাদা রাখার বেশ কয়েকটি কারণ রয়েছে, উদাহরণস্বরূপ:

  • এইচটিএমএল এবং সিএসএসে কীভাবে বিভিন্ন জিনিস করতে হয় তা চেষ্টা করার সময় ব্যয় করা হলে ডিজাইন প্রক্রিয়াটির সৃজনশীল অংশটি ভোগে।

  • ডিজাইনার এবং কোডাররা যখন আলাদা আলাদা মানুষ হন, ডিজাইনাররা এইচটিএমএল এবং সিএসএসে বেশ ভাল হলেও কোডিংয়ে তারা খুব কমই সত্যিই ভাল । ফলটি হবে (বিভিন্ন ডিগ্রীতে) অদক্ষ কোড যা ফোলা এবং বজায় রাখা কঠিন।

  • আপনি যদি ডিজাইনটি দেখতে কেমন হবে সে সম্পর্কে আপনার স্পষ্ট ধারণা থাকার আগে আপনি কোডটি লিখতে শুরু করেন, আপনি কোডটি কীভাবে তৈরি করবেন সে সম্পর্কে অজানা পছন্দগুলি করেন। ঝুঁকিটি হ'ল এটি কোডটিকে আরও খারাপ করে দেবে এবং ডিজাইনের সম্ভাবনাগুলিকে সীমাবদ্ধ করবে।

  • এইচটিএমএল এবং সিএসএস কোড ডিজাইনের ছোট পরিবর্তনগুলির সাথে বেশ পরিবর্তন করতে পারে যা ডিজাইনের প্রক্রিয়াটিকে আরও স্থিতিশীল করে তুলবে। আপনি নিজেকে কোডের মধ্যে করা সহজ পরিবর্তনগুলির মধ্যে সীমাবদ্ধ করে ঝুঁকিপূর্ণ।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.