اسماعیل شیدایی اسماعیل شیدایی
اشتراک‌ها
چطور می توان یک استایل CSS اختصاصی برای IE نوشت

در بسیاری مواقع شما نیاز دارید که برای Cross-Browser کردن وب سایت خود، استایل‌های متفاوتی بنویسید اما چطور می‌توان تشخصی داد که مرورگر فعلی کاربر چیست و استایل مربوط به او را لود کرد؟

...

چطور می توان یک استایل CSS اختصاصی برای IE نوشت
‫۱۰ سال و ۳ ماه قبل، شنبه ۱۸ مرداد ۱۳۹۳، ساعت ۲۱:۴۰
پژمان پارسائی پژمان پارسائی
اشتراک‌ها
CamanJS : ابزاری برای دستکاری و پردازش تصاویر تحت وب
استفاده از HTML5 Canvas و همچنین جاوا اسکریپت برای دستکاری و پردازش تصاویر تحت وب. هسته آن توسط پلاگین هایش گسترش داده می‌شود. هم در مرورگر می‌توان کدهای آنرا اجرا کرد و هم در NodeJS .
CamanJS : ابزاری برای دستکاری و پردازش تصاویر تحت وب
‫۱۰ سال و ۹ ماه قبل، جمعه ۱۱ بهمن ۱۳۹۲، ساعت ۱۲:۲۸
وحید نصیری وحید نصیری
اشتراک‌ها
طراحی جدید Entity Framework Profiler
نکته جالب آن، استفاده از قابلیت اجرای خارج از مرورگر برنامه‌های سیلورلایت است. کل برنامه با سیلورلایت تهیه شده. هم نسخه دسکتاپ را فراهم آورده و هم نسخه تحت وب را.
طراحی جدید Entity Framework Profiler
‫۱۱ سال و ۱۱ ماه قبل، پنجشنبه ۱۶ آذر ۱۳۹۱، ساعت ۰۳:۱۵
وحید نصیری وحید نصیری
نظرات مطالب
استفاده از Google Analytics API در دات نت فریم ورک
سلام،
API فوق امکان استخراج اطلاعات مربوط به کشورهای مختلف و بازدید کننده‌های مختلف را نیز می‌دهد. (به صفحه Dimensions & Metrics Reference مراجعه کنید)
پس از استخراج داده‌ها، رسم نمودار و نقشه با خودتان است. فقط اطلاعات و آمار خام را به شما می‌دهد.
‫۱۵ سال و ۷ ماه قبل، شنبه ۱۲ اردیبهشت ۱۳۸۸، ساعت ۱۷:۰۹
وحید نصیری وحید نصیری
مطالب
خلاصه اشتراک‌های روز شنبه 12 آذر 1390

‫۱۲ سال و ۱۱ ماه قبل، یکشنبه ۱۳ آذر ۱۳۹۰، ساعت ۰۱:۲۶
وحید نصیری وحید نصیری
مطالب
بررسی Microsoft Anti-Cross Site Scripting Library

هنگام نمایش اطلاعات در وب باید اطلاعات خام دریافتی از کاربر را encode کرده و سپس نمایش داد تا از حملات XSS یا cross site scripting attacks در امان ماند. مثلا وبلاگی را طراحی کرده‌اید و یک نفر اطلاعات زیر را بجای توضیحات ارسال کرده است:
<SCRIPT>alert('XSS')</SCRIPT>

اگر اطلاعات به همین شکل دریافت و بدون تغییر هم نمایش داده شود، یک ضعف امنیتی برای سایت شما به‌حساب خواهد آمد. (بحث دزدیدن اطلاعات کوکی و امثال آن از این طریق با معرفی HttpOnly cookies در IE‌های جدید و فایرفاکس 3 به بعد تقریبا منتفی شده است اما می‌توانند با ارسال انبوهی اسکریپت، مشاهده صفحه را با crash‌ کردن مرورگر کاربران همراه کنند)
مایکروسافت برای این منظور Microsoft Anti-Cross Site Scripting Library را ارائه داده است. نمونه بهبود یافته HttpUtility.HtmlEncode که در فضای نام System.Web موجود است.

