Apostila MIAMARTI

MIAMARTI WEB DESIGN STUDIO

1 de 45

Administrando o Painel MIAMARTI

www.miamarti.com.br


2 de 45

Índice

1) Logando no Site 3 2) Entendendo a Estruturação do Site 4 3) Criando uma seção 5 4) Incluindo uma Categoria 7 5) Incluindo Página / Notícia / Mercadoria 9 6) Criando um Artigo no FCKEditor 11 7) Inserindo Tabelas 15 8) Limitando o texto as extremidades da tabela 18 9) Mudando a cor de fundo da célula 20 10) Inserindo o Artigo criado em um Menu 22 11) Editando as ferramentas automáticas 26 12) Criando um menu no seu Site 28 13) Gerando sua fatura de hospedagem mensal 33 14) Criando um banner tipo folha 34 15) Atualizando o Livro On-Line MIAMARTI 40 16) Incluindo uma notícia 42 17) Gerenciando Comentários postados no seu Site 43


3 de 45

Painel de Controle MIAMARTI � Logando no Site Para acessar o painel de controle do seu site, basta digitar: http://www.seusite.com.br/miamarti/administrator � Assim que o endereço acima for acessado, a seguinte tela solicitará seu

nome de usuário e senha.

Preencha os dados conforme enviado através do e-mail de cadastro, em seguida pressione Login.

� Se você digitou os dados corretamente respeitando os caracteres

maiúsculos e minúsculos, a seguinte tela será aberta:


4 de 45

Entendendo a Estruturação do Site Todos os sites desenvolvidos pela MIAMARTI, são divididos em Seção e Categoria. As seções são responsáveis pelo direcionamento das Categorias, como mostra os exemplos abaixo: � Seção >>>>> Notícia

o Categoria ::::: Esporte o Categoria ::::: Política

� Seção >>>>> Contato

o Categoria ::::: Financeiro o Categoria ::::: Comercial

� Seção >>>>> Hardware

o Categoria ::::: Mouse o Categoria ::::: Teclado

� Seção >>>>> Software

o Categoria ::::: Windows XP o Categoria ::::: MS Office

Distribuição de Páginas / Notícias / Mercadorias As páginas são classificadas dentro das Seções e Categorias, o que facilita o gerenciamento dos conteúdos, sejam eles notícias, páginas informativas ou mercadorias. O monitoramento das informações podem ser gerenciados conforme sua Categoria pré definida, facilitando assim as modificações e atualizações. Veja os exemplos abaixo: � Seção >>>>> Notícia

o Categoria ::::: Esporte � Not.01 ----- Pelé marca mais um Gol (Data: 00/00/00) � Not.02 ----- Arruda roubou desta vez até a mãe ( Data: 00/00/00)

� Seção >>>>> Epson

o Categoria ::::: Impressoras � Epson Jet 1240xl ----- Valor R$ 0,00 --- Frete grátis � Epson JDKJD ----- Valor R$ 0,00 ----- Desconto a vista

o Categoria ::::: Multi Funcional

� Epson Multifuncional JJH787 ----- Valor R$ 0,00 � ...


5 de 45

Criando uma Seção Para se criar uma seção, basta que o administrador acesse o Painel de Controle MIAMARTI e sigas os passos listados abaixo:

1. Passe o mouse sobre o menu superior Conteúdo

2. Clique em Administrar Seção

3. Assim que o menu Administrar Seção for selecionado o gerenciador vai ser

aberto. Agora clique em Novo .

4. Agora uma tela de cadastro foi aberta, nela você deverá preencher as

informações conforme exemplo abaixo:

� Título o Digite o nome da sua Seção

� Apelido

o Repita o nome da sua Seção

� Publicado o Sim


6 de 45

5. Pronto, agora é só clicar em Salvar

6. A seguinte tela será mostrada com as Seções que foram criadas. Caso deseje

editar , copiar ou até excluir um seção criada, basta selecionar a seção através do quadradinho que encontra-se do lado esquerdo do nome e utilizar as ferramentas que encontram-se no lado direito superior da tala.


7 de 45

Incluindo uma Categoria Para que seja incluída uma categoria, basta seguir os procedimentos listados abaixo: 1. Vá ao menu Conteúdo > Administrar Categorias

