Clever Geek Handbook

لوريم إيبسوم: الكتابة باليد

مقدمة





أقوم بتطوير مشروع تعليمي. وهذا العام احتاج الأطفال إلى الكتابة باللغة الإنجليزية.



على الرغم من حقيقة أننا نطبع النصوص بشكل متزايد في شكل إلكتروني ، إلا أن الكتابة اليدوية لا تزال شائعة في الحياة اليومية والمهنية.



الوصفات مفيدة للأطفال والكبار. لا يزال البعض يتعلم الكتابة ، والبعض الآخر يتدرب.



كان من المهم بالنسبة لنا إنشاء نظام للاختيار السريع والمريح للوصفات الطبية. لذلك ، قررنا إنشاء مولد خاص بنا.



الموضوع مثير للاهتمام ، لكن المعلومات المتوفرة على الإنترنت قليلة جدًا. لذلك نشأت فكرة لكتابة تعليمات لإعداد الوصفات الخاصة بك.



هدف



لإعادة اختراع العجلة لإنشاء مولد الكلمات الخاص بك ، لإنشاء مهام شخصية لكل طالب.



الأسباب



  1. السعر: مجموعة واحدة تكلف حوالي 300 روبل
  2. القدرة على إصدار المزيد من المهام الشخصية اعتمادًا على ما يحتاج إلى حل
  3. لا توجد معلومات محددة حول هذا الموضوع على الإنترنت ، وأصبح من المثير للاهتمام معرفة كيفية عمله.
  4. عندما يكون لديك تقنيتك الخاصة ، يمكنك تحسينها (إضافة القدرة على تغيير حجم النص ، على سبيل المثال ، أو مولد المهام الخاصة المتعلقة بالوصفات)


عملية الخلق



نظرًا لخصائص مشروعي ، تم تنفيذه على PCP ، وأنا متأكد من وجود العديد من الخيارات الأخرى المثيرة للاهتمام والجيدة لحل هذه المشكلة.



صياغة المشكلة



يجب أن تبدأ دائمًا بعبارة بسيطة ، ببيان مشكلة. ما هو منشئ الوصفات؟ هذا رسم تخطيطي بسيط.



ندخل النص ، يتم إنشاء ملف pdf من النص بتصميم ورقة دفتر ملاحظات وخط مكتوب بخط اليد ، والذي يجب تحديده.



  • إدخال النص
  • إنشاء ملف pdf
  • ( , )




إذا كانت لغة html العادية ستساعدنا في إدخال كل من النص وإرسال النموذج ، فحينئذٍ لإنشاء مستند pdf نحتاج إلى مكتبة خاصة ، وقعت عيناي على fpdf (إنها صغيرة ومجانية وبسيطة - مثالية لحل مشكلتنا).



هناك إرسال بيانات ، وهناك منشئ pdf ، والآن أنت بحاجة إلى خط.



هناك منحنى تعليمي جيد للخط يحل مشكلتنا تمامًا. ستحتاج إلى معالجة الخط على موقع fpdf حتى تتمكن من إضافته إلى البرنامج النصي (تشفير cp1252 جيد).



يبقى الآن الحصول على تصميم ورقة دفتر الملاحظات: لقد أخذت وظيفة رسم الخلايا من موقع fpdf ، وأزلت الخطوط العمودية هناك ، وأضفت خطوطًا وهوامشًا مائلة.



أخيرًا ، بعد أن جمعت كل العناصر الضرورية ، يمكنك إنشاء منشئ وصفات.



ضع كل شيء معا



نصمم صفحة html مع تقديم النموذج (أخذت التصميم هنا ):



  • لنجعل حقول اختيار الخط (رمادية ومنقط)
  • دعونا نجعل حقل إدخال النص
  • زر إرسال البيانات


create-training.html 



<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<form class="decor" action="gotopdf2.php" method="post">

  <div class="form-left-decoration"></div>
  <div class="form-right-decoration"></div>
  <div class="circle"></div>
  <div class="form-inner">
	<h3>   </h3>
		<p> <input type="radio" name="type_letter_propisi" value=0 checked></p>
		<p> <input type="radio" name="type_letter_propisi" value=1></p>  
    <h3>  :</h3>
	<textarea name="data1"rows="10"></textarea>
    <input type="submit" value=" ">
  </div>
</form>
</body>
</html>


style.css 



