Como hospedar seu site em Joomla no Hostsinger

Segue um vídeo demonstrativo de hospedagem do site no hostsinger. Lembrando que antes de tudo você precisa criar uma conta.

Link do Vídeo

Colocar fundo fixo no joomla

Segue o link para colocar bacground de imagem no joomla 3.4.

Fonte: ehow

Avaliação Prática de Joomla

Segue avaliação de joomla:

Avaliação de Joomla

Atividades Práticas de SGC

Como explicado nas primeiras aulas da disciplina, nossas atividades práticas (1, 2, 3 e 4) deverão ser postadas no link abaixo.

Faça o upload dos seus arquivos nessa pasta compartilha:

Atividades de Joomla

Aula 4 - Joomla - Extensões (Componentes, módulos e plugins)

O que são extensões Joomla?

Extensão pode ser entendida como uma pequena aplicação desenvolvida com regras de construção estabelecidas pelo ambiente Joomla!. É um produto instalável que tem por finalidade adicionar novas características ao Joomla!As extensões são classificadas em componentes, módulos, plugins, temas (templates) e idioma:

■ Componente: é um tipo de aplicação responsável por apresentar conteúdo na página principal. 
- Somente um componente pode ser executado ou exibido por página carregada. Cada componente em uma instalação Joomla! tem um nome único. 
- Em geral, seu código é dividido em duas partes, frontend e backend. - Cada parte fica situada em pastas (diretórios) distintas. 

■ Módulo: é uma pequena porção de software que normalmente é apresentada como parte de um conteúdo de uma página. 
- Mais de um módulo pode ser apresentado em uma página na forma de uma barra lateral, menu, cabeçalho ou rodapé. 
- A configuração de um módulo consiste basicamente em definição de parâmetros de apresentação, incluindo a sua posição na página. 

■ Plug-in: é uma pequena porção de código contido em uma função ou método que pode ser executado em resposta a eventos que ocorrem no Joomla!. 
- Como exemplo, é possível desenvolver um plug-in que coloca parte do texto de um artigo em negrito durante a sua apresentação na página. 


■ Template: é responsável pela forma com que o site será apresentado ao usuário, incluindo: cores, fontes de caracteres, estilos etc. 
É ele quem determina a organização dos objetos de uma página no navegador web. 

■ Idioma: permite o desenvolvimento de sites para vários idiomas. 
- Ao instalar esse tipo de extensão e selecioná-lo como padrão, todas as mensagens, menu e textos pertencentes do Joomla! serão apresentados no novo idioma.

Conhecendo os Componentes:

- Banner:
   Componentes -> Banners -> Banners
   Gerenciar -> Módulos -> Crie um módulo de Banner e defina as configurações.

- Contatos:
   Componentes -> Contatos -> Contatos
   Após a configuração dos contatos adicioná-lo a um menu.
   Podemos criar categorias de contatos e disponibilizá-los em uma única página.
   
- HTML personalizado:
   Extensões -> Módulos -> Novo -> HTML Personalizado

   Ver exemplo de redes sociais com HTML personalizado:
   http://ejovem.zz.mu/index.php

- Instalando e utilizando novos módulos e componentes:

   Instalar o chronoforms

   Após criar o formulário, adicioná-lo a um menu. 

Tutorial de utilização do chronoforms:

https://www.chronoengine.com/chronoforms-start-guide.html

-Instalação e ativação de novos temas:
  Baixar o tema na versão do joomla que estamos utilizando (joomla 3.4);

  Site de templates:
  http://www.joomland.org/

  Para instalar:
  Extensões -> Gerenciar -> Escolher Aquivo;

  Ativando o tema do site:
  Os temas são divididos em frontend e backend
  Extensões -> Temas -> Escolha o tema e clicar em padrão (estrela)   

  Ativando a visualização das posições de um template:
  Sistema -> Configuração Global -> Temas -> Ativar visualização de posições
  Gerenciar -> Temas -> Clicar no olho ao lado do tema.

Avaliação Prática de Banco de Dados

Segue o link da Avaliação Prática de Banco de Dados

Clique aqui para acessar a avaliação

Boa sorte!

Atividade Prática 4 - Banco de Dados

Assista os vídeos a seguir, eles são o material de apoio para a atividade:

Primeiro vídeo

Segundo vídeo

Terceiro vídeo

Boa sorte!

Exercício prático - Aula 6

Exercícios Propostos - Aula 6

EP07.1: Crie uma tabela Aluno com os campos nome (VARCHAR(255)), e-mail
(VARCHAR(255)) telefone (VARCHAR(10)), altura (DECIMAL(3,2)) , aprovado (TINYINT(1)),
nome_escola (VARCHAR(30)) .

EP07.2: Crie uma tabela Escola com os campos nome (VARCHAR(30)), cidade(VARCHAR(30)), diretor (VARCHAR(30)), endereco (VARCHAR(255)).

