How to make dedicated graphics such as the prize -winning press publication
around Levelup series: In The Markup, we are committed to doing everything we can to protect our readers from digital harm, write about the processes we develop, and share our work. We are constantly working on improving digital safety, respecting the privacy of the reader, creating moral and responsible user experiences, and making sure to reach our site and our tools.
In The Markup, we use interactive drawings dedicated to clarifying our stories. When I started my internal training this summer, one thing I was curious about was the process of creating these drawings and merged them into the CMS. When I worked in Berkeliside and even my high school newspaper, I fought to find an elegant solution and discovered that this is a common and historical headache in the news industry.
The fact is that CMS like WordPress deliberately reduces customization. The CMS mission is to provide a simple interface for storing and editing organized data. Custom graphics, however, are by nature custom and unorganized.
To the developers of the news rooms, they create intended reactions for the first time, it may be difficult to know how and the place to merge them into CMS. Choose the process or the wrong place, and I was left with unbridled chaos.
Let’s get to know the philosophical
One aspect of software engineering, as in life, is the need to make differentials in the face of restricted resources. Finding this balance between flexibility and monotheism is the essence of software design, and the integration of graphics into CMS is not different.
Consider the pictures. We want CMS to be responsible for storing its image and identification data (illustrations, balance, text) and relationships (stories that are included, the user who has uploaded it). It is not designed to analyze or provide image contents – those left for people, software design, and browsers.
The same applies to graphics. We must design CMS to be responsible for storing a reference to the drawing and its relationships and its relationships, but not for drawing jobs or how to display it.
However, the part that wanders in some engineers is that they are trying to anticipate common use of journalists and add features to create graphics inside CMS. This is often the SISYPHEAN mission that will not leave any completely satisfied due to the unique interactions. Just because the graphics have some interaction with CMS, it does not mean that CMS should be responsible for everything about it.
This separation between fears should not extend to the newsroom. We want the liberation developers be able to focus on their work without worrying about how to disable their code in product teams and infrastructure, and vice versa. (Although the fact is that everyone is doing all everything in a smaller team like coding.) In the end, we are all responsible for one product, not different producers.
Our operation
Before opening software editors and launching local environments, the newsroom developer will work with editors and correspondents to exchange ideas for a piece. This usually means reading a draft and reference to the graphics, says the engineer of signs perceptions, Joel Eastwood.
The next step, for the most complex graphics, is to create typical models. It usually begins as a pen and paper before moving to a program like Adobe XD.
Once the perception structure is placed, Joel copies an advanced drawing template that has been developed over time by different engineers in the brand. It is basically the birth of a fixed site, and it is not a particular opinion; It includes some textual programs for basic publishing and support outside the box to collect patterns and domination, but they do not close you in any specific way or library.
“One of the things I really appreciate about the drawing template here is that it is very open,” says Joel.
Once the drawing is paid to GitHub, the GitHub procedure runs the construction step and download the results to the S3 bucket, where we host our code. We make a backup copy of each version of the drawing so that we can easily back down if anything wrong happens.
Again in WordPress, we use a detailed customized custom block (ACF) that tells all graphics in the S3 bucket and any backup copies. Since loading of S3 graphics is relatively slow, the templates are temporarily stored in the database.
Practical reasons for this system
In our system, graphics are completely satisfied. We do not want to justify the small chaotic breakthroughs of the alleged use state of use, or make changes in a manner that has a catastrophic consecutive effect.
Developers are free to use any tools or libraries they want. Anything that can be assembled, assembled, shakes, or analyzes, is constantly or analyzed, or transferred to HTML, CSS or JavaScript files.
The system only needs to deal with these three files – three files that enable almost countless possibilities. (It is the web – people simulated the entire operating systems and everything between them.)
Our virtual template is designed to reduce the boiler so that the news room can quickly create reactions without building projects from the zero point each time. System elasticity means that we can adjust or create other templates with the development of tastes and the needs of our team. For example, I am a great fan of Selfe, a popular front frame in the news rooms (was built by Rich Harris when he was developed in the New York Times). In addition to the ease of this, Selfe produces a smaller symbol than other frameworks, which we try to avoid to keep the pages of our article not harsh regardless of the device or connecting to the Internet.
While working on Blacklight, which is more than just a drawing, you modified the template to add support to Selfe. Since the output is all HTML, CSS and JavaScript, nothing should be changed about the integration of WordPress.
Any changes are applied to the template only to the graphics that move forward, and each drawing uses its own version of the current template. The functions of the assistant and patterns of the mold are baked, as well as the global patterns of the site at the time, at each drawing. Any improvements made on the template-such as the addition of Selfte-are chosen and can be easily combined when needed. Once you create, publish and publish a drawing, it should not require continuous maintenance.
From writing these lines, we created more than 300 drawings with this system. If we have to repair insects constantly as we make changes on the template and location, we will be steeped quickly.
This system allows us to move quickly, maintain existing chaos, and prevent chaos in the first place.
Jerome Paulus He was a trained producer in the summer of 2023. He worked on it Blacklight and Blacklight API new and graphics system. He is a rising student at McCalastter College.
Credits: Jerome Paulus
As published here
Photo by Mike Petrochi