Importância dos navegadores

:: Importância dos Navegadores

Para novos usuários que trabalham com Temas Moodle ou para os novos Web Designers, é importante conhecer a compatibilidade dos navegadores, para garantir que seus temas e layouts possam ser visualizado nos principais browsers utilizados, em alguns casos a diferença entre um e outro é mínima para o usuário médio, agora quando se usa CSS pode até deixar o seu tema Moodle inacessível, caso não saiba usar. Sempre que usar CSS o ideal é ir criando e testando pouco a pouco, para garantir a usabilidade sem perder o design.

O primeiro passo é fazer uma pesquisar e descobrir quais são os navegadores mais utilizados pelo seu público alvo, se estiver usando o Moodle em uma instituição de ensino ou em uma empresa será mais fácil, porque provavelmente a equipe de TI vai restringir o acesso a diversos navegadores, permitindo no máximo um ou dois.

Agora se o Moodle estiver sendo usado de forma aberta ao público a tarefa fica um pouco mais difícil, nesse caso poderá usar ferramentas  de estatísticas para visualizar quais são os navegadores mais populares utilizado pelo seu público, estatísticas não é os relatórios do Moodle porque não apresenta as informações necessárias,  estatísticas é um pacote de software que é instalado no servidor, como por exemplo AwStats, Webalizer ou Google Analytics.

A maioria das empresas que oferecem plano de hospedagem já fornece um pacote de estatísticas pré-instalada para os Web sites, mas porventura se não possuir pode entrar em contato com administrador do servidor Moodle e verificar se tem algum pacote de estatísticas instalado, caso contrário pode adquirir a instalação do Google Analytics para o ambiente Moodle.

A lista de navegadores que são utilizados na internet é muitos, com isso você precisa ser esperto em saber quais os navegadores que vai usar para fazer os testes de compatibilidade, como já foi dito aqui, a melhor estratégia é usar a ferramenta de estatísticas para acompanhar os navegadores mais usados.

Os navegadores mais conhecidos são:

• Internet Explorer
• Mozilla Firefox
• Google Chrome
• Ópera
• Safári

Você aprendeu sobre a importância dos navegadores a respeito de quando for criar um tema.

————————————————————-
| Gabriel Padilha – WebDesigner
| Email Pessoal: gabriel@maxthree.com
| Twitter: @upadilha
————————————————————-

Coloque assinatura no rodapé Moodle

:: Coloque  assinatura no rodapé Moodle

O que vamos aprender nesse tutorial é adicionar um texto personalizado no rodapé do Moodle, como exemplo será utilizado um direito autoral onde o texto será formatado usando a linguagem básica de HTML, a respeito de como remover o logotipo e a informação de login veja o tutorial “Alterando Rodapé“.

Vamos lá?

Siga os procedimentos a seguir:

1 – Dentro do diretório onde se encontra o seu Tema, clique com o botão direito no arquivo footer.html e depois em Abrir com > WordPad, se preferir pode abrir com um editor de sua preferência.

2 – Na primeira linha do arquivo footer.html digite a informação sobre seu direito autoral, eu estarei utilizando o seguinte texto: Max3 – Comunicação Inteligente © 2010, observe na figura abaixo:

 

3 – Após ter acrescentado o direito autoral salve o arquivo e depois atualize a página no seu navegador, vai perceber que seu texto está na parte inferior da página e por comum, alinhado a esquerda.

4 – Agora vamos formatar o texto e colocar a direita da página através da linguagem HTML, coloque uma <div> para adicionar o alinhamento, veja como código deve ficar:

<div align=”right”> Max3 – Comunicação Inteligente © 2010</div>

5 – Para ficar legal vou deixar o nome da empresa em negrito, para isso utilizaremos a tag  <strong>, confira a segui como deve ser:

<div align=”right”> <strong>Max3</strong> – Comunicação Inteligente © 2010</div>

6 – Salve o arquivo footer.html depois atualize a página no navegador, vai notar que seu texto ficará alinhado a direita da página. Veja um o exemplo do resultado final:

Nesse tutorial você aprendeu a colocar um texto simples no rodapé da página e utilizou o básico da linguagem HTML para formatar o texto, tirando o texto do lado esquerdo para o lado direito e acrescentou negrito em uma palavra do texto, você também pode formatar de outras maneiras, como por exemplo, utilizar CSS para o mesmo, basta colocar uma classe na <div> e usar o seletor CSS para formatar.