در اینجا قصد داریم این کتابخانه را با لیست زیر آزمایش کنیم:
http://ha.ckers.org/xss.html
در همان صفحه اگر دقت کنید، لیست حملات را به صورت یک فایل xml هم ارائه داده است:
http://ha.ckers.org/xssAttacks.xml
برای خواندن این فایل xml در دات نت روش‌های زیادی وجود دارد منجمله XML serialization .

ساختار این فایل به شکل زیر است:
<?xml version="1.0" encoding="UTF-8"?>
<xss>
<attack>
 <name>x1</name>
 <code>x2</code>
 <desc>x3</desc>
 <label>x4</label>
 <browser>x5</browser>
</attack>
.
.
.

بنابراین شیء‌ نمایانگر آن می‌تواند به صورت لیستی از کلاس زیر باشد:
    public class attack{
      public string name { get; set; }
      public string code { get; set; }
      public string desc { get; set; }
      public string label { get; set; }
      public string browser { get; set; }
  }

برای دریافت این لیست و بارگذاری فایل xml مربوطه با استفاده از روش XML serialization خواهیم داشت:
      
using System.Collections.Generic;
using System.IO;
using System.Xml.Serialization;

      public static List<attack> DeserializeFromXML(string path)
      {
          XmlRootAttribute root = new XmlRootAttribute("xss");
          XmlSerializer deserializer =
              new XmlSerializer(typeof (List<attack>),root);
          using (TextReader textReader = new StreamReader(path))
          {
              return (List<attack>)deserializer.Deserialize(textReader);
          }
      }

در ادامه فرض بر این است که ارجاعی از اسمبلی AntiXssLibrary.dll به پروژه اضافه شده است، همچنین فایل xssAttacks.xml فوق نیز در کنار فایل اجرایی برنامه ، مثلا یک برنامه کنسول قرار گرفته است: 
using System;
using System.Collections.Generic;
using System.IO;
using System.Text;
using Microsoft.Security.Application;

      private static void testMethod()
      {
          StringBuilder sb = new StringBuilder();
          sb.AppendFormat("<html>{0}", Environment.NewLine);
          sb.AppendFormat("<body>{0}", Environment.NewLine);

          List<attack> data = XMLParser.DeserializeFromXML("xssAttacks.xml");
          foreach (attack atk in data)
          {
              string cleanSafeHtmlInput = AntiXss.HtmlEncode(atk.code);
              sb.AppendFormat("{0}<br>{1}", cleanSafeHtmlInput, Environment.NewLine);
          }

          sb.AppendFormat("</body>{0}", Environment.NewLine);
          sb.AppendFormat("</html>");

          File.WriteAllText("out.htm", sb.ToString());
      }

پس از اجرای تابع فوق، خروجی ما یک فایل html خواهد بود به نام out.htm . آنرا در مرورگر خود باز کنید. بدون هیچ مشکلی باز خواهد شد و خروجی امنی را مشاهده خواهید کرد. برای مشاهده اثر واقعی این کتابخانه، قسمت AntiXss.HtmlEncode را از کد فوق حذف کنید و یکبار دیگر برنامه را اجرا کنید. اکنون فایل نهایی را در مرورگر باز کنید. با انبوهی از alert های جاوا اسکریپتی مواجه خواهید شد که اهمیت کتابخانه فوق را جهت ارائه خروجی امن در صفحات وب مشخص می‌سازد.

