آموزش HTML – بخش اول: ساختار صفحات وب

دسته: HTML، طراحی وب آموزش HTML - بخش اول: ساختار صفحات وب

روزنامه‌ها، مجلات، بروشور‌ها، فرم‌های بانکی، منوی کافی‌شاپ‌ها و… همگی دارای نوعی از ساختار هستند.

ساختار به خواننده کمک می‌کند تا پیام سند (document) مربوطه را دریافت کند و اطلاعات موردنیازش را به دست آورد. برای مثال اگر در یک کافی‌شاپ قصد سفارش قهوه‌ی ترک را داشته باشید، فوراً به عنوان نوشیدنی‌های گرم نگاه می‌کنید. برای مطالعه‌ی یادداشت سردبیر در یک روزنامه نیز، نگاهی به ستون کناری صفحه می‌اندازید. این ساختار است که به شما در گشت و گذار در روزنامه یا منوی کافی‌شاپ کمک می‌کند.

صفحات وب نیز همانند دیگر اسناد، دارای ساختار هستند. در این نوشته:

بیشتر بخوانید…

وب‌ چگونه کار می‌کند؟

دسته: طراحی وب، وب وب چگونه کار می‌کند؟

در این نوشته به طور اجمالی و ساده‌شده می‌خواهیم ببینیم هنگامی که شما از یک وب‌سایت بازدید می‌کنید چه اتفاقاتی می‌افتد تا شما بتوانید وب‌سایت موردنظرتان را ببینید.

اگر بخواهید به کدنویسی بپردازید، شاید دانستن این اطلاعات در کوتاه‌مدت خیلی لازم نباشد، اما در بلندمدت قطعا از دانستن این اطلاعات سود فراوانی خواهید برد.

بیشتر بخوانید…

وب‌سایت‌ها چگونه ایجاد می‌شوند؟

دسته: طراحی وب، وب وب‌سایت‌ها چگونه ایجاد می‌شوند؟

همه‌ی وب‌سایت‌ها از HTML و CSS استفاده می‌کنند و برخی از سیستم‌های مدیریت محتوا، نرم‌افزارهای وبلاگ‌نویسی و پلتفرم‌های تجارت الکترونیک تکنولوژی‌های بیشتری را نیز به کار می‌گیرند.

در این نوشته نگاهی اجمالی به پشت پرده‌ی صفحات وب می‌اندازیم.

بیشتر بخوانید…

افراد چگونه به وب دسترسی پیدا می‌کنند؟

دسته: طراحی وب، وب افراد چطور به وب دسترسی پیدا می‌کنند؟

برای این که شناخت بهتری از کاربران اینترنت پیدا کنید، خوب است که با روش‌های دسترسی افراد به وب و اصطلاحات مربوط به آن آشنا شوید.

بیشتر بخوانید…

طراحی سایت تچر فیلم ایرانیان: بررسی مراحل انجام پروژه

دسته: نمونه کار

من به تازگی طراحی سایت شرکت فیلمسازی تچر فیلم ایرانیان رو بر عهده داشتم.

چرا و چگونه این مشتری به من سفارش داد؟

دوست نزدیکی دارم که یکی از اطرافیانش نیاز به طراحی سایت داشت. دوست من انجام این کار رو به من پیشنهاد کرد.

زمان خوبی برای من بود و تازه پروژه‌ای شخصی رو به اتمام رسونده بودم. وقتم آزاد بود و کار رو قبول کردم.

من و مشتری ابتدا تلفنی صحبتی کردیم و بر سر قیمت و طراحی کلی به توافق رسیدیم.

سپس من فرم‌های قرارداد رو برای مشتری ایمیل کردم و امضا شده تحویل گرفتم. خودم هم به همین ترتیب امضا، اسکن و ایمیل کردم.

ستون کناری وبسایت تچر فیلم ایرانیان

مراحل طراحی چگونه پیش رفت و طراحی سایت چگونه صورت گرفت؟

مشتری نیازها، قابلیت‌ها و رنگ‌بندی موردنظرش رو برای من شرح داد و به این ترتیب فرآیند طراحی آغاز شد.

من لوگوی شرکت رو از مشتری دریافت کردم.

طراحی رو ابتدا در فتوشاپ انجام دادم.

سپس، پس از تایید طراحی اولیه توسط مشتری، طرح رو به زبان‌های HTML و CSS درآوردم.

تصویر تمام قد از صفحه ی خانگی وبسایت شرکت فیلمسازی تچر فیلم ایرانیان

سپس بر اساس کدهایی که نوشته بودم یک پوسته‌ی وردپرسی ساختم.

