AJAX WEB CHAT PHP, MYSQL, JQUERY, CSS3, HTML5 BY ALISSONBORGES

Tamanho: px
Começar a partir da página:

Download "AJAX WEB CHAT PHP, MYSQL, JQUERY, CSS3, HTML5 BY ALISSONBORGES"

Transcrição

1 Sumário AJAX Web Chat (Part 1) PHP e MySQL... 2 HTML... 2 Database Schema... 5 PHP... 7 AJAX Web Chat (Part 2) CSS and jquery CSS jquery P á g i n a

2 AJAX Web Chat (Part 1) PHP e MySQL Ao discutir a comunicação em tempo real, não há muitas soluções que podem rivalizar com o poder de um web chat simples. O que é ainda melhor, é que você já tem todas as ferramentas que você precisa para criar um - seu navegador. Neste duas partes tutorial, estaremos criando um chat AJAX Web utilizando PHP, MySQL e jquery. Nesta primeira parte, iremos discutir o PHP e MySQL lado, e na próxima semana vamos continuar com o jquery e CSS front-end. HTML Como de costume, o primeiro passo é estabelecer a marcação HTML. Nosso documento está estruturado como HTML5 para maior comodidade, pois isso nos permite usar o novo, mais curto (e mais memorável) doctype, e ignorar o atributo do tipo nas tags de script. ajax-chat.html <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <!-- Carregando o JScrollPane CSS, juntamente com o estilo do conversar em chat.css eo resto da página em page.css --> <link rel="stylesheet" type="text/css" href="js/jscrollpane/jscrollpane.css" /> <link rel="stylesheet" type="text/css" href="css/page.css" /> <link rel="stylesheet" type="text/css" href="css/chat.css" /> 2 P á g i n a

3 </head> <body> <div id="chatcontainer"> <div id="chattopbar" class="rounded"></div> <div id="chatlineholder"></div> <div id="chatusers" class="rounded"></div> <div id="chatbottombar" class="rounded"> <div class="tip"></div> <form id="loginform" method="post" action=""> <input id="name" name="name" class="rounded" maxlength="16" /> <input id=" " name=" " class="rounded" /> <input type="submit" class="bluebutton" value="entrar" /> </form> <form id="submitform" method="post" action=""> <input id="chattext" name="chattext" class="rounded" maxlength="255" /> <input type="submit" class="bluebutton" value="enviar" /> </form> </div> </div> 3 P á g i n a

4 <!-- Carregar jquery, o plugin mousewheel e JScrollPane, juntamente com a nosso script.js --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js "></script> <script src="js/jscrollpane/jquery.mousewheel.js"></script> <script src="js/jscrollpane/jscrollpane.min.js"></script> <script src="js/script.js"></script> </body> </html> Para otimizar o tempo de carregamento, as folhas de estilo estão incluídas na seção de cabeça, e os arquivos JavaScript no rodapé, pouco antes da tag body fechamento. Nós estamos usando o plugin JScrollPane para criar a área de rolagem com as entradas de bate-papos. Este plugin vem com seu próprio estilo, que é a primeira coisa que nós incluímos na página. A marcação do bate-papo é composto por quatro divs principais - a barra superior, o recipiente bate-papo, o container de usuário ea barra inferior. Este último tem o login e enviar formulários. A forma de envio é oculta por padrão e só aparece se o usuário tiver feito logon com sucesso no sistema de chat. 4 P á g i n a

5 Uma conversa AJAX Web com PHP, MySQL e jquery Por fim, incluímos os arquivos JavaScript. Começando com a biblioteca jquery, nós adicionamos o plugin mousewheel (usado por JScrollPane), o plugin JScrollPane si e nosso arquivo script.js. Database Schema Antes de seguir em frente com a parte PHP, primeiro temos que dar uma olhada em como os dados de bate-papo está organizada na base de dados MySQL. Para os fins deste script usamos duas tabelas. Em webchat_users estamos armazenando os participantes de bate-papo. Esta tabela tem na id, nome, gravatar e um campo last_activity. O campo de nome é definido como único, de modo que os usuários não têm nomes nick duplicados na sala de chat. 5 P á g i n a

6 Estrutura da tabela Outra característica útil dos campos de índice exclusivo, é que as consultas inserção falhará ea propriedade inserted_rows do objeto MySQLi será definido como zero se tentarmos inserir uma linha duplicada. Esta encontra seu lugar na classe PHP chat você verá na próxima etapa. A coluna last_activity tem um timestamp, que é atualizado a cada 15 segundos para cada usuário. Também é definida como um índice, por isso é mais rápido para excluir usuários inativos (com uma coluna last_activity com um valor superior a 15, significa que o usuário não é mais vendo a janela de chat). Estrutura da tabela 6 P á g i n a