EP07.3: Insira alguns registros nas tabela evitando valores repetidos.

EP07.4: Utilizando a cláusula WHERE refaça os exemplos do tópico 7.2 criando uma consulta
para cada tipo de operador.

EP07.5: Crie uma consulta que retorne somente o nome do aluno, escola, cidade onde estuda.
Utilize ALIAS nessa consulta;

OBS: Nas consultas utilize valores que façam sentido de acordo com os valores que você inseriu.

EP07.6: Utilizando a tabela Aluno crie uma consulta que traga todos os alunos, sendo que os
primeiro devem ser listados os alunos aprovados e em seguida os reprovados.

EP07.7: Utilizando a tabela Aluno crie uma consulta que traga todos os alunos aprovados
ordenados pelo e-mail. Para desempate utilize as colunas altura (na orderm descrescente) e depois
nome.

EP07.8: Faça uma consulta de todos os alunos aprovados e suas respectivas localidades onde
estudam, ordenando a consulta em ordem alfabética de acordo com a localidade(cidade).

EP07.9: Utilizando a tabela Aluno crie uma consulta calcule a média das alturas dos alunos
reprovados.

EP07.10: Utilizando a tabela Aluno crie uma consulta calcule a variância das alturas dos alunos
com mais de 1,7m.

EP07.11: Faça uma consulta que retorne a quantidade de alunos reprovados e aprovados.

EP07.12: Faça uma consulta que retorne a escola,endereço da escola, nome do aluno e cidade
onde fica a escola, do aluno com maior altura.

EP07.13: Utilizando a tabela Aluno crie uma consulta que calcule o número de alunos
aprovados cujos nomes começam coma letra A ou terminam com a letra A, mas que não
começam e terminam com a letra A. Dê um apelido para a coluna com o número de alunos
aprovados.

EP07.14: Faça uma consulta que traga o nome da escola e a quantidade de alunos de
cada escola;

EP07.15: Faça uma consulta que traga o nome da escola e a quantidade de alunos
reprovados de cada escola;

Exercício - Aula 4 - CRUD

Clique no link abaixo e faça o download do exercício da aula 4 (CRUD), nele estão as instruções de realização da mesma:

Exercício - Aula 4 

Atividade de Banco de Dados (Tabelas)

Crie um banco de dados com as seguintes características:

NOME: Agenda

CHARSET: laltin1;

COLLATE: latin_swedish_ci

Dentro do banco de dados Agenda crie as seguintes tabelas:

NOME DA TABELA: tb_contatos

CAMPOS:

id - INT(5)

nome - VARCHAR(20)

sobrenome VARCHAR(30)

ddd INT(2)

telefone VARCHAR(9)

data_nasc DATE

email VARCHAR(30)

Obs.: Só o id será auto incrementado (AUTOINCREMENT); os campos nome, sobrenome e telefone serão não nulos (NOT NULL).

TIPO DE TABELA (ENGINE): MyISAM

Atividade Prática 4 - Desenvolvimento web 3

Segue o link da atividade 3

Avaliação Prática de Desenvolvimento web 3

Segue as instruções para a Avaliação Prática de Desenvolvimento Web 3

Clique aqui par visualizar

Atividade Prática 3 - Desenvolvimento Web III

Link da atividade prática 3 - Desenvolvimento WEB 3

Conteúdo UML

Segue os materiais utilizados na aula 12 - UML

Diagramas UML
Exemplos de Diagrama de Classes
Projeto completo de Software

Atividade Prática 1 - Desenvolvimento Web 2

Segue abaixo o link da atividade:

Opção 1:
Atividade prática 1 - DW-III 

Opção 2:

Monte um formulário HTML com uma tabela contendo um boletim serão 3 matérias e 3 notas para cada matéria. As notas digitadas será encaminhadas para uma página em PHP ao qual será responsável por calcular as notas do alunos informando para cada matéria sua nota e sua condição de conclusão da matéria, aprovado em verde ou reprovado em vermelho.

Sigam as dicas dadas na aula para melhor desenvolver a atividade.

Dicas para desenvolvimento da Avaliação Prática de DW-II

Avaliação prática de Desenvolvimento Web 2
Acesse aqui a avaliação.

Segue alguns links úteis para o desenvolvimento da nossa Avaliação Prática.

Leia e/ou assista atentamente as dicas abaixo:

Validação de formulário com o plugin jquery.
Vídeo aula de validação com o plugin validate

Leia e/ou assista as dicas dos links abaixo para fazer o calendário para o campo data de nascimento:
Calendário com o jqueryUI (datepicker)

Leia e/ou assista as dicas dos links abaixo para fazer o slide:

Slide com o jquery cycle
Vídeo-aula de criação de Slide

Código para botões

