E.Nourddine
-
المساهمات
1458 -
تاريخ الانضمام
-
تاريخ آخر زيارة
-
عدد الأيام التي تصدر بها
18
نوع المحتوى
ريادة الأعمال
البرمجة
التصميم
DevOps
التسويق والمبيعات
العمل الحر
البرامج والتطبيقات
آخر التحديثات
قصص نجاح
أسئلة وأجوبة
كتب
دورات
أجوبة بواسطة E.Nourddine
-
-
سنحاول رسم الشكل البيضوي عبر استعمال لخاصية drawEllipsWithBezier على Javascript، وذلك بإعطائها العديد من القيم الخاصة بحجمها، وكذا خاصية اللون، بهذه الطريقة:
drawEllipseWithBezier(ctx, 10, 10, 200, 60, 'blue');
ونستعمل في المثال التطبيقي التالي، رسماً لعدة دوائر بيضوية، بهذا الكود:
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>JS Bin</title> </head> <body> <canvas id="thecanvas" width="800" height="800"></canvas> <script> var canvas = document.getElementById('thecanvas'); if(canvas.getContext) { var ctx = canvas.getContext('2d'); drawEllipseWithBezier(ctx, 10, 10, 200, 60, 'blue'); drawEllipseWithBezierByCenter(ctx, 110, 110, 200, 60, '#0099ff'); drawEllipseWithEllipse(ctx, 110, 180, 100, 30, 'red'); drawEllipseWithArcAndScale(ctx, 110, 250, 100, 30, 'orange'); drawEllipseWithQuatraticCurve(ctx, 10, 290, 200, 60, 'green'); } // function drawEllipseWithEllipse(ctx, cx, cy, rx, ry, style) { if(ctx.ellipse) { ctx.save(); ctx.beginPath(); ctx.ellipse(cx, cy, rx, ry, 0, 0, Math.PI*2); ctx.strokeStyle=style; ctx.stroke(); ctx.restore(); } } // cx,cy - center, r - horizontal radius X function drawEllipseWithArcAndScale(ctx, cx, cy, rx, ry, style) { ctx.save(); // save state ctx.beginPath(); ctx.translate(cx-rx, cy-ry); ctx.scale(rx, ry); ctx.arc(1, 1, 1, 0, 2 * Math.PI, false); ctx.restore(); // restore to original state ctx.save(); if(style) ctx.strokeStyle=style; ctx.stroke(); ctx.restore(); } function drawEllipseWithBezierByCenter(ctx, cx, cy, w, h, style) { drawEllipseWithBezier(ctx, cx - w/2.0, cy - h/2.0, w, h, style); } function drawEllipseWithBezier(ctx, x, y, w, h, style) { var kappa = .5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end ye = y + h, // y-end xm = x + w / 2, // x-middle ym = y + h / 2; // y-middle ctx.save(); ctx.beginPath(); ctx.moveTo(x, ym); ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y); ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym); ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye); ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym); if(style) ctx.strokeStyle=style; ctx.stroke(); ctx.restore(); } function drawEllipseWithQuatraticCurve(ctx, x, y, w, h, style) { var kappa = .5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end ye = y + h, // y-end xm = x + w / 2, // x-middle ym = y + h / 2; // y-middle ctx.save(); ctx.beginPath(); ctx.moveTo(x, ym); ctx.quadraticCurveTo(x,y,xm,y); ctx.quadraticCurveTo(xe,y,xe,ym); ctx.quadraticCurveTo(xe,ye,xm,ye); ctx.quadraticCurveTo(x,ye,x,ym); if(style) ctx.strokeStyle = style; ctx.stroke(); ctx.restore(); } </script> </body> </html>لتكون النتيجة كما في الصورة:
مصدر:
-
يمكنك التأكد انطلاقا من Javascript:
if (typeof FileReader !== "undefined") { var size = document.getElementById('myfile').files[0].size; // التأكد من حجم الملف }هذال مثال تطبيقي:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-type" content="text/html;charset=UTF-8"> <title>Show File Data</title> <style type='text/css'> body { font-family: sans-serif; } </style> <script type='text/javascript'> function showFileSize() { var input, file; // APi التأكد من أن المتصفح يدعم if (!window.FileReader) { bodyAppend("p", "The file API isn't supported on this browser yet."); return; } input = document.getElementById('fileinput'); if (!input) { bodyAppend("p", "Um, couldn't find the fileinput element."); } else if (!input.files) { bodyAppend("p", "This browser doesn't seem to support the `files` property of file inputs."); } else if (!input.files[0]) { bodyAppend("p", "Please select a file before clicking 'Load'"); } else { file = input.files[0]; // byte إظهار حجم الملف بـ bodyAppend("p", "File " + file.name + " is " + file.size + " bytes in size"); } } function bodyAppend(tagName, innerHTML) { var elm; elm = document.createElement(tagName); elm.innerHTML = innerHTML; document.body.appendChild(elm); } </script> </head> <body> <form action='#' onsubmit="return false;"> <input type='file' id='fileinput'> <input type='button' id='btnLoad' value='Load' onclick='showFileSize();'> </form> </body> </html>خصائص الملف المرفوع : Input FileUpload files Property
-
html5 أتت مع File API spec والتي تسمح باستعمال تفاعلي للملفات الموجودة محليا على التطبيقات دون اللجوء إلى تحميلها على السيرفر، مما يعني أنك تستطيع إظهار الصور أوأي نوع من الملفات على متصفحك دون الحاجة إلى رفعها.
تتيح FileReader لتطبيقات الويب التفاعل مع الملفات بشكل غير متزامن asynchronously.
ليكون كودنا على الشكل التالي:
- كود html5:
<input type="file" id="files" /> <img id="image" />
- كود JavaScript:
document.getElementById("files").onchange = function () { var reader = new FileReader(); reader.onload = function (e) { // thumbnailإظهار البيانات على شكل . document.getElementById("image").src = e.target.result; }; // URL قراءة الصور انطلاقا من . reader.readAsDataURL(this.files[0]); };مقال مفيد حول الموضوع: using the File APIs in JavaScript.
-
تقريبا لفكرة سؤالك، تريد إدراج صور بجانب الحرف الأول للكلمة، بهذا الشكل:
على أن تحمل صورة كل حرف اسم الحرف مثلا A.png،M.png وZ.png...
بحيث تُدرج كل صورة قبل الكلمات المبتدئة بنفس الحرف، كما ألفنا في بعض القواميس المصورة.
هذا الكود اقتراحي كحل لسؤالك:
\documentclass[twoside]{book} \usepackage{graphicx} \usepackage{multicol} \usepackage{fancyhdr} \usepackage[bf,sf,center]{titlesec} % Headers and footers \fancyhead[RE]{\textsf{\leftmark}} \fancyhead[LE]{\thepage{} \textsf{\rightmark}} \fancyhead[LO]{\textsf{\rightmark}} \fancyhead[RO]{\textsf{\leftmark} \thepage{}} \fancyfoot[]{} \renewcommand{\headrulewidth}{0.5pt} \pagestyle{fancy} % For testing \usepackage{lipsum} \usepackage[xindy]{glossaries} \makeglossaries % The optional argument is in case you can't use the name as a label \newcommand{\dict}[4][]{% \newglossaryentry{#2}% {% name={#2},% symbol=#3,% description=#4,% #1% }% } \newglossarystyle{dict}% {% \renewenvironment{theglossary}{}{\end{multicols}}% \renewcommand*{\glossaryheader}{}% \renewcommand*{\glsgroupheading}[1]{% \section*{##1 \includegraphics[height=\baselineskip]{##1}}% \begin{multicols}{2}% }% \renewcommand*{\glsgroupskip}{\end{multicols}}% \renewcommand{\glossaryentryfield}[5]{% \markboth{##2}{##2}% \par\vspace{0.25\baselineskip}% \textbf{\textsf{##2}} \textit{- ##4 -} ##3% }% }% \renewcommand*{\glossarysection}[2][]{} \dict{zero}{n}{\lipsum[4]} \dict{adhesive}{n}{\lipsum[5]} \dict{adhere}{n}{\lipsum[2]} \dict{adhesion}{n}{\lipsum[4]} \dict{adjacent}{n}{\lipsum[6]} \dict{adjust}{n}{\lipsum[6]} \dict{main}{n}{\lipsum[3]} \dict{material}{n}{\lipsum[1]} \dict{more}{n}{\lipsum[2]} \dict{zebra}{n}{\lipsum \lipsum \lipsum} \dict{adherence}{n}{\lipsum[3]} \dict{adjective}{n}{\lipsum[1]} \dict{adjoin}{n}{\lipsum[2]} \dict{mathematic}{n}{\lipsum[2]} \dict{adjourn}{n}{\lipsum[3]} \dict{adjournment}{n}{\lipsum[4]} \dict{adjunt}{n}{\lipsum[5]} \dict{adequate}{n}{\lipsum[1]} \begin{document} \glsaddall \printglossary[style=dict] \end{document}لتحصل على الصورة:
يمكنك تعويض صور الحروف بصور لأشياء تتماشى ومحتوى الكلمة المناسبة لها، كصورة تفاحة أمام كلمة appel...
-
1
-
-
لاستعمال الحرف المُعلم بالسهم الأحمر، يكفي استعمال الأمر :
\u{a}حيث يمكنك LaTeX أوأحد برامج التحرير من تضمين مثل هذه الحروف غير الاعتيادية، فمثلاً على TeXstudio يمكنك استعمال النافذة اليسرى من البرنامج، بالشكل التالي:
-
حسب فهمي للسؤال فأنت تبحث عن كتابة لمعادلة رياضية بالشكل التالي:
\documentclass{article} \usepackage{amsmath} \begin{document} \begin{multline} W = \int_{k<\Lambda} [Dg][DA][D\psi][D\Phi] \exp\biggl\{ i \int d^{4}x \sqrt{-g} \biggl[\frac{m_{p}^{2}}{2}R- \frac{1}{4}F_{\mu\nu}^{a}F^{a\mu\nu}\\ % \qquad + i\bar{\psi}^i\gamma^{\mu}D_{\mu}\psi^i + \bigl(\bar{\psi}_{L}^{i} V_{ij} \Phi \psi_{R}^{j} + h.c. \bigr) - |D_{\mu}\Phi|^2 - V(\Phi)\biggr] \biggr\} \end{multline} \end{document}لتفادي أي مشكل ولتظهر المعادلة بشكل جيد، مع بعض الفراغات الاعتيادية داخل هذا النوع من الكتابات العلمية، سنستعمل حزمة mathtolls الخاصة بالأدوات المتعلقة بالرياضيات، كما يوضح الكود التالي:
\documentclass{article} \usepackage{mathtools} \begin{document} \begin{equation} \begin{multlined} W = \int_{k<\Lambda} [Dg][DA][D\psi][D\Phi] \exp\biggl\{i \int d^{4}x \sqrt{-g} \biggl[\frac{m_{p}^{2}}{2}R- \frac{1}{4}F_{\mu\nu}^{a}F^{a\mu\nu} \\ % \qquad + i\bar{\psi}^i\gamma^{\mu}D_{\mu}\psi^i + \bigl(\bar{\psi}_{L}^{i} V_{ij} \Phi \psi_{R}^{j} + h.c. \Bigr) - |D_{\mu}\Phi|^2 - V(\Phi)\biggr] \biggr\} \end{multlined} \end{equation} \end{document}لنحصل في الأخير على :
-
فقط عليك اضافة:
text width=
لتعيين تنسيق كل عقدة every node. فيما يخص تنسيق mindmap الخاص بكل شجرة 'تفرعّ' سيأخذ عرض القطعة النصية المُرفقة، وتحصل على عقد مختلفة المقاس بالشكل التالي:
\documentclass[tikz,border=10pt]{standalone} \usetikzlibrary{mindmap} \tikzset{ every node/.append style={concept, text width=, rectangle, minimum size=0cm, inner sep=2mm}, } \begin{document} \begin{tikzpicture}[mindmap,text=white] \node {Orangutans} child { node {Aardvarks} child { node {Bees} } }; \end{tikzpicture} \end{document} -
لاحتراف تصميم الخطوط يلجأ الأغلب إلى استخدام برنامج FontCreator، أو برنامجFontForge المفتوح المصدر، وتعتبر هذه البرامج من الأكثر شيوعا بين مصممي الخطوط.
كما يمكن استمال برنامج BirdFont بالطريقة المبينة في الصور:
- أدرج مثلث ومستطيل وحدد الأبعاد المناسبة للحرف:
قارن بين حرفك والحروف الأخرى(Ctrl+P):
استعمل الشبكة grid:
احفظ المشروع بصيغة svg وافتحه ببرنامج Illustrator:
بعد الانتهاء من التغيرات على برنامج Illustrator يمكنك إتمام العمل على برنامج BirdFont من خلال Import an Export -> Import SVG:
-
ببساطة عدل من تدرج الألوان على الإطار Stroke، ليبدو كما في الصورة:
وهذا موجود في الإصدار cs6 فقط.
صمم الشكل التالي وطبق عليه تدرج الألوان السابق:
أو:
كملاحظة عامة: في التصميم نستعمل تقنية التدرج Gradient للانتقال من لون لآخر، أي بالتدرج حيث نعطي فقط اللونين ويظهر التدرج من لون لآخر، كما في الصورة الأولى، حيث استعملنا التدرج بين أكثر من لونين.
-
تعتمد تقنية shape Mode على انتاج شكل جديد انطلاقا من الشكلين الأوليين، بينما Pathfinder تُحدث تغييراً على الشكلين الأصليين، ولمن لا يعرف هاتين التقنيتين فهي الأكثر استعمالا على Illustrator عند مزج، تقاطع، تباين ...شكلين اثنين، والصورتين التاليتين تظهران مختلف الطرق التي من الممكن استعمالها:
و:
-
من الممكن فعل ذلك على برنامج Illustrator باتباع الخطوات التالية:
- من القائمة Object > Create Object Mosaic.
- من خلال النافذة الظاهرة حدد عرض وطول كل جزء وأيضا عدد الأجزاء Number of tiles .
كما تلاحظ فقد تم تقسيم الأيقونة إلى عدد من الأجزاء المُكونة لها، وذلك على شكل شبكة مكونة من فسيفساء صغيرة تتجمع لتعطي الشكل الكلي للصورة.
في هذا الرابط ستجد درساً بالتفصيل حول ذلك.
-
أقع في نفس المشكل أحياناً، ومن خلال عدة تجارب في الأمر أصبحت أجد البديل عند انقطاع الأنترنت أو التيار الكهربائي:
- لي مكتبة صغيرة تضم بعض الكتب، أستغل الفرصة لقراءة البعض منها.
- أنظف حاسوبي -عند انقطاع الأنترنت-، وارتب مكان العمل لدي -المكتب-.
- في حال انقطاع الأنترنت فقط، على قرص صلب محمول، أحمل بعض الدورات، أتفحصها وأشاهد بعضها.
- عند حاجتي المُلحّة للأنترنت، أذهب إلى مقهى الأنترنت -cyber- لقضاء العمل المستعجل.
- أنصحك باقتناء هذا المفتاح الخاص بالأنترنت والذي من الممكن شحنه لمدة يوم أو أكثر :
أثناء هذه الفترة، قم بشيء مفيد.
-
دعنا نتحلى بالقليل من الموضوعية، تخيّل نفسك تبحر بقارب ولا تعرف الوجهة، هل تظن أنك ستصل إلى أي مكان، لا أعتقد ذلك وحتى إن وصلت لن تكون هي الوجهة المرغوبة، وكذلك الأمر في العمل، لن تنجح -وأجزم لك- إن لم تكن لك أهداف مسطرة، تنوي بلوغها، ولعلك أشرت لهذه النقطة في نص سؤالك "الأشخاص أصحاب الأهداف هم الأكثر مردودية"، ذلك أنهم يدركون جيداً ما يتوجب عليهم فعله، ولنفترض أنك وضعت 4 أهداف لتحقيقها في هذا اليوم، مع مراعاة أن هذه الأهداف يمكن إنجازها تماشيا مع المدة الزمنية التي تستغرقها طيلة اليوم في العمل، تأكد تماماً أنه لن ينتهي اليوم إلا وقد أنجزتها، فقط ضعها نُصب عينيك، وركز جيداً أثناء العمل،ولا تنسى أن تأخذ مدة قصيرة بين الفينة والأخرى -10دقائق كل ساعة من العمل-، حتى تجدد نشاطك فيها.
مع غياب الأهداف -سامحني على التعبير-، ستتخبط في الكثير من الأمور التي لن تنفعك في شيء لأنه ببساطة أنت لا تردي ما عليك فعله لغياب هدف يدفعك للوصول إلى غاية محددة.
نصيحة: حاول تسطير بعض الأهداف في أول يومك، على أن تنجزها كلها، كرر العملية يوميا، ستعتاد الأمر، هكذا يعمل الناجحون.
-
دعني أخبرك معلومة، لقد اكتسبتُ اللغة الانجليزية من خلال الكتب الصوتية، حيث كنت أعاني من ضياع الوقت في الحافلة، بين سكني ومكان العمل، حيث أستغرق مدة 45 دقيقة، فكّرت مليا وبحثت عن حلول لاستغلالها، كان أنجعها تحميل كتب صوتية بلغة انجليزية سهلة والاستماع لها أثناء الطريق بواسط جهاز IPod، في بعض الأحيان ولتلافي الملل الذي من الممكن أن يصيبني من كثرة الكتب، كنت أقوم بالبحث على أغاني بها كلمات جيدة ومفيدة لي في فترة تعلمي، بالإضافة إلى مقاطع البودكاست التي خصصت لها وقتا وهو قبل الذهاب إلى النوم، أطّلع من خلالها على حوارات مفيدة في مجال تخصصي.
خصص وقتا للقراءة، في مجال التخصص وكذا خارجه، وابقِ نفسك على اطلاع بما هو جديد، وليس بالضرورة أن تقرأ في مجال التقنية، حاول توسيع معارفك في مجالات شتى.
إذا كان لك أي هوايات بجانب العمل، أنصحك بصقلها، لأنك ستوازن بين ما تحب فعله-هواية- وما يتوجب عليك فعله -العمل-.
-
فقدان التركيز من المشاكل التي يعاني منها أغلب العاملين، وخاصة إن لم تكن عليك مراقبة، حيث تسمح لنفسك بفتح حسابك على مواقع التواصل الاجتماعي، ظانا أنه لن يأخذ منك الكثير من الوقت أو مُوهما نفسك أنك ستعود للعمل بعد برهة من الوقت، لتجد نفسك أمضيت ما يقارب 20دقيقة أو أكثر في لاشيء.
نصائح:
- حاول عدم الولوج إلى مواقع التواصل الاجتماعي أثناء العمل، وإن لزم الأمر الاستعانة بإحدى إضافات المتصفح.
- حدد جدول مهام تنجزه في اليوم، مع مراعاة التناسب بين المهام والمدد المخصصة لها.
- ابتعد عن اتصالات الهاتف، التي من الممكن أن تشتت تنبيهك.
- استحضر شعورك عند نهاية اليوم وقد أتممت كل المهام -إحساس جيّد أليس كذلك-.
- عند إدراكك أنك ابتعدت عن العمل وأبحرت في موقع ما -رغم فائدته-، أنصحك بالرجوع الفوري لعملك وأتممه، وخصص وقت للتعلم والإبحار في الأنترنت خارج وقت العمل.
- النصيحة الأخيرة، حاول أن تبقى مركزاً على عملك، فالملتفتُ لا يصل.
-
عادة ما أقوم بتقسيم يومي إلى أربعة أقسام متساوية المدة تمتد كل واحدة حوالي الساعة والنصف.
أضع أمام عيني 3 أهداف ذات أولوية لأُنهيها في آخر اليوم، على أن تكون هذه الأهداف تستغرق مدة لا تفوق الساعة والنصف، وفي حال كانت المهمة ستستغرق أكثر أقوم بتقسيمها إلى مرحلتين أو أكثر حسب درجة صعوبتها والمدة اللازمة لإتمامها.
أضع في المرحلة الأخيرة -الرابعة- هدفا غير ذو أهمية-أقل درجة من الأخرى-، لأني سأكون متعب وبالتالي أخصص هذه الفترة للمهام التي لا تحتاج تركيزاً أو جهداً كبيرين، على أن أشطب على الهدف المُنجز بعد الانتهاء منه على قائمة ToDoList .
في آخر اليوم وبعد إتمام جميع الأهداف المسطرة، أراجعها وأبرمج ليوم الغد بنفس الطريقة، مع استخراج نقاط الضعف والقوة في هذه المنهجية المتبعة، والاستفادة من نقاط القوة ومحاولة التغلب على نقاط الضعف منها، كتجنب الملهيات من مواقع واتصالات هاتفية...
وأعتمد في إعطاء الأولوية للمهام حسب هذه المعايير: المستعجلة، المهمة والضرورية، حيث أجعلها الأولى في الترتيب حتى أنتهي منها أولا.
ملاحظة في الأخير: هذه النقاط التي تم ذكرها والطريقة التي أعمل بها، قد لا ألتزم بها في بعض الأحيان إذا كانت هناك إكراهات تحتّم عليّ العمل لساعات أكثر أو أقل، لكن أجدها مجدية إلى حد لا بأس به في عملي وإنجازه،
-
حقلَي created_at وَ updated_at هما لتخزين تاريخ الإنشاء وتحديث تاريخ التحديث عند كل تغيير على قيم الجدول، لكن بعد رؤية البنية المُكوّنة لقاعدة البيانات خاصتك، لاحظت أن حقل created_at به خاصية CURRENT_TIMESTAMP والتي لا يجب أن يتوفر عليها هذا الحقل، مما يعني أنه -حقلcreated_at- سيغير بشكل دوري عند كل تغيير لأنه وببساطة current_timestamp، لذا وجب انتزاع هذه الميزة منه.
عند القيام بأي تغّير سطر من جدول في قاعدة البيانات فإنه وبشكل تلقائي سيتم تحديث حقل updated_at، حيث يقوم Elequent بتحديث هذا الحقل.
يندرج الحقلين السابقين ضمن Timestamps، حيث يتم إنشاءهما داخل ملف Migration -كما هو مبين في كود سؤالك- عن طريق :
$table->timestamps();
ويمكن إلغاءهما عن طريق Model من خلال:
public $timestamps = false;
-
1
-
-
هذا النوع من الأخطاء هو تحذير وتنبيه للتأكد قبل الإقبال على أي تغيير على مستوى قاعدة البيانات، ولتجاوز هذا الخطأ، توفّر Laravel هذا الأمر الذي يمكن تنفيذه من خلال الطرفية:
php artisan migrate --force
ولإلغاء الأمر السابق نستعمل rollback:
php artisan migrate:rollback
لإلغاء جميع migrations:
php artisan migrate:reset
-
نعم بإمكانك تضمين متغيّر عند استعمال المسارات routes علىLaravel5.2 بداخل ملف الواجهة view، وذلك باستخدام helper التالي:
<a href="{!! route('organisations.index', ['menu' => 'p11-c3']) !!}">*ملاحظة: عليك التأكد من استعمال الاسم الصحيح للمسار، فكما هو معلوم لدى أي تغيير وإن كان طفيفاً يستدعي رفع خطأ على نظام إطار العمل Laravel.
كما يمكننا عمل redirect من خلال المتحكم Controller مع إعطاء قيمة لمتغير ما، وعادة ما نستعمل هذه الطريقة لإظهار تنبيهات على الصفحة أو ارفاق المعلومات التي من شأنها الظهور في الواجهة، بهذا الشكل:
return redirect()->back()->with('data', ['مرحباً بك في أكاديمية حسوب']); -
عند استعمال Auth على Laravel عليك باستخدام web لتطبيقه على مجموعة مسارات.
يمكنك تغيير مسار مجموعة باستخدام authوmiddlware للحماية:
Route::group(['middleware' => ['web', 'auth']], function () { // ... });- استعمال مصفوفة لتحديد أكثر من middlware على المسار:
Route::get('/', function () { // })->middleware(['first', 'second']);أو:
Route::get('/', ['middleware' => ['first', 'second'], function () { // }]);وَ:
Route::put('post/{id}', ['middleware' => 'role:editor', function ($id) { // }]); -
سأجيبك عن طريق المثال التطبيقي التالي:
- أنشئ طبقة نص عبر أداة Text Tool:
- استخدم أداة Pen Tool لرسم مسار على طول الحرف:
- قم بإخفاء طبقة النص، مع الاحتفاظ على الشكل المرسوم بـ Pen Tool:
- خذ Elipse Tool وارسم مجموعة دوائر -أو الشكل الذي سيرسم به الشعار آخر المطاف-:
- قم باضافة فرشا -brush- جديدة:
- طبّق الفرشاة على الشكل المُنجز سابقا- شكل حرف a-:
- بعد التغيير في إعدادات الفرشاة، نحصل على النتيجة التالية:
-
تأكد من وجود attribute قبل الحذف، بعد ذلك يمكنك إنجاز عملية الحذف دون أي مشاكل، وبالنسبة للتشغيل لمرة واحدة:
$entity = Mage_Catalog_Model_Product::ENTITY; $attributeCode = 'status'; $attributeSetId = '4'; // attribute قيمة $attr = Mage::getResourceModel('catalog/eav_attribute') ->loadByCode($entity,$attributeCode); if ($attr->getId()) { // atttribute exists, remove it Mage::getModel('catalog/product_attribute_set_api') ->attributeRemove($attr->getId(), $attributeSetId); } -
هناك طريقتين اثنتين لفعل ذلك، هما:
- الطريقة الأولى:
app/design/frontend/base/default/layout/contacts.xml
انسخ القالب:
app/design/frontend/yourpackage/yourtheme/layout/contacts.xml
وغيّر من:
<action method="setTemplate"><template>page/2columns-right.phtml</template></action>
إلى المسار التالي:
<action method="setTemplate"><template>page/1column.phtml</template></action>
- الطريقة الثانية:
app/design/frontend/yourpackage/yourtheme/layout/local.xml
أنشئ ملف جديدlocal.xml:
<?xml version="1.0"?> <layout version="0.1.0"> <contacts_index_index> <reference name="root"> <action method="setTemplate"><template>page/1column.phtml</template></action> </reference> </contacts_index_index> </layout> -
للتغيير في شكل الموقع ومظهره، سنغير في ملف التنسيق الخاص به css، بهذا الشكل:
- بالنسبة للجزء العلوي للصفحة header:
.page-header { margin: 0 auto; max-width: 1260px; padding: 0 30px; }- نعوضه بالكود التالي:
.page-header { margin: 0 auto; width:100%; padding: 0 30px; }- بالنسبة لـ content:
.main-container, .footer-container { margin: 0 auto; max-width: 1260px; padding: 15px; position: relative; }- نعوضه بالكود:
.main-container, .footer-container { margin: 0 auto; width:100%; padding: 15px; position: relative; }.main-container, .footer-container { margin: 0 auto; width:100%; padding: 15px; position: relative; }- ذيل الصفحة أو footer:
.main-container, .footer-container { margin: 0 auto; max-width: 1260px; padding: 15px; position: relative; }- نعوضه بالكود التالي:
.main-container, .footer-container { margin: 0 auto; width:100%; padding: 15px; position: relative; }بعد الانتهاء من هذه التغيرات عليك بإزالة cache لتُحدث التغيرات المُحدثة.
كيف أستعمل تقنية Drag Drop لتحميل ملف من خلال Input file؟
في تطوير الواجهات الأمامية
نشر
أشرح لك الطريقة عبر كود Drag and drop باستعمال JavaScript ، حيث تدعمه المتصفحات: chrome،FireFox وsafari
<div id="drop-zone"> Drop files here... <div id="clickHere"> or click here.. <input type="file" name="file" id="file" /> </div> </div>$(function () { var dropZoneId = "drop-zone"; var buttonId = "clickHere"; var mouseOverClass = "mouse-over"; var dropZone = $("#" + dropZoneId); var ooleft = dropZone.offset().left; var ooright = dropZone.outerWidth() + ooleft; var ootop = dropZone.offset().top; var oobottom = dropZone.outerHeight() + ootop; var inputFile = dropZone.find("input"); document.getElementById(dropZoneId).addEventListener("dragover", function (e) { e.preventDefault(); e.stopPropagation(); dropZone.addClass(mouseOverClass); var x = e.pageX; var y = e.pageY; if (!(x < ooleft || x > ooright || y < ootop || y > oobottom)) { inputFile.offset({ top: y - 15, left: x - 100 }); } else { inputFile.offset({ top: -400, left: -400 }); } }, true); if (buttonId != "") { var clickZone = $("#" + buttonId); var oleft = clickZone.offset().left; var oright = clickZone.outerWidth() + oleft; var otop = clickZone.offset().top; var obottom = clickZone.outerHeight() + otop; $("#" + buttonId).mousemove(function (e) { var x = e.pageX; var y = e.pageY; if (!(x < oleft || x > oright || y < otop || y > obottom)) { inputFile.offset({ top: y - 15, left: x - 160 }); } else { inputFile.offset({ top: -400, left: -400 }); } }); } document.getElementById(dropZoneId).addEventListener("drop", function (e) { $("#" + dropZoneId).removeClass(mouseOverClass); }, true); })#drop-zone { /*Sort of important*/ width: 300px; /*Sort of important*/ height: 200px; position:absolute; left:50%; top:100px; margin-left:-150px;وباختصار يتم التعرّف على الملف عبر سحبه إلى الجزء الخاص بالتحميل، ومن ثم رفعه بعد الضغط على زر الرفع أو جعل الرفع يتم تلقائيا.
بعد إدراج الكود السبق سيظهر لك حقل input file بالشكل: