شروعی به نام HTML5

شهریور ۱۰, ۱۳۹۲ توسط : سیدمهدی شاه امیریان

سلام

به لطف حضور HTML5 & CSS3 امروزه بهتر از هر زمان دیگری می توان سایتی کارآمد، سبک و انعطاف پذیر طراحی کرد.

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

بطور مختصر ساختار یک صفحه HTML5 بصورت زیر است

<!doctype html>
<html lang="fa">
<meta charset="utf-8" />
<title>عنوان صفحه</title>
<meta name="description" content="شروعی به نام HTML5" />
<meta name="keywords" content="HTML5, CSS3" />
<meta name="author" content="Phpro.ir" />
<link href="”css/style.css?v=1.0" rel="”stylesheet”" />
</head>
<body>
تگ ها و محتوای صفحه
</body>
</html>

همونطور که در سطر اول می بینید، تعریف سند HTML در HTML5 تغییر زیادی داشته و بسیار کوتاه و قابل فهم شده.
در سطر دوم نیز همراه با تگ html زبان صفحه رو مشخص کردیم که فارسی است.…

ادامه مطلب...

Tags

فشرده کردن فایلهای جاوااسکریپت

مرداد ۲۱, ۱۳۹۲ توسط : سعید

حتما هنگام استفاده ازکتابخانه های جاوا اسکریت دیدید که یک فایل با پسوند min.js وجود داره که توش کدها به هم ریخته ان. مثلا کتابخانه jQuery توی دو نسخه منتشر میشه.یکی نسخه اصلی یا همون نسخه ای که وقتی بازش میکنین کدهاش به هم ریخته نیستن و نسخه mini یا فایلی که برای اینکه حجمش رو کم کنن میان و فاصله ها و خطوط اضافی رو پاک میکنن.