2. Clique em Novo

3. O seguinte formulário será listado.


8 de 45

4. Preencha os dados da seguinte forma:

� Título o Nome da Categoria

� Apelido

o Repita o Nome da Categoria

� Publicado o Sim

� Seção

o Selecione a Seção que esta categoria pertence, por exemplo Notícias

� Agora Clique em Salvar

5. Pronto, agora a seguinte tela será listada com as Categorias Criadas. Caso

deseje modificar, copiar ou excluir um categoria, selecione a caixa que encontra-se no lado esquerdo do nome e utilize uma das ferramentas que estão localizadas no lado direito superior da tela


9 de 45

Incluindo uma Página / Notícia / Mercadoria Para que seja incluída uma Página, Notícia ou Mercadoria, basta selecionar o menu Conteúdo > Administrar Artigos

Assim que este for selecionado a seguinte tela será aberta:

Note que no canto Superior Direito existem algumas ferramentas, estas ferramentas serão utilizadas para que se gerencie as páginas, notícias ou mercadorias dispostas no site.

Os comandos são bem simples e todos em português. Para incluirmos uma nova página, basta clicar em Novo.

Em nosso sistema as páginas , notícias e anúncios são classificados como Artigos.


10 de 45

Incluindo um Artigo

A inclusão de uma página é bem simples, basta preencher os campos básicos do formulário solicitado e em seguida montar a página, notícia ou anúncio no editor que encontra-se logo abaixo. O editor utilizado pela MIAMARTI é o FCKEditor, este sistema é atualmente o mais completo disponibilizado no mercado. O FCK Editor utiliza de uma licença GPL/GNU e pode ser comercializado de forma livre, desde que este atendas as exigências impostas pela GNU. Este por sua vez encontra-se totalmente livre de qualquer bloqueio ou irregularidade pois atende todos os requisitos do Software Livre e disponibiliza seus códigos através do respectivo FTP.

Iniciando a inclusão do Artigo.

1) Em Título coloque o nome da página, notícia ou anúncio. 2) Repita o Título para o Apelido

3) Selecione uma Seção e uma Categoria, caso seja uma página livre que não se enquadre em nenhuma classe, selecione Qualquer.

4) O item Publicado define se o artigo deverá entrar em vigor ou não 5) O item Exibir na Página Inicial define se este artigo é a pagina principal ou não


11 de 45

Criando o Artigo no Editor FCKEditor

Os comandos disponíveis no FCK são bem parecidos com o Microsoft Word e agradam grande parte dos usuários. Basicamente os comandos Centralizar, Negrito e configurações de Fonte e Cores são bem similares e intuitivos, no entanto existem também recursos mais avançados que iremos aprender daqui para frente.

Páginas de Internet possuem características bem definidas em relação a distribuição de textos e imagens e podem ser gerenciadas através de Folha de Estilos ou Tabelas. Quando queremos que um texto contorne uma imagem, não basta apenas que esta seja inserida em um lugar pré-definido, temos que dizer ao sistema qual comportamento este deverá exercer em relação a sua publicação.

Vamos fazer agora um exemplo prático: Clique em ImageMananger:


12 de 45

Selecione a imagem desejada: Observe que os dados referentes a imagem já foram carregados automaticamente, este é um dos recursos que a MIAMARTI disponibilizou para facilitar o dia-dia do desenvolvedor. O campo Alt é responsável por mostrar na tela uma caixinha amarela com informações da imagem assim que o usuário passa o mouse sobre ele. Repare que o sistema preencheu este campo com o nome da imagem, modifique-o conforme desejado, pode ser apenas um nome ou um pequeno texto.

Observe que o item Aling está selecionado como Baseline, isto significa que o texto vai ficar ao lado da imagem mais não vai contornar seu corpo mais sim ser incluída na parte inferior da mesma. Para que o texto corra em torno da mesma, selecione este campo como Lefth

Agora pressione OK.


13 de 45

Repare que a imagem foi incluída na página:

Vamos agora iniciar nossa digitação para vermos o que acontece:

O texto contornou a imagem conforme esperado, com tudo caso deseje modificar esta configuração, clique sobre a imagem e selecione novamente o menu ImageMananger.


14 de 45

Modifique os critérios desejados em seguida pressione OK