7 A tabela webchat_lines detém as entradas de chat individuais. Observe que estamos armazenando o nome do autor e gravatar aqui também. Esta duplicação é que vale a pena, pois liberta-nos de usar uma junção caro ao solicitar as últimas conversas - o recurso acessados com mais frequência da aplicação. As definições dessas tabelas estão disponíveis no tables.sql no arquivo de download. Você pode executar o código em phpmyadmin para criá-los. Além disso, ao configurar o bate-papo em seu próprio país anfitrião, lembre-se de modificar ajax.php com seus bancos de dados MySQL detalhes de login. PHP Agora que temos o banco de dados no lugar, vamos começar a discutir os scripts PHP que impulsionam o chat. O primeiro arquivo, vamos dar uma olhada mais de perto, é ajax.php. Ele lida com as requisições AJAX enviados a partir do front-end jquery e saídas JSON dados formatados. ajax.php require "classes/db.class.php"; require "classes/chat.class.php"; require "classes/chatbase.class.php"; require "classes/chatline.class.php"; require "classes/chatuser.class.php"; session_name('webchat'); session_start(); if(get_magic_quotes_gpc()){ // Se magic quotes está habilitado, retirar as barras extras array_walk_recursive($_get,create_function('&$v,$k','$v = stripslashes($v);')); array_walk_recursive($_post,create_function('&$v,$k','$v = stripslashes($v);')); 7 P á g i n a

8 try{ // Conectando-se ao banco de dados DB::init($dbOptions); $response = array(); // Entrar com as ações apoiadas: switch($_get['action']){ case 'login': break; $response = Chat::login($_POST['name'],$_POST[' ']); case 'checklogged': break; $response = Chat::checkLogged(); case 'logout': break; $response = Chat::logout(); case 'submitchat': break; $response = Chat::submitChat($_POST['chatText']); case 'getusers': break; $response = Chat::getUsers(); case 'getchats': 8 P á g i n a

9 break; $response = Chat::getChats($_GET['lastID']); default: throw new Exception('Ação errada'); echo json_encode($response); catch(exception $e){ die(json_encode(array('error' => $e->getmessage()))); Por conveniência, eu usei um switch simples para definir as ações, apoiadas pelo script. Estes incluem a apresentação chat, login / logout de funcionalidade, e as ações para solicitar uma lista de chats e usuários on-line. Toda a saída está na forma de mensagens de JSON (convenientemente manipulados por jquery), e os erros são obtidas sob a forma de excepções. O interruptor rotas declaração todas as solicitações para o método estático apropriado da classe bate-papo, que discutiremos mais adiante nesta seção. DB.class.php class DB { private static $instance; private $MySQLi; private function construct(array $dboptions){ $this->mysqli new mysqli( $dboptions['db_host'], $dboptions['db_user'], $dboptions['db_pass'], $dboptions['db_name'] ); if (mysqli_connect_errno()) { throw new Exception('Database erro.'); $this->mysqli->set_charset("utf8"); 9 P á g i n a

10 public static function init(array $dboptions){ if(self::$instance instanceof self){ return false; self::$instance = new self($dboptions); public static function getmysqliobject(){ return self::$instance->mysqli; public static function query($q){ return self::$instance->mysqli->query($q); public static function esc($str){ return self::$instance->mysqli- >real_escape_string(htmlspecialchars($str)); A classe DB é o nosso gerente de banco de dados. O construtor é privado, o que significa que nenhum objeto pode ser criado a partir do exterior, ea inicialização só é possível a partir do método estático init (). É preciso uma matriz com MySQL detalhes de login, e cria uma instância da classe, realizada no self :: $ instance variável estática. Dessa forma, podemos ter certeza de que apenas uma conexão com o banco de dados pode existir no mesmo tempo. O resto das classes de tirar vantagem do método para comunicar com a base de dados de consulta estática (). ChatBase.class.php /* Esta é a classe base, usado por ambos chatline e ChatUser */ class ChatBase{ // Esse construtor é usado por todas as classes de bate-papo: public function construct(array $options){ foreach($options as $k=>$v){ 10 P á g i n a

11 if(isset($this->$k)){ $this->$k = $v; Esta é uma classe base simples. Seu objetivo principal é definir o construtor, que recebe um array com os parâmetros e salva apenas os que estão definidos na classe. ChatLine.class.php /* A ChatLine é usado para as entradas de bate-papo */ class ChatLine extends ChatBase{ protected $text = '', $author = '', $gravatar = ''; public function save(){ DB::query(" INSERT INTO webchat_lines (author, gravatar, text) VALUES ( '".DB::esc($this->author)."', '".DB::esc($this->gravatar)."', '".DB::esc($this->text)."' )"); // Retorna o objeto MySQLi da classe DB return DB::getMySQLiObject(); 11 P á g i n a

12 Aqui é a classe chatline. Estende-se ChatBase, assim você pode facilmente criar um objeto dessa classe, proporcionando uma matriz com um texto, autor e elementos Gravatar. A propriedade gravatar contém um hash md5 de da pessoa. Isso é necessário para que possamos buscar gravatar do usuário a partir gravatar.com. Essa classe também define um método save, que o objeto de nosso banco de dados. Como ele retorna o objeto MySQLi, contido na classe DB, você pode verificar se a gravação foi bemsucedida verificando a propriedade affected_rows (voltaremos a este na classe chat). ChatUser.class.php class ChatUser extends ChatBase{ protected $name = '', $gravatar = ''; public function save(){ DB::query(" INSERT INTO webchat_users (name, gravatar) VALUES ( '".DB::esc($this->name)."', '".DB::esc($this->gravatar)."' )"); return DB::getMySQLiObject(); public function update(){ DB::query(" INSERT INTO webchat_users (name, gravatar) VALUES ( '".DB::esc($this->name)."', '".DB::esc($this->gravatar)."' 12 P á g i n a

13 ) ON DUPLICATE KEY UPDATE last_activity = NOW()"); O mesmo também é válido aqui. Nós temos o nome e as propriedades gravatar (notar o modificador de acesso protected - isso significa que eles estarão acessíveis na classe ChatBase, para que possamos colocá-las no construtor). A diferença é que nós também temos um método update (), que atualiza o timestamp last_activity para o tempo atual. Isso mostra que essa pessoa mantém uma janela de batepapo aberto e é exibido como on-line na seção de usuários. Chat.class.php Part 1 /* A classe Chart exploses métodos estáticos públicos, utilizados por ajax.php */ class Chat{ public static function login($name,$ ){ if(!$name!$ ){ throw new Exception('Preencha todos os campos obrigatórios'); if(!filter_input(input_post,' ',filter_validate_ )){ throw new Exception('Seu não é válido.'); // Preparando o hash gravatar: $gravatar = md5(strtolower(trim($ ))); $user = new ChatUser(array( 'name' => $name, 13 P á g i n a

14 'gravatar' => $gravatar )); // O método save retorna um objeto MySQLi if($user->save()->affected_rows!= 1){ throw new Exception('Este nick está em uso.'); $_SESSION['user'] 'name' 'gravatar' = array( => $name, => $gravatar ); return array( 'status' => 1, 'name' 'gravatar' => $name, => Chat::gravatarFromHash($gravatar) ); public static function checklogged(){ $response = array('logged' => false); if($_session['user']['name']){ $response['logged'] = true; $response['loggedas'] = array( 'name' => $_SESSION['user']['name'], 'gravatar' => Chat::gravatarFromHash($_SESSION['user']['gravatar']) 14 P á g i n a

15 ); return $response; public static function logout(){ DB::query("DELETE FROM webchat_users WHERE name = '".DB::esc($_SESSION['user']['name'])."'"); $_SESSION = array(); unset($_session); return array('status' => 1); Este é o lugar onde todo o trabalho é feito. Lembre-se da instrução switch em ajax.php acima? Ele mapeia as acções apoiadas pelos métodos correspondentes da classe. Cada um destes métodos retorna uma matriz, tal como é posteriormente convertido para um objeto JSON com o json_encode interno () função (o que acontece na parte inferior do ajax.php). Quando o usuário faz login, o seu nome e gravatar ser salvo como elementos do array $ _SESSION, e ficam disponíveis sobre os pedidos consecutivos. Nós estaremos usando isso para validar se o usuário tem permissão para adicionar chats mais tarde. Você também pode ver como estamos preparando o hash gravatar. Isto é feito de acordo com o seu guia de melhores práticas e garante que, se a pessoa tenha configurado um Gravatar, será adequadamente exibidos. Chat.class.php Part 2 public static function submitchat($chattext){ if(!$_session['user']){ 15 P á g i n a

16 throw new Exception('Você não está logado'); if(!$chattext){ throw new Exception(' Você haven\'entrou em uma mensagem de bate-papo.'); $chat = new ChatLine(array( 'author' 'gravatar' 'text' => $_SESSION['user']['name'], => $_SESSION['user']['gravatar'], => $chattext )); // O método save retorna um objeto MySQLi $insertid = $chat->save()->insert_id; return array( 'status' => 1, 'insertid' => $insertid ); public static function getusers(){ if($_session['user']['name']){ $user = new ChatUser(array('name' => $_SESSION['user']['name'])); $user->update(); 16 P á g i n a

17 // Exclusão de chats com mais de 5 minutos e usuários inativos por 30 segundos DB::query("DELETE FROM webchat_lines WHERE ts < SUBTIME(NOW(),'0:5:0')"); DB::query("DELETE FROM webchat_users WHERE last_activity < SUBTIME(NOW(),'0:0:30')"); $result = DB::query('SELECT * FROM webchat_users ORDER BY name ASC LIMIT 18'); $users = array(); while($user = $result->fetch_object()){ $user->gravatar = Chat::gravatarFromHash($user- >gravatar,30); $users[] = $user; return array( 'users' => $users, 'total' => DB::query('SELECT COUNT(*) as cnt FROM webchat_users')->fetch_object()->cnt ); public static function getchats($lastid){ $lastid = (int)$lastid; $result = DB::query('SELECT * FROM webchat_lines WHERE id > '.$lastid.' ORDER BY id ASC'); 17 P á g i n a

18 $chats = array(); while($chat = $result->fetch_object()){ // Retornando a hora GMT (UTC), da criação de bate-papo: $chat->time = array( 'hours' 'minutes' => gmdate('h',strtotime($chat->ts)), => gmdate('i',strtotime($chat->ts)) ); $chat->gravatar = Chat::gravatarFromHash($chat- >gravatar); $chats[] = $chat; return array('chats' => $chats); public static function gravatarfromhash($hash, $size=23){ return 'http://www.gravatar.com/avatar/'.$hash.'?size='.$size.'&default='. urlencode('http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb ?size='.$size); Como você vai ver em a próxima parte da este tutorial, jquery envia uma getusers () o solicitem cada 15 segundos. Nós estamos usando esse para excluir chats mais velho do que 5 minutos e usuários inativos a partir da banco de dados. Nós poderíamos, potencialmente, excluir esses registros em getchats, mas que é solicitado uma vez a cada segundo e o tempo de processamento extra poderia impactar severamente o desempenho de o nosso app. 18 P á g i n a

19 Outra coisa pena notar, é que, no método getchats (), nós estamos usando a função de gmdate para a saída de um tempo GMT. In o frontend, nós usar os horas e minuto valores para alimentar o objeto de data JavaScript, e, como resultado de todas as vezes são exibidos em tempo local do usuário. 19 P á g i n a

20 Fazer um AJAX Web Chat (Part 2) CSS and jquery Na segunda parte deste tutorial em duas partes, estaremos criando o jquery e CSS final frente ao nosso Web chat AJAX. Na primeira parte, discutimos a PHP e MySQL lado. Agora vamos continuar de onde paramos da última vez. Os estilos de bate-papo são auto-suficientes e residem em chat.css. Estes estilos são independentes do restante da página, por isso é mais fácil de incorporar a janela de chat em um site existente. Você só precisa incluir a marcação HTML discutimos na semana passada, e incluem a folha de estilo e arquivos JavaScript. CSS chat.css - Parte 1: /* Principal recipiente bate-papo */ #chatcontainer{ width:510px; margin:100px auto; position:relative; /* Barra de Início (Top bar)*/ 20 P á g i n a

21 #chattopbar{ height:40px; background:url('../img/solid_gray.jpg') repeat-x #d0d0d0; border:1px solid #fff; margin-bottom:15px; position:relative; color:#777; text-shadow:1px 1px 0 #FFFFFF; #chattopbar.name{ position:absolute; top:10px; left:40px; #chattopbar img{ left:9px; position:absolute; top:8px; /* Bate-papo (Chats) */ #chatlineholder{ height:360px; width:350px; margin-bottom:20px; outline:none;.chat{ background:url('../img/chat_line_bg.jpg') repeat-x #d5d5d5; min-height:24px; padding:6px; border:1px solid #FFFFFF; padding:8px 6px 4px 37px; position:relative; margin:0 10px 10px 0;.chat:last-child{ margin-bottom:0; 21 P á g i n a

22 .chat.gravatar{ background:url('http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9 bb ?size=23') no-repeat; left:7px; position:absolute; top:7px;.chat img{ display:block; visibility:hidden; Começamos por denominar o div # chatcontainer. Centrada na página horizontalmente, com a ajuda de uma margem de automática. Como você viu na parte anterior do tutorial, esta div é dividido em uma barra superior, área de chats, área do usuário, e na barra inferior. A barra superior mostra as informações de login do usuário. É atribuído um posicionamento relativo de modo a que o botão avatar, nome e sair podem ser posicionados em conformidade. Depois vem o div que contém todos os chats - # chatlineholder. Esta div tem uma largura fixa e altura, e como você vai ver na parte jquery deste tutorial, estamos usando o plugin JScrollPane para transformá-lo em uma área de rolagem de fantasia com barras laterais personalizados. 22 P á g i n a

23 chat.css Part 2 /* Área do Usuário */ #chatusers{ background-color:#202020; border:1px solid #111111; height:360px; position:absolute; right:0; top:56px; width:150px; #chatusers.user{ 23 P á g i n a

24 background:url('http://www.gravatar.com/avatar/ad516503a11cd5ca435ac c9bb ?size=30') no-repeat 1px 1px #444444; border:1px solid #111111; float:left; height:32px; margin:10px px; width:32px; #chatusers.user img{ border:1px solid #444444; display:block; visibility:hidden; /* Bottom Bar */ #chatbottombar{ background:url('../img/solid_gray.jpg') repeat-x #d0d0d0; position:relative; padding:10px; border:1px solid #fff; #chatbottombar.tip{ position:absolute; width:0; height:0; 24 P á g i n a

25 border:10px solid transparent; border-bottom-color:#eeeeee; top:-20px; left:20px; #submitform{ display:none; Na segunda parte, o estilo do recipiente e as divs do usuário #chatusers. Cada usuário de bate-papo ativo é representado por um ícone de 32 por 32 px (gravatar). O único efeito é definido como um fundo, e quando as imagens de fundo reais são carregadas, que são mostrados de cima delas. Isso impede que a cintilação irritante que geralmente ocorreria antes da imagem ser carregada. O resto do código trata da barra inferior e as formas de enviar. Você pode achar interessante a forma como o div. A Dica é transformar em um triângulo CSS puro utilizando uma altura zero e largura, junto com um valor grande na fronteira. Eu já usei esse truque em tutoriais anteriores. chat.css Part 3 /* Substituindo os estilos padrão de JScrollPanel*/.jspVerticalBar{ background:none; width:20px;.jsptrack{ background-color:#202020; border:1px solid #111111; 25 P á g i n a

26 width:3px; right:-10px;.jspdrag { background:url('../img/slider.png') no-repeat; width:20px; left:-9px; height:20px!important; margin-top:-5px;.jspdrag:hover{ background-position:left bottom; /* Estilos adicionais */ #chatcontainer.bluebutton{ background:url('../img/button_blue.png') no-repeat; border:none!important; color:#516d7f!important; display:inline-block; font-size:13px; height:29px; text-align:center; text-shadow:1px 1px 0 rgba(255, 255, 255, 0.4); width:75px; margin:0; 26 P á g i n a

27 cursor:pointer; #chatcontainer.bluebutton:hover{ background-position:left bottom; Na última parte do código, substituir o estilo padrão da div JScrollPane. Por padrão, ele é mostrado com barras de rolagem roxo, o que não é muito apropriado para o nosso projeto. Em vez de codificação nosso próprio estilo a partir do zero, nós apenas incluir o default e substituir algumas das regras. Finalmente, você pode ver os estilos do botão azul. Pode-se atribuir essa classe a qualquer âncora regular ou botão, e você terá um botão azul bonito. jquery Movendo-se para a última etapa deste tutorial - o código jquery. O chat funciona através de escuta para eventos de login e enviar formulários (eo botão de logout), e com o agendamento do pedido AJAX de volta para o servidor para verificação de novas conversas e usuários. Como você viu na primeira parte do tutorial, na semana passada, no lado do PHP as requisições AJAX são manipulados por ajax.php. questões jquery um número de requisições AJAX: Registrando um usuário: isso é feito por uma única solicitação POST; Registrando um usuário fora: também uma única solicitação POST; Verificação para usuários logados: isso é feito uma vez a cada 15 segundos; Verificação de novos chats: uma requisição GET é disparado a cada segundo. Isso poderia significar uma carga pesada em seu servidor, é por isso que o script é otimizado no back-end, e dependendo da atividade do bate-papo, os pedidos são reduzidos para um a cada 15 segundos. 27 P á g i n a

28 Como você vai ver no código abaixo, temos definido wrapper personalizado para jquery $.get e $.post. que vai nos ajudar em não ter que preencher todos os parâmetros longos para a emissão de um pedido. Além disso, todo o código de bate-papo está organizada em um único objeto chamado chat. Trata-se de uma série de métodos úteis, que você vai ver nos fragmentos abaixo. script.js Part 1 $(document).ready(function(){ chat.init(); ); var chat = { // dados contém variáveis para uso na classe: data : { lastid : 0, noactivity : 0, // Init liga ouvintes de evento e configura timers: init : function(){ // Usa o plugin jquery texto padrão, incluídos na parte inferior: $('#name').defaulttext('nickname'); $('# ').defaulttext(' (Gravatars are Enabled)'); // Convertendo o div #chatlineholder em um JScrollPane, // e salvar API do plugin em chat.data: chat.data.jspapi = $('#chatlineholder').jscrollpane({ 28 P á g i n a

29 verticaldragminheight: 12, verticaldragmaxheight: 12 ).data('jsp'); // Nós usamos a variável trabalhando para evitar // vários envios de formulários: var working = false; // Registrando uma pessoa no bate-papo: $('#loginform').submit(function(){ if(working) return false; working = true; // Usando a nossa função tzpost wrapper function // (definido em baixo): $.tzpost('login',$(this).serialize(),function(r){ working = false; if(r.error){ chat.displayerror(r.error); else chat.login(r.name,r.gravatar); ); ); return false; O objetivo do método init () é ligar todos os manipuladores de eventos para o bate-papo e começar as funções de tempo de espera que são usados para programar as verificações para novas conversas e usuários on-line. Você pode ver que nós usamos nossas próprias funções 29 P á g i n a

30 wrapper - $.tzget and $.tzpost. Estes levantar o fardo de ter que especificar uma longa lista de parâmetros e metas para as solicitações do Ajax. script.js Part 2 // Enviar uma nova entrada de bate-papo: $('#submitform').submit(function(){ var text = $('#chattext').val(); if(text.length == 0){ return false; if(working) return false; working = true; // Atribuir um ID temporário para o bate-papo: var tempid = 't'+math.round(math.random()* ), params = { id author gravatar : tempid, : chat.data.name, : chat.data.gravatar, text : text.replace(/</g,'<').replace(/>/g,'>') ; // Usando nosso método addchatline para adicionar o bate-papo // a tela imediatamente, sem esperar // o pedido AJAX para completar: 30 P á g i n a

31 chat.addchatline($.extend({,params)); // Usando o nosso método de invólucro tzpost para enviar o bate-papo // através de uma solicitação POST AJAX: $.tzpost('submitchat',$(this).serialize(),function(r){ working = false; $('#chattext').val(''); $('div.chat-'+tempid).remove(); ); params['id'] = r.insertid; chat.addchatline($.extend({,params)); return false; ); // Desligar o usuário: $('a.logoutbutton').live('click',function(){ $('#chattopbar > span').fadeout(function(){ ); $(this).remove(); $('#submitform').fadeout(function(){ ); $('#loginform').fadein(); $.tzpost('logout'); 31 P á g i n a

32 return false; ); // Verificar se o usuário já está conectado (browser actualização) $.tzget('checklogged',function(r){ if(r.logged){ chat.login(r.loggedas.name,r.loggedas.gravatar); ); // Auto executar funções de tempo limite (function getchatstimeoutfunction(){ )(); chat.getchats(getchatstimeoutfunction); (function getuserstimeoutfunction(){ )(); chat.getusers(getuserstimeoutfunction);, Na segunda parte do script, vamos continuar com ouvintes de eventos de ligação. No formulário, você pode ver que quando o usuário adiciona um novo bate-papo, um temporário é criado e mostrado imediatamente, sem esperar que o pedido AJAX para ser concluído. Uma vez que a escrita tenha completado, o papo temporária é removida da tela. Isso dá aos usuários a sensação de que o bate-papo é muito rápido, enquanto o verdadeiro gravação é feita em segundo plano. Perto do fim do método init, corremos dois executores funções nomeadas auto. As próprias funções são passados como parâmetros para o respectivo chat.getchats () ou chat.getusers () método, de modo que o tempo limite adicionais podem ser programados (você pode ver isso na parte 5 do código). 32 P á g i n a

33 script.js Part 3 // O método de login esconde exibe os // doados de login do usuário e mostra o formulário de envio login : function(name,gravatar){ chat.data.name = name; chat.data.gravatar = gravatar; $('#chattopbar').html(chat.render('logintopbar',chat.data)); $('#loginform').fadeout(function(){ $('#submitform').fadein(); $('#chattext').focus(); );, // O método de renderização gera a marcação HTML // que é necessário para os outros métodos: render : function(template,params){ var arr = []; switch(template){ case 'logintopbar': arr = [ '<span><img src="',params.gravatar,'" width="23" height="23" />', '<span class="name">',params.name, 33 P á g i n a

34 rounded">logout</a></span>']; break; '</span><a href="" class="logoutbutton case 'chatline': arr = [ '<div class="chat chat-',params.id,' rounded"><span class="gravatar">'+ '<img src="',params.gravatar,'" width="23" height="23" '+ 'onload="this.style.visibility=\'visible\'" />', '</span><span class="author">',params.author, ':</span><span class="text">',params.text, '</span><span class="time">',params.time,'</span></div>']; break; case 'user': arr = [ '<div class="user" title="',params.name,'"><img src="',params.gravatar, '" width="30" height="30" onload="this.style.visibility=\'visible\'"'+ ' /></div>' ]; break; 34 P á g i n a

35 //concatenações // A única junção matriz é mais rápido do que várias return arr.join('');, Aqui, o método render () merece mais de nossa atenção. O que faz, é montar um modelo, dependendo do parâmetro molde passado. O método então cria e retorna o código HTML solicitado, incorporando os valores do segundo parâmetro - os Parâmetros objeto como necessário. Isto é utilizado pela maioria dos outros métodos aqui discutidos. script.js Part 4 // O método addchatline adicionar uma entrada de bate-papo para a //página. addchatline : function(params){ // Todos os horários são exibidos no fuso horário do usuário var d = new Date(); if(params.time) { // PHP retorna a hora em UTC (GMT). Vamos utilizá-lo //para alimentar o data // objeto e depois mostrar em fuso horário do usuário. // JavaScript e converte e para nós. d.setutchours(params.time.hours,params.time.minutes); params.time = (d.gethours() < 10? '0' : '' ) + d.gethours()+':'+ 35 P á g i n a

36 (d.getminutes() < 10? '0':'') + d.getminutes(); var markup = chat.render('chatline',params), exists = $('#chatlineholder.chat-'+params.id); if(exists.length){ exists.remove(); if(!chat.data.lastid){ / / Se este for o primeiro de chat, remover o parágrafo: $('#chatlineholder p').remove(); // Se isto não é um bate-papo temporário: if(params.id.tostring().charat(0)!= 't'){ var previous = $('#chatlineholder.chat-'+(+params.id - 1)); if(previous.length){ previous.after(markup); else chat.data.jspapi.getcontentpane().append(markup); else chat.data.jspapi.getcontentpane().append(markup); // Como nós adicionamos novos conteúdos, precisamos // reinicializar o plugin JScrollPanel: chat.data.jspapi.reinitialise(); 36 P á g i n a

37 chat.data.jspapi.scrolltobottom(true);, O método addchat () leva um objeto de parâmetro com o conteúdo do bate-papo, o autor e gravatar, e insere a nova linha de bate-papo em local apropriado no # chatcontainer div. Cada chat (se não for um temporário) tem uma identificação única que é atribuído pelo MySQL. Essa identificação é atribuído como um nome de classe para o bate-papo na forma de chat-123. Quando o método addchat () é executado, ele verifica se existe a entrada de bate-papo anterior (para chat-123 que iria verificar chat-122). Se ela existe, ele insere o novo bate-papo depois. Se isso não acontecer, ele só acrescenta à div. Esta técnica simples consegue inserir todos os bate-papos na ordem certa e mantê-los dessa forma. Tempo em fuso horário do Usuário script.js Part 5 // Este método solicita as últimas conversas // (desde lastid), e as adiciona à página. getchats : function(callback){ $.tzget('getchats',{lastid: chat.data.lastid,function(r){ for(var i=0;i<r.chats.length;i++){ chat.addchatline(r.chats[i]); 37 P á g i n a

38 if(r.chats.length){ chat.data.noactivity = 0; chat.data.lastid = r.chats[i-1].id; else{ // Se não foram recebidas conversas, incremento // o contador noactivity. chat.data.noactivity++; if(!chat.data.lastid){ chat.data.jspapi.getcontentpane().html('<p class="nochats">no chats yet</p>'); // A definição de um limite de tempo para a próxima // solicitação, dependendo da atividade de bate-papo: var nextrequest = 1000; // 2 segundos if(chat.data.noactivity > 3){ nextrequest = 2000; if(chat.data.noactivity > 10){ nextrequest = 5000; 38 P á g i n a

Posicionamento e Layout com CSS

Posicionamento e Layout com CSS Posicionamento e Layout com CSS Esquemas de posicionamento: absolute e relative Construção de layouts com divs e regras CSS Existem quatro tipos de posicionamento em CSS: estático, relativo, absoluto

Leia mais

Construindo um sistema simples de cadastro de fornecedores em PHP e MySQL.

Construindo um sistema simples de cadastro de fornecedores em PHP e MySQL. Construindo um sistema simples de cadastro de fornecedores em PHP e MySQL. Procuraremos mostrar os principais procedimentos para fazer um cadastro de registros numa base de dados MySQL utilizando a linguagem

Leia mais

English Português. By erickalves 25 Julho, 2009-01:08. Devido à política (#) de segurança. Encontrar Blogs Crie o seu blog de graça Ganhe prêmios

English Português. By erickalves 25 Julho, 2009-01:08. Devido à política (#) de segurança. Encontrar Blogs Crie o seu blog de graça Ganhe prêmios Encontrar Blogs Crie o seu blog de graça Ganhe prêmios English Português Cel: +55 (21) 7417-9918 E-mail: erick@lithic.com.br Inserindo dados no banco em PHP + Ajax + jquery + Mysql + Validação (/pt-br/blog/tutoriais

Leia mais

Desenvolvimento de Aplicações para Internet Aula 11

Desenvolvimento de Aplicações para Internet Aula 11 Desenvolvimento de Aplicações para Internet Aula 11 Celso Olivete Júnior olivete@fct.unesp.br www.fct.unesp.br/docentes/dmec/olivete jquery Na aula passada: Selecionando atributos Manipulando CSS Inserindo

Leia mais

O objetivo é criar um tema padrão com 3 colunas, cabeçalho, barra de menu e rodapé:

O objetivo é criar um tema padrão com 3 colunas, cabeçalho, barra de menu e rodapé: Este artigo tem por objetivo mostrar de maneira simples e direta o passo-a-passo de como criar um tema para XOOPS de maneira rápida e simples. Não vou adentrar a explicação de código, vou postando as estruturas

Leia mais

Programação para Internet I

Programação para Internet I Programação para Internet I Aula 6 PHP: Include, Require, Variáveis de ambiente Prof. Teresinha Letícia da Silva leticiasfw@yahoo.com.br Inclusão de arquivos com Include e Require no PHP Uma técnica muito

Leia mais

Bool setcookie (string nome [, string valor [, int validade [, string caminho [, string dominio [, int seguro]]]]] )

Bool setcookie (string nome [, string valor [, int validade [, string caminho [, string dominio [, int seguro]]]]] ) Disciplina: Tópicos Especiais em TI PHP Este material foi produzido com base nos livros e documentos citados abaixo, que possuem direitos autorais sobre o conteúdo. Favor adquiri-los para dar continuidade

Leia mais

CAUETEC INFORMÁTICA Rua Serra Talhada, 153 Vila Diana - 04835-150 São Paulo. Fone: 3441-6836 Site: www.cauetec.com.br E-mail: cauetec@cauetec.com.

CAUETEC INFORMÁTICA Rua Serra Talhada, 153 Vila Diana - 04835-150 São Paulo. Fone: 3441-6836 Site: www.cauetec.com.br E-mail: cauetec@cauetec.com. 3 de 13 Índice 1. Mapa CSS e legenda das principais imagens que compõe as paginas...4 a. Conhecimentos desejáveis:...4 b. Modelos Clássico e Fundo Fixo:...4 c. Para o designer o que muda entre o modelo

Leia mais

Programação Web com PHP. Prof. Wylliams Barbosa Santos wylliamss@gmail.com Optativa IV Projetos de Sistemas Web

Programação Web com PHP. Prof. Wylliams Barbosa Santos wylliamss@gmail.com Optativa IV Projetos de Sistemas Web Programação Web com PHP Prof. Wylliams Barbosa Santos wylliamss@gmail.com Optativa IV Projetos de Sistemas Web Agenda O que é PHP? O que da pra fazer com PHP? Como a web funciona? Onde, quando e por que

Leia mais

DOCUMENTAÇÃO DO FRAMEWORK - versão 2.0

DOCUMENTAÇÃO DO FRAMEWORK - versão 2.0 DOCUMENTAÇÃO DO FRAMEWORK - versão 2.0 Índice 1 - Objetivo 2 - Descrição do ambiente 2.1. Tecnologias utilizadas 2.2. Estrutura de pastas 2.3. Bibliotecas já incluídas 3 - Características gerais 4 - Criando

Leia mais

Aula 4 Modelo CSS. Efeito cascata. Ordem em cascata. Declarações normais e importantes. Exemplo. Especificidade de um seletor 30/08/2013

Aula 4 Modelo CSS. Efeito cascata. Ordem em cascata. Declarações normais e importantes. Exemplo. Especificidade de um seletor 30/08/2013 Efeito cascata Aula 4 Modelo CSS Curso: Técnico em Informática / 2º módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Fontes das folhas de estilo Autor Usuário Agente do usuário

Leia mais

Iniciando com Zend_Auth By Rob Allen, www.akrabat.com Document Revision 1.0.8 Copyright 2007

Iniciando com Zend_Auth By Rob Allen, www.akrabat.com Document Revision 1.0.8 Copyright 2007 Iniciando com Zend_Auth By Rob Allen, www.akrabat.com Document Revision 1.0.8 Copyright 2007 Este tutorial é destinado a oferecer uma bem básica introdução para o uso do componente Zend_Auth com o Zend

Leia mais

Programação para Internet

Programação para Internet Programação para Internet Aula 09 Os direitos desta obra foram cedidos à Universidade Nove de Julho Este material é parte integrante da disciplina oferecida pela UNINOVE. O acesso às atividades, conteúdos

Leia mais

Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes

Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes Roteiro 2: Introdução a Linguagem HTML Desenvolvimento de Sites com PHP e Mysql Neste roteiro é explorada a linguagem HTML. A linguagem HTML (Hypertext Markup Language) é amplamente utilizada na construção

Leia mais

Prof Evandro Manara Miletto. parte 2

Prof Evandro Manara Miletto. parte 2 Prof Evandro Manara Miletto parte 2 Sumário Estruturas de Controle Eventos Estruturas de controle características Estruturas de controle (ou condicionais) são executadas caso um teste seja atendido Permite

Leia mais

JavaScript. JavaScript é uma linguagem de script usada em navegadores web. É uma linguagem dinâmica, estruturada e orientada em objetos.

JavaScript. JavaScript é uma linguagem de script usada em navegadores web. É uma linguagem dinâmica, estruturada e orientada em objetos. JavaScript JavaScript é uma linguagem de script usada em navegadores web. É uma linguagem dinâmica, estruturada e orientada em objetos. Pode ser usada dentro do próprio arquivo HTML ou estruturada em um

Leia mais

Edição de Setembro. Validação formulários com PHP. ... revistamensal de programação Open Source

Edição de Setembro. Validação formulários com PHP. ... revistamensal de programação Open Source Edição de Setembro... revistamensal de programação Open Source Apresentação Quem somos Submeter Pesquisar Serviços Contactos Artigo 4 / 58 Selecione o artigo pretendido Validação formulários com PHP Artigos

Leia mais

mkdir /srv/www/default/html/calculadora/imagens mkdir /srv/www/default/html/calculadora/blocos

mkdir /srv/www/default/html/calculadora/imagens mkdir /srv/www/default/html/calculadora/blocos Programando em PHP www.guilhermepontes.eti.br lgapontes@gmail.com Criando uma Calculadora Primeiramente deve se criar uma estrutura para armazenar os arquivos necessários para o funcionamento da calculadora.

Leia mais

Manual de Utilização Chat Intercâmbio

Manual de Utilização Chat Intercâmbio Manual de Utilização Chat Intercâmbio 1 INDICE 1 Chat Intercâmbio... 6 1.1 Glossário de Termos Utilizados.... 6 1.2 Definições de uma Sala de Chat... 7 1.3 Como Acessar o Chat Intercâmbio... 8 1.4 Pré-requisitos

Leia mais

R E L A T Ó R I O D A A P R E S E N T A Ç Ã O J Q U E R Y

R E L A T Ó R I O D A A P R E S E N T A Ç Ã O J Q U E R Y R E L A T Ó R I O D A A P R E S E N T A Ç Ã O J Q U E R Y SI S TE MAS D IS TR I BUÍD O S E TO LERÂ NC IA A FA L HA S Ângelo Santos M 4189 André Elias M4272 ÍNDICE Arquitectura e funcionamento... 3 Ferramentas...

Leia mais

Trabalhando com conexão ao banco de dados MySQL no Lazarus. Prof. Vitor H. Migoto de Gouvêa Colégio IDESA 2011

Trabalhando com conexão ao banco de dados MySQL no Lazarus. Prof. Vitor H. Migoto de Gouvêa Colégio IDESA 2011 Trabalhando com conexão ao banco de dados MySQL no Lazarus Prof. Vitor H. Migoto de Gouvêa Colégio IDESA 2011 Edição 4 O Componente Trabalhando com conexão ao banco de dados MySQL no Lazarus Ano: 03/2011

Leia mais

Programação web Prof. Wladimir

Programação web Prof. Wladimir Programação web Prof. Wladimir Linguagem PHP Cookie e Sessão @wre2008 1 Sumário Header; Cookie; Sessão; Exemplos. @wre2008 2 Header Esta função permite que um script php redirecione para outra página.

Leia mais

Sumário. HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1

Sumário. HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1 Sumário HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1 Linguagem HTML HTML é a abreviação de HyperText Markup Language, que pode ser traduzido como Linguagem de Marcação de Hipertexto. Não é uma linguagem

Leia mais

FORMULÁRIOS ACESSÍVEIS

FORMULÁRIOS ACESSÍVEIS Ministério da Educação Secretaria de Educação Profissional e Tecnológica IFRS Instituto Federal de Educação, Ciência e Tecnologia do Rio Grande do Sul NAV Núcleo de Acessibilidade Virtual FORMULÁRIOS ACESSÍVEIS

Leia mais

Vamos criar uma nova Página chamada Serviços. Clique em Adicionar Nova.

Vamos criar uma nova Página chamada Serviços. Clique em Adicionar Nova. 3.5 Páginas: Ao clicar em Páginas, são exibidas todas as páginas criadas para o Blog. No nosso exemplo já existirá uma página com o Título Página de Exemplo, criada quando o WorPress foi instalado. Ao

Leia mais

Material de apoio a aulas de Desenvolvimento Web. Tutorial Java WEB JSP & HTML & CSS & CLASSE & OBJETOS. AAS - www.aas.pro.

Material de apoio a aulas de Desenvolvimento Web. Tutorial Java WEB JSP & HTML & CSS & CLASSE & OBJETOS. AAS - www.aas.pro. Material de apoio a aulas de Desenvolvimento Web Tutorial Java WEB JSP & HTML & CSS & CLASSE & OBJETOS AAS - www.aas.pro.net Março-2012 Este pequeno tutorial tem como objetivo conduzir o programador passo-a-passo

Leia mais

Desenvolvedor Web Docente André Luiz Silva de Moraes

Desenvolvedor Web Docente André Luiz Silva de Moraes Roteiro 2: Introdução a Linguagem HTML Neste roteiro é explorada a linguagem HTML. A linguagem HTML (Hypertext Markup Language) é amplamente utilizada na construção de páginas de internet e é responsável

Leia mais

Controle de acesso. http://www.larback.com.br. .com.br

Controle de acesso. http://www.larback.com.br. .com.br http://www.larback Controle de acesso Construiremos um sistema simples para cadastro de links. O sistema terá uma página pública (onde serão exibidos os links) e uma área administrativa, onde os usuários

Leia mais

Estudo Dirigido - Parte 1

Estudo Dirigido - Parte 1 Linguagem Java para Web - JSP Professora Lucélia Estudo Dirigido - Parte 1 Na primeira parte deste tutorial, vamos receber os dados de um formulário e verificar se os dados foram ou não preenchidos. Se

Leia mais

Personalizando o Dreamweaver

Personalizando o Dreamweaver Personalizando o Dreamweaver - Acessando o painel de Preferências: O painel de preferências possui todas as configurações que o Dreamweaver oferece. Para quem é usuário de PC, poderá acessar pelo menu

Leia mais

Plano de Aula - Dreamweaver CS6 - cód.5232 24 Horas/Aula

Plano de Aula - Dreamweaver CS6 - cód.5232 24 Horas/Aula Plano de Aula - Dreamweaver CS6 - cód.5232 24 Horas/Aula Aula 1 Capítulo 1 - Introdução ao Dreamweaver CS6 Aula 2 Continuação do Capítulo 1 - Introdução ao Dreamweaver CS6 Aula 3 Capítulo 2 - Site do Dreamweaver

Leia mais

A barra de menu a direita possibilita efetuar login/logout do sistema e também voltar para a página principal.

A barra de menu a direita possibilita efetuar login/logout do sistema e também voltar para a página principal. MANUAL DO SISCOOP Sumário 1 Menu de Navegação... 3 2 Gerenciar País... 5 3- Gerenciamento de Registro... 8 3.1 Adicionar um registro... 8 3.2 Editar um registro... 10 3.3 Excluir um registro... 11 3.4

Leia mais

Roteiro 2: Conceitos de Tags HTML

Roteiro 2: Conceitos de Tags HTML Roteiro 2: Conceitos de Tags HTML Objetivos Detalhar conceitos sobre TAGS HTML: elementos, atributos, elemento vazio, links. Implementar páginas de internet com uso da linguagem HTML; Ferramentas Necessárias

Leia mais

Escrito por Sáb, 15 de Outubro de 2011 01:19 - Última atualização Seg, 26 de Março de 2012 03:32

Escrito por Sáb, 15 de Outubro de 2011 01:19 - Última atualização Seg, 26 de Março de 2012 03:32 Preço R$ 129.00 Compre aqui Curso de PHP O.O usando Adodb, aprenda a criar uma loja virtual (carrinho de compras) até a geração do boleto bancário. Usei: Mysql e Dreamweaver cs4. São 163 videoaulas, 2

Leia mais

Utilizando Janelas e Frames

Utilizando Janelas e Frames Utilizando Janelas e Frames Aprenderemos agora algumas técnicas mais específicas para fazer o JavaScript trabalhar com várias partes das páginas e navegadores da Web. Controlando janelas com objetos Já

Leia mais

MANUAL DE MEMBRO COMUNIDADE DO AMIGO

MANUAL DE MEMBRO COMUNIDADE DO AMIGO SUMÁRIO Efetuando o Login na comunidade... 3 Esqueceu sua senha?... 3 Página Principal... 4 Detalhando o item Configurações... 5 Alterar Foto... 5 Alterar Senha... 5 Dados Pessoais... 6 Configurações de

Leia mais

jquery André Tavares da Silva andre.silva@udesc.br

jquery André Tavares da Silva andre.silva@udesc.br jquery André Tavares da Silva andre.silva@udesc.br jquery jquery é uma biblioteca em JavaScript; Seu objetivo é simplificar a programação em JavaScript; jquery foi desenvolvida para ser de aprendizado

Leia mais

PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS ARMAZENAMENTO EM BD NO DM. Prof. Angelo Augusto Frozza, M.Sc. http://about.me/tilfrozza

PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS ARMAZENAMENTO EM BD NO DM. Prof. Angelo Augusto Frozza, M.Sc. http://about.me/tilfrozza PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS ARMAZENAMENTO EM BD NO DM Prof. Angelo Augusto Frozza, M.Sc. http://about.me/tilfrozza ROTEIRO Introdução App de exemplo Implementação do exemplo Testes realizados

Leia mais

Basicamente iremos precisar de uma base de dados na qual iremos armazenar os registros feitos pelos vistantes: Vamos armazenar os seguintes dados:

Basicamente iremos precisar de uma base de dados na qual iremos armazenar os registros feitos pelos vistantes: Vamos armazenar os seguintes dados: Livro de Visitas Basicamente iremos precisar de uma base de dados na qual iremos armazenar os registros feitos pelos vistantes: Vamos armazenar os seguintes dados: ID nome email mensagem data O código

Leia mais

Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens

Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens Tag para inserir imagens e HTML O modelo CSS Noções fundamentais e funcionamento do CSS Incluindo estilos em uma página Sintaxe

Leia mais

PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS ARMAZENAMENTO EM BD NO DM. Prof. Angelo Augusto Frozza, M.Sc. http://about.me/tilfrozza

PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS ARMAZENAMENTO EM BD NO DM. Prof. Angelo Augusto Frozza, M.Sc. http://about.me/tilfrozza PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS ARMAZENAMENTO EM BD NO DM Prof. Angelo Augusto Frozza, M.Sc. http://about.me/tilfrozza ROTEIRO Introdução App de exemplo Implementação do exemplo Testes realizados

Leia mais

Programando em PHP. Conceitos Básicos

Programando em PHP. Conceitos Básicos Programando em PHP www.guilhermepontes.eti.br lgapontes@gmail.com Conceitos Básicos Todo o escopo deste estudo estará voltado para a criação de sites com o uso dos diversos recursos de programação web

Leia mais

<link rel=stylesheet type=text/css href=imagens.css /> Este código é responsável pela visualização html. exibição de Imagens

Leia mais

Área de Administração

Área de Administração Área de Administração versão 1.1 Partir de 2012/01/14 aplica-se para a versão phpcontact 1.2.x www.phpcontact.net Geral A área de administração é utilizado para uma fácil configuração do software elaboraçao

Leia mais

WEBDESIGN. Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira

WEBDESIGN. Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira WEBDESIGN Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira Recursos avançados com CSS Uma vez entendido o uso básico e treinado muito, chegou

Leia mais

Aula 9: Fundamentos do JQuery Fonte: Plano de Aula Oficial da Disciplina

Aula 9: Fundamentos do JQuery Fonte: Plano de Aula Oficial da Disciplina Programação para Internet Rica 1 Aula 9: Fundamentos do JQuery Fonte: Plano de Aula Oficial da Disciplina Objetivo: Capacitar o aluno para o trabalho com o framework JQuery. INTRODUÇÃO JQuery é uma biblioteca

Leia mais

Coleção - Análises de email marketing em clientes de email

Coleção - Análises de email marketing em clientes de email Coleção - Análises de email marketing em clientes de email Introdução Nesta sexta e penúltima edição da Coletânea de Análises de Email Marketing em Clientes de Email, apresentamos os estudos dos clientes

Leia mais

Ajax Asynchronous JavaScript and Xml

Ajax Asynchronous JavaScript and Xml Ajax Asynchronous JavaScript and Xml Ajax permite construir aplicações Web mais interativas, responsivas, e fáceis de usar que aplicações Web tradicionais. Numa aplicação Web tradicional quando se prime

Leia mais

Programação WEB II. Sessions e Cookies. progweb2@thiagomiranda.net. Thiago Miranda dos Santos Souza

Programação WEB II. Sessions e Cookies. progweb2@thiagomiranda.net. Thiago Miranda dos Santos Souza Sessions e Cookies progweb2@thiagomiranda.net Conteúdos Os materiais de aula, apostilas e outras informações estarão disponíveis em: www.thiagomiranda.net Cookies e Sessions Geralmente, um bom projeto

Leia mais

jquery Apostila Básica

jquery Apostila Básica jquery Apostila Básica INTRODUÇÃO 3 CAPÍTULO 1 POR ONDE INICIAR 3 CAPÍTULO 2 MEU PRIMEIRO SCRIPT! 4 EXERCÍCIOS...5 CAPÍTULO 3 ADICIONANDO CSS 6 EXERCÍCIOS...7 CAPÍTULO 4 MODIFICANDO APENAS PARTE DO DOCUMENTO

Leia mais

Layouts de páginas com HTML e CSS

Layouts de páginas com HTML e CSS Layouts de páginas com HTML e CSS Layouts de Páginas com CSS.... 2 Layout com tamanho Líquido... 2 Layout com tamanho Fixo... 3 Desenvolvendo um layout com tamanho fixo.... 5 Layouts de Páginas com CSS.

Leia mais

Apostila CSS - Introdução à folha de estilos

Apostila CSS - Introdução à folha de estilos Apostila CSS - Introdução à folha de estilos Este documento é propriedade intelectual do Núcleo de Educação a distância da NRsystem e distribuído sob os seguintes termos: 1. As apostilas publicadas pelo

Leia mais

PHP. Hypertext Pre-Processor

PHP. Hypertext Pre-Processor PHP Hypertext Pre-Processor O que é o PHP? Uma linguagem de scripting é uma linguagem cujo código não tem de ser compilado para ser executado! O código escrito é interpretado em tempo de execução para

Leia mais

Diazo. Módulo 7 Tema Diazo

Diazo. Módulo 7 Tema Diazo Diazo Módulo 7 Tema Diazo Diazo >> O que é? É uma ferramenta para criação de temas. Permite que o designer construa um tema puramente HTML, sem se preocupar com as particularidades do Plone. Funciona através

Leia mais

Observações importantes:

Observações importantes: Fundação CECIERJ - Vice Presidência de Educação Superior a Distância Curso de Tecnologia em Sistemas de Computação Disciplina Criação de Páginas de WEB AD1 1 semestre de 2014. Observações importantes:

Leia mais

Portal Contador Parceiro

Portal Contador Parceiro Portal Contador Parceiro Manual do Usuário Produzido por: Informática Educativa 1. Portal Contador Parceiro... 03 2. Acesso ao Portal... 04 3. Profissionais...11 4. Restrito...16 4.1 Perfil... 18 4.2 Artigos...

Leia mais

PROJETO PEDAGÓGICO DE CURSOS

PROJETO PEDAGÓGICO DE CURSOS 1 de 6 PROJETO PEDAGÓGICO DE CURSOS BURITREINAMENTOS MANAUS-AM NOVEMBRO / 2014 2 de 6 PACOTES DE TREINAMENTOS BURITECH A Buritech desenvolveu um grupo de pacotes de treinamentos, aqui chamados de BuriPacks,

Leia mais

4.14 - Imagens: src único atributo que não pode ser omitido neste TAG Nota: img

4.14 - Imagens: <img src=...> src <img src=tecnologia.jpg> único atributo que não pode ser omitido neste TAG Nota: img 4.14 - Imagens: O TAG utilizado para a inclusão de imagens em páginas html é o: O atributo src especifica o local onde está a imagem e o seu nome. Nas páginas pessoais é mais comum o uso

Leia mais

QUEM FEZ O TRABALHO?

QUEM FEZ O TRABALHO? Introdução a Linguagem HTML: Conceitos Básicos e Estrutura ANA PAULAALVES DE LIMA 1 QUEM FEZ O TRABALHO? Com as tagsaprendidas hoje, faça uma página HTML sobre você com as seguintes informações: Seu nome

Leia mais

Lista de Revisão. 3. Analise a afirmativa a seguir como verdadeira ou falsa e justifique.

Lista de Revisão. 3. Analise a afirmativa a seguir como verdadeira ou falsa e justifique. Lista de Revisão 1. Nos sistemas web, geralmente os usuários apresentam dois problemas típicos, a desorientação e a sobrecarga cognitiva. Discorra sobre esses problemas. 2. Apresente as principais diferenças

Leia mais

Sumário Aspectos Básicos... 3 Como Empresas usam o Facebook... 3 Introdução ao Facebook... 4 Criando um Cadastro... 5 Confirmando E-mail...

Sumário Aspectos Básicos... 3 Como Empresas usam o Facebook... 3 Introdução ao Facebook... 4 Criando um Cadastro... 5 Confirmando E-mail... FACEBOOK Sumário Aspectos Básicos... 3 Como Empresas usam o Facebook... 3 Introdução ao Facebook... 4 Criando um Cadastro... 5 Confirmando E-mail... 8 Características do Facebook... 10 Postagens... 11

Leia mais

#Aula Nº 4 XHTML+CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula4.pdf Vinicius Fiorio Custódio samus@samus.com.

#Aula Nº 4 XHTML+CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula4.pdf Vinicius Fiorio Custódio samus@samus.com. #Aula Nº 4 XHTML+CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula4.pdf Vinicius Fiorio Custódio samus@samus.com.br #Objetivo Revisar os conceitos mais importantes da XHTML e do CSS. Desenvolver

Leia mais

13 Conectando PHP com MySQL 13.1 Introdução

13 Conectando PHP com MySQL 13.1 Introdução 13 Conectando PHP com MySQL 13.1 Introdução Agora que você já tem uma idéia básica de comandos MySQL, poderemos ver como a linguagem PHP pode interagir com este banco de dados através de inúmeras funções.

Leia mais

UNIVERSIDADE FEDERAL DO AMAPÁ PRÓ REITORIA DE ADMINISTRAÇÃO E PLANEJAMENTO DEPARTAMENTO DE INFORMÁTICA. Manual do Moodle- Sala virtual

UNIVERSIDADE FEDERAL DO AMAPÁ PRÓ REITORIA DE ADMINISTRAÇÃO E PLANEJAMENTO DEPARTAMENTO DE INFORMÁTICA. Manual do Moodle- Sala virtual UNIVERSIDADE FEDERAL DO AMAPÁ PRÓ REITORIA DE ADMINISTRAÇÃO E PLANEJAMENTO DEPARTAMENTO DE INFORMÁTICA Manual do Moodle- Sala virtual UNIFAP MACAPÁ-AP 2012 S U M Á R I O 1 Tela de Login...3 2 Tela Meus

Leia mais

4.14 - Imagens: SRC único atributo que não pode ser omitido neste tag Nota: img

4.14 - Imagens: <IMG SRC=...> SRC <IMG SRC=tecnologia.jpg> único atributo que não pode ser omitido neste tag Nota: img 4.14 - Imagens: O tag utilizado para a inclusão de imagens em páginas html é o: O atributo SRC especifica o local aonde está a imagem e o seu nome. Nas páginas pessoais é mais comum o uso

Leia mais

Universidade Federal de Viçosa CPD - Central de Processamento de Dados Divisão de Desenvolvimento de Sistemas

Universidade Federal de Viçosa CPD - Central de Processamento de Dados Divisão de Desenvolvimento de Sistemas Universidade Federal de Viçosa CPD - Central de Processamento de Dados Divisão de Desenvolvimento de Sistemas Manual de padrões e convenções para desenvolvimento de sistemas PHP Versão Conteúdo 1.

Leia mais

SIMULADOS & TUTORIAIS

SIMULADOS & TUTORIAIS SIMULADOS & TUTORIAIS TUTORIAIS HTML Como criar links em HTML Copyright 2013 Todos os Direitos Reservados Jorge Eider F. da Silva Proibida a reprodução deste documento no todo ou em parte por quaisquer

Leia mais

Desenvolvimento de Sistemas Web Prof. Leandro Roberto. Aula 18 JavaScript: Eventos MySQL PHP (insert, update e delete)

Desenvolvimento de Sistemas Web Prof. Leandro Roberto. Aula 18 JavaScript: Eventos MySQL PHP (insert, update e delete) Desenvolvimento de Sistemas Web Prof. Leandro Roberto Aula 18 JavaScript: Eventos MySQL PHP (insert, update e delete) JavaScript Eventos Alguns eventos de uma página HTML podem ser interceptados e programados

Leia mais

FERRAMENTAS DE COLABORAÇÃO CORPORATIVA

FERRAMENTAS DE COLABORAÇÃO CORPORATIVA FERRAMENTAS DE COLABORAÇÃO CORPORATIVA Criação de Formulários no Google Drive Sumário (Clique sobre a opção desejada para ir direto à página correspondente) Criação de Formulários no Google Drive Introdução...

Leia mais

Faça um Site PHP 5.2 com MySQL 5.0 Comércio Eletrônico

Faça um Site PHP 5.2 com MySQL 5.0 Comércio Eletrônico Editora Carlos A. J. Oliviero Faça um Site PHP 5.2 com MySQL 5.0 Comércio Eletrônico Orientado por Projeto 1a Edição 2 Reimpressão São Paulo 2011 Érica Ltda. Noções Livrarse Preparação muitas muita Sumário

Leia mais

PROGRAMAÇÃO MANUAL DE INSTRUÇÕES SEJA BEM VINDO VERSÃO 1.4 10/01/2013 UDS SOLUÇÕES DIGITAIS

PROGRAMAÇÃO MANUAL DE INSTRUÇÕES SEJA BEM VINDO VERSÃO 1.4 10/01/2013 UDS SOLUÇÕES DIGITAIS VERSÃO 1.4 10/01/2013 UDS SOLUÇÕES DIGITAIS PROGRAMAÇÃO MANUAL DE INSTRUÇÕES Instruções, métodos e recomendações para desenvolvimento de sistemas na UDS. 1 Sumário Apresentação... 3 Estrutura de pastas:...

Leia mais

Coleção - Análises de email marketing em clientes de email

Coleção - Análises de email marketing em clientes de email Coleção - Análises de email marketing em clientes de email Introdução O Gmail possui duas versões distintas para seu webmail: uma mais recente, que é a versão atual utilizada pelos usuários de Gmail, e

Leia mais

Colégio da Policia Militar do Estado do Tocantins. HTML5 e CSS3 Formulários Prof. Gleison Batista de Sousa

Colégio da Policia Militar do Estado do Tocantins. HTML5 e CSS3 Formulários Prof. Gleison Batista de Sousa Colégio da Policia Militar do Estado do Tocantins HTML5 e CSS3 Formulários Prof. Gleison Batista de Sousa Formulários Avançando no HTML e CSS Nesta aula vamos aprender como criar uma página de contato

Leia mais

MANUAL MIKOGO 1. VISÃO GERAL

MANUAL MIKOGO 1. VISÃO GERAL 1. VISÃO GERAL 1.1 Informações sobre o Mikogo: Mikogo é uma ferramenta de uso e manipulação simples, permite compartilhamento de arquivos, visualização da área de trabalho remota ou compartilhamento de

Leia mais

Internet e Programação Web

Internet e Programação Web COLÉGIO ESTADUAL PEDRO MACEDO Ensino Profissionalizante Internet e Programação Web 3 Técnico Prof. Cesar 2014 1. PHP e MySQL O MySQL é o gerenciador de banco de dados mais usado com o PHP. Existem muitas

Leia mais

MANUAL DE BOAS PRÁTICAS

MANUAL DE BOAS PRÁTICAS MANUAL DE BOAS PRÁTICAS Este manual é de uso exclusivo de clientes, parceiros, fornecedores e colaboradores da Dinamize. No caso de dúvidas, entre em contato através do e-mail suporte@dinamize.com. HTML

Leia mais

Autor: Ricardo Francisco Minzé Júnior - ricardominze@yahoo.com.br Desenvolvendo aplicações em camadas com PHP 5.

Autor: Ricardo Francisco Minzé Júnior - ricardominze@yahoo.com.br Desenvolvendo aplicações em camadas com PHP 5. Desenvolvendo aplicações em camadas com PHP 5. Talvez a primeira vista você ache estranha a palavra Camada em programação, mas o que vem a ser Camada? Segundo o dicionário: Camada 1 - Qualquer matéria

Leia mais

DHTML - MÓDULO 1: VISÃO GERAL E INTRODUÇÃO Por Marcelo Camargo Visão geral

DHTML - MÓDULO 1: VISÃO GERAL E INTRODUÇÃO Por Marcelo Camargo Visão geral Apostila retirada de http://www.ibestmasters.com.br DHTML - MÓDULO 1: VISÃO GERAL E INTRODUÇÃO Por Marcelo Camargo Visão geral A tecnologia DHTML (Dynamic HTML) foi apresentada inicialmente como um conjunto

Leia mais

Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2

Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2 Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2 Objetivo. O objetivo da disciplina é conhecer os princípios da programação de

Leia mais

AULA APLICAÇÕES PARA WEB SESSÕES E LOGIN E SENHA

AULA APLICAÇÕES PARA WEB SESSÕES E LOGIN E SENHA Sumário Construção de sistema Administrativo... 1 Sistema de Login... 2 SQL INJECTION... 2 Técnicas para Evitar Ataques... 2 Formulário de Login e Senha fará parte do DEFAULT... 5 LOGAR... 5 boas... 6

Leia mais

02 - Usando o SiteMaster - Informações importantes

02 - Usando o SiteMaster - Informações importantes 01 - Apresentação do SiteMaster - News Edition O SiteMaster foi desenvolvido para ser um sistema simples de gerenciamento de notícias, instalado em seu próprio computador e com configuração simplificada,

Leia mais

Guia Rápido de Utilização. Ambiente Virtual de Aprendizagem. Perfil Aluno

Guia Rápido de Utilização. Ambiente Virtual de Aprendizagem. Perfil Aluno Guia Rápido de Utilização Ambiente Virtual de Aprendizagem Perfil Aluno 2015 APRESENTAÇÃO O Moodle é um Ambiente Virtual de Aprendizagem (AVA) open source¹. Esta Plataforma tornouse popular e hoje é utilizada

Leia mais

Desenvolvimento de Aplicações para Internet

Desenvolvimento de Aplicações para Internet Desenvolvimento de Aplicações para Internet Aula 03 Celso Olivete Júnior olivete@fct.unesp.br Na aula de hoje... Javascript: introdução, operadores lógicos e matemáticos, comandos condicionais. Javascript:

Leia mais

Acessando um Banco de Dados

Acessando um Banco de Dados Acessando um Banco de Dados Introdução Agora que você já está craque em JSP e já instalou seu servidor, vamos direto para a parte prática! Neste tutorial vamos aprender a acessar um banco de dados. Para

Leia mais

Programação Orientada a Objetos com PHP & MySQL Cookies e Sessões. Prof. MSc. Hugo Souza

Programação Orientada a Objetos com PHP & MySQL Cookies e Sessões. Prof. MSc. Hugo Souza Programação Orientada a Objetos com PHP & MySQL Cookies e Sessões Prof. MSc. Hugo Souza Se você precisar manter informações sobre seus usuários enquanto eles navegam pelo seu site, ou até quando eles saem

Leia mais

Curso De PHP. Aula 4. Formulários. Cookies. Session. Mail

Curso De PHP. Aula 4. Formulários. Cookies. Session. Mail Curso De PHP Aula 4 Formulários Cookies Session Mail Formulários Nós preenchemos diariamente diversos formulários web, seja para se logar e-mail ou criar uma conta em um site. Nesta parte do curso, vamos

Leia mais

CSS - Parte 02. Prof. Marciano dos Santos Dionizio

CSS - Parte 02. Prof. Marciano dos Santos Dionizio CSS - Parte 02 Prof. Marciano dos Santos Dionizio Imagens de fundo [backgroundimage] A propriedade CSS background-image é usada para definir uma imagem de fundo. Usaremos a imagem de uma borboleta para

Leia mais

TECNOLOGIAS WEB. Unidade 2 Introdução a Construção de Páginas Estáticas. Luiz Leão luizleao@gmail.com http://luizleao.com

TECNOLOGIAS WEB. Unidade 2 Introdução a Construção de Páginas Estáticas. Luiz Leão luizleao@gmail.com http://luizleao.com Luiz Leão luizleao@gmail.com http://luizleao.com CONTEÚDO PROGRAMÁTICO DESTA UNIDADE HTML TAG S HTML LINGUAGEM HTML Hypertext Markup Language Interpretada pelo navegador Não linearidade da informação Formatação

Leia mais

Manual de instrução. www.andifes.org.br

Manual de instrução. www.andifes.org.br Manual de instrução www.andifes.org.br Inserindo Postagem em Andifes, Nas IFES, Entrevistas, Na Mídia, Concursos, Artigos ou Editora Univ. 1. Localize no menu lateral esquerdo a opção ANDIFES, Nas IFES,

Leia mais

BI Citsmart Fornece orientações necessárias para instalação, configuração e utilização do BI Citsmart.

BI Citsmart Fornece orientações necessárias para instalação, configuração e utilização do BI Citsmart. 16/08/2013 BI Citsmart Fornece orientações necessárias para instalação, configuração e utilização do BI Citsmart. Versão 1.0 19/12/2014 Visão Resumida Data Criação 19/12/2014 Versão Documento 1.0 Projeto

Leia mais

Capture Pro Software. Introdução. A-61640_pt-br

Capture Pro Software. Introdução. A-61640_pt-br Capture Pro Software Introdução A-61640_pt-br Introdução ao Kodak Capture Pro Software e Capture Pro Limited Edition Instalando o software: Kodak Capture Pro Software e Network Edition... 1 Instalando

Leia mais

Scriptlets e Formulários

Scriptlets e Formulários 2 Scriptlets e Formulários Prof. Autor: Daniel Morais dos Reis e-tec Brasil Programação Avançada Para Web Página1 Meta Permitir ao aluno aprender a criar um novo projeto Java para web no Netbeans IDE,

Leia mais

Manual de uso do Gerente

Manual de uso do Gerente Manual de uso do Gerente Manual do Hypnobox: www.hypnobox.com.br/manual Índice Acessar o Hypnobox Endereço o www Login e Senha Tela Principal Perfil de acesso Editar Dados pessoais Fila de corretores Gerenciar

Leia mais

Mini-curso de PHP. Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva

Mini-curso de PHP. Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva Mini-curso de PHP Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva Aula 1 Breve introdução de HTML, Conceitos básicos de PHP, Sintaxe, Separador de instruções e Comentários (Cap 1

Leia mais

Algoritmos em Javascript

Algoritmos em Javascript Algoritmos em Javascript Sumário Algoritmos 1 O que é um programa? 1 Entrada e Saída de Dados 3 Programando 4 O que é necessário para programar 4 em JavaScript? Variáveis 5 Tipos de Variáveis 6 Arrays

Leia mais

Aplicativos para Internet Aula 01

Aplicativos para Internet Aula 01 Aplicativos para Internet Aula 01 Arquitetura cliente/servidor Introdução ao HTML, CSS e JavaScript Prof. Erika Miranda Universidade de Mogi das Cruzes Uso da Internet http://www.ibope.com.br/pt-br/noticias/paginas/world-wide-web-ou-www-completa-22-anos-nesta-terca-feira.aspx

Leia mais

Introdução ao Javascript

Introdução ao Javascript Programação WEB I Introdução ao Javascript Apresentação da Disciplina,Introdução a linguagem Javascript Objetivos da Disciplina Apresentar os principais conceitos da linguagem Javascript referente à programação

Leia mais