Aspetos gerais de desenvolvimento web.

Aspetos Gerais de Desenvolvimento WEB Dicas e Truques =D Carlos Corcioli

O que é necessário saber? Linguagem de programação WEB; PHP, Java, .NET, Python, Ruby... HTML (HyperText Markup Language); CSS (Cascading Style Sheets); Javascript; Browsers. Chrome, Firefox, Internet Explorer, Opera, Safari...

Frameworks; Gerenciador de Templates. Smarty, Pear, Savant3. ORM (Object/Relational Mapping); Doctrine, Propel, ActiveRecord. MVC (Model View Controller); Zend, CodeIgniter. CMS (Content Management System). Drupal, Pyro, WordPress.

Frameworks – Gerenciador de Templates Separa Design de Desenvolvimento; Melhora desempenho; Aumenta a segurança lógica;

Frameworks – Gerenciador de Templates 01: <?php 02: // Incluindo Biblioteca 03: require 'libs/Smarty.class.php'; 04: require 'libs/database.class.php'; 05: // Instanciando Objetos 06: $smarty = new Smarty(); 07: $db = new DataBase(); 08: 09: // Realizando Consulta 10: $dados = $db->query("SELECT * FROM USERS"); 11: 12: // Adicionando Zebra 13: for($idx = 0; $idx < count($dados); $idx++){ 14: if(($idx+1)%2 == 0) 15: $dados[$idx]['zebra'] = 'even'; 16: else 17: $dados[$idx]['zebra'] = 'odd'; 18: } 19: // Assinando variáveis no objeto 20: // Smarty 21: $smarty->assign("nome","Dev WEB"); 22: $smarty->assign("title","Smarty"); 23: $smarty->assign("dados", $dados); 24: 25: // Chamando o Template e 26: // apresentando o resultado. 27: $smarty->display('index.tpl'); 28: ?>

Frameworks – Gerenciador de Templates <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>{$title} - {$nome}</title> <link media="all" rel="stylesheet" type="text/css" href="css/smarty.css"/> </head> <body bgcolor="#ffffff"> <div> {foreach from=$dados key=chave item=valor} <div class="line {$valor.zebra}"> {$chave+1}: {$valor.nome} - {$valor.idade} anos – <a href="mailto:{$valor.email}">{$valor.email}</a> </div> {/foreach} </div> </body> </html>

Frameworks – Gerenciador de Templates

Frameworks – ORMObject/Relational Mapping Código independente de linguagem SQL; Melhor desempenho; Clareza do Código; Facilidade de Manutenção; Separação de Modelos e Controles; Aumento de Segurança.

Frameworks – ORMObject/Relational Mapping

Frameworks – ORMObject/Relational Mapping Exemplo usando Doctrine: $user = new User(); $user->load(123); $user->nome = “Nhonho Barriga e Pesado"; $user->save(); $novo_user = new User(); $novo_user->nome = "Chaves do Oito"; $novo_user->idade = 12; $novo_user->email = "chavito@sbt.com.br"; $novo_user->save();

Frameworks – MVCModel View Controler Separação Modelos, Controles e Interface de usuário; Melhoria de desempenho; Reusabilidade de código; Organização; Aumento na segurança.

Frameworks – MVCModel View Controler

Frameworks – MVCModel View Controler Classe de Modelo User_model: <?php class User_model extends Model { function User_model() { parent::Model(); } function load($id) { $this->db->where('user_id', $id); $stm = $this->db->get('user'); if($stm->num_rows() > 0) $row = $stm->result(); else return FALSE; return $row[0]; } }

Frameworks – MVCModel View Controler Classe de Controle User: <?php class User extends Controller { function User() { parent::Controller(); } function load($user_id) { $this->load->model('user_model'); $user = $this->user_model->load($user_id); $data = array( 'title' => 'Usuário', 'user' => $user, ); $this->load->view('user_load', $data); } }

Frameworks – MVCModel View Controler View user_load: <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <TITLE><?php echo $title; ?> - <?php echo $user->nome; ?></TITLE> </HEAD> <BODY bgcolor="#ffffff"> <div> Nome: <?php echo $user->nome; ?><br /> Idade: <?php echo $user->idade; ?><br /> E-mail: <a href="<?php echo $user->email; ?>"><?php echo $user->email; ?></a><br /> </div> </BODY> </HTML>

