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:40] mag |
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 151: | Line 155: | ||
| document.getElementById(' | document.getElementById(' | ||
| }</ | }</ | ||
| + | |||
| + | ===== 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. | ||
| + | |||
| + | See the results [[http:// | ||
| + | |||
| + | **overall.php** | ||
| + | < | ||
| + | < | ||
| + | <link rel=" | ||
| + | <script type=" | ||
| + | </ | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | < | ||
| + | <nav> | ||
| + | <ul> | ||
| + | <?php | ||
| + | $images = array(' | ||
| + | ' | ||
| + | ' | ||
| + | ' | ||
| + | ' | ||
| + | foreach($images as $k => $photo) | ||
| + | { | ||
| + | $i = $k+1; | ||
| + | echo "< | ||
| + | } | ||
| + | ?> | ||
| + | </ul> | ||
| + | </ | ||
| + | <img id=" | ||
| + | </ | ||
| + | </ | ||
| ===== MySQL ===== | ===== MySQL ===== | ||
| Line 157: | 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 169: | 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 216: | Line 256: | ||
| </ | </ | ||
| </ | </ | ||
| + | |||
| + | [[web_design: | ||
web_design/overview.1633538441.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