‫۱۵ سال و ۱۳ ماه قبل، دوشنبه ۲۰ آبان ۱۳۸۷، ساعت ۱۹:۲۳
احمد مقدس خو احمد مقدس خو
اشتراک‌ها
فریم ورک Laravel
این فریم ورک یکی از ساده‌ترین و کارآمدترین راه حل‌های توسعه برنامه برای وب با زبان پی اچ پی است.
یکی از قابلیتهای جالب آن پشتیبانی از دو ORM قدرتمند Doctrine و Eloquent  است.
البته خودم هنوز تجربه توسعه با این فریم وروک را نداشتم.
فریم ورک Laravel
‫۱۲ سال و ۵ ماه قبل، پنجشنبه ۱ تیر ۱۳۹۱، ساعت ۱۹:۲۰
شاهین کیاست شاهین کیاست
مطالب
آشنایی با Leaflet
مقدمه
سیستم‌های جغرافیایی و GIS اهمیت زیادی در زندگی روزمره‌ی ما دارند. GIS به نرم افزار یا سخت افزاری اطلاق می‌شود که کاربر را قادر می‌سازد تا به ذخیره، بازیابی و تجزیه و تحلیل داده‌های جغرافیایی (Spatial) بپردازد. یکی از پایه‌های نرم افزار‌های GIS، نقشه و نمایش اطلاعات بر روی نقشه می‌باشد. به طور حتم در وب سایت‌ها مشاهده کرده‌اید که آدرس یک شرکت بر روی نقشه نمایان می‌شود یا به عنوان مثالی دیگر سرویس دهنده‌های اینترنت از نقشه برای نمایش میزان و کیفیت آنتن دهی در محله‌های مختلف یک شهر استفاده می‌کنند.
برای نمایش نقشه در نرم افزار‌های تحت وب کتابخانه‌های JavaScript ایی زیادی وجود دارند. این مطلب به معرفی کتاب خانه‌ی کدباز و رایگان leaflet می‌پردازد. leaflet یک کتابخانه‌ی مدرن JavaScript برای کار با نقشه می‌باشد. از خصوصیات بارز این کتابخانه پشتیبانی بسیار خوب آن از موبایل و دستگاههای لمسی است. Leaflet تنها 33 کیلوبایت حجم دارد و ویژگی‌های آن اغلب نیازهای‌های توسعه دهندگان را برای پیاده سازی نرم افزار‌های مبتنی بر نقشه پوشش می‌دهد. از مزایای این کتابخانه می‌توان به مشارکت جامعه‌ی بزرگ توسعه دهندگان، سورس خوانا و تمیز، مستندات خوب و تعداد زیادی پلاگین برای آن اشاره کرد.
آماده سازی صفحه
برای استفاده از Leaflet ابتدا باید فایل Style و JavaScript کتابخانه را ارجاع داد:
 <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
 <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
سپس یک div با یک Id مشخص را به صفحه اضافه می‌کنیم. div مورد نظر باید از ارتفاع مشخصی برخوردار باشد که به سادگی با style زیر میسر می‌گردد: 
#map { height: 600px; }
پس از انجام مقدمات اکنون می‌توان یک نقشه را با تنظیمات دلخواهی در div تعریف شده نمایش داد.

تنظیمات اولیه نقشه
با کد زیر ابتدا یک وهله از شیء map ایجاد می‌شود:
var map = L.map('map').setView([29.6760859,52.4950737], 13);
همانطور که مشاهده می‌شود شناسه‌ی div تعریف شده از طریق سازنده به map پاس داده شده است و سپس به کمک تابع setView به محل مختصات جغرافیایی مورد نظر با زوم پیشفرض 13 نمایش داده می‌شود. طراحی Leaflet به صورتی است که استفاده از متدهای زنجیروار (chainable) را میسر می‌سازد. به عنوان نمونه در کد بالا تابع setView یک شیء map را بر می‌گرداند و توسعه دهنده می‌تواند از توابع دیگر مقدار بازگشتی استفاده کند. این مورد از نظر طراحی شبیه به jQuery می‌باشد.
اگر Google Maps را مشاهده کنید، متوجه می‌شوید که یک نقشه، به صورت مستطیل مستطیل، بارگزاری می‌شود. به این مستطیل‌ها Tile گفته می‌شود. tile‌ها همان فایل‌های png هستند و درواقع به ازای زوم‌های مختلف در محل‌های مختلف، tile‌های متفاوتی با شناسه‌ی مشخصی وجود دارند. تصویر زیر نقشه‌ی Google می‌باشد؛ قبل از اینکه tile‌ها بارگزاری شوند. اگر با دقت نگاه کنید مستطیل‌های بزرگ و کوچکی را مشاهده می‌کنید که قسمت‌های مختلف یک نقشه یا همان تایل می‌باشند.

 پس برای نمایش یک نقشه نیاز است tile‌ها را از یک منبع، در اختیار نقشه قرار داد. این منبع می‌تواند یک وب سرویس باشد.