15 de 45

Inserindo Tabelas Para que seja inserida uma tabela, basta clicar no menu Insert/Edit table :

Assim que este for selecionado uma janela de propriedades será exibida:

Os campos listados são responsáveis pela distribuição das Linhas e Colunas que farão parte da tabela que será criada: Rows ::::: Linhas Columns ::::: Colunas Se quisermos criar uma tabela com 3 linhas e 2 colunas colocaremos Rows com 3 e Columns com 2. Em Headers definimos aonde será incluso o cabeçalho, por exemplo: First Rows ::::: Primeira Linha First Column ::::: Primeira Coluna Both ::::: Ambos None ::::: Nenhum Em Border size define-se a largura da borda, caso não se queira borda, coloca-se 0. Em Alingnment define-se a onde a tabela deverá ser incluída, no meio da página, a esquerda ou a direita. Left ::::: Esquerda Center ::::: Centro Right ::::: Direita


16 de 45

Em Cell spacing define-se o espaço que deverá ser colocado entre uma célula da tabela e outra. Em Cell padding define-se qual é o espaço interno que deverá ser incluído na tabela. Em Width seleciona-se a largura da tabela e em Hight a altura. Após a definição dos campos acima selecione OK.

Caso nossa tabela seja montada conforme o exemplo acima o resultado que teremos seria este

Caso deseje aplicar um estilo próprio a tabela, clique com o mouse em uma de suas laterais e em seguida clique em IStylesEditor .


17 de 45

Uma janela será aberta, selecione Border e modifique conforme desejado, em seguida Clique em OK.

Caso os parâmetros sejam selecionados conforme o modelo acima, o resultado deverá ser assim:

Repare que quando digitamos algo na primeira coluna as informações ficam em negrito, isto acontece pois nós selecionamos que a primeira coluna seria o cabeçalho (Head).


18 de 45

Limitando o texto as extremidades da tabela Muitas vezes nós definimos que uma tabela terá a largura de 200px por exemplo, no entanto quando começamos a digitar o texto esta tabela começa a se expandir conforme este é redigido. Este é um problema muito comum enfrentado por desenvolvedores web, no entanto pensando nisto a MIAMARTI desenvolveu uma técnica chamada Word Wrap que define as características do texto qual será seu comportamento em contato com uma tabela. Texto em uma célula sem Word Wrap :

Texto em uma célula com Word Wrap :


19 de 45

Para que este recurso seja habilitado, basta que se clique com o botão direito do mouse sobre a célula assim que a primeira palavra for incluída, em seguida selecione a opção Cell >> Cell Properties

Uma janela será aberta e a opção Word Wrap deverá ser selecionada como Yes.


20 de 45

Cor de Fundo da Célula Caso deseje modificar a cor de fundo da célula utilize o campo Background da tela acima. Para isto selecione o botão Select... e clique sobre a cor desejada, em seguida pressione OK.

Verifique que o código da cor foi incluído no campo Background , agora é só pressionar OK novamente.


21 de 45

O resultado será este


22 de 45

Inserindo o Artigo criado em um Menu Mesmo seu artigo sendo criado e salvo corretamente, este ainda não será incluído em seu site, e as pessoas não vão poder velos. Para que este seja disponibilizado, devemos amarra-los em algum menu. Vá até Menus >> Main Menu* para inserir no Menu Principal (Main Menu*) ou no Menu Superior (Top) .

A seguinte tela será mostrada, clique em Novo .

Uma lista de opções será mostrada, clique em Artigos


23 de 45

Repare que uma nova ramificação foi criada, selecione Layout Padrão de Artigo

Um formulário será aberto onde você preenchera os dados do link.

Basicamente este procedimento é bem parecido com os outros visualizados anteriormente.

o Em Titulo coloca-se o nome do link que aparecerá no menu. o Em Apelido repete-se o nome do link

Verifique que existe uma janela chamada Nível de Acessos, nesta janela nós definimos quais pessoas poderão acessas esta página. Se esta for pública coloca-se Publico, se for fechada a assinantes coloca-se Registrado ou se for de uso exclusivo dos administradores do site coloca-se Especial.


24 de 45

Repare que até agora nós não definimos qual é o artigo que será aberto. Para se selecionar um artigo, clique em Selecione na área Parâmetros – Básico.