به دلیل عدم آشنایی مشتری با هاست و دامنه، من در خرید این موارد مشورت دادم و وردپرس رو آماده کردم و آموزش‌های لازم رو فراهم آوردم.

برای مشاهده‌ی سایر طراحی‌های من، نگاهی به صفحه‌ی نمونه‌ کارها بیاندازید.

پنج سال بغبغو

دسته: نمونه کار

من پنج سال روی بغبغو کار کردم.

در این پنج سال من و نویسنده‌ها بیش از ۱۰۰ آموزش در بغبغو منتشر کردیم و خواننده‌ها بیش از ۱۰ هزار نظر برامون نوشتن.

«بغبغو یک وبلاگ شادِ آموزشیه که توش می‌تونید کلی چیزای به دردبخور یاد بگیرید. از آموزش دستبند نخی گرفته تا طرز تهیه‌ی نوشیدنی و کیک‌های خوشمزه».

وبلاگ بغبغو

اوایل از سایت‌های غیرفارسی ترجمه می‌کردم، اما بعد دست به دوربین شدم و همه چی رو خودم می‌ساختم. کار من بیشتر و انتشار محتوا کمتر شد، اما راضی‌تر بودم. کبریت توکلی توی عکس بیشتر می‌چسبید. چون آموزش رو خودم نوشته بودم، به سوالات خواننده‌ها راحت‌تر پاسخ می‌دادم و در کل متوجه شدم که آموزش‌ها بیشتر قابل ساخت شد.

نویسنده‌های مهمان هم همه چی رو بهتر کردن. شراره جینگیل بینگیل و سالاد دم‌دستی یاد داد و در مجموع ۶ آموزش نوشت که ترفندش برای ترد و خوشمزه کردن سیب‌زمینی سرخ‌کرده پربازدید‌ترین آموزش سایته. فاطمه حسینی که سه ساله سردبیری سایت رو برعهده داره ۱۳ آموزش نوشته و به صدها سوال خواننده‌ها پاسخ داده.

عاشق خوشگل کردنش بودم. دائم به طراحیش ور می‌رفتم و سالی یکی دوبار کلاً پوسته رو از نو طراحی می‌کردم. در همین جریان کم‌کم طراحی وب رو یاد گرفتم و بعدها برای مدتی حرفه‌ی اصلیم شد.

پوسته های بغبغو

بغبغو بارها در نشریات معرفی شد:

بغبغو در رسانه ها

تجربه‌ی بغبغو نقطه شروع فعالیت جدی من در حوزه‌ی Education بود و باعث شد تا رویکرد سه‌گانه‌ی Arts – Education – Entertainment رو پیش بگیرم.

در جستجوی راهکاری جهت دنبال کردن اخبار شخصی‌سازی‌ شده‌‌ی فارسی

دسته: یادداشت‌ها

من می‌خوام در جریان اخباری که برام مهمه قرار بگیرم.

وب‌سایتی مثل آمازون با تحلیل داده‌هایی که از من جمع کرده، سعی می‌کنه محصولاتی رو به من نشون بده که احتمال بیشتری داره من بخرم.

آمازون و دیجیکالا

مسائل مربوط به حریم شخصی این قضیه به کنار، حالا به یک وب‌سایت خبری بپردازیم:

صفحه‌ی اول فارس‌نیوز یا بی.بی‌.سی فارسی، به من همون مطالبی رو نشون می‌دن که به پدر من و یا به شما نشون می‌ده. در این سایت‌ها دائم باید از روی خبرهایی که دوست ندارم بپرم تا خبر مورد علاقم رو پیدا کنم. چرا حجم اینترنت من باید صرف بارگزاری عکس فوتبالیستی که نمی‌شناسمش و مصاحبه‌ی خبریش برام اهمیتی نداره بشه؟

در مورد موضوعات غیر فارسی، مدیوم تا حدی مشکل من رو حل کرده. اگرچه مدیوم سکوی خبرگزاری نیست ولی حجم بزرگی از اتفاقات مهم در اونجا بازتاب پیدا می‌کنه. من با دنبال کردن نویسنده‌ها و کانال‌های مورد علاقم، مطالب مورد علاقم رو می‌بینم و می‌خونم. یک وقت‌هایی هم هست که دوست دارم از موضوعاتی که برام متفرقه به حساب میان مطلبی بخونم یا صرفا ببینم چی امروز داغه؛ دسته‌بندی‌های روتین مدیوم این امکان رو برام فراهم می‌کنه.

مدیوم