html (colocar na div topo ou banner)
<a href="#" id="next"><img src="img/seta.png"/></a>
<a href="#" id="prev"><img src="img/seta1.png"/></a>

css (colocar no seu aquivo de folha de estilo abaixo do id banner ou topo )
#banner a{
    position: relative;
    float: right;
    top: -50px;
    z-index:150;
    margin: 0 15px 0 0;
    text-decoration: none;
}

Desenvolvimento da Atividade Prática 4

Assista o vídeo abaixo e desenvolva a sua atividade prática.

Atividade Prática 4

Boa sorte!

Exemplos da aula 19

HTML

<!-- EXEMPLOS DAS FUNÇÕES SHOW, HIDE, TOOGLE  -->

<p>Deseja responder nossa enquete?</p>

<button id="bot">Responder</button><br><br>

<div id="divForm" style="display: none">
<p>Quantas horas de estudo você realiza por dia?</p>
<form name="form" action="#" method="GET">
<input type="radio" name="escHoras" value="hora1"> Pelo menos 1 hora
<br>
<input type="radio" name="escHoras" value="hora2"> Pelo menos 2 horas
<br>
<input type="radio" name="escHoras" value="hora3"> Pelo menos 3 hora
<br>
<input type="radio" name="escHoras" value="horaMais"> Mais de 3 horas
<br><br>
<input type="submit" name="botao" value="Enviar">
<br><br>
<button id="voltar">Voltar</button>
</form>
</div>

<!-- EXEMPLO DA FUNÇÃO DELAY  -->
<button id="b1">Conteudo 1</button>
<button id="b2">Conteudo 2</button>

<div id="conteudo1" style="display:none">
<h2>Titulo 1</h2>
<p>
Texto para conteúdo 1 Texto para conteúdo 1<br>
Texto para conteúdo 1 Texto para conteúdo 1<br>
Texto para conteúdo 1 Texto para conteúdo 1<br>
Texto para conteúdo 1 Texto para conteúdo 1<br>
Texto para conteúdo 1 Texto para conteúdo 1<br>
Texto para conteúdo 1 Texto para conteúdo 1<br>
Texto para conteúdo 1 Texto para conteúdo 1<br>

</p>
</div>

<div id="conteudo2" style="display:none">
<h2>Titulo 2</h2>
<p>
Texto para conteúdo 2 Texto para conteúdo 2<br>
Texto para conteúdo 2 Texto para conteúdo 2<br>
Texto para conteúdo 2 Texto para conteúdo 2<br>
Texto para conteúdo 2 Texto para conteúdo 2<br>
Texto para conteúdo 2 Texto para conteúdo 2<br>
Texto para conteúdo 2 Texto para conteúdo 2<br>
Texto para conteúdo 2 Texto para conteúdo 2<br>
</p>
</div>

<br><br>

<!--EXEMPLO DAS FUNÇÕES FADEIN E FADEOUT-->
<input type="button" name="bot1" value="Anterior">
<input type="button" name="bot2" value="Próximo">
<br>
<img id="img1" src="img/img1.jpg"  width="400" height="200" style="position: absolute">
<img id="img1" src="img/img2.jpg"  width="400"  height="200" style="display: none; position: absolute">

<br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<!--EXEMPLO DAS FUNÇÕES FADETO-->
<div class="divLight">
Conteúdo em texto na camada divLight
</div>

Opacidade:
<input type="text" name="opacidade" size="5">%<br><br>
<input type="button" name="bot" value="Alterar Opacidade">

<!--EXEMPLO DAS FUNÇÕES FADETOGGLE-->
<p>Qual a função básica do jQuery?<a href=""> Ver resposta</a></p>
<p id="resposta" style="display: none">
Jquery foi feito para tornar mais simples a navegação<br>
do documento HTML, a seleção de elementos DOM e <br>
criar animações.
</p>

CSS

<style type="text/css">
.divLight {
width: 200px;
height: 200px;
background-color: gray;
margin-bottom: 10px;
}

</style>

JQUERY

/*AULA 19 - FUNÇÕES JQUERY 1*/

/*Função .show() e hide(): mostra um determinado elemento com o
comando .show() ou ocultá-lo com o comando .hide().*/

$(document).ready (
function() {
$("#bot").click(
function() {
$("p").hide();
$("#divForm").show();
});

$("#voltar").click(
function() {
$("p").show();
$("#divForm").hide();
});
});

/*Função .toggle(): realiza as mesmas funções dos comandos anteriores, mas
permite analisar se o elemento está visível ou não. Ela ainda permite os
mesmos parâmetros dos comandos anteriores.
*/

ocult = true;
$(document).ready (
function() {
$("#bot").click(
function() {
$("p").toggle("slow");
$("#divForm").toggle("slow");
if (ocult) {
document.getElementById('bot').innerHTML = 'Ocultar';
ocult = false;
} else {
document.getElementById('bot').innerHTML = 'Responder';
ocult = true;
}
});
});