Uma janela será aberta com todos os artigos disponíveis, clique sobre o artigo desejado.

Pronto agora é só clicar em Salvar.


25 de 45

Repare que o menu Pelé foi incluído no Menu Principal

Ou clicar no link criado o artigo que editamos anteriormente vai ser chamado na página conforme desejado.


26 de 45

Editando as ferramentas automáticas Repare que no artigo que criamos, nossos sistema selecionou automaticamente algumas ferramentas e listou em nossos site, estas ferramentas são marcadas como padrão em nossos gerenciador e podem ser modificadas facilmente.

Vá até Conteúdo >> Administrar Artigos

Clique sobre o artigo


27 de 45

Clique em parâmetros avançados

Pronto, agora é só selecionar os itens desejados.


28 de 45

Criando um Menu no seu Site

1-) Utilize o menu Menus para selecionar o local onde o menu será criado: Main Menu* referência-se ao menu principal, e o menu TOP ao menu superior do seu site.

2-) Após clicar no menu desejado, uma lista será mostrada com os itens que compõem este menu no momento, em seguida clique em Novo:


29 de 45

3-) Uma lista será mostrada com as opções possíveis:

4-) Clique em Artigos; Uma nova ramificação será listada, utilize a opção Layout Padrão de Artigo, a segunda em azul.


30 de 45

5-) Na grade Detalhes do Item do Menu, preencha o formulário com o nome que será mostrado no seu menu como mostra o modelo abaixo:

6-) Em seguida utilize o botão Selecione para identificar qual Artigo deverá ser aberto toda vez que alguém clicar em seu novo menu:

7-) Após clicar no botão uma lista será mostrada, clique sobre o Artigo desejado, em nosso exemplo só existe um artigo criado, o artigo Home, clique sobre ele em seguida clique em Salvar.


31 de 45

8-) Agora acesse o seu site e veja se o menu entrou conforme esperado:

9-) No caso de lojas on-line este link deve mostrar mais de um artigo pois eles listam as mercadorias existentes. Neste caso a ramificação escolhida muda conforme o exemplo abaixo:


32 de 45

10-) Agora a grade Parâmetros está composta por mais algumas opções:

o Em Categoria lista-se a categoria desejada, por exemplo Hardware/Impressoras o Em No. De Destaque lista-se a quantidade de itens em destaque, geralmente

utiliza-se 0. o Em No. De Instruções lista-se a quantidade de anúncios por páginas, até que se

apareça aqueles links <<< 1.2.3.4.5 >>> na parte inferior da página. o Em Colunas a quantidade de colunas existentes. o Em links os itens que deverão aparecer como texto seimples, geralmente utiliza-

se 0.


33 de 45

Gerando sua Fatura de Hospedagem Mensal

1-) Acesse o Painel Administrativo do seu site:

2-) No menu Componentes clique em 1 – Fatura de Hospedagem:

3-) Uma tela azul será listada com o nome do seu domínio e um botão pagar aparecerá depois de alguns estantes na parte inferior da tela. Assim que este for pago depois de alguns dias esta tela aparecerá em branco.


34 de 45

Incluindo um Banner tipo folha 1-) Primeiramente iremos criar nossa arte final, que deve ter 500 x 500, após a rte final em mãos, acesse o painel de controle do seu site, em seguida utilize o botão Administrar Mídia.

2-) A seguinte tela será aberta, clique sobra a pasta banners:

3-) Na parte inferior da tela existe um navegador de arquivos, clique no botão escolher arquivo e selecione a arte final que criamos:

4-) Assim que o arquivo for selecionado clique em abrir, e em seguida pressione o botão Iniciar Envio:


35 de 45

5 - ) O Banner que você criou deve aparecer na lista, juntos com os outros banners, se isto acontecer significa que tudo ocorreu bem:

6-) Cadastre uma categoria: Utilize o menu Componentes >> Banner >> Categorias

7-) Clique em Novo:


36 de 45

8-) Preencha o título e o apelido com o nome da categoria desejada, em nosso exemplo utilizaremos a categoria Comercial, em seguida clique em Salvar.

9-) Após cadastrar a categoria, clique em Clientes:

10-) Preencha o formulário com os dados do cliente que anunciará no seu site, em seguida clique em Salvar.

