The future of web design – concepts for editors CMS software tutorial

Hello friends of software entertainment. My nameis Roland. I am a PHP trainer and consultant from Duisburg in germany. Today I wantto talk with you about the future of web design with self-editing sheets and thepower of the Sulu CMS. Welcome to my canal. In my last lesson series you learned a great deal aboutcontent natures and how to originate templates editable. But in this video I want to give you a vision ofweb design and what I think about web pages and the different kinds of content pages. So let’shave a look upon the Never Code Along page. You know this project is totally open source it’s on GitHuband when you have any technical questions just leave it here in the comments or come in contactwith me on any other channel. Like you require. So first of all I is in there a supernormalmarketing slider about actual promote. Like my remote PHP training or my testing company.This is something quite normal in the world.Now i want to go away from sliders, but on this page istill have a slider under the requirements of this regulation. Now is an event slider and this event slider is generatedout of the events that are added here on the page. The special thing here is that when I do someevents merely on meetup.com this is gonna be mixed now immediately in these events. And this is super cool, because I do a user group and when i published one event to meetup.com it’s by itself directlyhere in the sheet. This is a super cool feature. Here’s some flaw with the year sorting. This is nota problem for now, but it’s a very cool feature. After this there is a ordinary multi-slider elementwhat would be editable by the back-end editors. And down this here is my blog postfor my wordpress blog. and when I publish a brand-new blog berth thiswould be just integrated here. And there’s a network busines workingand yeah that’s this page here. So there comes in some content from social mediadirectly to the page. This is not content that is an iframe, or plugin, or widget, or whatever.It’s real content.You have it really here in our design and this is super cool, because whenwe meet our teaching. This is a more modern layout here. I likewise use different kinds of schemes now, so we have this PHP training and this sheet here is totally generated by itself. Nobody can revise heresome things. I think we have here our training and this training is automatically generated fromthe subpages. It’s a name, job descriptions now and an image and pictures a link to thetarget page. Below are my YouTube videos from the people who spawned the training with me. Andthese are also not any kind of YouTube widgets or that you are eligible to only run this video. Here it’scontent what I grab from the API and will interpret this to my page. And this is a very goodthing and Google likes this much and “theyre saying”: Hey you got it.You understand the web. Get ourcontent to your sheet and we will rank you up. This is also happening on the recommendations. Idon’t have any recommendations so far. I’m working on it and then I also will implement it now andGoogle maps or whatever you have from Google, gave the things to your page. And this pagewill grade up, when it is real content. And not iframe content or whatever, and yeahthat’s a page. And this is very good, because I don’t have anything to dowith this page. I time edit my set or exactly upload a YouTube videoand the rest is done by itself.Okay so, when we will see a rehearsal now, a teach every time has a video or maybejust an likenes, then there is a headline, there’s a description, what is in the training.Then there is a quote from somebody who has made this training and what you need for thetraining and the scheduled plan, what we will do on day 1, what we will do on day two andso on.And as journalist you only want to edit this kind of items “youre telling”: Hey here’s a headline, here is video, here is a price or whatever and you want to don’t think about what you have to doin the privilege angle. And that you have to decide the freedom content character. You merely want to fill allthe information of a training in one page. And you also want that page, or the informationof the sheet on other sheets. “il be there”. Automatically. Like you interpret on my lastvideos, there is also the possibility of block website. We have a web sprint. We have anew name, but its way for it. But we have this network sprint here and yeah this network sprint has onelayout here. And journalists want to be here more flexible. They want to say hey I want to add herea headline and the text and I want to add here placard. And they want to build this sheet, likethey believed they crave it. This is okay for pages, like this here. Marketing landing page maybe, but it would be super annoying for the users for our PHP training, when everybody willbuild the page, like he wants or she craves, because then the user has on every training.He may check training and say: Hey, we want PHP training.Oh they have testing too and they havesomething about Sulu CMS. So they want to click through the training, and they want to realizesuper fast, what they have learned from the first instruct. Where the information is and what theywant to know, when they go to the second training. They want to see the same structure and these arethe two kinds of web design editing conceptions. One you have a central data set editing and one youwant to build free websites, like you want to build as editor. Okay so far so good. Let’s takea look in the development area and in the matrix.We go to the terminal and say z nca-sulu and ah I was working here onsomething called the cta button for the last video. I conceive the sheet is workingtotally well, so I can start this here. And now we have the page. So let’s check out thepages that we improved here and then I can show you, how to originate these things happen.Okay welogin to the backend and then, we will check the startpage. The startpage is just here andon the startpage, as you consider we have a slider with these two elements. It’s loading a bit herebecause I started in my regional environment for now and then you have here this eventcarousel. You know that there are components from meetup.com together withitems for my pages and yes the rest here are some really simple elements.Solet’s see this event carousel here. We will open PhpStorm for thisproject. Okay now it’s open and going to be home to our admin place. And in this admin area, you see that here is our template. It is home page and on this home page you have theevent carousel. And now you select a page and you can say, okay select the resources, include sub elements. This is now not so necessary. When I’m on this grade, because thisis also second degree and every level will be precisely here.So this is only the seed degree andthat’s it. You precisely have to say, okay adopt source nca-events. We can check this here ourwebspace and then we have here our sheets and there are the events now on this level.And every of this event will be rendered to the front end. So we will check theconfiguration and template file for now./ configuration/ templates/ sheets/ homepage.xmland on the home page you see here we have the blocks from theslider. So it’s an easy header here and after this you got this eventcarousel. And what is the event carousel make? The contest carousel has smart-alecky content.Smart content is a great feature of Sulu CMS. With this smart content you can select pages and getinformation from those pages. You are also welcome to say, hey please give me a limit to 5, or 20, orwhatever. How numerous components you want to get. And you are eligible to do pagination now, if you want.But for now, we only want a little information. And this few report is the article and theURL.But too the entitle and now you can say that every knowledge you give in with a key, thatwill be rendered to your Twig content last-minute. Like the excerpt title or excerpttags. Here let’s check the backend from an incident. So we just have to checkwhat event we can see. Here like this here. And then you will have here the excerptinformation. And on this excerpt info, you get a special title maybe.It’s shorter orwhatever and maybe, you have a special description and you likewise can say, that you have here. An likenes and this image is alsoimportant for social media marketing. I will explain it on a later line, but for nowyou precisely can say that this is a background image. And as you see here this background imageis not this image now from the header. But maybe you want to render more informationsto the frontend. Let’s check the frontend by the way, what information is here. So you have here a year for this eventand an image from the excerpt image. You have a title, you have a full appointment, you havea link to a blog upright, you have a description, and you have a donation.Every time when we makean event we sponsor some social establishment. We mustered 5 000 euros in three years roundabout.and there is also a target like this year they subsidize kids with computers and a reallycool. So we got this information now and when you are editor you don’t want to think about.Oh, I need a blog post for the startpage, and whatever information you require, to edit in contextof an occurrence. You merely want to edit this here on one sheet, on one occurrence. And wehave here all this information. We have here a special padding, because there aredifferent kind of mottoes of the sponsors.We have a town, we have a date, we have an event linkfor eventbrite, where you can buy your tickets. We have a preview image link, when wewant it. We have a blog post, we have a blog headline by ourself, to make a headline.That has the right size now. We have a social institution tie and we got this text andwe got a donation and much more information. And the journalist time can say, okay brand-new episode andeverything is on one page. He merely can say, okay enter here, here, here, now this information.That times the speakers, now um this is the counter, this is the overview and you see heretimetable.This are very much reports, but when he wants to add a new loudspeaker, orreplace a loudspeaker, he know, Ii just go to one single station of information and edit it. Thereso when “youre telling”, hey the locating will change, then you time can say here somewhere else, aniframe for google planneds and the localities where the incident is. It’s anytime the same town, but maybeyou have to ship on any other location and then you can just say it here. Okay make it happen andeverything is cool. I remember editors don’t want to imparting now own chaos. Let’s say, hey the jobshere are maybe some jobs what the sponsors can say they provide a few of jobs.Because they are searching for developers and yeah then they have here a undertaking list.And they crave this enterprise directory now on top, or on bottom and we don’t want that the sponsorsays, hey build everything on another styling or on other order.This is a really good thingand I can say, when you are building websites, think about it. If you can use this, that youreditors bring up information in this structured content. This is so much easier and so muchmore powerful to bring out content easy. Another instance. Now I have just a little thing about themeetup.com Symfony service, when you want to bring web services to your page. And you’re a Symfonydeveloper you desire web assistances. You can just say, hey please Sulu for the homepage don’t use yourcustom controller, satisfy employment my controller and under app/ controller/ pageController homepage() is all the magic that will happen here.Let’s check out this beautiful class. The pageController/ trainingOverview() is also a sheet what we want to look. And employerBrandingConference/ homePage (). You have here each time the same dependencies that you have to injectand then you have here simply a return.You see here that I have also something that I haveto handle was cookies. It’s an update. It will have a brand-new organize now, but you see hererender the structure and you just have an array here. And you can put in this array whateveryou demand, so when we just will say here, okay we have here now our YouTube video content, I contemplate Ihave to do real key video-content. I merely can say here and works for me. When i check the home page Twig where it is and do this. Normally you dumpcontent, but this keys are one level higher so you have to say dump internal directly onthis key and you will re-render the frontend. Then you will have here our blah blah blah and this isvery very powerful, because you can only get all information that youcan get with PHP to your frontend and now you too will understand we can renderthis here. We can also render this here. How the meetup next phenomena will come in asmeetup/ nextEvents() in the block listing. Maybe this is a bit easier.The web service is a biteasier. We have this wordpress service here. And this get items from the blog and so we justhave a web service here, like you know from other and all your Symfony campaigns. Stillremember this is a full stack Symfony CMS, so you can use your regular Symfony structureto build web pages. Configuration is here, sources now, our controller and here are also ourservices. Meetup service, spam armour work, Twitter service, YouTube service opens theWordpress service.And the WordPress service simply get a REST service and this Remain servicehere will laden my last 10 pages from my blog magazine. jsonDecode() return organization, so i got a reallyclear array. We are also welcome to render this here to the key blog listing and where reference is, say okay pleaserender the blog inventory maybe I come back like this blog list, then I have this blocklist now, we make the start page. And it’s working. I have here now my blog register and firstdate and all the information that WordPress will give to me.I don’t need anything.I need a URL, I need an likenes I conclude, and I don’t know exactly, where the image is now.Just headers there are many knowledge. Maybe under content, or maybe not. I don’t know featuredmedia. I don’t know exactly now where it is. We simply can have a look here to our blog directory. Featured media something like this and thenwe will have this image here. Other method same principle and after that wewill look at the content blocks. We miss this here. Okay so we have theoverviewTraining/ outline (). We have here trainingOverview (). We havehere too our tradition controller, because we got this nice YouTube content. Itis a bit more complicated to get this material. But then we have here some content abovea headline to sub sites. We can check out by the way the page. Headline, description now and we have this training. Now let’s check thebackend. We have this overview here. Training headline, we have a few subpoints, we have image and you see here are our route synopsi, because weselect here the resources PHP training. Sulu selection ctrl+ y button, and smartcontent. It’s exactly the same principle. Here we got now other informations, alsothe instructor parts. Yes we want to know who is a coach here, we don’t do something whatit for now in the frontend.I don’t know exactly ah now. PHP Trainer Roland Golla. This is meand when there is a second person, there will be also be a second item here. And when there willbe a second person there, will be also second item. Now okay and so all the information we needto be give to our synopsi page. Super potent, super good the other kind of editing content is, that you want to say. Hey, please let me arrange the content and adopt the contents on differentkind of blocks. We have here our web sprints. Sprints and on this website, you see herenow there are different kind of sections and the sections have here an component listing, call toaction. We have references and unit members and another marketing content factors, Yousee that this here is my development environment on live this willlook a bit more detailed. So let’s check here our. Web sprint and our network sprint hasa page edugate-default. And this civilize default sheet just say, hey you have different kind of content types.Like icon schedules, call to actionbutton, remarks you see here our icon register and under the icon list is our call to actionbutton. And now the journalist can say, hey let’s move this element on top of the sheet thiswould be re-rendered and now the call to action button is here on top. And he too can say saveand publish and he also can say hey give me a new-block element and then he can select fromdifferent kind of blocks points. Like another cta button. This is a really simple element.We can say here we go right here right now.Ok. This is anything and we can go to ourtraining page. Maybe to our improve synopsi, it will be re-rendered and then we have here, where it is, here “theres going”. Here we go. Ah, yeah thisis so same, because it’s the same block content parts here. Here we go by, anything with alink to the page, then we can save and publish to accumulate this and then we can say, okay please give this a bit more up. This will be re-rendered here and now we have, call to action our schedule and then here we go. This is very good for editors, when they want tobuild marketing sheets. Cool, I do a video about sulu blocks last go. It’s joined here in thevideo description and here on top of the tooltip. We can have a little look on it. We have here ourdefault page. I think it is this default page. educate-default, yes this is the right page andthis is all what you have here in this. xml enter, because it’s lading differentkind of types from our block from and blocks. xml. Thisblocks.xml here includes edugate-blocks.xml.It says, hey here headlineand description, the first ingredient and the default element. And then here are the rest ofthese xml factors. And this xml points are configured. Here like the cta button. Hasa headline, job descriptions and a button with a connection. And when you check out our frontendand the frontend is near by the same structure. We have this default sheet. Here this defaultpage is lading blocks and the blocks is lading the block nature. Here so you don’t have toadd here each time a brand-new block, because it’s going automatically and you have hereour template. So far so good. I hope you enjoyed this session. It was not so easyfor me with my english and maybe I was too fast. Give me feedback if I could helpyou with any other seminars or whatever. Give me a like and some comments willhelp me a good deal and see you next time.

coach

As found on YouTube

Share this article

Leave a comment

Related Posts