پس از تعریف اولیه، نیاز است یک Tile Layer ایجاد کرده و آن را به نقشه اضافه کرد:
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
var osm = new L.TileLayer(osmUrl, { maxZoom: 18, attribution: osmAttrib}).addTo(map);
در کد بالا ابتدا آدرس tile server تعریف شده است. در این مثال از سرویس OpenStreetMap برای تهیه‌ی Tile‌ها استفاده شده است. سپس لینک سرویس دهنده، به همراه  متن attribution(نوشته‌ای که در زیر نقشه قرار می‌گیرد)  به شیء TileLayer پاس داده شد و شیء ایجاد شده از طریق متد addTo به شیء map اضافه شده است.
نتیجه‌ی کار در مرورگر اینگونه خواهد بود:

Marker، دایره و چندضلعی

در کنار نمایش Tile‌ها می‌توان اشکال گرافیکی نیز به نقشه اضافه کرد؛ مثل مارکر(نقطه)، مستطیل، دایره و یا یک Popup. اضافه کردن یک Marker به سادگی، با کد زیر صورت می‌پذیرد:

var marker = L.marker([29.623116,52.497856]).addTo(map);

محل مورد نظر به شیء مارکر پاس داده شده و مقدار بازگشتی به map اضافه شده است.

نمایش چند ضلعی و دایره هم کار ساده ای است. برای دایره باید ابتدا مختصات مرکز دایره و شعاع به متر را به L.circle پاس داد:

var circle = L.circle([29.6308217,52.5048021], 500, {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5
}).addTo(map);

در کد بالا علاوه بر محل و اندازه دایره، رنگ محیط، رنگ داخل و شفافیت (opacity) نیز مشخص شده‌اند.

برای چند ضلعی‌ها می‌توان به این صورت عمل کرد:

var polygon = L.polygon([
[29.628453, 52.488838],
[29.637368, 52.493987],
[29.637168, 52.503987]
]).addTo(map);

کار کردن با Popup ها

از Popup می‌توان برای نمایش اطلاعات اضافه‌ای بر روی یک محل خاص یا یک عنوان به مانند Marker استفاده کرد. برای مثال می‌توان اطلاعاتی درباره‌ی محل یک Marker یا دایره نمایش داد. در هنگام ایجاد marker، دایره و چندضلعی مقادیر بازگشتی در متغیر‌های جدایی ذخیره شدند. اکنون می‌توان به آن اشیاء یک popup اضافه کرد:

marker.bindPopup("باغ عفیف آباد").openPopup();
circle.bindPopup("I am a circle.");
polygon.bindPopup("I am a polygon.");

به علت اینکه openPopup برای Marker صدا زده شده، به صورت پیشفرض popup را نمایش می‌دهد. اما برای بقیه، نمایش با کلیک خواهد بود. البته الزاما نیازی نیست که popup روی یک شیء نمایش داده شود، می‌توان popup‌های مستقلی نیز ایجاد کرد: 

var popup = L.popup()
    .setLatLng([51.5, -0.09])
    .setContent("I am a standalone popup.")
    .openOn(map);
‫۹ سال و ۹ ماه قبل، دوشنبه ۱۳ بهمن ۱۳۹۳، ساعت ۲۲:۵۰
حمید صابری حمید صابری
اشتراک‌ها
کتابخانه دیگری غیر از Knockout می‌شناسی؟
استفاده از قالب پروژه Single Page Application در Visual Studio راه خوبی برای شروع به توسعه یک اپلیکیشن تک صفحه‌ایست. این قالب از کتابخانه Knockout برای انقیاد (binding) داده‌ها به المان‌های DOM استفاده می‌کند. اما Knockout تنها کتابخانه برای این کار نیست. کتابخانه‌های دیگری هم هستند که این کار (و سایر کارهای لازم برای داشتن یک SPA) را به روش‌های مختلف انجام می‌دهند.
در مطلب به اشتراک گذاشته شده، نویسنده بعضی کتابخانه‌های دیگر را معرفی کرده و قالب پروژه برای ایجاد پروژه‌هایی با هر یک از آن‌ها را در اختیار قرار داده است. 
کتابخانه دیگری غیر از Knockout می‌شناسی؟
‫۱۰ سال و ۱۲ ماه قبل، یکشنبه ۱۹ آبان ۱۳۹۲، ساعت ۱۷:۴۸