/*Função .delay(): Programa par cada evento um tempo de espera
estimado em milessegundos como parâmetro. Pode ser combinada com outras funções.
*/


$(document).ready (
function() {
$("#b1").click(
function() {
$('div').add('p').hide();
$('#conteudo1').show('slow');
$('#conteudo1 p').show('slow');
});

$("#b2").click(
function() {
$('div').add('p').hide();
$('#conteudo2').show('slow');
$('#conteudo2 p').delay(1500).show('slow');
});


});

/*FUNÇÕES DE OPACIDADE: Podemos controlar a opacidade dos elementos tonando-o
totalmente opaco ou invisível, assim como o nível de opacidade com os comandos
.fadeIn, .fadeOut(), .fadeTo(), fadeToggle*/

$(document).ready (
function() {
$('input[name="bot1"]').click(
function() {
$("img").fadeOut('slow');
$("#img1").fadeIn('slow');
});

$('input[name="bot2"]').click(
function() {
$("img").fadeOut('slow');
$("#img2").fadeIn('slow');
});
});

/*Função fadeTo(): controla o nível de opacidade do elemento html*/

$(document).ready (
function() {
$('input[name="bot"]').click(
function() {
var valor = $('input[name="opacidade"]').val();
valor = valor/100;
$(".divLight").fadeTo("slow", valor);
});
});

/*Fadetoggle(): altera o modo de visibilidade de um elemento voltando a
seu estado origignal quando atividade novamente.
Sintaxe:
$("elemento").fadeToggle(velocidade);*/

$(document).ready (
function() {
$("a").hover(
function() {
$("#resposta").fadeToggle();
});
});

Desenvolvimento da Atividade Prática 3 - DWII

Segue o link para a Atividade Prática 3:

Atividade prática 3

Algumas dicas para o desenvolvimento do mesma:

Estrutura HTML:

<html>
<head>
<title>Atividade prática 3 - JQUERY </title>
<link href="css/estilo.css" rel="stylesheet" type="text/css"></link>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/myjquery.js" type="text/JavaScript"></script>
</head>

<body> 
<div id="pcores">
<div class="tam" id="cor1"> </div>
                <div class="tam" id="cor2"> </div>
                <div class="tam" id="cor3"> </div>
                <div class="tam" id="cor4"> </div>
        </div>
</body>
</html>

Estrutura CSS:

body {
 background-color: #008B8B;
}

#pcores {
 background-color: #FFF;
 width: 250px;
 height: 70px;
 float: right;
}

.tam {
 width: 40px;
 height: 40px;
 background-color: red;
 display: inline;
 float: left;
 margin: 11 11 11 11;
}

#cor1 {
 background-color: #008B8B;
 }

#cor2 {
 background-color: #F0E68C;
 }

#cor3 {
 background-color: #4682B4;
 }

#cor4 {
 background-color: #8B008B;
 }

Estrutura jQuery (ideia inicial, desenvolva o restante):

$(document).ready (
function() {
$("#cor1").click(
function() {
$("body").css("backgroundColor","#008B8B");
});
});

Observações:

• Crie a estrutura de pastas que vocês já conhecem;
• Não esqueçam de incluir dentro da pasta js o aquivo (código fonte) do jQuery.
• Lembre-se de que para cada uma das estruturas acima é criado um arquivo;  

Boa sorte!

Desenvolvimento da Atividade Prática 2

Atividade pŕatica 2

Desenvolver um script em javascript de validação de dados de um formulário html com os seguintes campos:

Nome: (type: text)
Sobrenome: (type: text)
Email: (type: text)
Senha: (type: text)

O script irá validar os campos se nenhum dessas condições forem verdadeira: Caso um deles seja vazio, se o campo de email não tiver pelo menos um "@" e um (.) e o campo de senha não houver pelo menos 6 digitos.

Segue os link de apoio para desenvolvimento da atividade prática 2:
Validação de formulário

Lista de Exercício JavaScript

A seguir os links dos exercícios relacionados a estruturas de controle (if, else, switch) e estruturas de repetição (while, do...while).

Lista de exercício (IF Else Switch)

Lista de exercício (While e For)

Lista de exercício (IF, Else, Switch, etc)

Lista de exercício (Objetos)

Lista de exercício (Eventos)

Avaliação Prática de Desenvolvimento Web 1

Segue uma ajuda para iniciar o nosso projeto web já detalhado na aula anterior.
Boa sorte!

Clique aqui para visualizar o Tutorial Projeto WEB I

Arquivo .pdf da Avaliação Prática

Módulo - Design Web

Olá Alunos

No link abaixo colocarei todo o material para as aulas de design web.

Pasta dos Alunos - Design Web