Frameworks – MVCModel View Controler Resultado: URL: http://meusite.com/user/load/1 Padrão: http://meusite.com/[Classe]/[Método]/[Parâmetro 1] /[Parâmetro 2]/...

CMS - Content Management SystemQuem Usa... Governo Sul Africano - Drupal

CMS - Content Management SystemQuem Usa... Governo de Londres - Drupal

CMS - Content Management SystemQuem Usa... NVidia - Drupal

CMS - Content Management SystemQuem Usa... Ministério da Cultura (Brasil) - WordPress

CMS - Content Management SystemQuem Usa... Intel - Drupal

CMS - Content Management SystemQuem Usa... AT&T- Drupal

CMS - Content Management SystemQuem Usa... Blogs do G1 (Globo.com) - WordPress

CMS - Content Management SystemQuem Usa... Casa Branca (White House - U.S.) - Drupal

HTMLHiperText Markup Language Tópicos importantes Estrutura básica; Tags; Doctype;

HTML - HiperText Markup LanguageEstrutura Básica ,[object Object],<head> Define o cabeçalho do código HTML. </head> <body> Define o corpo da página. </body> </html>

HTML - HiperText Markup LanguageTags <head> <title> Define o Título da Página. <meta> Define configurações do documento: Ex. Codificação de caracteres. <script> Marca o inicio e fim de códigos Javascript. Podendo também ligar aquivos Javascript. <style> Marca o inicio e o fim de códigos CSS. <link> Realiza a ligação da página com outros arquivos: Ex. CSS e Feed(XML).

HTML - HiperText Markup LanguageTags <body> <p></p> Define um parágrafo. <table></table> Define uma tabela. <div></div> Define uma divisão. <form></form> Define um formulário. <img> Adiciona uma imagem. <a></a> Adiciona um Link.

HTML - HiperText Markup LanguageDoctype HTML 4.01 Strict, Transitional, Frameset <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN“ "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> XHTML 1.0 Strict, Transitional, Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> XHTML 1.1 DTD <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

HTML - HiperText Markup LanguageExemplo <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" > function preenche(){ $("#nome").text("Carlos"); $("#idade").text(26); $("#altura").text(1.83); } </script> </head> <body> <div id="nome"></div> <div id="idade"></div> <div id="altura"></div> <a href="javascript:void(0);" onClick="preenche();">Clique aqui</a> </body> </html>