11-) Após cadastrar seu cliente clique em Banners:


37 de 45

12-) Após clicar em Banners clique em Novo em seguida preencha o formulário com o nome do banner, repetindo este nos campos Nome e Apelido, em seguida selecione a Categoria e o Nome do Cliente com as informações que criamos. Após preencher estes campos, selecione a arque que criamos e enviamos ao administrador de mídia no começo deste tutorial: No campo URL coloque o endereço do site do proprietário do banner, não esqueça de utilizar o http:// antes do endereço.

13-) Após preencher o formulário acima, clique em Salvar.


38 de 45

14-) Em seguida clique no menu Extensões >> Administrar Módulo, se este menu não estiver disponível, comunique o pessoal da MIAMARTI, isto pode ocorrer caso você não possua um plano de administração completo, pois ele é vendido paralelamente ao valor pago ao site:

15-) Na lista de Módulos procure por MIAMARTI Page Peel v4.3, em seguida clique sobre ele:

16-) No campo Parâmetros do Modulo, selecione os campos conforme exemplo abaixo:

o No campo Select Banner Image, selecione novamente a arte final criada. o No campo Select Banner Cliente, selecione o cliente proprietário do banner. o No campo Select Banner Category, selecione a categoria do seu cliente.

Em seguida clique em Salvar.


39 de 45

16-) Após Salvar o banner, agora devemos ativa-lo, para isto clique sobre o balão vermelho que indica o bloqueio, assim ele deve se transformar em um visto que informa a ativação do mesmo:

17-) Assim que este estiver ativo, acesse seu site e veja o banner em atividade na parte superior direita da tela:


40 de 45

Atualizando o Livro MIAMARTI Alguns dos nossos sites disponibiliza um sistema único de livro on-line, que pode ser utilizado para a apresentação de catálogos ou de revistas e folhetos on-line. Sua manutenção é bem simples e pode ser feita por qualquer usuário que conheça um pouco de internet. 1-) Acesse o painel de administração do seu site:

2-) Vá até o menu Componentes >> LIVRO MIAMARTI:


41 de 45

3-) Uma janela será aberta com um botão de procura de arquivos, é através dele que mostraremos onde está nossa página.

As páginas devem estão no formato .jpg e escritas sempre com letras minúscula, exemplo: nunca utilize 01.JPG mais sim 01.jpg . As imagens devem ser nomeadas por números, utilizando sempre dois dígitos, assim a foto 1 ficaria 01.jpg e a foto 10 ficaria 10.jpg. O número de páginas varia conforme o solicitado a MIAMARTI no momento da compra. 4-) Clique em procurar, e selecione a imagem da página, em seguida pressione Cadastrar imagem >> .

5-) Feche o navegador em seguida abra-o novamente e veja se tudo ocorreu conforme esperado.


42 de 45

Incluindo uma Notícia 1-) Entre em contato com o pessoal da MIAMARTI ([email protected]) e peça que o formulário Notícias seja liberado no seu site. 2-) Dentro do Administrador do sei Site, clique em Adicionar Novo Artigo.

3-) Preencha o formulário do artigo conforme feito anteriormente.

4-) Nos campos Seção e Categoria preencha da seguinte forma: Seção >> Notícias e Categoria >> A categoria disponível.

5-) Clique em Salvar e vá ao site para testar.


43 de 45

Gerenciando comentários 1-) Acesse o painel de controle do seu site:

2-) Vá ao menu Componentes >> !Joomla comment >> Manage Comments:

3-) Uma lista com os comentários postados será mostrada, através dela você pode publicar, despublicar ou até excluir um comentário.


44 de 45

4-) Através do ícone abaixo, você consegue publicar ou despublicar o comentário, basta apenas clicar sobre ele:

5-) No menu Content Settings é possível configurar informações como quem poderá comentar, ou se este comentário deverá passar por aprovação.

6-) Vá a aba Security:

7-) O item Only registered indica que apenas pessoas registradas poderão comentar este artigo, já o item Autopublish comments, indica que os comentários deverão passar por aprovação antes de serem publicados.

8-) Em seguida salve as modificações através do botão Salvar na parte superior direita:


45 de 45

Documents

Apostila MIAMARTI