آموزش CSS3 (جلسه اول)

مقدمه :

برخی خواص CSS3 :

CSS3 خواصی دارد که کار طراحی وب سایت رو خیلی ساده می کند و خروجی کار خیلی تمیزتر در میاد. مثلا خواص border-radius برای گرد کردن گوشه های باکس‌ها باعث میشه تا دیگه نیازی به استفاده از عکس برای گوشه های گرد باکس‌ها و منوها نباشد. یا استفاده از شیب رنگ که طراحی سایت را بسار زیبا و آسان می کند. و استفاده از انیمیشن بدون نیاز به استفاده از کتابخانه های Jquey که باعث می شود سایت طراحی شده سبک تر و در عین حال زیبا باشد. و…

معرفی ویژگی animation در CSS3 :

تعریف و کاربرد :

این ویژگی ۶ مقدار دارد که به معرفی آن می پردازیم.

animation : نام انیمیشن زمان نحوه اجرای تابع تاخیر شمارش تکرار جهت;

animation: name duration timing-function delay iteration-count direction;

• name : ما برای این که یک انیمیشن ایجاد کنیم باید یک نام برای آن انتخاب کنیم بزارین این طوری بگم فکر کنید داخل C یا PHP می خواهید یک تابع بسازید سپس با استفاده از این اسمی که برای تابع تعریف کرده ایم آن تابع را صدا می کنیم.
• duration : مدت زمان اجرای تابع
• timing-function : نحوه نمایش انیمیش که این حالت ها را پشتیبانی می کند:

linear,ease,ease-in,ease-out,ease-in-out

• delay : تاخیر
• iteration-count : شمارش تکرار

نکته : اگر از مقدار infinite استفاده کنید انیمیشن شما برای همیشه تکرار می شود.

• direction : جهت

مثال :

برای مثال اول یک باکس ۱۰۰px در ۱۰۰px ایجاد می کنیم سپس یک انیمیشن با استفاده از CSS3 برای آن ایجاد می کنیم.

خوب حالا یک نام برای انیمیشن انتخاب می کنیم مثلاً boxmove سپس با استفاده از دستورات CSS3 می گوییم باکس ما را از سمت راست صفحه نمایش به سمت چپ صفحه نمایش هدایت کند.

۰۱ div
02 {
03 width:100px;
04 height:100px;
05 background:red;
06 position:relative;
07 animation:boxmove 5s linear;
08 -moz-animation:boxmove 5s infinite; /*Firefox*/
09 -webkit-animation:boxmove infinite; /*Safari and Chrome*/
10 }
۱۱ @keyframes boxmove
12 {
۱۳ from {right:0px;}
14 to {right:200px;}
15 }
۱۶ @-moz-keyframes boxmove /*Firefox*/
17 {
۱۸ from {right:0px;}
19 to {right:200px;}
20 }
۲۱ @-webkit-keyframes boxmove /*Safari and Chrome*/
22 {
۲۳ from {right:0px;}
24 to {right:200px;}
25 }

توضیحات خط ها :

در خط ۳و۴ اندازه باکس ۱۰۰ در ۱۰۰ تعیین شده در خط ۵ رنگ قرمز برای پس زمینه باکس تعیین شده در خط ۶ مقدار position را relative قرار دادیم که بتوانیم باکس مورد نظر را حرکت دهیم در خط ۷ یک نام به عنوان boxmove برای انیمیشن در نظر گرفتیم و مدت زمان اجرای آن را ۵ ثانیه در نظر گرفتیم و شمارش تکرار را توسط کد infinite نامحدود قرار دادیم در خط ۸ و ۹ برای انواع مرورگرها این کد نوشته شده است.

در خط ۱۱ انیمیشن خود را ایجاد می کنیم مثل این که یک تابع داریم ایجاد می کنیم که به باکس مورد نظر گفتیم از right 0 به right 200 تغییر مکان انجام بده.

ویندوز 1 تا ویندوز8 به روایت تصویر

An interesting visual comparison between the look of Windows 1.0 and Windows 8.

Hello World براساس سن و شغل!

می تونم شرط ببندم که همتون با Hello World Program آشنا هستید.
Hello World معمولا ساده‌ترین برنامه‌ای هستش که می شه با زبان‌های برنامه نویسی مختلف نوشت.به عبارتی در اولین قدم یادگیری یک زبان، سعی می کنند یک Hello World Program بنویسن.
خب حالا ما یه سری آدم با شغل‌ها و تحصیلات مختلف داریم و می خوایم ببینیم که اگر به اون‌ها بگیم که یک Hello World بنویسن، چطوری می نویسن.
ایده از سایت gnu.org بوده

داخل دبیرستان:

  ۱۰ PRINT "HELLO WORLD"
 20 END 

سال اول کالج:

  program Hello(input, output)
 begin
 writeln('Hello World')
 end. 

تازه حرفه‌ای شده:

  #include <stdio.h>

 void main(void)
 {
  char *message[] = {"Hello ", "World"};
  int i;
  for(i = 0; i < 2; ++i)
  printf("%s", message[i]);
  printf("\n");
 }
 

واقعا حرفه‌ای!:

 #include <iostream.h>
 #include <string.h>
 class string
 {
  private:
   int size;
   char *ptr;
  public:
   string() : size(0), ptr(new char('\0')) {}
   string(const string &s) : size(s.size)
   {
     ptr = new char[size + 1];
     strcpy(ptr, s.ptr);
   }
   ~string()
   {
     delete [] ptr;
   }
   friend ostream &operator <<(ostream &, const string &);
   string &operator=(const char *);
 };

 ostream &operator<<(ostream &stream, const string &s)
 {
   return(stream << s.ptr);
 }
 string &string::operator=(const char *chrs)
 {
   if (this != &chrs)
   {
     delete [] ptr;
     size = strlen(chrs);
     ptr = new char[size + 1];
     strcpy(ptr, chrs);
   }
   return(*this);
 }
 int main()
 {
   string str;
   str = "Hello World";
   cout << str << endl;
   return(0);
 } 

