web_design:overview
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
web_design:overview [2021/10/06 09:33] mag [Javascript] |
web_design:overview [2023/08/16 09:33] (current) |
||
|---|---|---|---|
| Line 4: | Line 4: | ||
| ===== Objective ===== | ===== Objective ===== | ||
| This lesson introduces the technologies required to create a fully functional web application or web site. | This lesson introduces the technologies required to create a fully functional web application or web site. | ||
| + | |||
| + | Esta lección presenta las tecnologías necesarias para crear una aplicación web o un sitio web completamente funcional. | ||
| ===== Introduction ===== | ===== Introduction ===== | ||
| The following technologies are commonly used to create web pages and applications. While an extremely basic page can be created solely using HTML, you'll usually want to use a combination of these for your sites. | The following technologies are commonly used to create web pages and applications. While an extremely basic page can be created solely using HTML, you'll usually want to use a combination of these for your sites. | ||
| + | |||
| + | Las siguientes tecnologías se utilizan comúnmente para crear páginas web y aplicaciones. Si bien una página extremadamente básica se puede crear únicamente usando HTML , generalmente querrá usar una combinación de estos para sus sitios. | ||
| ^ Tecnologia ^ Funcion ^ | ^ Tecnologia ^ Funcion ^ | ||
| - | | HTML (HyperText Markup Language) | Structura | + | | HTML (HyperText Markup Language) | Estructura |
| - | | CSS (Cascading Style Sheet) | Deseno | + | | CSS (Cascading Style Sheet) | Diseño |
| - | | Javascript | Hacer dinamica | + | | Javascript | Hacer dinámica |
| - | | Server Side Script - PHP, Java | Hacer consistencia entre paginas, | + | | Server Side Script - PHP, Java | Hacer consistencia entre paginas, |
| - | | Database - MySQL, SQL | Guardar | + | | Database - MySQL, SQL | Guardar |
| Let's look at a simple page to get an idea of what each of these technologies provides by building a page that shows a photo, and allows the photo to be changed by clicking on links in a side panel. | Let's look at a simple page to get an idea of what each of these technologies provides by building a page that shows a photo, and allows the photo to be changed by clicking on links in a side panel. | ||
| Line 112: | Line 116: | ||
| See the results [[http:// | See the results [[http:// | ||
| - | overall.html | + | **overall.html** |
| < | < | ||
| < | < | ||
| Line 136: | Line 140: | ||
| </ | </ | ||
| - | overall.js | + | **overall.js** |
| < | < | ||
| { | { | ||
| Line 151: | Line 155: | ||
| document.getElementById(' | document.getElementById(' | ||
| }</ | }</ | ||
| + | |||
| ===== PHP ===== | ===== PHP ===== | ||
| PHP is code that runs on the server to produce the HTML sent to the client. It is very powerful, but in this example, we simply provide the same HTML we've already seen. For a large number of images, the PHP code is much more efficient. It can also cope with lists of different lengths more easily than pure HTML can. | PHP is code that runs on the server to produce the HTML sent to the client. It is very powerful, but in this example, we simply provide the same HTML we've already seen. For a large number of images, the PHP code is much more efficient. It can also cope with lists of different lengths more easily than pure HTML can. | ||
| Line 156: | Line 161: | ||
| See the results [[http:// | See the results [[http:// | ||
| - | overall.php | + | **overall.php** |
| < | < | ||
| < | < | ||
| Line 186: | Line 191: | ||
| </ | </ | ||
| </ | </ | ||
| + | |||
| ===== MySQL ===== | ===== MySQL ===== | ||
| MySQL is a database that can be used to store any information you need in a set of tables. In this example, we store a list of photos in a single table. Then we connect to the database in the first part of the PHP code and get the list of photos in the later part. | MySQL is a database that can be used to store any information you need in a set of tables. In this example, we store a list of photos in a single table. Then we connect to the database in the first part of the PHP code and get the list of photos in the later part. | ||
| Line 191: | Line 197: | ||
| See the results at http:// | See the results at http:// | ||
| - | MySQL | + | **MySQL** |
| ^ ID ^ City ^ Photo ^ Link ^ | ^ ID ^ City ^ Photo ^ Link ^ | ||
| |1 |Sydney |harbour |https:// | |1 |Sydney |harbour |https:// | ||
| Line 203: | Line 209: | ||
| |9 |Medellin |Botanical Gardens |https:// | |9 |Medellin |Botanical Gardens |https:// | ||
| - | overall.php | + | **overall.php** |
| < | < | ||
| // Set up database connection | // Set up database connection | ||
| - | define (' | + | |
| - | define (' | + | define (' |
| define (' | define (' | ||
| include_once DBCONNECT; | include_once DBCONNECT; | ||
| Line 250: | Line 256: | ||
| </ | </ | ||
| </ | </ | ||
| + | |||
| + | [[web_design: | ||
web_design/overview.1633537997.txt.gz · Last modified: 2023/08/16 09:33 (external edit)
Page Tools
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
