Aspetos gerais de desenvolvimento web.

Aspetos Gerais de Desenvolvimento WEBDicas e Truques=DCarlos 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 TemplatesSepara Design de Desenvolvimento;Melhora desempenho;Aumenta a segurança lógica;

Frameworks –Gerenciador de Templates01: <?php02: // Incluindo Biblioteca03: require 'libs/Smarty.class.php';04: require 'libs/database.class.php';05: // Instanciando Objetos06: $smarty = new Smarty();07: $db = new DataBase();08: 09: // Realizando Consulta10: $dados = $db->query("SELECT * FROM USERS");11:12: // Adicionando Zebra13: for($idx = 0; $idx < count($dados); $idx++){14: if(($idx+1)%2 == 0)15: $dados[$idx]['zebra'] = 'even';16: else17: $dados[$idx]['zebra'] = 'odd';18: }19: // Assinando variáveis no objeto20: // Smarty21: $smarty->assign("nome","Dev WEB");22: $smarty->assign("title","Smarty");23: $smarty->assign("dados", $dados);24:25: // Chamando o Template e26: // 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 MappingCó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 MappingExemplo 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 ControlerSeparaçã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 ControlerClasse de Modelo User_model:<?phpclass 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 ControlerClasse de Controle User:<?phpclass 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 ControlerView 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 ControlerResultado:URL: http://meusite.com/user/load/1Padrã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 LanguageTópicos importantesEstrutura básica;Tags;Doctype;

HTML - HiperText Markup LanguageEstrutura Básica<html> : Define o inicio e o fim do código HTML.<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 LanguageDoctypeHTML 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 SheetsPra que?Selectors (Seletores);Propriedades;CSS e o IE; =‘(Frameworks;

CSS - Cascading Style SheetsSelectors (Seletores)Tags;Definido apenas com o nome da TagAtributo “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 LESTESEM 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 LESTESEM ESTILOCOM ESTILO

CSS - Cascading Style SheetsPropriedadesfont;family, size, weight, variant, styletext;align, decoration, indent, transformbackground;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 ExplorerMTV Brasil no IE 8. =)

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

CSS - Cascading Style SheetsCSS e o Internet ExplorerGAMBIARRA... o.Õ

Antes de Falar em JavascriptXML 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 },

JavascriptClient Side;Compatibilidade;Frameworks;

JavascriptExemplo 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.

More Related Content

Viewers also liked (10)

Similar to Aspetos gerais de desenvolvimento web. (20)

Aspetos gerais de desenvolvimento web.