Para acrescentar caractere especial no código HTML, consulte o seguinte link: Reserved Characters in HTML

Vodpod videos no longer available.

>>> Clique Aqui e veja a Video Aula <<<

————————————————————-
| Gabriel Padilha – WebDesigner
| Email Pessoal: gabriel@maxthree.com
| Twitter: @upadilha
————————————————————-

Texto utilizado no titulo da pagina

:: Texto utilizado no título da página

Agora vamos aprender a mudar o texto do título através do arquivo header.html, geralmente o texto que aparece é criado automaticamente pelo Moodle na hora da instalação, mas o título da página pode ser modificado a qualquer momento.

Para alterar o título da página sem abrir o código fonte, é preciso logar como Administrador do ambiente virtual Moodle, depois é só ir no link | Página Inicial -> Configurações da Página Principal |, no campo “Nome Completo do Site” você pode fazer alteração, mas se caso não querer nenhum texto  neste campo será impossível a não ser pelo código, porque quando deixa este campo em branco o sistema não permite que salve a página, e só permite se colocar pelo menos um caractere.

Você pode colocar o seu próprio texto no título da página de qualquer tema Moodle, ate mesmo em todas as páginas internas, o texto usado na primeira página geralmente é de boas-vindas quando não possui nenhum curso no ambiente virtual.

Nos passos a seguir, você vai alterar o código que controla o título da página no arquivo header.html, para isso é importante que comente o código em vez de apagar o trecho que não irá utilizar, por questão de segurança, ate porque se precisar voltar o que já estava fica bem mais fácil.

Como estamos usando a linguagem de programação PHP, você vai se deparar com dois tipos de comentários, ou seja, um do HTML e outro do PHP, pois para cada um existe uma forma diferente de comentar mesmo estando no mesmo arquivo.

No HTML você comenta um código da seguinte forma:

<!– Aqui é o local do código –> 

Veja um exemplo para comentar uma seção de um código PHP dentro de um arquivo HTML:

<!– <?php Aqui é o local do código ?> –>

Agora segue a forma de comentário dentro de uma seção PHP

/* Aqui é o local do código*/

Veja um exemplo para comentar uma linha de código dentro de uma seção PHP:

<?php }
            /*echo $loggedinas; */
                echo $homelink;
<?php }

O comentário serve para que a linha de código não seja interpretada, com isso o Web Server não pode ver, geralmente o comentário é usado por programadores para explicar e organizar o código de maneira que qualquer programador possa compreender.

 

:: Alterando o texto do título da página

1. Dentro da pasta do tema que estiver utilizando encontre o arquivo header.html, clique com o botão direito e abra com o WordPad ou algum editor de sua preferência. Veja:

2. Assim que abrir o arquivo no WordPad procure a seguinte linha de código:

<?php print_container_start(true, ”, ‘header-home’); ?>
          <h1 class=”headermain”>
          <img src=”<?php echo $CFG->themewww .’/’. current_theme() ?>/pix/logo.png” alt=”” />
          <?php echo $heading ?></h1>
          <div class=”headermenu”><?php  echo $menu ?></div>
<?php print_container_end(); ?>

 3. Após encontrar altere a seguinte linha de código:

<?php echo $heading ?>

Veja como deve ficar:

<!–<?php echo $heading ?> –>Minha Pagina Principal

O resultado final precisa estar da seguinte forma:

<?php print_container_start(true, ”, ‘header-home’); ?>
         <h1 class=”headermain”>
         <img src=”<?php echo $CFG->themewww .’/’. current_theme() ?>/pix/logo.png” alt=”” />
         <!–<?php echo $heading?> –> Minha Pagina Principal </h1>
         <div class=”headermenu”><?php echo $menu ?></div>
<?php print_container_end(); ?>

4 – Salve o arquivo header.html e atualize a página do seu navegador para ver o resulltado final, confira se esta na página inicial do Moodle.

Nesse tutorial você aprendeu como alterar o texto do título da página e também a comentar um código na linguagem de programação PHP e HTML.

Em muitos casos nem é interessante usar o título da página na abertura, assim poderá aproveitar mais o elemento gráfico.

Vodpod videos no longer available.