CSSCascading Style Sheets Pra que? Selectors (Seletores); Propriedades; CSS e o IE; =‘( Frameworks;

CSS - Cascading Style SheetsSelectors (Seletores) Tags; Definido apenas com o nome da Tag Atributo “Id”; Definido pelo simbolo Sustenido (#) Atributo “Class”; Definido por um Ponto (.)

CSS - Cascading Style SheetsSelectors (Seletores) TAGS <style rel=“stylesheet” type=“text/css”> body{ background-color: black; font-family: Verdana; color: white; } </style> <body> <p>Olá FATEC ZONA LESTE</p> </body> Olá FATEC ZONA LESTE

CSS - Cascading Style SheetsSelectors (Seletores) ID <style rel=“stylesheet” type=“text/css”> #fatec{ color: #FF0000; } </style> <body> <p id=“fatec”> Olá FATEC ZONA LESTE </p> <p>SEM ESTILO</p> </body> Olá FATEC ZONA LESTE SEM ESTILO

CSS - Cascading Style SheetsSelectors (Seletores) CLASS <style rel=“stylesheet” type=“text/css”> .azul{ color: #0000FF; } </style> <body> <p class=“azul”> Olá FATEC ZONA LESTE </p> <p>SEM ESTILO</p> <p class=“azul”>COM ESTILO</p> </body> Olá FATEC ZONA LESTE SEM ESTILO COM ESTILO

CSS - Cascading Style SheetsPropriedades font; family, size, weight, variant, style text; align, decoration, indent, transform background; color, image, position; position; width e height; float; margin e padding; top, right, bottom, left; .azul{ font-family: Verdana; font-size: 12px; text-align: right; text-decoration: underline; color: #0000FF; margin-right: 30px; }

CSS - Cascading Style SheetsCSS e o Internet Explorer MTV Brasil no IE 8. =)

CSS - Cascading Style SheetsCSS e o Internet Explorer MTV Brasil no IE 6. =‘(

CSS - Cascading Style SheetsCSS e o Internet Explorer GAMBIARRA... o.Õ

Antes de Falar em Javascript XML vs. JSON

<?xml version="1.0" encoding="UTF-8"?> <statuses type="array"> <status> <created_at>Thu Jul 15 23:24:33 +0000 2010</created_at> <id>18639350000</id> <text>texto do tweet</text> <source>web</source> <truncated>false</truncated> <in_reply_to_status_id></in_reply_to_status_id> <in_reply_to_user_id></in_reply_to_user_id> <favorited>false</favorited> <in_reply_to_screen_name></in_reply_to_screen_name> <user> <id>615449587</id> <name>leereotretrnor</name> <screen_name>leonor_</screen_name> <location></location> <description></description> <profile_image_url>http://a1.twimg.com/profile_images/1015735169/Foto0133_normal.jpg</profile_image_url> <url></url> <protected>false</protected> <followers_count>91</followers_count> <profile_background_color>ffffff</profile_background_color> <profile_text_color>f745b9</profile_text_color> <profile_link_color>f00c95</profile_link_color> <profile_sidebar_fill_color></profile_sidebar_fill_color> <profile_sidebar_border_color>969090</profile_sidebar_border_color> <friends_count>197</friends_count> <created_at>Sat Aug 01 03:24:58 +0000 2009</created_at> <favourites_count>0</favourites_count> <utc_offset>-10800</utc_offset> <time_zone>Greenland</time_zone> XML – API do Twitter

XML – API do Twitter (continuaçao) <profile_background_image_url> http://a3.twimg.com/profile_background_images/112042905/POfQE9X92p2tpaoqTJ3HPbWFo1_400_large.jpg </profile_background_image_url> <profile_background_tile>true</profile_background_tile> <profile_use_background_image>true</profile_use_background_image> <notifications></notifications> <geo_enabled>false</geo_enabled> <verified>false</verified> <following></following> <statuses_count>2754</statuses_count> <lang>en</lang> <contributors_enabled>false</contributors_enabled> <follow_request_sent></follow_request_sent> </user> <geo/> <coordinates/> <place/> <contributors/> </status>

[ { "coordinates": null, "favorited": false, "created_at": "Thu Jul 15 23:26:44 +0000 2010", "truncated": false, "text": "qu por qu kieres saver como poner pablito", "contributors": null, "id": 18639485000, "geo": null, "in_reply_to_user_id": null, "place": null, "in_reply_to_screen_name": null, "user": { "name": "paul isaias gallegos", "profile_sidebar_border_color": "eeeeee", "profile_background_tile": false, "profile_sidebar_fill_color": "efefef", "created_at": "Sun Jun 06 19:56:50 +0000 2010", "profile_image_url": "http://a1.twimg.com/profile_images/972549385/m_e26ddd7e7a424fdebceef1b3d005011f_normal.jpg", "location": "", "profile_link_color": "009999", "follow_request_sent": null, "url": null, "favourites_count": 0, "contributors_enabled": false, "utc_offset": -21600, "id": 152752917, "profile_use_background_image": true, "profile_text_color": "333333", "protected": false, JSON – API do Twitter

JSON – API do Twitter (continuaçao) "followers_count": 1, "lang": "es", "notifications": null, "time_zone": "Central Time (US & Canada)", "verified": false, "profile_background_color": "131516", "geo_enabled": false, "description": "", "friends_count": 2, "statuses_count": 18, "profile_background_image_url": "http://a3.twimg.com/profile_background_images/122541097/m_4011538d4b734ec7923bd641d2fa274f.jpg", "following": null, "screen_name": "izaloko" }, "source": "web", "in_reply_to_status_id": null },

Javascript Client Side; Compatibilidade; Frameworks;

Javascript Exemplo de Javascript com jQuery: <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" > function preenche(){ $(#nome).Text(“Carlos”); $(#idade).Text(“26”); $(#altura).Text(“1.83”); } </script> </head> <body> <div id="nome"></div> <div id="idade"></div> <div id="altura"></div> <a href=“javascript:void(0)” onClick=“preenche();”>Clique aqui</a> </body> </html>

Aspetos gerais de desenvolvimento web.

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (10)

Similar to Aspetos gerais de desenvolvimento web.

Similar to Aspetos gerais de desenvolvimento web. (20)

Aspetos gerais de desenvolvimento web.