I really wonder how such websites like https://medium.com/ (on the home page) https://qz.com divide the page according to tags or the order is like : header, some news, some articles in same shaped boxes,video, then some more content and then footer... so in one page they are able to show many things.. is that done by dividing page with HTML div tags or is there something else used ? I am a newbie trying to learn Django. I appreciate any help
I think there is more than just div-tags, but in the end it is (only) html, css and javascript that creates the visual webside on the clients' side.
Frameworks like the "960 Grid System" or Bootstraps Grid System can help you to keep content in a common order. Create templates for your CMS to achive a common design (Ahhhh: Use a CMS). Maybe use Less, Saas, etc. instead of writing plain old css-files.
Short answer: Look at their code. Of course you can't see their server-side code, but you can look at the HTML and it clearly shows that medium uses divs, while qz uses sections.
Now as to what you can use, there really isn't anything else. Simply because there isn't any need for it. You might want to add an uniform height for each of those "sections", but you don't need to.
Now to the serverside part: they certainly didn't hardcode every single section, but created a template for it. Depending on what technology they use that will look different, but it will always have
A template (often called function, template or module depending on the technology used) that has everything ready as to the HTML and CSS. This designs the layout and design of those 'sections'. It also accepts content that it will then insert into that structure.
A 'main-page' that uses that template repeatedly, but gives it different information. For Medium this might be something like: MakeStreamItem("Audio", GetFirstFourAudioItems())
Related
I have just begun my Typo3 journey. There is not much typo3 content available over the internet. I have gone through its documentation. As far as I have understood it, the ideal way of creating a website (frontend) is using content elements from backend and customising it according to our need in code (using CSS).
My Question is how can I do so? How can I find the code of all my used content elements so that I can use my own CSS to style it according to my need?
Or is there any other ideal or professional way of creating a webpage that mostly developers use?
Please please help me with my questions.
THANK YOU IN ADVANCE :)
I suggest to look into one of the following 2 extensions which allow to create content element types within a nice backend module:
https://extensions.typo3.org/extension/mask
https://extensions.typo3.org/extension/dce
Both come with a manual and it is afterwards easy to adopt the based default templates and apply the HTML you need
for the page structure I suggest to use something like https://jweiland.net/typo3/typo3-template-version-11.html or the bootstrap package https://www.bootstrap-package.com/ which also come with various custom content elements already
if you are german speaking you can also take a look at the video tutorials of wolfgang wagner which can be found at https://wwagner.net/
The base frontend structure of a TYPO3 websites is:
page templates (usually contain generic elements such as header,
footer, navigation.
page templates can be devided into serveral sections if needed
content elements which are than displayed in this sections / in
templates
The core already ships a set of common content elements and supplies basic CSS styling which you can override and adjust.
I prefer to check what kind of content elements I might need in order to get the website layout done and then build those custom elements. This gives full control over the HTML markup output and I can write my custom CSS specifically for my markup. This approach might need more initial work and requires a deeper understanding of the system, but often pays off in the end.
But if you want to see quick results as a beginner the approaches Georg mentioned with Mask or the bootstrap package are perfectly fine.
I am a little bit confused. How do we reuse areas from another page? Lets say I created an article in an articles area on my index page. How do I display that same content in another page?
Ive read the following https://documentation.magnolia-cms.com/display/DOCS53/Reusing+area+content
Seems kind of complex. I dont understand the pom file.
Cant we acccomplish this purely in light modules? If not, could someone show me an example of a simple content reuse scenario?
Yes you can do it purely w/ light modules. Look at this article. Example there is custom "quotation" app and the quotes you create you can render and reuse in as many different pages/page-types you want.
However it is slightly different than what you ask. In your question you want to reuse content from the page, which is also possible (you just need to address that content and feed it to appropriate cms tag in your page template (you can forget all about maven and so on, just focus on your templates). In the example I point you to, you create custom app for stories, articles or any kind of content and then just refer it from all pages where you want to render it. This allows you not only to share the content, but also separate it's editing from the page structure which makes life of editors easier in long run.
There is a way to remove unused css with uncss https://github.com/giakki/uncss
And an excellent blog post on the subject: http://addyosmani.com/blog/removing-unused-css/
However I fail to see how you would combine this approach dynamic content (for example generated by angular directives or async page loading) which will be missed by the uncss module.
Is there an optimal way to achieve this, I'm not wanting to manually go in and remove all the bootstrap css I'm not using.
My best recommendation would be to create a couple of static pages with examples of all of the markup you anticipate needing, and run uncss against that.
Even if the content is dynamic or asynchronously loaded, you should have a pretty good idea of what content is possible.
For example: you're probably very likely to need basic text formatting, headings, rich text content, lists, links, pictures, etc. Depending on the subject of your site, you'll also know whether you need to display code samples within <code>, <kbd> or <pre> tags.
However, it's not as likely that dynamic content would directly need to utilize the grid / layout system on its own, or would require any extraneous button styles.
Build a test page that includes everything you anticipate using. If you know there's something you want to keep, then throw it in. Otherwise feel confident knowing that uncss is doing it's job cleaning out everything else.
I'm implementing "news" section in asp.net website. There is a list of short versions of articles on one page and when you click one of the links it redirects you to a page with a full article. The problem is that the article's text on the second page will come from database but the articles may vary - some may have links, some may have an image or a set of images, may be differently formatted etc. The obvious solution that my friend have come up with is to keep the article in the database as html including all links, images, formatting, etc. Then it would be simply displayed on the second page. I feel this is not a good solution as if, for example, we decide to change the css class of some div inside this html (let's say it is used in all articles), we will have to find it and change in every single record of the articles table in our database. But on the other hand we have no idea how to do it differently. My question is: how do you usually handle something like this?
I personally don't like the idea of storing full html in the database. Here's an attempt at solving the problem.
Don't go for a potentially infinite number of layouts. Yes all articles may be different but if you stick to a few good layouts then you're going to save yourself a lot of hassle. These layouts can be stored as templates e.g ArticleWithImagesAtTheBottom, ArticleWithImagesOnLeft etc
This way, your headache is less as you can easily change the templates. I guess you could also argue then that the site has some consistency in layout.
Then for storage you have at least 2 options:
Use the model-per-view approach and have eg ArticleWithImagesAtTheBottomModel which would have properties like 1stparagraph, 2ndparagraph, MainImage, ExtraImages
Parse the article according to the template you want to use. e.g look for a paragraph break if you need to.
Always keep the images separate and reference them in another column/table in the db. That gives you most freedom.
By the way, option #2 would be slower as you'd have to parse on the fly each time. I like the model-per-view approach.
Essentially I guess I'm trying to say beware of making things to complicated. An infinite number of layout means an infinite number of potential problems. You can always add more templates as you go if you really want to expand, but you're probably best off starting with say 3 or 4 layouts.
EDITED FROM THIS POINT:
Actually, thinking about it this may not be the best solution. It could work depending on your needs, but I was wondering how the big sites do it. If you really need that much flexibility, you could (as I think was sort of suggested) use a custom markup. Maybe even a simplified or full wiki markup. I'd still tend toward using templates in general, but if you need to insert at least links and images then you can parse for those.
Surely the point of storing HTML with logically placed < div >s is that you DON'T have to go through every bit of HTML you store to make changes to styles?
I presume you're not using inline styles in your stored HTML, and are referencing an external CSS file, right?
The objection you raise to your colleague's proposal does not say anything about the use of a DB. A DB as opposed to what: files? Then it's all the same. You want to screw around with the HTML, you have to do it on "every single record." Which is not any harder than "on every single file." Global changes are a bitch unless you plan for it by, say, referencing an external CSS. But if you're going to have millions of news articles, you had better plan on versioning the CSS as well.
Anyway, the CMSes do what you're thinking of doing. Using a DB is a fine way to go. How to use it would depend on knowing the problem more intimately.
Have you looked into using free content management systems? I can think of a few good ones:
Joomla
Drupal
WordPress
TONS of others... just do some googling.
Check out this Wiki article: http://en.wikipedia.org/wiki/List_of_content_management_systems
Looking for some direction here as I'm running into some migration problems.
We have a legacy application. The 'infrastructure' is running just fine. Business logic and data access layers written in VB calling SQL Server for the database.
I have a LOT of experience writing Winforms (desktop) application and have had no problems. However, the last time I wrote any ASP.NET stuff was in 1.1 (VS.NET 2003).
Among other things, for ASP.NET 2.0 and up, the Grid layout is gone. It's not just a simple case of dropping controls on a form, aligning them, ordering them and working with the code-behind anymore.
The new web-based application is starting out pretty simple. Just a common header (already made a user control for that) and footer with your typical CRUD functions in the middle.
I tried being 'intuative' in using a master page with content place holders but I couldn't get the placeholders to "grow", to say nothing of not being able to put a text box where I wanted one. Oh, I found the option in VS2008 to allow absolute positioning but it only worked for SOME controls - others I had to manually edit the asp tags.
Then I saw examples using div's and tried to implement them but I ended up with results that had objects writing on top of each other. The online help wasn't helpful to say the least.
Does anyone know of a good book, website or tutorial that can give the basics of what I'm looking for? In practice, I'm looking to make simple pages where some objects may have to push others gurther down the y-axis (as in, several comments being made and that section would push the section listing the 'attachments' down further). I have no trouble when it comes to all the other aspects of this application. It just appears that my webforms skills are about 3-4 years out of date.
This isn't going to be some fancy flash/silverlight application - just simple 'data maintenance' to get rid of some ugly and bug-prone processes involving reading common mailboxes and decoding Word files. The new goal is to have a nice weborm with proper validation.
I guess what I'm looking for is a "Webforms for Winforms programmers" book or site.
Help!
Thanks in advance.
The best advice I've heard on learning to use html/css layout goes something like this:
When building a new page, don't try to get all fancy up front. Start by building a very basic, text-only page. It should look like something from 1996- that brief period where everyone had just discovered the web but had not yet started using the table tag for layout- only no comic sans font. Don't use images at this point, unless the image is genuinely a part of the information being conveyed (as opposed to the window dressing to make it look pretty: you can add those later). There will likely be an h1 at the top of the page, and give each sub heading an appropriate hN, but at this point there shouldn't be any layout information in the page at all. The only place you'll have a table tag is if you genuinely have tabular data to show. If it helps you write this code then you can wrap everything in old-fashioned <center> tags for now- just don't forget to remove them later.
Now let's start tweaking the markup a little. Use things like ul (unordered list) for your list of navigation links and label/legend to identify and group your form areas. The general idea here is to have each element on the page encased in the most appropriate html tag, and to use the full set of available tags- each for it's designated purpose.
At this point you have a page that is ideally suited for a screen reader or search engine. By building this page first, you have made SEO and accessibility compliance easy on yourself. Of course those aren't the only requirements, so we're not done yet.
Now you need to identify the different sections of your page, from both the layout and logical perspectives. The page should largely already be divided logically, but you may find a few places where the normal tags don't cut it. You'll also want to group certain elements for layout reasons. Encase each of these areas with a div tag, and give the tag a class name that refers to the purpose for the tag: the group your are creating. This is just another case of using the a tag (the "division" tag) for it's intended purpose. Also, since elements can have more than one class, you may want to think about also grouping your classes logically. For example, you might want to have a separate class that distinguishes the site template from the rest of the page.
By and large this should not have changed the appearance of the page, but now you have something where it should be very easy to start adding styles. At this point you can now start adding images and layout. The goal here, though, is to change the actual markup as little as possible. If you can manage it only add ids and classes, though you will likely need to add an additional span or div that you had not identified earlier, and sometimes you'll need an extra block level element to force a compatible layout across browsers.
If things are done correctly, the result is a page that not only looks good, but is also easier to work with when testing across browsers, will naturally degrade well when a style or javascript feature isn't supported, and scores well for SEO and accessibility. This also makes it easier to have a developer build a simple page that provides a certain level of functionality, which they can this pass off to a separate designer to make it look good.
You may also want to check out A List Apart. This is a great website with lots of "tricks" for using CSS to layout things on the web along with lots of other web oriented content.
Grid positioning was an abomination for websites. Sure it made for an easy transition from those familiar with the WinForms designer, but it produced horride HTML that is nearly impossible to maintain.
The very best resource I can recommend to you is CSS Mastery. You'll need to learn HTML and CSS, but they're quite easy to get into.
By the sounds of it, you're looking for a crash course in HTML ?
the "Design Canvas" of an ASP.NET aspx Page & ascx Control is just HTML tag markup.
If you've no web design experience, I'd recommend starting somewhere like
W3Schools
When Microsoft gave us ASP.NET, they tried to make programming websites, more like programming rich client applications. However, there are a lot of issues you have to deal with, the major one being statelessness, when developing for the web that don't exist when developing a thick client app (WinForms). So the first step is to not think of the two as similar in anyway.
The drag and drop tools are nice, but what you really need to understand is HTML and client server models. HTML will help you understand how things are getting laid out, and client server models are important to understand how data gets to and from the web to the server. If you have developed in ASP.NET 1.1, then things really haven't changed for 2.0. The concepts are the same, just some of the provided controls have changed.
A lot of people were really unhappy with the grid-based layout from 1.1, because it didn't really work in a number of situations. It still has to ultimately render as html, and html just isn't suited to that kind of layout. For example, things might not be ordered properly or pushed off the screen for mobile browsers (iPhone, etc). There's also things like screen readers for the blind. If you work for the government, that 2nd item is a legal requirement rather than just a nice-to-have, and there are a lot of developers who do work for the government.
So ASP.Net 2.0 tried to generate markup that's at least a little nicer for html. The downside is that you actually have to understand html layout now. But, c'mon: you're building a web site. If you can't handle a little html you're in real trouble.
My advice to build one static page using something other than visual studio. Use <input tags rather than server controls on that page and don't actually implement any logic. Use it to understand how your layout will need to work. Once you have that down, it's really easy to duplicate that for your pages in Visual Studio.
This doesn't really belong as a separate answer, but I wasn't sure you were likely to see another comment to my response above.
The normal behavior of all block-level elements, including divs, is for each new element to appear below the previous element. It sounds like you've set position:absolute; on everything, perhaps while playing with the Grid-based layout option in visual studio. Don't do that- it's hijacked the expected behavior and that's why you see everything piled on top of each other.