کشکول به عنوان یک خبرخوان مطالب، سرویس ایرانی مفیدیه، اما یک «فیدخوان» پاسخ‌گوی مشکل من نیست. من نمی‌‌خوام همه‌ی مطالب عصر ایران رو ببینم& به علاوه‌ی این که کشکول یک محدودیت اساسی داره: کشکول می‌خواد که فیلتر نباشه، و به من اجازه نمی‌ده مثلا بی.بی.سی فارسی رو دنبال کنم؛ پس با این سرویس، عملا دارم بخشی از اخبار رو از دست می‌دم.

کشکول

کشکول یک ویژگی خیلی خوب داره و اون امکان دنبال کردن تگ‌هاست و شاید اگه این امکان توسعه‌یافته‌تر بود می‌تونست بخشی از مشکل من رو – با وجود محدودیت اولش – حل کنه. در حال حاضر تگ‌ها محدودن (مثلا تگی برای تئاتر وجود نداره و فقط سینما تگ شده) و من جایی جهت افزودن تگ دلخواه ندیدم. با دنبال کردن یک تگ، هر وب‌سایتی که در کشکول ثبت شده و در مطلبش اون تگ رو استفاده کنه در فید من ظاهر می‌شه؛ خوبه که امکان بلاک کردن بعضی سایت‌ها وجود داشته باشه. من شاید هرگز نخوام مطالب باشگاه خبرنگاران جوان رو بخونم، حتی اگه مطلبی با تگ سینما ارسال کرده باشن.

شما اگر راهکاری سراغ دارید، خوشحال می‌شم به من معرفی کنید تا امتحان کنم.

موزیک ویدیوی خرسی

دسته: نمونه کار

پوستر خرسی

موزیک ویدیوی خرسی دوست‌داشتنی‌ترین اثر برای خودمه. این کار رو برای آهنگ «آها بوگو» از آلبوم ۸-بیتی مارتین شمعون‌پور ساختم.

در جریان تولید، کلی آدامس خرسی خوردم و با After Effects و Mocha ور رفتم.

تدوین خرسی

به ما در جریان ساخت خیلی خوش گذشت. امیدوارم به شما هم در جریان تماشا خیلی خوش بگذره.

خرسی

این نماهنگ رو از این لینک‌ها می‌تونید تماشا کنید:

خرسی در ویمئو

خرسی در آپارات

خرسی در یوتیوب

مصاحبه با روزنامه صبا در مورد فیلم پمبه

دسته: یادداشت‌ها

متن مصاحبه

اسم فیلم را به چه دلیل «پمبه» گذاشتید؟

نام این فیلم به دلیل بی‌آلایش بودن دختران کم‌سن و سال و همچنین رنگ سفیدی که به لباس عروس نسبت داده شده معنا پیدا کرده است.

اهمیت نگاه اجتماعی فیلم «پمبه» چیست؟

تمام تلاش من بر این بود که خشونت ازدواج دختران کم‌سن و سال با مردان بالغ را در کمترین زمان و با توجه به اتفاقات پیرامون بیان کنم. البته این نگاه را سعی کردم به دور از کلیشه‌‌ و شعارزدگی به تصویر بکشم؛ به همین علت از نمادهایی که بتواند موضوع و مفهوم این موضوع را بهتر و بیشتر عیان کند استفاده کرده‌ام. به‌نوعی می‌توان گفت که هر نماد، مجموعه‌ای از چند تصویر است. حال با این توضیح باید بگویم که اهمیت چنین نگاهی به عقیده من در این است که پیامی سرراست و روشن برای مخاطب به همراه دارد. البته این پیام به هیچ عنوان در لایه اول فیلم بیان نشده است و فهمش نیاز به ارتباط ذهنی عمیق فکری با قصه فیلم دارد و به همین علت، این تصمیم لذت کشف کردن را از مخاطب دریغ نمی‌کند. باتوجه به این موضوع با تفکر در مورد نمادهای فیلم «پمبه» به هشداری بزرگ می‌رسیم که همان درون‌مایه فیلم به حساب می‌آید.

آیا این نگاه را می‌توان متاثر از اتفاقات ثمرات پیش‌آمده آن دانست؟

بله، درواقع اساس و بنیان این فیلم متاثر از ثمرات این‌گونه ازدواج‌ها شکل گرفته است. حال با تعریف این نگاه فیلمساز هم می‌تواند مانند سایر افراد اجتماع، از محیط اجتماعی خود تاثیر بگیرد و ثمره این تاثیر پذیرفتن را در اثرش هویدا سازد. در مورد ساخت این فیلم باید به این نکته اشاره داشته باشم که سال‌ها زندگی در شهر قم و مشاهده و مقایسه سبک‌ زندگی مردمان این شهر بدون شک روی من تاثیرگذار بوده است.

ضرورت چنین پرداخت‌هایی را در چه می‌دانید؟