>>> Clique Aqui e Veja a Video Aula <<<

————————————————————-
| Gabriel Padilha – WebDesigner
| Email Pessoal: gabriel@maxthree.com
| Twitter: @upadilha
————————————————————-

Colocando logotipo na pagina inicial

:: Colocando logotipo na pagina inicial do Moodle

Na hora de colocar o logotipo no cabeçalho, você deve ter percebido que no arquivo header.html existem duas linhas de códigos semelhantes, sendo a seguinte linha:

<h1 class=”headermain”>

Isto acontece pelo fato que o Moodle trabalha com duas páginas, sendo uma como pagina inicial na hora de fazer o login e outra quando já está logado.

Se você acompanhou o tutorial “Aprenda a colocar logotipo no Moodle” , pode experimentar após ter colocado o logotipo no Moodle, deslogando e depois clicando em login para ver a página no qual estou me referindo nesse tutorial.

Então significa que tudo que fizer só serão alterados na primeira página e as demais não serão alteradas. Antes de iniciar esse tutorial o ideal seria verificar a página citada para compreender os próximos passos.

Para verificar basta deslogar se estiver logado, depois clicar no link para efetuar o Login, automaticamente já será levado a página inicial, onde poderá ver que o seu logotipo, não apareceu, e como quer que o logotipo apareça em todas as páginas é necessário acrescentar a mesma linha de código, usada no tutorial “Aprenda a colocar logotipo no Moodle”.

Vamos agora Adicionar novamente o logotipo no aquivo header.html

1. Dentro da pasta do tema que estiver utilizando encontre o arquivo header.html, clique com o botão direito e abra com o WordPad ou algum editor de sua preferência.

2. Assim que abrir o arquivo no WordPad procure a seguinte linha de código:

<?php print_container_start(true, ”, ‘header’); ?>
<h1 class=”headermain”><?php echo $heading ?></h1>
<div class=”headermenu”><?php echo $menu ?></div>
<?php print_container_end(); ?>

3. Após encontrar deve inserir a seguinte linha de código, depois de <h1 class=”headermain”>:

<img src=”<?php echo $CFG->themewww .’/’. current_theme() ?>/pix/ logo.png” alt=”Logo” />

4. Seu código deverá ficar assim:

<?php print_container_start(true, ”, ‘header’); ?>
<h1 class=”headermain”>
<img src=”<?php echo $CFG->themewww .’/’. current_theme() ?>/pix/logo.png” alt=”Logo” />
<?php echo $heading ?></h1>
<div class=”headermenu”><?php echo $menu ?></div>
<?php print_container_end(); ?>

5. Salve e feche o arquivo header.html.

Detalhe quando acrescentarmos a tag da imagem do logo acima ele acrescenta somente na página inicial de Login, no caso se logar vai cair na tela home, e nessa tela o logo não vai aparecer porque é outra pagina, então se você não acompanhou o tutorial “Aprenda a colocar logotipo no Moodle”, veja a vídeo aula para compreender melhor o arquivo header.html devemos acrescentar a mesma linha de código, para quando estiver na tela home seja possível visualizar o logotipo.

Vodpod videos no longer available.

>>> Clique Aqui e Veja a Video Aula <<<

Qualquer dúvida entre em contato.

>>> Clique Aqui e Veja o Tutorial “Aprenda a Colocar Logotipo no Moodle” <<<

————————————————————-
| Gabriel Padilha – WebDesigner
| Email Pessoal: gabriel@maxthree.com
| Twitter: @upadilha
————————————————————-

Aprenda a colocar logotipo no Moodle

:: Colocando Logotipo no Moodle

A segue o procedimento para acrescentar o logotipo no moodle:

1. Antes de mais nada precisamos ter o logotipo pronto, pode ser na extensão “.gif” e “.png”.

2. Com o logo pronto vai no diretório onde encontra-se o seu tema, depois procure a pasta chama “pix” e faça uma copia do logotipa na pasta.

3. Após colocar o logotipo na pasta “pix” volte a pasta anterior onde se encontra o arquivo header.html, clique com o botão direito e abra com o WordPad.

4. Assim que abrir o arquivo no WordPad procure a seguinte linha de código:

<?php print_container_start(true, ”, ‘header-home’); ?>
<h1 class=”headermain”><?php echo $heading ?></h1>
<div class=”headermenu”><?php echo $menu ?></div>
<?php print_container_end(); ?>