مدیر سیستم:

  #include <stdio.h>
 #include <stdlib.h>
 main()
 {
  char *tmp;
  int i=0;
  /* on y va bourin */
  tmp=(char *)malloc(1024*sizeof(char));
  while (tmp[i]="Hello Wolrd"[i++]);
  /* Ooopps y'a une infusion ! */
  i=(int)tmp[8];
  tmp[8]=tmp[9];
  tmp[9]=(char)i;
  printf("%s\n",tmp);
 } 

هکر تازه‌کار:

  #!/usr/local/bin/perl
 $msg="Hello, world.\n";
 if ($#ARGV >= 0) {
     while(defined($arg=shift(@ARGV))) {
	 $outfilename = $arg;
	 open(FILE, ">" . $outfilename) || die "Can't write $arg: $!\n";
	 print (FILE $msg);
	 close(FILE) || die "Can't close $arg: $!\n";
     }
 } else {
     print ($msg);
 }
 1; 

هکر باتجربه:

  #include <stdio.h>
 #include <string.h>
 #define S "Hello, World\n"
 main(){exit(printf(S) == strlen(S) ? 0 : 1);} 

هکر حرفه‌ای:

% cc -o a.out ~/src/misc/hw/hw.c
 % a.out
 Hello, world.

گفت‌وگو با هکر ایرانی دیجی‌نوتار؛ نگاهی به ابهامات یک ماجرای جنج

هکر ۲۱ ساله ایرانی که برای دومین بار با نفوذ به یک مرکز صدور گواهی‌های امنیتی توانست گواهی‌های جعلی تولید کند و جنجال گسترده‌ای در سراسر جهان برانگیخت، در گفت‌وگوی اختصاصی با دویچه‌وله از جزئیات فعالیت‌هایش می‌گوید.

 

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

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

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

از خودآموزی هک تا جان‌سپاری در راه ولی‌فقیه

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

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

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

اما او معتقد است خطرات متوجه آن دسته از کاربران ایرانی است «که کار غیر‌قانونی، جاسوسی، و اقداماتی بر ضد اسلام و انقلاب انجام می‌دهند.»

پشت پرده لوگوهای معروف

Amazon

شاید نشان سایت آمازون در نگاه اول هیچ مورد پنهانی در خود نداشته باشد، اما پشت ظاهر ساده این شرکت، رازی نهفته است. به فلشی که زیر کلمه amazon قرار دارد دقت کنید. این لبخند زیبا در حقیقت حرف a را به z وصل می کند تا با اعتماد به نفسی خاص به بیننده القا کند که هر چیزی در آمازون پیدا می شود.

Eighty20

Eighty20 موسسه ای در زمینه مشاوره های تجاری است. اکثر افراد با دیدن این لوگو شاید تصور کنند این لوگو هیچ پیامی را نمی رساند. اما تمام پیام در مربع های خاکستری و آبی ای است که نقش صفر و یک را بازی می کنند. پس اگر دوباره به این لوگو نگاه کنید، خواهید دید که ردیف اول 1010000 و ردیف دوم 0010100 را ساخته اند که اعداد ۸۰ و ۲۰ را به باینری نمایش می دهند.

FedEx

لوگوی شرکت FedEx را شاید بتوان بهترین نمونه از نشان هایی با مضمون های پنهان برشمرد. اگر با دقت در این لوگو دقت کنید، متوجه نمادی که بین دو حرف E و x ساخته شده، خواهید شد. این فلش نشانگر سرعت و دقت است. مهمترین فاکتورهای شرکتی مانند FedEx.

Toblerone

همانطور که احتمالاً می دانید، توبلرون یک شرکت شکلات سازی در شهر برن واقع در سوئیس است. این شهر به «شهر خرس ها» نیز معروف است. بدین ترتیب طراحان نشان این شرکت حداکثر استفاده را از این شهرت کرده و اگر با دقت به کوهی که در نماد این شرکت است، نگاه کنید، خرسی در حالت ایستاده خواهید دید.

Sony Vaio

وایو را که حتماً می شناسید. نامی تجاری که سونی بر لپ تاپ هایش نهاده است. فکر می کنید در لوگوی وایو پیامی نهان وجود دارد؟ اگر کمی هوشمند باشید، پاسختان «بله» است.
‎دو حرف اول Vaio نمایانگر سیگنال های آنالوگ و دو حرف دوم آن که شبیه 0 و 1 هستند، سیگنال های دیجیتال را نشان می دهند.

Sun Microsystems

لوگوی شرکت Sun از شناخته شده ترین نشان های دنیای فناوری است. این نشان را از هر جهتی که بخوانید، Sun خوانده می شود. طراحی این نشان را پروفسور Vaughan Pratt از دانشگاه استنفورد انجام داده است.

GreenLabs

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

NBC

شبکه National Broadcasting Company) NBC) یکی از بزرگترین شبکه های تلویزیونی در آمریکا است. با دقت در نشان رنگارنگ این شبکه احتمالاً طاووسی که در این نشان وجود دارد تشخیص می دهید. طاووسی با دم شش رنگ که نشان دهنده این است که این لوگو در شش زمان طراحی و تکمیل شده است. همچنین سر طاووس به سمت راست اشاره دارد که نمایانگر رو به جلو بودن آن است.

Formula 1

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