ضرورت این چنین پرداخت‌هایی نتیجه آثاری‌ است که از دل انسان‌ها و برای انسان‌ها ساخته شده که در آن‌ها مسائل جهان پیرامون بروز پیدا می‌کند. البته امیدوار هستم در مقابل این کنش از سوی فیلمساز با واکنش مثبتی از سوی مخاطب رو‌به‌رو شوم.

پرداخت نمادین درباره این موضوع باتوجه به داشته‌های مستندی که از درون اجتماع بیرون می‌آید از چه مضمونی تاثیر گرفته است؟

داشته‌های مستندی که در این فیلم از آن استفاده شده است برگرفته از مشاهدات روزمره و دنیای پیرامون انسان‌ها به‌نوعی معرف این نمادها بوده است.

آیا تاثیرات جغرافیا، فرهنگ و آداب از نوع انسان‌هایی با این خصوصیات در تصمیم شما موثر بوده است؟

بله، تاثیرات این عوامل در ساختار و زیربنای تصوراتم بوده است اما سعی کرده‌ام نقطه عطف فیلم را به نتایج و برداشت‌هایی که از این رفتارهای خشونت‌بار صورت گرفته است معطوف سازم.

مبحث روانشناسی در این فیلم تا چه اندازه اهمیت دارد؟

مبحث روان‌شناسی نسبت به محیط و خشونت وقایع فیلم، تغییرات ضرب‌آهنگ‌ موسیقی و دیگر عناصر فیلم، همه در راستای وارد آوردن شوک موردنیاز و البته به موقع برای آگاهی مخاطب طراحی شده است تا از این طریق هشدار فیلم بتواند در روند تصمیم گیری تاثیرگذار باشد. با این حال میزان این تاثیرگذاری ارتباط مستقیمی با پیشینه فکری مخاطب دارد.

آیا رفتار خشونت‌آمیز تنها دلیل قابل ارائه برای بیان این معضل اجتماعی است؟

با در نظر گرفتن مضمون فیلم و تاکید بر رفتار خشونت‌آمیز یکی از ابعاد این اتفاق و تاکید اصلی برای تفسیر چنین معضلی معطوف به آن است.

روایت در فیلمی با این مضمون چطور هدایت می‌شود؟

روایت فیلم را با بیان این ایده که اگر هندزفری را در رگ دست فرو ببریم، می‌توانیم به موسیقی انگشتانمان گوش دهیم به ساختاری قابل ارائه در طراحی داستان آورده‌ام. در نهایت این تصمیم سبب ساز آن شد که فیلم «پمبه» را در فرم و محتوا حول این محور به تصویر بکشم.

 

دربارۀ رضا

دسته: نمونه کار

همه چیز اینطوری شروع شد:

مسیج اول

انجمن مقابله با سوءرفتار با کودکان، دانشجویانی هستند که تحت حمایت دانشگاه علوم پزشکی تهران در راستای پیشگیری از کودک آزاری فعالیت می‌کنند. من از اهدافشون خوشم اومد و کار ساختن فیلم رو شروع کردم. برای ساخت فیلم فقط یک ماه وقت بود!

تصمیم گرفتم فیلم رو با شیوا رستگار با هم بسازیم. فیلم‌سازی دونفره، راحتی‌ها و سختی‌های خودش رو داشت و در کل خوشحالم که این کار رو دونفره انجام دادیم. نوشته‌ای در مورد کارگردانی دونفره در مدیوم وجود داره که نظر من هم تا حدی مشابهشه.

کارگردانی دونفره

اسم فیلم رو «رضا» گذاشتیم. این فیلم، رضا رو در یک محیط بازی ویدئویی قرار می‌ده و به همین منظور نیاز به نوع غیرمعمولی از فیلم‌برداری بود. با استودیوی ماد صحبت کردم و این بچه‌ها به طرز معجزه‌واری وسیلۀ حرکتی فیلم رو تامین کردن :)

تست تصویر

تاکید به خصوص این کمپین و این فیلم، در معرفی انواع سوءرفتاره و ما هم‌چنین در فیلم تلاش کردیم مهم بودن رفتارهایی که به نظر مهم نیست رو نشون بدیم.
فیلم رو در دو روز ضبط کردیم و من در دو روز کار تدوینش رو انجام دادم.

فیلم رضا

«رضا» تا کنون در تعدادی از بیمارستان‌های سطح تهران پخش شده و ۱۱ و ۱۲ اسفند در بخش مسابقۀ ملی جشنوارۀ فیلم ۱۰۰ ثانیه‌ای، روی پرده می‌ره.

پی‌نوشت: فیلم رضا برنده‌ی عنوان بهترین تیزر جشنواره‌ی سلامت سال ۱۳۹۵ شد.