5. Após encontrar inserir a seguinte linha de código depois de <h1 class=”headermain”> :

<img src=”<?php echo $CFG->themewww .’/’. current_theme() ?>/pix/logo.png” alt=”Logo” />

6. Seu código deverá ficar assim:

<?php print_container_start(true, ”, ‘header-home’); ?>
<h1 class=”headermain”>
<img src=”<?php echo $CFG->themewww .’/’. current_theme() ?>/pix/logo.gif” alt=”Institutions Logo” />
<?php echo $heading ?></h1>
<div class=”headermenu”><?php echo $menu ?></div>
<?php print_container_end(); ?>

7. Salve e feche o arquivo header.html.

Detalhe quando acrescentarmos a tag na imagem do logo acima ele acrescenta somente na home, no caso se fizer logout vai cair em uma tela de abertura para efetuar o login, e nessa tela o logo não vai aparecer porque é outra pagina, então no mesmo arquivo header.html devemos acrescentar a mesma linha de código, para quando estiver na tela de abertura de login possa ver o logo.

Qualquer dúvida entre em contato.

Vodpod videos no longer available.

>>> Clique aqui e veja a Video Aula <<<

————————————————————-
| Gabriel Padilha – WebDesigner
| Email Pessoal: gabriel@maxthree.com
| Twitter: @upadilha
————————————————————-

Saiba o que possui na pasta de um tema

:: O que possui na pasta de um tema Moodle?

Bom em muitos casos varia muito, porque cada um faz de um jeito diferente, mas geralmente todos contêm alguns arquivos e pastas semelhantes.

Abaixo segue os arquivos que contêm dentro da pasta do tema padrão do Moodle (Standard):

• A pasta pix
A pasta pix normalmente contém as imagens usadas no tema Moodle, no caso, as imagens, fotos e os ícones que são usados pelo tema.

• config.php
Neste arquivo vai encontrar as configuração do tema Moodle, cuidado para não se confundir com o arquivo config.php principal que fica dentro da pasta raiz do servidor Moodle.

• meta.php
O arquivo meta.php é responsável por verificar se o usuário está usando o Internet Explorer 6 ou 7 e depois de verificar chama o estilo css styles_ie6.css ou styles_ie7.css, de acordo com a versão do browser. Isso é feito por causa das diferenças de navegadores web, para interpretar padrões Web CSS.

• favicon.ico
Este é o pequeno ícone que é mostrado antes de URL do site na barra de endereços do navegador.

• doctyles.php
Este arquivo foi usado em muitas versões anteriores do Moodle, e ainda permanece para compatibilidade com versões anteriores, dependendo do tema Moodle que você escolher, podem ou não estar presentes.

• screenshot.jpg
Este arquivo é uma imagem para que possa ser visualizado, quando estiver logado como administrador do Moodle, poderá ter uma amostra visual de como é a interface do tema antes de alterar.

• favicon.ico
Este é o pequeno ícone que é mostrado antes da URL na barra de endereço do navegador.

• README.html
Este é um arquivo HTML que é utilizado para fornecer informações gerais das características do tema  e se caso ter necessidade acrescentar instruções de instalação. O arquivo README.html é exibido quando você clica no link Informações ao selecionar um tema pelo administrador do Moodle.

• header e footer.html
Esses dois arquivos são editáveis, portanto você pode alterar o topo e o fundo do seu site Moodle para atender as suas próprias necessidades. Entre outras coisas, eles contêm elementos como o
logo, o texto de cabeçalho, o texto login, menu e na barra de navegação. Estes ficheiros será os primeiros arquivos que você vai mudar quando criar ou alterar um tema para o Moodle. Para alterar o topo deve editar o arquivo header.html e para o rodapé o arquivo footer.html.

• styles_moz.css
Este é um arquivo CSS padrão que controla os estilos do browser Mozilla Firefox. É usado para interpretar as regras CSS por um navegador diferente. Existe casos que é necessário produzir o estilo CSS de forma diferente para que o navegador compreenda.

• styles_ie6.css
Este é um arquivo CSS padrão que controla o navegador Internet Explorer 6 e seus estilos específicos.

• styles_ie7.css
Este é um arquivo CSS padrão que controla o navegador Internet Explorer 7 e seus estilos específicos.

