Eman Elma3sarawi

I'm always working on improving myself as a software developer, I'm never afraid of learning new languages, paradigms, APIs and frameworks, and I'm always eager for new challenges that will give me the opportunity to learn something new. So, my main objective is to find a position that will give me the opportunity to learn and to become better at what I do.

Homepage: http://emanelma3sarawi.wordpress.com

CSS3 – Transformation

                                                                   CSS3 — Transformation

السلام عليكم ورحمة الله وبركاته

ان شاء الله هنكمل مع بعض درس جديد وشيق جدا تكملة على الدروس الماضية

-: يحتوى هذا الدرس على اربعة مواضيع رئيسية

التكبير Scale -1

الدوران Rotate -2

الانحراف Skew -3

x و y التحكم فى محورى Translate -4

التكبير Scale -1

تتيح لك عمل تكبير لصورة او نص و هذا من خلال هذا الامر css3

-webkit-transform: scale(1.2);

– : كما عرفنا فى المقالات الماضية ان

-webkit —–> Chrome & safari

يعنى الكود اللى يكون فيه كدة يعمل على متصفحى جوجل كروم و سفارى وهناك بعض الاوامر للعمل على باقى المتصفحات سنتعرف عليها معا فى المثال الكامل

فتعنى تكبير الصورة بنسبة %20 من حجم الصورة الاصلى فى الاتجاهين الصادى والسينى scale(1.2)اما

الدوران Rotate-2

تتيح لك ايضا عمل دوران لصورة او نص و هذا من خلال هذا الامر css3

-webkit-transform: scale(1.2) rotate(+150deg);

هذا الامر يعنى انه يعمل دوران للصورة ب 150 درجة ف الاتجاه الموجب وهناك امر rotate(+150deg)

يعمل هذا الامر على الدوران حول المحور السينى فقط ومثله بالنسبة للمحور الصادىrotateX(+150deg)

الانحراف Skew-3

تتيح لك ايضا عمل انحراف لصورة او نص و هذا من خلال هذا الامر css3

-webkit-transform: scale(1.2) skew(+20deg, -10deg);

هذا الامر يستخدم لعمل انحراف لاحداثيات الصورة بدرجات معينة محورى السينى skew(+20deg, -10deg)

والصادى

x و y التحكم فى محورى Translate-4

لصورة او نص و هذا من خلال هذا الامر X ,Y تتيح لك ايضا التغير فى قيم ال css3

 -webkit-transform: scale(1.5) translate(20px, 40px);

—-Scale الناس هتيجى تقولى طب ايه الفرق بينه وبين ال

هنقول ان الفرق انى لما بقول اكبر واعمل اسكيل ف انا بيكون متاح ليا انى اكبر مرة ونص او الضعف وهكذا

فقط X فقط او محور ال Y انا بقدر اتحكم انى ازود محور ال translate لكن ف

لما يكونوا الاتنين موجب كدة معناها انى بزود من ناحية اليمين و اسفل والعكس … صحيح

وممكن تزود وتنقص حسب مالديزين اللى انت عايزه

وكدة نبقى عرفنا معنى كل موضوع وايه الناتج من استخدامه مش شرط طبعا اننا نستخدمهم كلهم فى مكان واحد لكن —

بنسخدمهم عشان نعمل ديزين كويس للموقع بتاعنا وغالبا ان اكثر ديزين بيجذب الانتباه اللى بيكون بسيط يعنى مش فيه

.الوان كتير ولا يكون فيه زخرفة كتير والشاطر اللى يعرف يوظف كل شئ بيتعلمه فى مكانه الصح

ودلوقتى هنبدا نشوف ازاى لما احط سطر الكود اللى فوق هيعمل الناتج دا وازاى استخدمه والمكان اللى هحط فيه الكود بتاعى

hover — Mouse Events بداية كدة ان الكود دا شغال على

يعنى مثلا لما اجى امشى بالماوس على صورة التاثيرات اللى ممكن تحصل انى احرك الصورة من مكانها او انى اكبرها عشان توضح او انى اغير اتجاها يعنى انى انقل الصورة من مكانها واغير فى احداثيات الصورة السينى والصادى

ذى معرفنا من المقالات السابقة ان كل متصفح له الامر اللى بيتنفذ عليه انا هشتغل على متصفح قوقل كروم يعنى عشان اللى حابب يطبق بايده

<head>

<style type="text/css">

#img1:hover{

-webkit-transform: scale(1.2);

}

</style>

</head>

<body>

<ul>

<img src="1.jpg" id="img1" width="130" height="130"/>

</ul>

</body>

وبعد ان انتهينا من معرفة كتابة الكود والتطبيق …….. اليكم هذا المثال كامل على الاربع مواضيع اللى اتكلمنا عنهم ممكن تحملوه من هنا

CSS3بعد ما طبقنا الكود وعرفنا بيشتغل ازاى وشوفنا المثال اللى معمول ب —

اللى سهلت علينا حاجات كتير جدا بتمنى تكونوا استفادتوا منه

🙂 وبكدة اكون وصلت لنهاية درسنا

🙂 فريق الديف ميكس يرحب باستفساراتكم واسئلتكم

,

1 Comment

HTML5 – Geolocation

 
1-HTML5 geolocation and the Google Maps API
2- Geolocation Position mechanism
3- Browser geolocation
4- Determine position and Caching
5- Follow-up Location
6- Privacy
7- Mobile and Geolocation
8- To read …..

_________________________

1-HTML5 geolocation and the Google Maps API

The Geolocation API provides the best estimate of the user’s position using a number of sources (called location providers).

_________________________

2- Geolocation Position mechanism

Be used several ways to find and identify places by HTML5 to ensure the greatest degree of accuracy in determining the place: –

IP                GSM/CDMA                Bluetooth             GPS

_________________________

3- Browser geolocation                                        

                                                                

_________________________

4- Determine position and Caching

  • Obtain the user’s current position, using the getCurrentPosition method
  • Watch the user’s position as it changes over time, using the watchPosition method
  • Quickly and cheaply obtain the user’s last known position, using the lastPosition property

<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8″ />

<title>DevMix Geolocation Api</title>

<script type=”text/javascript” src=”geo.js”></script>

</head>

<body>

<script type=”text/javascript”

src=”http://maps.google.com/maps/api/js?sensor=false”></script&gt;

<article>

<h1>DevMix geolocation </h1>

<p>My Page</p>

<div id=”map”></div>

</article>

</body>

</html>

Caching

You can summon a copy is stored and not to account for the place again to ease your application and increase the speed of implementation

navigator.geolocation.getCurrentPosition(showMap , showError,{maximumAge:60000});

_________________________

5- Follow-up Location

If you want to continue to place the visitor if the visitor is moving in a vehicle, for example you can use another function and is

var watchHandler = navigator.geolocation.watchPosition(scrollMap,showError);

 And to stop it :-

navigator.geolocation.clearWatch(watchHandler);

_________________________

6- Privacy

More secure , Can not access the site or application of any information on the location of the user without his permission.

_________________________

7- Mobile and Geolocation

  • iOS
  • Android
  • IPhones
  • Blackberry OS
  • Browsers with Google Gears support (Android, Windows Mobile)
  • Nokia Web Run-Time (Nokia N97,…)
  • webOS Application Platform (Palm Pre)
  • Torch Mobile Iris Browser
  • Mozilla Geode

_________________________

8- To read …..

I hope that this tutorial has given you a head start into the world of geolocation APIs. Good luck and try to make your next project take advantage of geolocation benefits!

,

2 Comments