Clever Geek Handbook

Lorem Ipsum: escribir a mano

Prefacio





Estoy desarrollando un proyecto educativo. Y este año los niños necesitaban escribir en inglés.



A pesar de que cada vez imprimimos más textos en formato electrónico, la escritura a mano sigue siendo popular en la vida cotidiana y profesional.



Las recetas son útiles tanto para niños como para adultos. Algunos todavía están aprendiendo a escribir, otros se están formando.



Para nosotros era importante crear un sistema para la selección rápida y conveniente de recetas. Por lo tanto, decidimos hacer nuestro propio generador.



El tema es interesante, pero había muy poca información en Internet. Entonces surgió la idea de escribir instrucciones para crear tus propias recetas.



objetivo



Para reinventar la rueda, crea tu propio generador de palabras, para crear tareas personales para cada alumno.



Las razones por



  1. Precio: un juego cuesta alrededor de 300 rublos
  2. La capacidad de emitir tareas más personales dependiendo de lo que se necesite resolver.
  3. No hay información particular sobre este tema en Internet, resultó interesante descubrir cómo funciona.
  4. Cuando tienes tu propia tecnología, puedes refinarla (agrega la capacidad de cambiar el tamaño del texto, por ejemplo, o un generador de tareas especiales relacionadas con recetas)


Proceso de creación



Debido a las peculiaridades de mi proyecto, mi implementación se realizó en PCP, estoy seguro que existen muchas otras opciones interesantes y buenas para solucionar este problema.



Formulación del problema



Siempre debe comenzar con uno simple, con un enunciado del problema. ¿Qué es un generador de recetas? He aquí un diagrama sencillo.



Ingresamos el texto, se crea un archivo pdf a partir del texto con el diseño de una hoja de cuaderno y una tipografía manuscrita, que debe ser delineada.



  • Entrada de texto
  • Creando un archivo pdf
  • ( , )




Si el html ordinario nos ayuda a ingresar texto y enviar el formulario, entonces para generar un documento pdf necesitamos una biblioteca especial, mis ojos se posaron en fpdf (es pequeño, gratuito y simple, ideal para resolver nuestro problema).



Hay envío de datos, hay un generador de pdf, ahora necesitas una fuente.



Hay una buena curva de aprendizaje de fuentes que resuelve perfectamente nuestro problema. La fuente deberá procesarse en el sitio fpdf para que pueda agregarla al script (la codificación cp1252 está bien).



Ahora queda por obtener el diseño de la hoja del cuaderno: tomé la función para dibujar celdas del sitio fpdf , eliminé las líneas verticales allí, agregué líneas oblicuas y márgenes.



Finalmente, después de haber recopilado todos los elementos necesarios, puede hacer un generador de recetas.



Poniendolo todo junto



Diseñamos la página html con el envío del formulario (tomé el diseño aquí ):



  • Hagamos los campos de selección de fuente (gris y punteado)
  • Hagamos un campo de entrada de texto
  • Botón enviar datos


create-exercise.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;
}






Editando el archivo con la clase grid (creando una hoja de cuaderno):



  • Deshabilitar líneas verticales
  • Agregue márgenes laterales (línea roja, aunque seguirá siendo gris después de la impresión)
  • Configuramos el color de las reglas en negro, ya que el azul claro del cuaderno en una impresora en blanco y negro no será visible, pero en una tinta de color es una pena
  • Escribimos una línea inclinada a través de la tangente del triángulo. Medido empíricamente, el ángulo debe ser de 25 grados.


grid.php (archivo modificado donde solía estar el código para crear la cuadrícula) 



<?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();
    }
	
}
?>


Ahora creamos el archivo en sí para procesar datos y generar palabras:



  • Agregar selecciones de fuentes a través del interruptor ()
  • ajustar el tamaño del texto (aquí puedes elegir valores específicos, ya que el tamaño de la hoja A4 es siempre el mismo, esto no es una pantalla), para los niños es mejor llevar uno más grande, ya que aún están aprendiendo y les será difícil escribir en minúsculas


gotopdf2.php (archivo de controlador donde todo está configurado y creado) 



<?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();

?>


¡Todo está listo! A continuación adjunto los resultados obtenidos:





Solo una hoja





Contorno gris normal Contorno





punteado



Salida



Con un costo mínimo, obtenemos nuestro propio generador de recetas. Luego puede agregar varias funciones interesantes aquí: elegir el tamaño y el color de las letras, el idioma, etc.



Enlace a GitHub



P.S. Estaba haciendo un proyecto en un servidor local, usé xampp


More articles:


All Articles