I am learning Symfony2, and I am making small tests.
Well I have made a small html for to test the twig templates.
<html>
<head>
<title>test00</title>
<link rel="stylesheet" href="test.css" />
</head>
<body>
<div id="test">
<img src="test.png" /><br />
test
</div>
</body>
And the files are in the same directory of html.
Then copy all files (html, css and the images) to my test:
/var/www/Symfony/src/Test/TestBundle/Resources/views/Default
And rename the html to html.twig.
But fail when use this html as twig template, because the Symphony try to use "http://localhost/Symfony/web/test.png" as link the image.
And yes, I have read the documentation and know the "asset" and I can change the path to the files with some example
test.png')" /> and also copy all files to the web directory in the budle.
But I wonder "Is there any tool to convert html to twig?" because for example I can't say to my boss:
"The Symfony2 is great. But your designer must to learn Twig and when she finish the html with dreamweaver, she must change all of links to css and images for to make a template...and yes she can't see anything only can send to me to put in the web server to check if it is correct."
What do you hope that my boss will think about Symfony2? He will think this is crazy, this is twice of work.
I think the best it is a automatic tool to translate a html with relative paths to twig and something like that a package files to put in web dir. And the designer does'nt need to know anything only make pretty htmls with few weird things as put {{page_name}} instead the "Page name".
Regards.
From an html coders perspective, Twig is HTML. As long as templating language support is setup on your server, there is no difference between writing twig or HTML. The only difference would be the <h1>{{variables}}<\h1>. Your HTML coders should be aware of what variables they have access to. That being said, from a developers perspective, twig is a lot more so I'm not simplifying twig. But if someone knows HTML, they'll know what to do with twig.
Then copy all files (html, css and the images) to my test:
/var/www/Symfony/src/Test/TestBundle/Resources/views/Default And rename the html to html.twig.
Nope. Your html.twig files need to end up somewhere under views so the template processor can get to them. However, your css and images need to be copied to your root web directory. Same place where app.php lives.
But fail when use this html as twig template, because the Symphony try to use
"http://localhost/Symfony/web/test.png" as link the image.
It's is not symfony generating this link but your web browser. Use Control-U to examine the generated html source from within your browser. You will find that your links such as href="test.css" have not been changed. Twig will not change anything unless it has has some curly brackets around it.
So your designer can continue to use her current workflow and deliver a set of files. You just need to deploy the files to the correct locations.
Of course symfony/twig can do a lot more that simple variable replacements so eventually you might want to change things. But you can get started just fine.
Related
I have my code with the following structure, where I only have a style.css, favicon.png, logo.png, and an external Javascript file in their respective folders.
index.html
assets
CSS
img
I'm looking to convert it to a template on GitHub, where a user can use it and change only the <title> of the head, the main <h1> and <h2> of the body, the logo.png (next to the <h1>) and the favicon.
I have no idea how to do it, as an example, I put this Github project, where using the template just edit .upptimerc.yml to configure your site, and Github Actions makes the deploy in Github Pages every time you modify it. While the source code is in another repository.
If someone could give me something to guide me or give me an example even with a "Hello world" HTML I would appreciate it. I couldn't find anything on the internet beyond the basics.
hope you're doing fine.
I am currently stuck with my Web App project. This is the context: I would like to code a Web App using J2E. There's a free template that I liked and thus I decided to download it. When starting to use it I notice the CSS isn't applied.
Instead of having this, I have this:
However I do not see where the error is. The CSS & Bootstrap files should be visible in the JSP file and IntelliJ recognizes them. However I can't display these files (whether css or even pictures) that are referenced in "href".
Here's the project structure and code, maybe something's wrong there.
I'm used to HTML and to my understanding JSP isn't too different. Are the referencings different though?
Thanks in advance for any help you'll give,
Fares
YES.
Found the answer. Put resources in different folder than WEB-INF.
I believe that, your HTML file is inside the WEB-INF folder, for the to work either remove the WEB-INF path
<link href='style/stylesheet.css'>
or move your HTML one folder up.
How do I convert an HTML file with content folder to a self-contained HTML file which can be viewed from anywhere with its images etc.
How can it be done so that it's also editable and stays self-contained, post-edit?
I basically need to make HTML file based documentation which can be viewed from anywhere. Unfortunately it HAS to be HTML, otherwise I would have made PDFs
You can use pandoc, it has an option to create self-contained html files https://pandoc.org/MANUAL.html#option--self-contained.
If you start with html, this is the command.
pandoc in.html --self-contained -o out.html
This tool can do a lot more things, for example, you can also generate html from markdown files or generate pdfs instead.
The most direct way is to convert all asset urls to data: urls. (There are online coverters available that will take a provided asset and produce a data: url from it.)
A possibly simpler way is to convert image and font urls to data: urls while instead inlining scripts and css.
Edit: Possibly of interest: inliner, a Node utility for doing this kind of thing. "Turns your web page to a single HTML file with everything inlined". Also performs a number of minifying optimizations.
I don't know exactly what you're envisioning, but HTML was never meant to be fully self-contained. There may be some loopholes that allow it in the end, but to my knowledge there are no premade tools that do this 'conversion'.
It would require the following things:
Converting all linked style sheets and scripts to inline style sheets and scripts. This means that whenever there's a <script src="http://url.to/foo.js"></script> you'll have to download foo.js and include it as such: <script type="text/javascript"> [this is the content of foo.js] </script>. Something similar applies to CSS and other linked source files.
Downloading all linked media (images mostly, I presume) and converting them to blobs (a service that provides you with a base64 blob you can use within a HTML file is https://www.base64-image.de/). This means replacing <img src="http://url.to/image.jpg" /> with <img src="data:image/png;base64,[converted image data goes here] />.
So there's gonna be some manual labour involved there, but it probably can be done (almost) fully.
Possibly there's a way to accomplish what you're wanting to do another way though, what exactly is your reason for wanting this?
Here's another option: write your documentation in markup, then use a tool such as "Marked 2" (http://marked2app.com) to convert to self-contained html. Works slick. Plus you can go back and edit the markup any time you need to update your documentation, then simply re-export your html file.
I'm new to web front-end programming and am teaching myself AngularJS.
I have created a very simple webapp that just lets users login and logout. I am running it locally on my Mac OSX.
Below is my index.html file. Although it works, I'm not sure if I'm doing it right. I need to know how and where to import the angular.js files and the bootstrap.js files.
My questions are as follows. I haven't been able to figure this stuff out by googling. I need someone to explain this stuff to me please.
I'm currently importing the angular.js file from https://ajax.googleapis.com. Is that correct? Or should I download it and store that file in the same directory as index.html? Why? When should I use the non-minified file? What is the benefit of using non-minified?
I'm currently not importing any bootstrap file(s). Which file(s) should I import? Should I import it/them as a URL or as a file from the same directory as index.html
For both Bootstrap and AngularJS, please tell me which line numbers I should put the script src lines in my HTML.
Should I check the Angular and Bootstrap files into my Github repository?
index.html:
<html ng-app="app">
<head>
</head>
<body ng-controller="Main as main">
<input type="text" ng-model="main.username" placeholder="username">
<br>
<input type="password" ng-model="main.password" placeholder="password">
<br>
<br>
<button ng-click="main.login()" ng-hide="main.isAuthed()">Login</button>
<button ng-click="main.logout()" ng-show="main.isAuthed()">Logout</button>
<br/> {{main.message}}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Normally, you add CSS stylesheets and JS scripts in the <head>(between lines 2 and 3) area of your html. You can either link files with URLs like the example below or just download the whole Angular.js or Bootstrap.css file (both of them aren't that big) and put them in the same folder as your index.html file.
URL/CDN example:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
</head>
Local folder example:
<head>
<link rel="stylesheet" href="bootstrap.min.css">
<script type="text/javascript" src="angular.min.js"></script>
</head>
Minified files (angular.js vs angular.min.js) will both run the same way. The only difference is the .min. file has the code all squished without any spaces, tabs, and new lines. This makes it load faster for computers, but if you're going to customize your angular or bootstrap in the future, you will find the squished format impossible to read.
You don't need to be too concerned with doing everything 'the perfect way' if you're just starting out. I used to include the angular.js and bootstrap.css files along with my index.html in my project when I pushed it to Github. After a while though you might find it cleaner to leave them out and just use the URL-format.
Some people will say you should put all your JS files and links at the bottom of your webpage (just before the </body> tag), but again this is just another optimization towards 'perfect' that you shouldn't worry too much about.
This is advise for beginners, if you are an expert this may not apply to you:
I would advice you to have the files locally while you are developing, then your website will work w/o internet, and it will respond faster if you disable cashing (which you should when you are developing)!
You should disable cashing in your browser when you are developing, otherwise when you change your css and js files it will take minus before the browser detects the files have changed
the minimized versions are smaller but unreadable, I would use the none minimized versions while developing so I can understand error messages, and then switch to the minimized version either a) never or b) when speed becomes important
see 1
as a beginner you should but it in the head tag ie between line 2 and 3. sometimes people put it after the body tag to first load the webpage and then the scripts, this is fine also, but as a beginner I think it is advantageous for your webpage to fully work as soon as you can see it.
good question, I would do it out of laziness, alternative you could have a script called get_dependencies.sh where you have lines as "wget stuff"
The usual convention is to put the CSS files in link tags inside your <head> tag (2-3), so that they are rendered before the html and the styles will apply when the content is loaded, so that the user will begin to see the page building up even before it is fully loaded, instead of seeing some not styled elements beforehand.
more on that:What's the difference if I put css file inside <head> or <body>?
now, the scripts should be loaded at the end of the body(where they are now), for the following reasons:
if they will be rendered before most the html, they will delay the page from rendering until the whole script is loaded, and that's a UX hit.
most scripts are supposed to run anyway when the document is fully loaded, sometimes developers will use something like DOMContentLoaded to ensure that, but sometimes they don't and then a script will run without the corresponding html loaded.
more on that :Where should I put <script> tags in HTML markup?
you asked about minification:
minification is supposed to make your files downloaded faster since they are compressed and have less weight. it is ideal for production, but bad for development since you can't debug them well. that's why you should enable minification only on production. (and because you use angular, also use $compileProvider.debugInfoEnabled(false), look for it.)
as for using files in your project (download them) or from cdn (https://ajax.googleapis.com):
a good convention for development is to use files on your project, so that you can develop without caring about your internet connection, and the distance the content need to go between their servers and your machine.
however, on production, a good convention would be using the cdn in your page,
since many other web pages may include the libraries you want to fetch(angular and bootstrap are quite common) so the file has a good chance to be already stored in your browser cache, and not need to be loaded again.
and yet, you should define a fallback in your page such that if the cdn's are some why unavailable, the user will get the files from your project server.
here's an example
for the last question: you can put them in some "Libraryscripts" directory, so that's it's clear they are just dependancies
Every time I decide to change something in my header/navigationbar/footer/etc. I need to apply those changes to 16 other html files so my changes are consistent across my entire website.
My question is: is there a way i can make my website's template be automatically applied to every page?
An example of any page on my website and what i have in mind would look like this:
<html>
<head>injected code</head>
<body>
<header>injected code<header>
<section>NOT INJECTED CODE</section>
<footer>injected code</footer>
</body>
</html>
I know repeating code like this is bad practice, so how do i reuse (localize) code for these areas of my html since they will always be the same?
I am not really interested in content management systems.
What i do with the elements that are the same on every page, like the header, nav, footer is create those elements in a file apart and then include via php. Then if you have to change one thing in the header you only have to do it one time.
Your example will be like:
<body>
<header><?php include_once('header.html'); ?><header>
<section>NOT INJECTED CODE</section>
<footer><?php include_once('footer.html'); ?></footer>
</body>
Hope it helps.
You can use php to solve this. Name your file "index.php" (or anything else with .php as the extension)
<html>
<?php include('header.php'); ?>
<body>
<header>injected code<header>
<section>NOT INJECTED CODE</section>
<footer>injected code</footer>
</body>
<?php include('footer.php'); ?>
Then make header.php and footer.php in the same folder. These common files can then be included in all your pages.
Tip: You will need to run these on a local server. See xampp
The best way that I can think of would be to use a server side language, such as php or asp , to generate the html.
You can use <iframe> tag to include external file however I have not properly tried this and am not sure of the security or results.
You can also use javascript/jquery to write to the document, however using scripts just to write would not be best practice, a better use for client-side language would be to use ajax to load external files however some of the header may need to be defined before the ajax is complete although I haven't tested it.
In short I would recommend using a server side language probably php as it is easy to learn, free to use and you can install it on your local machine. If you already have a server running you can see what languages are already installed as most languages can include external files.