I am trying to fix some text on the homepage prototype created by a company for my dad. I viewed their prototype homepage in a browser, right-clicked, viewed and downloaded the page source, and created my own copy of it. Now, I intended to manually edit the text fields in the source files so that, in the end, we just have to send them copies of the edited source files with the fixed text fields.
If I move the to parts in the source that has the text I want to change, and I change this text, then, upon saving and opening the file in a browser, the changes are sometimes visible but other times not.
EG. here, if I change the specified text, the changes are not visible upon reopening.
<div class="elementor-element elementor-element-3efde4d elementor-widget elementor-widget-text-editor" data-id="3efde4d" data-element_type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
<p>TEXT I WANT TO CHANGE</p> </div>
</div>
<div class="elementor-element elementor-element-509c8d79 elementor-align-left elementor-widget elementor-widget-button" data-id="509c8d79" data-element_type="widget" data-widget_type="button.default">
<div class="elementor-widget-container">
Now, while I do program in C++ and Python, I have no clue at all of HTML and web development. Let me know whether my approach is not going to work... There are certain links in the source as well, leading to the servers of the company. Looks like some text fields are somehow protected by these links?
Seeing the string elementor in the page source your browser gets from the server should tip you off strongly that the Elementor WYSIWYG tool is in use here, which would also necessitate a WordPress-based backend.
As such, it's a very safe assumption that the HTML you're seeing here is generated by a highly complex web of back-end technology which you wouldn't be privy to simply by visiting the publicly-facing part of this site.
To answer your questions directly:
Let me know whether my approach is not going to work
It's unlikely, as there are intricate interdependencies at play here that would probably break or cease to function as intended when manually updated outside the WYSIWYG editor that seems to be in place here.
There are certain links in the source as well, leading to the servers of the company. Looks like some text fields are somehow protected by these links?
"Protected" might be a bit of a misnomer, but it appears that the company that generated the initial website has dependencies on their own servers for resources in use on the site in question.
homepage prototype created by a company
This generally also indicates that you likely have some sort of contract or other agreement with this company to perform these changes, which you should work through them to have completed. Manually updating raw HTML source you've retrieved from your browser will not provide much value (if any at all) if this back-end complexity is indeed in place here.
Related
I am making a website, but i am learning it by editing a template. So far i start to learn it quite quickly, but i cant figure everything out and i cant find everything on the internet. What i'm trying to achieve is that i can add a variable, which i place on every page of my site, so i do not have to modify it per HTML file.
This is the code (HTML):
<div id="sidebar">
<h2>Interesting Topics</h2>
<p class="news">####Read More » </p>
<p class="news">####Read More » </p>
<p class="news">####Read More » </p>
</div>
all #### basically need to be articles that i only have to define once, so it will show the same on every page. even better would be random/personalized articles, but that will come later i guess. if anyone can help me or has any tips, please let me know. :)
HTML is a markup language, meaning it is used to give semantics to text. Thus, you cannot declare variables, as it is not a programming language. However, what you can do instead, is use a server-side language to "feed" in the data to each page, and store the data in a separate file or something.
Trying to troubleshoot some design issues on a website (built with OpenCart), and ran into an issue I've never seen before: an element shows up in Dev Tools but DOESN'T show up in View Source.
How is this possible? And how can I find the actual element?
The situation is, I had to modify the original template (category.twig) to change the "Add To Cart" button to "View"... and it works in the default category view, but as soon as any of the filters are selected, this happens... it reverts to the original view.. but it's still the same file (I added the path into the code itself, just to make sure I'm indeed looking at the same file, you can see in in the Code View portion of the screenshot).
So yeah... trying to trace where this "Add To Cart" is coming from, and being mighty confused as so why it's NOT showing up in View Source. And no, there's no JavaScript targeting the "view_button" DIV and transforming it into "Add To Cart" - I made the "view_button" DIV, it's custom.
Any advice?
Javascript can (and often does) create new elements in the document, that won´t appear on code view becasuse it does not execute javascript. I would advice you to download the entire page and then search for button-cart-text in js files or the whole document.
The document's source does not define the element statically, but the JavaScript creates the element dynamically. This is very common. The dev. tools show you the document as it exists in memory (it's current state), which will include anything that the JS caused to happen, but view...source shows you the actual source code of the static file that was initially loaded.
Source code is what the programmer wrote. Or, in the case of "View Source" in a browser, it is at least what the server responded with, which may have been written by hand or may be generated using various forms of compilation or bundling. A common example here would be a page rendered from templates (e.g. using Handlebars).
Live code, or at least live markup, is what you are seeing in the Elements pane in the browser console. You are seeing the DOM rendered in realtime, right before your very eyes. You are watching the program (i.e. the page and its subresources) execute and take effect. It is mutating, most likely due to JavaScript.
For extremely simple pages like example.com, the difference between the source code and the live code may be imperceptible, because nothing is modified at runtime. However, for more complex, real-world websites, the DOM is often modified while you are browsing the page so that it can respond to your clicks, your typing, or anything else. These modifications are extremely powerful and useful. However, as you have discovered, they make the source code and the live code diverge. This makes a programmer's life more difficult, while making a user's life easier.
I'm trying to load a "webpage" using the Android WebView but the images won't load. Firstly, I retrieve a text String that's formatted in Markdown. Afterwards, I convert the Markdown into HTML using Markdown4J, and then using the Android WebView's loadDataWithBaseUrl() function, I load the WebView with the html.
String html = null;
try {
html = new Markdown4jProcessor().process(mText);
} catch (IOException e) {
e.printStackTrace();
}
String css = "<link rel=\"stylesheet\" type=\"text/css\" href=\"blogstyle.css\" />";
final String htmlData = css + html;
body.loadDataWithBaseURL("file:///android_asset/", htmlData, "text/html", "UTF-8", null);
Everything in the webview displays and is formatted properly except the images. The images just won't show, and there are definitely image tags inside of the HTML, such as
<img src="https://www.random.org/analysis/randbitmap-rdo.png">
And I have no idea why my WebView wouldn't be able to display this image?
EDIT: The internet permissions in the manifest is already requested. And here is an example of a sample markdown string. I then convert this line into HTML.
"One of the huge problems today with web development is that it isn’t modular; because of how CSS and HTML work, it’s extremely difficult to just drag and drop an element from one site into another without some very strange side-effects. Shape and size can be different, resources can fail to load based on relative paths, and you have to import at least a .html, .css and .js file for each element. Even with all that, there’s no guarantee you won’t have CSS or JavaScript collisions.\n\n \n\nThe solution to this problem? [**Web Components**](http://webcomponents.org/). Now you should know up front that Web Components don’t work in IE and Safari, but they *are* under development.\n\n \n\nSo, what are web components? Well, essentially, they are plug-n-play modules for the web. The picture here is actually a great example. If you’re familiar with web design, imagine how long this would take to make, even statically. You’d have to position the images, set the roundness, give a height to the three main elements, set the font colors… Basically, it’d take you more than five minutes to get this up-and-running.\n\n\n\nSo what if I told you *all the code for what you see is two lines?* Just these two:\n\n \n\n\n <linkref=\"import\"href=\"gitcard.html\">\n <github-carduser=\"nasawa\">\n\n\nAnd that’s all. Just import the html and use the custom element! Using a new templating system called *Shadow DOM*, the browser holds a template called *github-card* with encapsulated styles and JavaScript. This way, even if you have elements named the same, there will never be any collision. And of course, you can have the *github-card* tag wherever you want, as many times as you want, and data will not transfer over.\n\n \n\nOn the other end, if you’re creating a web component, you can easily add as many customizable fields as you want to allow the user to modify your component at specific spots. For example, this is what the simplified Google Maps component looks like:\n\n \n\n\n`<google-mapslatitude=\"30.686603\"longitude=\"-88.046224\"></google-maps>`\n \n\nAnd a complicated Google Maps component looks like this:\n\n\n <google-maplatitude=\"37.77493\"longitude=\"-122.41942\"fitToMarkers>\n <google-map-markerlatitude=\"37.779\"longitude=\"-122.3892\"\n draggable=\"true\"title=\"Go Giants!\"></google-map-marker>\n <google-map-markerlatitude=\"37.777\"longitude=\"-122.38911\"></google-map-marker>\n </google-map>\n\n\n \n\nAs you can see, it is truly a great time to be in web development. Complex procedures are getting better and easier every day as we push closer to a true implementation of HTML5 and a unified multiplatform experience, and web components are a spearhead on that advancement. Look out for the next big thing – it’ll be here before you know it!\n\n \n\nChristopher Johnson \n Jr. Associate Programmer"
which would give me the following in HTML:
<p>"One of the huge problems today with web development is that it isn’t modular; because of how CSS and HTML work, it’s extremely difficult to just drag and drop an element from one site into another without some very strange side-effects. Shape and size can be different, resources can fail to load based on relative paths, and you have to import at least a .html, .css and .js file for each element. Even with all that, there’s no guarantee you won’t have CSS or JavaScript collisions.</p>
<p> </p>
<p>The solution to this problem? <strong>Web Components</strong>. Now you should know up front that Web Components don’t work in IE and Safari, but they <em>are</em> under development.</p>
<p> </p>
<p>So, what are web components? Well, essentially, they are plug-n-play modules for the web. The picture here is actually a great example. If you’re familiar with web design, imagine how long this would take to make, even statically. You’d have to position the images, set the roundness, give a height to the three main elements, set the font colors… Basically, it’d take you more than five minutes to get this up-and-running.</p>
<p><img src="https://www.ruralsourcing.com/wp-content/uploads/2014/09/blog-image-265x300.png" alt="blog-image" title="" /></p>
<p>So what if I told you <em>all the code for what you see is two lines?</em> Just these two:</p>
<p> </p>
<pre><code><linkref=\"import\"href=\"gitcard.html\">
<github-carduser=\"nasawa\">
</code></pre>
<p>And that’s all. Just import the html and use the custom element! Using a new templating system called <em>Shadow DOM</em>, the browser holds a template called <em>github-card</em> with encapsulated styles and JavaScript. This way, even if you have elements named the same, there will never be any collision. And of course, you can have the <em>github-card</em> tag wherever you want, as many times as you want, and data will not transfer over.</p>
<p> </p>
<p>On the other end, if you’re creating a web component, you can easily add as many customizable fields as you want to allow the user to modify your component at specific spots. For example, this is what the simplified Google Maps component looks like:</p>
<p> </p>
<p><code><google-mapslatitude=\"30.686603\"longitude=\"-88.046224\"></google-maps></code>
</p>
<p>And a complicated Google Maps component looks like this:</p>
<pre><code><google-maplatitude=\"37.77493\"longitude=\"-122.41942\"fitToMarkers>
<google-map-markerlatitude=\"37.779\"longitude=\"-122.3892\"
draggable=\"true\"title=\"Go Giants!\"></google-map-marker>
<google-map-markerlatitude=\"37.777\"longitude=\"-122.38911\"></google-map-marker>
</google-map>
</code></pre>
<p> </p>
<p>As you can see, it is truly a great time to be in web development. Complex procedures are getting better and easier every day as we push closer to a true implementation of HTML5 and a unified multiplatform experience, and web components are a spearhead on that advancement. Look out for the next big thing – it’ll be here before you know it!</p>
<p> </p>
<p>Christopher Johnson <br />
Jr. Associate Programmer"</p>
Sorry if the question in the title is a bit vague, here's what I'm trying to accomplish:
Is there a script out there that can search a page (or page source) for a particular determined value (for example, a product ID "1234") and insert it dynamically or on-the-fly into a variable which can be used anywhere on the page if called?
For example:
I'm working on a site that uses a shopping cart/feed platform that is closed source, so I can't grab variables I need (such as the product ID, product price, and order ID), as they are "locked down" (so to speak). And I need to be able to grab them and dynamically insert them into click trackers/pixel URL strings.
I'm not sure if this is possible or if this is a much larger task at hand.
A webpage might have many ways of showing a value, and it takes some human interpretation to determine what values are important. Example:
<div id="couponDisplay" class="inset hidden">Enter your coupon code: <input name="coupon"/></div>
<div id="cartRegion">
<div class="cart">
<div class="lolbx_quantityControl" data-initialValue="1" onKey="lolbx_notify()">
</div>
</div>
</div>
It may be that you're looking at a shopping cart page, and though the whole HTML is hundreds of lines long, the most important part of that page for you is the data-initialValue="1" part. That's less obvious to a computer. The first step for you might be the path the computer uses to reach the value you want, then see if you can replicate that.
I'm not sure if I understand what sort of system you're connecting to, though; I will say that using outside web services through "hacks" like this without their permission may be violating their terms of use (ie, grabbing Google Maps data to make your own map control with no Google branding)
I wonder how it is possible to (more or less ) reliably clip the content from a random web site (using Ruby or JavaScript, doesn't really matter).
Much like Evernote and Flipboard do.
What is the best way to determine where the actual content is within a page?
The purpose: given a URL - retrieve the actual content of that page and ignore all the layout and other unrelated information.
For example:
given http://ninemsn.com/ => the HTML of the main news topic that is in the middle part of the content.
given the http://news.cnet.com/8301-1035_3-20104048-94/a-beginners-guide-to-telecom-jargon-part-7 => the HTML of the main article.
Just use Evernote's "clip full page" option to see exactly what I mean.
Thanks.
My initial thoughts would be to DOM parse the page, then traverse the DOM tree to the content of a specific div and show that (via XPath, etc). For pages without clearly-defined sections it's going to be difficult regardless of which method you use. The AutoPager plugin for Firefox and Chrome implements XPath parsing behaviour. Get the latest version and open up the .xpi to see how he does it. It's a JavaScript implementation.
Pick the div by letting someone enter, per URL/site scheme, what the id or class of the content div is. For your ninemsn example, the div containing the article's title, share buttons, the author's image, and the post content is
<div class="post">
and the actual body of the text is
<div class="postBody txtWrap" section="txt">
So someone would enter that you need to parse the first h1 from <div class="post"> and that's the article title, and then get all the text from <div class="postBody"> and make that the article content (you might need to parse the class in such a way that it can match both postBody and txtWrap).
Another example (for funsies): Stack Overflow. A question's title is contained in
<div id="question-header">
A question's text is trickier, because it's in a div with the same class as an answer's text, and no id. You need to match <div id="question"> and then traverse down to
<div class="post-text">
Similarly for answers, each <div id="answer-[UINTEGER]"> contains a <div class="post-text"> with its respective text.
In both situations, you can traverse those top-level question and answer- divs for <div class="user-details"> to fetch usernames, reputation and badge counts, etc.