* {box-sizing: border-box;}
body {background: #f69a73;}
.decor {
  position: relative;
  max-width: 400px;
  margin: 50px auto 0;
  background: white;
  border-radius: 30px;
}
.form-left-decoration,
.form-right-decoration {
  content: "";
  position: absolute;
  width: 50px;
  height: 20px;
  background: #f69a73;
  border-radius: 20px;
}
.form-left-decoration {
  bottom: 60px;
  left: -30px;
}
.form-right-decoration {
  top: 60px;
  right: -30px;
}
.form-left-decoration:before,
.form-left-decoration:after,
.form-right-decoration:before,
.form-right-decoration:after {
  content: "";
  position: absolute;
  width: 50px;
  height: 20px;
  border-radius: 30px;
  background: white;
}
.form-left-decoration:before {top: -20px;}
.form-left-decoration:after {
  top: 20px;
  left: 10px;
}
.form-right-decoration:before {
  top: -20px;
  right: 0;
}
.form-right-decoration:after {
  top: 20px;
  right: 10px;
}
.circle {
  position: absolute;
  bottom: 80px;
  left: -55px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
}
.form-inner {padding: 50px;}
.form-inner input{
  display: inline;
  width: normal;
  padding: 0 20px;
  margin-bottom: 10px;
  background: #E9EFF6;
  line-height: 40px;
  border-width: 0;
  border-radius: 20px;
  font-family: 'Roboto', sans-serif;
}

.form-inner textarea {
  display: block;
  width: 100%;
  padding: 0 20px;
  margin-bottom: 10px;
  background: #E9EFF6;
  line-height: 40px;
  border-width: 0;
  border-radius: 20px;
  font-family: 'Roboto', sans-serif;
}
.form-inner input[type="submit"] {
  margin-top: 30px;
  background: #f69a73;
  border-bottom: 4px solid #d87d56;
  color: white;
  font-size: 14px;
}
.form-inner textarea {resize: none;}
.form-inner h3 {
  margin-top: 0;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 24px;
  color: #707981;
}






تحرير الملف باستخدام فئة الشبكة (إنشاء ورقة دفتر ملاحظات):



  • تعطيل الخطوط العمودية
  • أضف هوامش جانبية (خط أحمر ، على الرغم من أنه سيظل رماديًا بعد الطباعة)
  • قمنا بتعيين لون المساطر على الأسود ، حيث أن دفتر الملاحظات باللون الأزرق الفاتح على طابعة بالأبيض والأسود لن يكون مرئيًا ، ولكن على الحبر الملون فهو أمر مؤسف
  • نكتب خطًا مائلًا عبر مماس المثلث. تم القياس تجريبياً أن تكون الزاوية 25 درجة


Grid.php (ملف معدل حيث كان هناك كود لإنشاء الشبكة) 



<?php
require_once('fpdf182/fpdf.php');

class PDF_Grid extends FPDF {
    var $grid = false;
	var $inclined = false;
	var $border = true;
	var $i_hl= 0;
	var $i_hl_up= 13.5;
	
	
    function DrawGrid()
    {
        if($this->grid===true){
            $spacing = 5;
        } else {
            $spacing = $this->grid;
        }
		$this->SetDrawColor(0,0,0);
        $this->SetLineWidth(0.35);
		$h_limit=$this->h-20;
        for($i=$this->i_hl;$i<$h_limit;$i+=$spacing){						//print _ horizontal lines
            $this->Line(0,$i,$this->w,$i);
        }
		for($i=$this->i_hl_up;$i<$h_limit;$i+=$spacing){						//print up_ horizontal lines 13.5
            $this->Line(0,$i,$this->w,$i);
        }

		//Create inclined lines
		$tan_treangle_inc_line=tan(deg2rad(25));
		if($this->inclined == true){							//print / inclined lines
			$this->SetDrawColor(0,0,0);
			for($i=4;$i<=55;$i+=7)
				$this->Line(12*$i*$tan_treangle_inc_line, 0, 0, 12*$i);
		}
		if($this->border == true){								//print |  right border line
			$this->SetDrawColor(255,0,0);						//red border
			$this->Line(185, 0, 185, 300);
		}
		
    }

    function Header()
    {
        if($this->grid)
            $this->DrawGrid();
    }
	
}
?>


الآن نقوم بإنشاء الملف نفسه لمعالجة البيانات وإنشاء الكلمات:



  • إضافة تحديدات الخطوط عبر مفتاح التحويل ()
  • اضبط حجم النص (هنا يمكنك تحديد قيم معينة ، حيث أن حجم الورقة A4 هو نفسه دائمًا ، وهذه ليست شاشة) ، بالنسبة للأطفال ، من الأفضل أن يأخذوا حجمًا أكبر ، لأنهم ما زالوا يتعلمون وسيكون من الصعب عليهم الكتابة بأحرف صغيرة


gotopdf2.php (ملف المعالج حيث يتم تكوين وإنشاء كل شيء) 



<?php
require_once('gridphp.php');

$pdf=new PDF_Grid();
	
	/*
	//   
	*/
	
	$pdf->inclined = true;		//  
	$pdf->SetMargins(5,5,25);	// 
	$pdf->grid = 18;			//       
	$pdf->AddPage();
	
	
	/*
	//   ( )
	*/

	switch ($_POST['type_letter_propisi']) {
    case 0:		// 												
		$pdf->AddFont('LearningCurve-Bold','','learning_curve_bold_ot_tt.php');
		$pdf->SetFont('LearningCurve-Bold','',36);
		$pdf->SetTextColor(140,140,140);
		break;
	case 1:		// 														
		$pdf->AddFont('LearningCurve-dashed','','learning_curve_dashed_ot_tt.php');
		$pdf->SetFont('LearningCurve-dashed','',36);
		$pdf->SetTextColor(0,0,0);
		break;
	default:
		$pdf->Write(18,",     ");
		break;
	}
	$text_propisi = mb_convert_encoding($_POST['data1'], "cp1252");
	$pdf->Write(18,"$text_propisi");		//    


$pdf->Output();

?>


كل شيء جاهز! أدناه أرفق النتائج التي تم الحصول عليها:





مجرد ورقة





مخطط تفصيلي رمادي عادي مخطط





منقط



انتاج |



بأقل تكلفة ، نحصل على مولد الوصفات الخاص بنا. بعد ذلك يمكنك إضافة العديد من الوظائف الشيقة هنا: اختيار حجم ولون الحروف واللغة وما إلى ذلك.



رابط إلى GitHub



P. كنت أقوم بمشروع على خادم محلي ، استخدم xampp


More articles:


All Articles