به این کار minify یا کوچک کردن میگن. با minify کردن اسکریپت های نوشته شده با زبان جاوااسکریپت یک اتفاق دیگه هم میافته و اون اینه که نام متغیرهاتون هم عوض میشه.مثلا توی جی کوئری این کدها رو میبینید :
(function(a,b){function G(a){var b=F[a]={};return p.each(a.split(s)

همینطور که میبینید نام متغیرها به a , n , b  و کلا اسامی بدون معنی تغییر کرده .…

ادامه مطلب...

استفاده از transition بدون :hover

مرداد ۱۱, ۱۳۹۲ توسط : حمید تدینی

pseudo classes

ایجاد transition برای زمانی که ماوس روی یک شئ قرار میگیرد یک امر تقریبا عادی در طراحی وب ما طراحان و برنامه نویسان وب شده است که با استفاده از شبه کلاس hover: انجام می شود . اما باید توجه داشت که این کد را می توان در بسیاری از شبه کلاس های دیگر نیز استفاده کرد …
در این نمونه کد یک گذار معولی را برای تغییر رنگ یک لینک مشاهده می کنید :

a, a:link, a:visited {
color: lightblue;
-webkit-transition: color .4s linear;
-moz-transition: color .4s linear;
-o-transition: color .4s linear;
-ms-transition: color .4s linear;
transition: color .4s linear;
}

a:hover {
color: white;
}

این قطعه کد باعث خواهد شد تا وقتی روی لینک ها قرار میگیریم رنگ آنها به آرامی تغییر کند .…

ادامه مطلب...

تغییر اندازه تصاویر بوسیله php

مرداد ۵, ۱۳۹۲ توسط : afshin

برای کوچک کردن تصاویر و تبدیل اندازه آن به مقیاس دلخواه راهکارهای زیادی وجود داره ولی در این بخش کلاسی از php را برای شما معرفی می کنم که به راحتی می توان اندازه تصاویر را تغییر داد , خوب بریم سر کد کلاس

    Class resize
    {
    // *** Class variables
    private $image;
    private $width;
    private $height;
    private $imageResized;

    function __construct($fileName)
    {
    // *** Open up the file
    $this->image = $this->openImage($fileName);

    // *** Get width and height
    $this->width = imagesx($this->image);
    $this->height = imagesy($this->image);
    }

    ## --------------------------------------------------------

    private function openImage($file)
    {
    // *** Get extension
    $extension = strtolower(strrchr($file, '.'));

    switch($extension)
    {
    case '.jpg':
    case '.jpeg':
    $img = @imagecreatefromjpeg($file);
    break;
    case '.gif':
    $img = @imagecreatefromgif($file);
    break;
    case '.png':
    $img = @imagecreatefrompng($file);
    break;
    default:
    $img = false;
    break;
    }
    return $img;
    }

    ## --------------------------------------------------------

    public function resizeImage($newWidth, $newHeight, $option="auto")
    {
    // *** Get optimal width and height - based on $option
    $optionArray = $this->getDimensions($newWidth, $newHeight, $option);

    $optimalWidth = $optionArray['optimalWidth'];
    $optimalHeight = $optionArray['optimalHeight'];

    // *** Resample - create image canvas of x, y size
    $this->imageResized = imagecreatetruecolor($optimalWidth, $optimalHeight);
    imagecopyresampled($this->imageResized, $this->image, 0, 0, 0, 0, $optimalWidth, $optimalHeight, $this->width, $this->height);

    // *** if option is 'crop', then crop too
    if ($option == 'crop') {
    $this->crop($optimalWidth, $optimalHeight, $newWidth, $newHeight);
    }
    }

    ## --------------------------------------------------------

    private function getDimensions($newWidth, $newHeight, $option)
    {

    switch ($option)
    {
    case 'exact':
    $optimalWidth = $newWidth;
    $optimalHeight= $newHeight;
    break;
    case 'portrait':
    $optimalWidth = $this->getSizeByFixedHeight($newHeight);
    $optimalHeight= $newHeight;
    break;
    case 'landscape':
    $optimalWidth = $newWidth;
    $optimalHeight= $this->getSizeByFixedWidth($newWidth);
    break;
    case 'auto':
    $optionArray = $this->getSizeByAuto($newWidth, $newHeight);
    $optimalWidth = $optionArray['optimalWidth'];
    $optimalHeight = $optionArray['optimalHeight'];
    break;
    case 'crop':
    $optionArray = $this->getOptimalCrop($newWidth, $newHeight);
    $optimalWidth = $optionArray['optimalWidth'];
    $optimalHeight = $optionArray['optimalHeight'];
    break;
    }
    return array('optimalWidth' => $optimalWidth, 'optimalHeight' => $optimalHeight);
    }

    ## --------------------------------------------------------

    private function getSizeByFixedHeight($newHeight)
    {
    $ratio = $this->width / $this->height;
    $newWidth = $newHeight * $ratio;
    return $newWidth;
    }

    private function getSizeByFixedWidth($newWidth)
    {
    $ratio = $this->height / $this->width;
    $newHeight = $newWidth * $ratio;
    return $newHeight;
    }

    private function getSizeByAuto($newWidth, $newHeight)
    {
    if ($this->height width)
    // *** Image to be resized is wider (landscape)
    {
    $optimalWidth = $newWidth;
    $optimalHeight= $this->getSizeByFixedWidth($newWidth);
    }
    elseif ($this->height > $this->width)
    // *** Image to be resized is taller (portrait)
    {
    $optimalWidth = $this->getSizeByFixedHeight($newHeight);
    $optimalHeight= $newHeight;
    }
    else
    // *** Image to be resizerd is a square
    {
    if ($newHeight getSizeByFixedWidth($newWidth);
    } else if ($newHeight > $newWidth) {
    $optimalWidth = $this->getSizeByFixedHeight($newHeight);
    $optimalHeight= $newHeight;
    } else {
    // *** Sqaure being resized to a square
    $optimalWidth = $newWidth;
    $optimalHeight= $newHeight;
    }
    }

    return array('optimalWidth' => $optimalWidth, 'optimalHeight' => $optimalHeight);
    }

    ## --------------------------------------------------------

    private function getOptimalCrop($newWidth, $newHeight)
    {

    $heightRatio = $this->height / $newHeight;
    $widthRatio = $this->width / $newWidth;

    if ($heightRatio height / $optimalRatio;
    $optimalWidth = $this->width / $optimalRatio;

    return array('optimalWidth' => $optimalWidth, 'optimalHeight' => $optimalHeight);
    }

    ## --------------------------------------------------------

    private function crop($optimalWidth, $optimalHeight, $newWidth, $newHeight)
    {
    // *** Find center - this will be used for the crop
    $cropStartX = ( $optimalWidth / 2) - ( $newWidth /2 );
    $cropStartY = ( $optimalHeight/ 2) - ( $newHeight/2 );

    $crop = $this->imageResized;
    //imagedestroy($this->imageResized);

    // *** Now crop from center to exact requested size
    $this->imageResized = imagecreatetruecolor($newWidth , $newHeight);
    imagecopyresampled($this->imageResized, $crop , 0, 0, $cropStartX, $cropStartY, $newWidth, $newHeight , $newWidth, $newHeight);
    }

    ## --------------------------------------------------------

    public function saveImage($savePath, $imageQuality="100")
    {
    // *** Get extension
    $extension = strrchr($savePath, '.');
    $extension = strtolower($extension);

    switch($extension)
    {
    case '.jpg':
    case '.jpeg':
    if (imagetypes() & IMG_JPG) {
    imagejpeg($this->imageResized, $savePath, $imageQuality);
    }
    break;

    case '.gif':
    if (imagetypes() & IMG_GIF) {
    imagegif($this->imageResized, $savePath);
    }
    break;

    case '.png':
    // *** Scale quality from 0-100 to 0-9
    $scaleQuality = round(($imageQuality/100) * 9);

    // *** Invert quality setting as 0 is best, not 9
    $invertScaleQuality = 9 - $scaleQuality;

    if (imagetypes() & IMG_PNG) {
    imagepng($this->imageResized, $savePath, $invertScaleQuality);
    }
    break;

    // ...

ادامه مطلب...

CSS Reset چیست و چه کاربردی دارد؟

تیر ۵, ۱۳۹۲ توسط : سعید

احتمالا تا به حال با اصطلاح CSS Reset برخورد کرده باشید.شاید قبلا از فایلهایی با این عنوان استفاده کرده باشید.معمولا فایلهایی که با عنوان Css Reset استفاده میکنیم شامل یک سری کدهای CSS هستن که یه سری کار انجام میدن.اما واقعا باید ببینیم این فایل و کدهای داخلش چی هستن و چه کاربردی دارن.

به زبان ساده CSS Reset یک سری کدهای CSS هستن که میان تناقضاتی که بین مرورگرها هست رو برطرف میکنن.مثلا اگر یه صفحه HTML درست کنید و یک متن داخلش قرار بدید میبینید که این متن از کناره های صفحه فاصله داره.این فاصله ممکنه توی مرورگرهای مختلف فرق داشته باشه.

حالا کدهای مربوط به CSS Reset میان و این تناقضات رو رفع میکنن.یکی دونمونه از کدهاشون رو باهم بررسی میکنیم بعد لیستی از فایلهای CSS Reset براتون میذارم تا ازش استفاده کنید.…

ادامه مطلب...

خطاها در PHP

خرداد ۲۹, ۱۳۹۲ توسط : سعید

در هنگام کار با PHP ممکنه به چند نوع خطا برخورد کنید.این خطا ها براساس زمانی که اتفاق میافتن و اینکه آیا این خطاها درست شدنی هستن یا خیر دسته بندی میشن.این خطاها ممکنه به صورت خودکار توسط خود php اجرا بشن یا با استفاده از تابع trigger_error به وسیله کاربر اجرا بشن!!
خطاها زمانی رخ میدن که کار اشتباهی رو در کدهامون کرده باشیم.کارهایی مثل : اشتباه تایپی! ، حلقه های بی نهایت و …
اجازه بدید تا با دسته بندی خطاها در PHP آشنا بشیم :

  1. Fatal error
  2. Parse error
  3. Warning
  4. Notices

۱- Fatal Error

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

Startup fatal error : این نوع خطا زمانی رخ میده که کدهای PHP نمیتونن اجرا بشن و مشکل از نصب یا تنظیمات PHP میتونه باشه.…

ادامه مطلب...

کلاس آماده : خواندن ایمیل ها با php

خرداد ۲۶, ۱۳۹۲ توسط : سعید

سلام

با استفاده از کلاس زیر میتونید ایمیل هایی که توی inbox دارین رو بخونین.این کلاس ممکنه جاهایی کاربرد داشته باشه مثلا اینکه یک ایمیل بسازید و بخواید به صورت خودکار ایمیلهایی که بهش میاد رو پردازش کنید و در جوابش چیزی رو ارسال کنید.

بازدید : ۴۳۹۷…

ادامه مطلب...

فایل آماده دکمه های CSS3

خرداد ۱۸, ۱۳۹۲ توسط : سعید

سلام

برای این پست یک فایل آماده برای ساخت دکمه های زیبا در CSS براتون میذارم که میتونید توی پروژه هاتون ازش استفاده کنید.

دانلود  :

button.css

بازدید : ۲۲۸۳…

ادامه مطلب...

آموزش ساخت سایت چند زبانه با PHP

خرداد ۷, ۱۳۹۲ توسط : سعید

سلام

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

برای این کار چند روش وجود داره که من یکی از روشها رو براتون توضیح میدم.

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

برای این کار دو فایل با نام fa.php برای ذخیره ترجمه های زبان فارسی و یک فایل با نام en.php برای زبان انگلیسی میسازیم.

در واقع این دو فایل حاوی یک آرایه است که یک کلید برای کلمه مورد نظر و یک مقدار برای ترجمه است.

فایل fa.php

<?php
$lang['hello'] = 'سلام';
$lang['goodbye'] = 'خدانگهدار';
$lang['home'] = 'خانه';
$lang['about'] = 'درباره ما';
$lang['contact'] = 'تماس با ما';
$lang['links'] = 'لینکهای مفید';
$lang['news'] = 'اخبار';

و محتویات فایل en.php :

<?php
$lang['hello'] = 'Hello';
$lang['goodbye'] = 'GoodBye';
$lang['home'] = 'Home';
$lang['about'] = 'About us';
$lang['contact'] = 'Contact with us';
$lang['links'] = 'Link';
$lang['news'] = 'News';

همینطور که میبینید باید نام کلید های آرایه توی دوتا فایل یکسان باشه .…

ادامه مطلب...

غیرفعال کردن نمایش خطاهای php با htaccess

خرداد ۱, ۱۳۹۲ توسط : سید داوود فامرینی

سلام

بعضی وقت ها پیش میاد که اسکریپتی از اینترنت دانلود می کنید و روی لوکال هاست و حتی روی هاست خطاهای Notice و Strict نمایش می ده که برطرف کردنشون خیلی نیاز نیست چون اسکریپت در حالت طبیعی کار رو انجام می ده.

امروز براتون یه قطعه کد می زارم که شما باید در فایل htaccess ی که در root پروژه  هست قرار بدید و اگر نبود ایجاد کرده و این کد رو قرار بدید.

# supress php errors
php_flag display_startup_errors off
php_flag display_errors off
php_flag html_errors off
php_value docref_root 0
php_value docref_ext 0

بازدید : ۲۹۸۷…

ادامه مطلب...

نوشته های جدیدتر