• styles_fonts.css
O arquivo styles_fonts.css é um estilo que define as regras de estilo de fontes utilizadas no tema Moodle.

• styles_color.css
O arquivo styles_color.css é um estilo que define as regras de estilo das cores utilizadas no tema Moodle.

• styles_layout.css
O arquivo styles_layout.css é um estilo que define as regras do layout que é utilizado no tema Moodle.

• rtl.css
O arquivo rtl.css é interessante pelo fato de conter as definições do layout exigido para idiomas da direita para a esquerda (por exemplo, em hebraico). Ele substitui as definições de outros arquivos para mover blocos flutuantes direita para a esquerda, alinhar o texto à direita, trocar as margens esquerda e direita, e assim por diante.

Aqui aprendemos quais são os principais arquivos de um tema do Moodle, todo layout que são criados para se tornar um tema, precisa ser feito a partir desses arquivos acima, ou seja, você pode modificar e se possuir conhecimentos na linguagem de programação PHP, pode até acrescentar linhas de códigos para atingir suas expectativas.

————————————————————-
| Gabriel Padilha – WebDesigner
| Email Pessoal: gabriel@maxthree.com
| Twitter: @upadilha
————————————————————-

Alterando Rodapé

:: Removendo o logotipo do Moodle

A primeira coisa que precisa ser feita é notar que no rodapé do Moodle tem um logotipo direcionando para pagina inicial do Moodle(http://moodle.org) e há a informação do login que mostra quem está logado e um link para deslogar.

Geralmente a maioria dos temas não possuí o logotipo do Moodle para deixar com aparência da instituição ou empresa que estiver usando esse sistema, mas que fique bem claro que este logotipo é para créditos da comunidade Moodle.

:: Excluindo o logotipo Moodle

1. Dentro do diretório onde se encontra o seu Tema, clique com o botão direito no arquivo footer.html e depois em Abrir com > WordPad, se preferir pode abrir com um editor de sua preferência.

2. Encontre as duas seguintes linhas de código:

echo $loggedinas;
echo $homelink;

3. Comente a segunda linha PHP utilizando um comentário:

echo $loggedinas;
/*echo $homelink; */

4. Depois de fazer a alteração salve o arquivo footer.html e atualize a janela do browser para ver a modificação. Agora você poderá ver que o logotipo do Moodle foi removido, deve estar como a seguinte imagem:

Aqui vocês aprenderam a comentar na parte do código PHP que controla o rodapé sendo o arquivo footer.html.

Se quiser voltar o logotipo do Moodle novamente basta retirar o comentário que acrescentou.

Vodpod videos no longer available.

>>> Clique Aqui e confira a Vídeo Aula <<<

Gabriel Padilha
gabriel@maxthree.com
Twitter: @upadilha

Vocês sabem o que é Moodle?

Moodle é uma sigla apreviada que significa Objeto Orientado para Ambiente Dinâmico de Aprendizagem Modular (Modular Object-Oriented Dynamic Learning Environment), é um software gratuito de código aberto, se conhecer um pouco de programação com um pouco de esforço poderá adequar a interface ao seu gosto.

O Moodle é utilizado em Ambiente Virtual onde possui recursos voltado para aprendizagem, podemos caracterizar como um LMS que significa Learning Management System (Sistema de Gestão de Apredizagem), pode ser instalado em diversas plataformas (Unix, Linux, Windows, Mac OS) para isso é necessário que aceite a linguagem PHP, tendo como base de dados podem ser usado o MySQL, PostgreSQL, Oracle, Access, Interbase ou qualquer outra acessível via ODBC.

Existe uma comunidade onde pessoas do mundo todo podem colaborar para desenvolvimento do sistema, para conhecer a comunidade basta acessar moodle.org, você poderá encontrar designers, desenvolvedores, programadores, administradores, professores e usuários.

As instituições de ensino estão usando esse recurso para o seu proprio favor, utilizando em forma de cursos presenciais e atividades para treinamentos e formações.

Esse sistema é ótimo para a nova tendência EAD (Educação a Distância) e promete grandes avanços.

Se você quer aprender mais sobre esse maravilhoso sistema de aprendizagem, continue acompanhando esse Blog.

Gabriel Padilha
gabriel@maxthree.com