#html/css básico

[josegremarquez]

CSS: Más Allá de los Estilos Básicos

CSS es una herramienta indispensable para darle vida a nuestras páginas web. Sin embargo, un mal uso puede llevar a problemas de rendimiento, mantenimiento y compatibilidad. En este artículo, exploraremos los conceptos fundamentales de CSS, desde los selectores básicos hasta las convenciones de escritura, y te daremos algunos consejos para evitar errores comunes. Selectores CSS: La Base de…

[anyhs-themes]

HIATUS (pt)

Sobre meus temas? Eu não estou mais aceitando encomendas, mas todos os meus temas continuarão disponíveis por enquanto, porém eles não serão mais atualizados, então use por sua própria conta e risco.

Onde me encontrar? Você ainda pode me encontrar no meu blog pessoal (@anyhsalinas ). E se tiver uma pergunta relacionada a temas/HTML/CSS/JavaScript para me fazer, desde que seja uma pergunta simples talvez eu tenha tempo de te ajudar, então mande para o meu blog pessoal (aqui) APENAS. Nem tente perguntar sobre essas coisas nas minhas outras redes sociais onde o foco não é temas para Tumblr, por favor, ou eu irei te bloquear (eu já tive pessoas fazendo isso e é algo que me irrita pra caramba, respeite meus espaços, por favor).

Por que estou parando?

Um dos maiores motivos de eu amar o Tumblr era a possibilidade de personalizar nossos blogs como a gente quisesse e transformar eles no nosso próprios espaço com nosso próprio estilo. E por isso eu comecei a fazer temas pra mim mesma e pra outras pessoas. Mas nos últimos anos o Tumblr tem meio que negligenciado essa característica da plataforma:

Clicar em um blog no Painel do Tumblr agora te leva para uma página com a aparência padrão do painel (essa aqui) e não a versão personalizada do blog (essa aqui), o que fez com que personalizar nossos blogs se torne uma coisa sem sentido porque a gente leva um tempão personalizando e depois o tema pode nunca nem ser visto por ninguém;

Essa mudança também tornou possível que pessoas me mandem mensagens sem nem ver as regras para as minhas mensagens primeiro;

E não vamos esquecer do fato de que agora a gente precisa entrar em contato com a equipe do Tumblr pra pedir e esperar por permissão pra poder usar JavaScript em páginas personalizadas, o que deixou as coisas desnecessariamente mais difíceis pra quem quer usar nossas páginas personalizadas (eles dizem que é por segurança, mas ainda é possível usar scripts no tema principal, então qual é o sentido?).

Vamos falar sobre criar posts também:

Não é mais possível usar alguns códigos básicos de HTML em posts, o que tornou impossível pra mim postar tutoriais (já que isso bloqueia os códigos que eu estou tentando ensinar) -- o que me fez precisar criar um blog no Blogger pra postar meus tutoriais lá, e assim ter que ficar cuidando simultaneamente de 2 blogs sobre exatamente os mesmos assuntos, o que é meio chato;

Também o novo editor de postagens tem tido uns bugs bem chatos comigo. Às vezes, quando eu tento copiar um pedaço do texto que estou escrevendo, ele apenas não copia de jeito nenhum. Às vezes ele duplica parágrafos sozinho sem motivo...

O Tumblr também tem tomado decisões ruins (pelo menos na minha opinião) ao longo dos anos sobre que tipos de conteúdo permitir na plataforma, o que causou sérios problemas para a própria plataforma (como você deve ter visto nas notícias naquela época), mas mesmo antes disso também causou uma grande mudança na comunidade e a maioria dos blogs que eu amava (os blogs de meme, poesia e fandoms de séries e bandas que curto) se mudaram para o Twitter (eu ainda me recuso a chamar de "X", kkk) e outras redes sociais. Então boa parte do que eu amava nessa plataforma se foi pra sempre e as únicas coisas ainda me mantendo aqui são as coisas que eu tenho salvas nos meus blogs, meus posts favoritados e rascunhos (basicamente conteúdo personalizado e mods pra The Sims que eu achei por aqui, kkk).

Eu não tenho usado o Tumblr regularmente há... anos, na verdade. Só às vezes dou uma passada por aqui. E eu não tenho mais sentido alegria em desenvolver temas pra essa plataforma, porque agora, depois de todas essas mudanças, se tornou algo meio sem sentido. Eu também tenho andado ocupada com outros projetos que eu tenho curtido mais fazer, como meus canais no Youtube e artesanato. Então eu tô deixando essa parte da minha vida pra trás... Eu não gosto de dizer que isso é um fim porque eu sempre posso mudar de ideia. Mas a menos que o Tumblr volte a fazer do nosso tema personalizado a página principal dos nossos blogs (ao invés daquela página sem graça com a aparência padrão do Painel), eu não acho que vou voltar a fazer temas pra essa plataforma.

Mas obrigada a todos pelo apoio nesse blog e por usarem meus códigos por todos esses anos! Desejo apenas o melhor pra todos vocês. 💕

— Anyh's Themes (2013 - 2024)

[debbymatt]

Dicas e Recomendações p/ iniciantes em Programação

Tenho me deparado constantemente com os questionamento, de colegas e amigos, sobre: como começar a programar ou para alguns, "codar" ?

Apesar de não ser a minha especialização e muito longe área de interesse, pensei em uma maneira de construir um fluxograma de processo e recomendação de conteúdo para estudar e aprender a programar.

Mas de antemão, deixarei um adendo e recorte de um comentário que li num vídeo do YouTube, tratando justamente sobre o assunto, de Waldeck Vieira.

"Sou desenvolvedor com anos de experiência e vou dar as minhas dicas, principalmente com tantas promessas absurdas que tem hoje de cursos que fazem você virar desenvolvedor em um mês!

Curso é importante sim, mas não vai te fazer virar um desenvolvedor bom em poucos meses!

Estudar é importante sim, mas o que vai fazer você ficar bom, é o treino! Treinar, treinar e treinar muito todos os itens que vou destacar abaixo. É igual aprender a tocar um piano bem, vc nunca vai ser um bom pianista em poucos meses e só estudando teoria, o que vai fazer vc ficar bom é o treino diário!

Não se preocupe em decorar nada, o importante é treinar e entender! Decorar só serve para fazer prova de colégio ou prova de emprego. Mas não mede sua capacidade! Os comandos vc decora praticando!

Já vi muito youtuber bom dizendo que precisa decorar as coisas! Isso é um absurdo, ainda mais hoje que tudo muda toda hora! E cada linguagem vc tem uma forma de escrever os comandos(sintaxe), então não precisa decorar tudo! Ninguém, nem o melhor dev do mundo sabe tudo decorado! O que ele sabe é resolver e entende muita coisa, quando esquece a sintaxe de algo, ele simplesmente consulta na documentação ou na net!

Você só começa a ser um bom desenvolvedor a partir de pelo menos, no mínimo, uns 6 meses de muita prática! Agora ser um dos melhores só fazendo projetos reais e tendo um emprego! Então, mesmo que vc pense em trabalhar com a programação, tenha um emprego, por pelo menos 1 ano! Vc vai ver como vc vai evoluir!

Não precisa começar a estudar só no caderno, escolha uma linguagem, como Python ou JavaScript e pratique nela todos os conceitos!

Itens mais importante para começar e eu iria nessa sequencia. Pratique por pelo menos duas semanas cada item, e tente entender muito bem, e já use uma linguagem, tipo Python ou JavaScript:

Variáveis e seus tipos, case sensitive, constantes, identação do código, condicionais (o famoso if), loops (os famosos for e while), procedures, funções, algoritmos para tratamento de strings, arrays, estrutura de dados aplicada na linguagem escolhida(Essa realmente é uma parte muito importante), conceitos de orientação a objeto. Esse para mim é o básico.

Treine pelo menos uns 5 meses tudo isso! Depois você precisa estudar e praticar, HTML, CSS combinado com JavaScript, mesmo que vc não vá desenvolver para a web, mas vc pode precisar criar um serviço na web para um sistema que vc desenvolveu! Depois estude linguagem SQL para banco de dados, usando uma IDE de desenvolvimento para banco (SQL Server ou MySQL), eu indico!

E uma dica, banco de dados é um mundo a parte, e vc precisa dominar muito a linguagem SQL, dos bancos relacionais (SQL Server, MySQL, Oracle e etc), que é comum em todos os bancos de dados, pois é com ela que vc manipulas os dados, e corrige erros, aumenta a performance de uma consulta e etc!

Então depois de pelo menos mais de 6 meses a 1 ano, estudando e praticando muito tudo isso que coloquei. Desenvolva projetos reais, usando uma linguagem e um banco de dados. E a partir dai, se possível arrume um emprego, e sempre estude e pratique muito em qualquer linguagem e nas novidades do mercado! É isso!".

Portanto, repassado todos os alertas que já venho feito, passarei indicações de conteúdo e ferramentas.

Começaremos pela IDE, mas o que é isso? é um Ambiente de Desenvolvimento no qual utilizamos para programar ou codificar.

Vale ressaltar que a IDE pode variar de linguagem para linguagem no qual ira programar. Citarei alguns a seguir, gratuitos:

JavaScript, recomendo o Visual Studio Code. Pois o VS Code, é uma ferramenta simples, esta sendo constantemente tendo correção de bugs, disponível em diversos idiomas, inclusive PT-Br, compatível com os sistemas: Windows, Linux e Mac. E é possível compilar nas mais diversas linguagens de programação, além de muitas outras funcionalidades, que deixarei vocês conhecerem por si mesmos;

Python, indico o PyCharm e Jupyter Notebook. O VS Code também é uma boa, porém um pouco mais trabalhoso para desenvolver. Mas porque, o python se utiliza de uma IDE especifica ? Por causa, da necessidade de invocar Bibliotecas (coleção de subprogramas usados no desenvolvimento de softwares). Quando trabalhamos com o VS Code por exemplo, toda biblioteca que for utilizar, ira ter que realizar a instalação através do Prompt de comando, ou Terminal, se seu sistema for Linux. Já se vc utilizar IDEs como: Pycharm e Jupyter Notebook, não terá a dor de cabeça de pensar nesse aspecto. E o fato de que não tem a necessidade de criar ou ajustar um venv e outros;

SQL, destaco o MySQL Workbench, Oracle SQL e SQL Server Management Studio (SSMS). O SQL, é uma linguagem que geralmente se organiza em planilha ou tabelas de larga escala, que para quem deseja programar nesta linguagem se faz necessário uma ferramenta que trabalhe especificamente com isso e proporcione uma visualização clara e precisa dos dados, para assim poder fazer a estruturação.

Por se tratar de guia para programadores iniciantes, ficaremos apenas nesses linguagens.

Acrescento que ao contrário do que muitos pensam, HTML e CSS, NÃO SÃO LINGUAGENS DE PROGRAMAÇÃO!

São apenas Linguagens de Marcação e Formatação de Texto e Estilo.

HTML: linguagem de marcação utilizada para estruturar os elementos da página, como parágrafos, links, títulos, tabelas, imagens e até vídeos.

CSS: linguagem de estilos utilizada para definir cores, fontes, tamanhos, posicionamento e qualquer outro valor estético para os elementos da página.

JavaScript: linguagem de programação utilizada para deixar a página com mais movimento, podendo atualizar elementos dinamicamente e lidar melhor com dados enviados e recebidos na página.

Exemplo dessa combinação:

Explicação simples e didática que emprestei da Alura.

Já recomendado IDEs, esclarecido algumas confusões que ocorrem, darei prosseguimento para a indicação de conteúdos para estudo.

Eu particularmente, comecei a ter noção de lógica de programação e a saber a programar jogando os APPs, que foram desenvolvidos especificamente para isso:

Grasshopper, é o aplicativo desenvolvido pela Google, que tem o objetivo de ensinar a linguagem JavaScript, Recursos: quebra-cabeças visuais desenvolvem suas habilidades de resolução de problemas e solidificam os conceitos de programação; feedback em tempo real te orienta como um professor; coleciona conquistas à medida que aprende novas habilidades e ganha certificado.

O aplicativo está disponível para Android e iOS. 

Mimo, o aplicativo te instruí a desenvolver em: HTML, JavaScript, CSS, Python e SQL. Além do que já destaquei no app anterior e a possibilidade de dialogar e competir com outra pessoas que também o utilizam para aprender a programar.

O aplicativo está disponível para Android e iOS. 

Meoweb: Jogo de programação, a ideia do jogo é que você precisa ajudar Agatha a resgatar os gatinhos perdidos. Você precisa resolver os quebra-cabeças que estão nas plataformas para ajudá-la. Você receberá diferentes desafios que precisa resolver para chegar ao próximo nível. Que consiste em comandos em CSS, é muito fofo e divertido.

Disponível apenas para Android.

 Code Combat, é jogo apenas na versão web, onde vocês podem aprender a desenvolver em Python, JavaScript, CoffeeScript e Lua. A curva de aprendizado é bastante suave, começando com comandos básicos de lógica em um universo agradável e colorido. Tudo isso é possível graças à ação de colaboradores do mundo todo, em um projeto aberto, com página no Github. 

Disponível em diversos idiomas, incluindo português.

E a vídeos aulas:

Canal Curso em Vídeo :

Algoritmos e Lógica de Programação;

Banco de Dados com MySQL;

HTML5 + CSS3 + JavaScript;

HTML + CSS (módulo 1);

HTML + CSS (módulo 2);

HTML + CSS (módulo 3);

HTML + CSS (módulo 4);

JavaScript e ECMAScript;

Python 1 (princípios básicos);

Python 2 (Estrutura de Controle);

Python 3 (Estrutura Composta).

Vale ressaltar que uma coisa importantíssima é tornar disponível e visível os seus trabalhos, e uma ótima plataforma para isso, com uma ampla comunidade é o GitHub.

Mas o que é o GitHub ?

É uma plataforma de hospedagem de código-fonte e arquivos com controle de versão usando o Git. Ele permite que programadores, utilitários ou qualquer usuário cadastrado na plataforma contribuam em projetos privados e/ou Open Source de qualquer lugar do mundo. - Wikipédia.

Por ser uma plataforma que será importante para o desenvolvimento de seus projetos e trabalhos, e portfólio futuro, deixarei vídeos que te auxiliaram a adquirir o conhecimento pleno das funcionalidades da plataforma.

Curso de Git e GitHub.

Como personalizar o seu perfil no GitHub.

Ademais, acredito que isso é tudo pessoal, o vídeo que me inspirou em escrever esse post na tentativa de auxiliar, desfazer desentendidos e indica conteúdo, foi o casal do canal Código Fonte TV: O MÍNIMO QUE VOCÊ PRECISA SABER ANTES DE PROGRAMAR!.

No qual desmitifica e apoia toda a argumentação e pontos que destaquei até aqui e é claro recomenda mais conteúdo teórico, além do que já escrevi.

Espero ter ajudado em alguma coisa ou mesmo tirado a dúvida de vocês, sintam-se a vontade de curtir, compartilhar e comentar nestes post e outros.

Desde já agradeço pelo seu tempo e atenção, e até um próximo post.

Referências Bibliográficas do que foi abordado:

HTML, CSS e Javascript, quais as diferenças? ;

IDE PARA PYTHON: O QUE É, COMO ESCOLHER E LISTA DAS MELHORES;

Link das IDEs:

Jupyter Notebook;

MySQL Workbench;

Oracle SQL;

PyCharm;

SQL Server Management Studio (SSMS);

Visual Studio Code.

Vídeo Aulas recomendadas:

Algoritmos e Lógica de Programação;

Banco de Dados com MySQL;

Curso de Git e GitHub.

Como personalizar o seu perfil no GitHub.

HTML5 + CSS3 + JavaScript;

HTML + CSS (módulo 1);

HTML + CSS (módulo 2);

HTML + CSS (módulo 3);

HTML + CSS (módulo 4);

JavaScript e ECMAScript;

Python 1 (princípios básicos);

Python 2 (Estrutura de Controle);

Python 3 (Estrutura Composta).

O MÍNIMO QUE VOCÊ PRECISA SABER ANTES DE PROGRAMAR!

Aplicativos recomendados:

Code Combat;

Grasshopper;

Meoweb: Jogo de programação;

Mimo.

[necromancercoding]

Necro, soy el mismo noni de la ves pasada de las medallas, tengo otra duda respecto a los stats. ¿Donde se activan? ¿Cómo haces para dejarlos visibles ya sea en perfil de post o pagina de perfil simple? Y directo en el PA donde se agregan ¿son las hojas de personaje? Si tienes tutoriales o lecturas de referencia te lo agradecería. Estoy desde mi blog personal, pero ¿podría mandarte mensaje directo desde el de rol?

¡Hola anon! Mi recomendación es, si sabes usar CSS, que uses los campos de Zona de Texto y no los campos RPG. La Hoja de Personaje es... un sistema bastante feo, al menos su edición en el PA. Los campos de perfil de tipo Zona de Texto no admiten HTML como los campos RPG, pero admiten BBCode, que simplemente es HTML con otra nomenclatura. Si en tu RPG pondrías:

<div><span><b>00</b><i>Fuerza</i></span><span><b>00</b><i>Destreza</i></span><span><b>00</b><i>Constitución</i></span></div>

En tu campo de perfil de Zona de texto podrías usar:

[center][u][b]00[/b][i]Fuerza[/i][/u][u][b]00[/b][i]Destreza[/i][/u][u][b]00[/b][i]Constitución[/i][/u][/center]

Es cierto que no tienes acceso a ciertas cosas como las clases, pero como coder que lleva diseñando campos complejos de perfil usando BBCode... No los vas a necesitar con el estado de los selectores CSS (nth-of-type, nth-child, :not(), :has(), [attr]...).

Combínalo con el JS Básico de Personalización de Posts (versión muevecampos) para poder mover las stats a donde te haga falta y puedes hacer maravillas (y editando todo desde el mismo sitio, no teniendo que recorrerte media PA).

¡Saludos!

[faafarchive]

LEVEL UP! ☕

CHEGOU A HORA! Finalmente eu subi de Level no FrontEnd!

Dominei as tecnologias básicas de HTML, CSS e JavaScript.

Agora é hora de começar a avançar com o Next.Js, React, Tailwind css e TypeScript!

Para comemorar esse feito vou postar um vídeo no canal falando sobre o que foi essencial para dominar o "básico"(porém muito difícil) e como montar uma interface interessante para seu GitHub.

[rolmaniacos]

Canva, una app de diseño, con su lema "make complex things simple" acaba de anunciar su nueva skill= CanvaCodes para hacer tablas o quizá, Inclusive un foro completo. Igual y en el futuro ya no necesitamos de los servicios de "diseñadores" más qué pagar el canva pro, pa pensar. // Te informo que estos sistemas ya existen hace años, donde te crean template básicos y cosas. Sin embargo, sí no tienes el conocimiento, por mucho que te lo den, no sabrás que hacer con los códigos. En mi trabajo se ha incluido la IA, pero incluso con la IA debes saber lo que pide, qué necesitas que haga y entender lo que está bien: los diseñadores, desarrolladores y programadores siempre serán necesarios. Así les den las facilidades para que ustedes aprendan

Yo soy programador y en mi entorno, todo se comparte y enseña, por eso existen sitios como github y cientos de videos y espacios donde se enseña lo básico en HTML/Css y JS, lo importante acá es que sepas cómo implementarlo en foroactivo , eso ya requiere más conocimientos, pero suerte, diseñar, desarrollar y programar es divertido :)

Así las cosas. B⊕REDOM.

[itsqmet2023]

¿Qué materias se imparten en la malla curricular de Diseño Multimedia?

En la carrera de Diseño Multimedia en el ITSQMET, la malla curricular de diseño incluye una variedad de materias diseñadas para proporcionar a los estudiantes un conocimiento integral y habilidades prácticas en el campo. Algunas de las materias que se imparten son:

Fundamentos del Diseño Gráfico: Introducción a los principios básicos del diseño, teoría del color, tipografía y composición visual.

Producción de Video: Técnicas de filmación, edición y postproducción, enfocadas en la creación de contenido audiovisual.

Animación 2D y 3D: Capacitación en el uso de software para crear animaciones y efectos visuales dinámicos.

Desarrollo Web: Diseño y programación de sitios web, incluyendo lenguajes como HTML, CSS y JavaScript.

Interactividad: Diseño de experiencias interactivas, aplicando principios de usabilidad y accesibilidad.

Edición de Audio: Técnicas para la grabación, edición y producción de sonido en proyectos multimedia.

Narrativa Visual: Estudio de técnicas de storytelling para comunicar mensajes de forma efectiva a través de medios visuales.

Producción Multimedia: Integración de diferentes medios (video, audio, gráficos) en proyectos cohesivos.

Diseño de Experiencia de Usuario (UX): Principios y prácticas para mejorar la experiencia del usuario en plataformas digitales.

Tendencias en Diseño Digital: Análisis de las tendencias actuales en el diseño multimedia y su aplicación práctica.

Estas materias preparan a los estudiantes para enfrentar los desafíos del mundo laboral en áreas como publicidad digital, entretenimiento, tecnología y educación, dotándolos de las competencias necesarias para destacar en la industria creativa.

[lord-html]

Como fazer um theme em tableless.

Começaremos do zero, por tanto, apague tudo.

Vamos começar com o básico do nosso HTML, o head.

Coloque o seguinte código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head profile="http://gmpg.org/xfn/11">

Agora vamos adicionar o título que ficará na "aba" do navegador. Você pode colocar ele automático ...

<title>{title}</title>

Ou pode trocar {title} por uma frase que você goste, se preferir. Agora vamos pro CSS. Vou explicar o básico do tableless aqui, você pode adicionar complementos para personalização, que você quiser. Adicione o seguinte código para configurar o geral do body:

<style> body { background-image: url('LINK DO BG'); /*Background do theme*/ font-size: 10px; font-family: Tahoma; text-align: justify; color: #COR DA FONTE; }

Agora vamos colocar o style que configura a "página". Ele que vai dar origem ao layout da sidebar e dos posts.

/* layout */ #page { /*** linha VERTICAL do layout ***/ width: 860px; /*largura para a "página" */ background-image: url('URLDAIMAGEM'); /*Imagem de fundo que desce de maneira vertical dando continuação aos posts e sidebar*/ background-repeat: repeat-y; /*quer dizer que se repetirá apenas na vertical*/ margin-left: auto; /*se ajustará de acordo com a tela*/ margin-right: auto; }

Agora vamos colocar a parte do banner! Adicione ao seu CSS:

#header { /*** Topo do layout! ***/ background: url('URL DO BANNER') no-repeat top center; /*ficará no centro, no topo e não se repetirá*/ width: 860px; /*largura da imagem*/ height: 300px; /*altura da imagem*/ }

ATENÇÃO: AS DIMENSÕES DE WIDTH E HEIGHT TÊM QUE SER AS MESMAS DO BANNER QUE VOCÊ FEZ!

Agora vamos configurar as dimensões da sidebar, a largura, o espaço entre a direita e o posicionamento. Adicione:

#sidebar { /*** Sidebar é a coluna do perfil do layout ***/ width: 270px; /*ou a largura que você escolher*/ color: #COR DA FONTE; font-family: Tahoma; font-size: 10px; text-align: justify; padding: 0px; /* espaço do texto entre a width imposta */ float: left; /*alinhado a esquerda*/ margin-top: -10px; /*ajuste para a direita, esquerda e para baixo*/ }

Agora vamos fazer o mesmo com os posts:

#content { /*** conteudo dos posts e das paginas ***/ width: 590px; text-align: justify; margin-top: -10px; padding-left: 0px; float: right; /*alinhado à direita*/ }

Agora o rodapé, aqui vai ficar a imagem que dá origem ao rodapé, e o posicionamento dele: 

#footer { /*** imagem rodapé do layout ***/ background-image: url('http://imagem.jpg'); /*Imagem do rodapé da página*/ background-position: bottom; /*posição para baixo*/ width: 779px; /*largura da imagem*/ height: 30px; /*altura da imagem*/ clear: both !important; /*quer dizer que não importa o tamanho dos posts e sidebar, sempre aparecerá abaixo deles de maneira alinhada, é crucial para deixar que a imagem apareça!*/}

O básico do tableless está pronto. Finalize o css com...

</style>

Agora vamos pro body, que é o corpo do nosso layout. 

Primeiro vamos pro banner e depois a sidebar. Adicione:

<body>

<center>

<div id="page">

<div id="header"></div>

<div id="sidebar">

<!– CONTEUDO DO PERFIL –>

Tudo sobre você aqui<br>

Tudo sobre você aqui<br>

Tudo sobre você aqui<br>

<!– FIM DO CONTEUDO –>

</div>

Coloque no "conteúdo do perfil" o que você quer que apareça na sidebar. Ex: Moderadores, parcerias, etc.

Agora vamos fazer a parte dos posts, o content.

Coloque:

<div id="content"> <!– CONTEUDO DO POST E PAGINAS –>

COLOQUE AS TAGS AQUI!

<!– FIM DO CONTEUDO –>

</div>

No "coloque as tags aqui" você coloca as tags dos posts, esse é o básico delas, o CSS delas é você quem faz (se elas não funcionarem, vocês podem baixá-las no madly luv):

{block:Posts}

<!--TEXTOs-->

{block:Text}

{block:Title}<a href="{Permalink}" class="title">{Title}</a>{/block:Title}

<div>{Body}</div>

{/block:Text}

<!--PERGUNTAS E MENSAGENS-->

{block:Answer}

<strong>{Asker}</strong> perguntou: {Question}<br /><br />

Resposta: {Answer}<br />

{/block:Answer}

<!--LINKS-->

{block:Link}

<a href="{URL}">{Name}</a>

{block:Description}{Description}{/block:Description}

{block:Link}

<!--FOTOS-->

{block:Photo}

<center>{LinkOpenTag}<img src="{PhotoURL-500}" title="{PhotoAlt}" />{LinkCloseTag}</center><br />

{block:Caption}{Caption}{/block:Caption}<br />

{/block:Photo}

<!--FRASES-->

{block:Quote}

<h3><big>"</big> {Quote} "</h3>

{block:Source}— {Source}{/block:Source}

{/block:Quote}

<!--DIALOGOS-->

{block:Chat}

{block:Title}<a href="{Permalink}">{Title}</a>{/block:Title}

<table>

{block:Lines}

<tr>

{block:Label}<td class="name">{Label}</td>{block:Label}

<td class="words">{Line}</td>

</tr>

{/block:Lines}

</table><br />

{/block:Chat}

<!--MUSICAS-->

{block:Audio}

<div style="float:right; margin-top: 6px;"><i>Música ouvida {PlayCount} vezes</i> {block:ExternalAudio}(<a href="{ExternalAudioURL}">download!</a>){/block:ExternalAudio}</div>

<center>{AudioPlayerWhite}</centeR>

{block:Caption}{Caption}{/block:Caption}<br />

{/block:Audio}

<!--VIDEOS-->

{block:Video}

<center>{Video-500}</center>

{block:Caption}{Caption}{/block:Caption}<br />

{/block:Video}

Em {DayOfMonth}-{MonthNumberWithZero}-{Year} às {12Hour}:{Minutes}{AmPm}

{block:RebloggedFrom} via <a href="{ReblogParentURL}">{ReblogParentName}</a> por <a href="{ReblogRootURL}">{ReblogRootName}</a>{/block:RebloggedFrom} 

{block:NoteCount}<a href="{Permalink}">{NoteCount}</a>{/block:NoteCount}

{block:ContentSource}<a href="{SourceURL}" target=blank><b>Source</b></a>{/block:ContentSource}

<a href="http://tmv.proto.jp/reblog.php?post_url={Permalink};">Reblog this!</a>

{block:HasTags}Tags: {block:Tags} <a href="{TagURL}">{Tag}</a>, {/block:Tags}{/block:HasTags}</a>

{block:PostNotes}<br />{PostNotes}{/block:PostNotes}

{/block:Posts}

Agora o rodapé:

<div id="footer"></div>

Vamos finalizar o theme com:

</div>

</center>

COLOQUE AQUI O IFRAME, SE QUISER.

</body>

</html>

Bem, esse é o básico, do básico. O resto é com vocês. Espero ter ajudado. Beijos ;*

[prueba025]

Tecnologia del hoy

para los jovenes

La tecnología web abarca una serie de herramientas, lenguajes y conceptos utilizados para crear y mantener sitios y aplicaciones en línea. Esta tecnología ha evolucionado de manera impresionante en las últimas décadas. Aquí hay algunas de las principales tecnologías web:

1. HTML (HyperText Markup Language)

Función: Es el lenguaje estándar de marcado utilizado para crear la estructura de las páginas web.

Ejemplo de uso: Definir títulos, párrafos, imágenes, enlaces, formularios y otros elementos básicos de una página web.

2. CSS (Cascading Style Sheets)

Función: Se utiliza para definir el estilo y el diseño de una página web, incluyendo colores, fuentes, márgenes, espaciado, disposición de elementos, etc.

Ejemplo de uso: Controlar la apariencia de los elementos creados con HTML, haciendo que el contenido sea más atractivo y responsivo.

3. JavaScript

Función: Lenguaje de programación utilizado para crear interactividad en las páginas web. Permite que los elementos de una página se actualicen sin tener que recargarla.

Ejemplo de uso: Animaciones, validación de formularios, carga dinámica de contenido, efectos en botones y más.

4. Frameworks y Bibliotecas

JavaScript:

React, Angular, Vue.js: Herramientas populares para crear interfaces de usuario dinámicas y aplicaciones web interactivas.

CSS:

Bootstrap, Tailwind CSS: Frameworks para diseñar sitios web de manera más rápida, con diseños predefinidos y responsivos.

Backend (Servidor):

Node.js, Express.js (JavaScript), Django (Python), Ruby on Rails (Ruby): Herramientas para crear aplicaciones del lado del servidor y manejar la lógica del backend.

5. APIs (Application Programming Interfaces)

Función: Permiten que una aplicación interactúe con otra. Pueden ser usadas para obtener datos o realizar acciones en otras plataformas, como redes sociales, servicios de mapas, etc.

Ejemplo de uso: Usar la API de Google Maps para mostrar un mapa interactivo en una página web.

6. Bases de Datos

Función: Almacenan y gestionan los datos que las aplicaciones web necesitan, como información de usuarios, productos o cualquier otro tipo de contenido.

Ejemplo de uso: Bases de datos como MySQL, PostgreSQL, MongoDB.

7. Responsive Design (Diseño Responsivo)

Función: Técnica que asegura que las páginas web se adapten bien a diferentes tamaños de pantalla, desde dispositivos móviles hasta escritorios.

Ejemplo de uso: Uso de unidades relativas, como porcentajes o "media queries" en CSS, para adaptar el diseño.

8. WebAssembly (Wasm)

Función: Permite ejecutar código de bajo nivel en el navegador a una velocidad cercana al código nativo, ampliando las capacidades de la web.

Ejemplo de uso: Ejecutar aplicaciones más intensivas, como juegos o editores gráficos, directamente en el navegador.

9. WebSockets

Función: Protocolo que permite una comunicación bidireccional y en tiempo real entre el cliente y el servidor, ideal para aplicaciones como chats o videojuegos en línea.

Ejemplo de uso: Aplicaciones de mensajería en tiempo real.

10. PWA (Progressive Web Apps)

Función: Aplicaciones web que ofrecen una experiencia similar a la de las aplicaciones nativas, con características como notificaciones push, almacenamiento en caché y acceso sin conexión.

Ejemplo de uso: Aplicaciones web que funcionan bien en dispositivos móviles y de escritorio, incluso sin conexión.

11. SEO (Search Engine Optimization)

Función: Estrategias y técnicas para mejorar la visibilidad de un sitio web en los motores de búsqueda como Google.

Ejemplo de uso: Optimizar contenido, estructura de URL, tiempos de carga y etiquetas para mejorar el ranking.

12. HTTP/HTTPS

Función: Protocolo de transferencia de hipertexto, fundamental para la comunicación entre clientes (navegadores) y servidores. HTTPS es la versión segura.

Ejemplo de uso: Cifrado de la información que se transmite entre el cliente y el servidor, garantizando la privacidad.

13. Herramientas de Desarrollo

Función: Son utilidades que facilitan la creación y el mantenimiento de aplicaciones web.

Ejemplo de uso: Git para el control de versiones, Visual Studio Code como editor de código, Postman para probar APIs.

14. Cloud Computing (Computación en la Nube)

Función: Uso de servidores en la nube para alojar aplicaciones, almacenar datos y ejecutar procesos, eliminando la necesidad de infraestructuras locales.

Ejemplo de uso: Plataformas como AWS, Google Cloud, y Microsoft Azure.

Conclusión:

La tecnología web está en constante evolución, y el uso de estas herramientas y técnicas permite a los desarrolladores crear sitios y aplicaciones cada vez más sofisticadas, rápidas y adaptadas a las necesidades de los usuarios. ¿Te interesa saber más sobre alguna tecnología específica o cómo implementarla?

[tecnologiawebfullpro]

Tecnologia web

La tecnología web abarca una serie de herramientas, lenguajes y conceptos utilizados para crear y mantener sitios y aplicaciones en línea. Esta tecnología ha evolucionado de manera impresionante en las últimas décadas. Aquí hay algunas de las principales tecnologías web:

1. HTML (HyperText Markup Language)

Función: Es el lenguaje estándar de marcado utilizado para crear la estructura de las páginas web.

Ejemplo de uso: Definir títulos, párrafos, imágenes, enlaces, formularios y otros elementos básicos de una página web.

2. CSS (Cascading Style Sheets)

Función: Se utiliza para definir el estilo y el diseño de una página web, incluyendo colores, fuentes, márgenes, espaciado, disposición de elementos, etc.

Ejemplo de uso: Controlar la apariencia de los elementos creados con HTML, haciendo que el contenido sea más atractivo y responsivo.

3. JavaScript

Función: Lenguaje de programación utilizado para crear interactividad en las páginas web. Permite que los elementos de una página se actualicen sin tener que recargarla.

Ejemplo de uso: Animaciones, validación de formularios, carga dinámica de contenido, efectos en botones y más.

4. Frameworks y Bibliotecas

JavaScript:

React, Angular, Vue.js: Herramientas populares para crear interfaces de usuario dinámicas y aplicaciones web interactivas.

CSS:

Bootstrap, Tailwind CSS: Frameworks para diseñar sitios web de manera más rápida, con diseños predefinidos y responsivos.

Backend (Servidor):

Node.js, Express.js (JavaScript), Django (Python), Ruby on Rails (Ruby): Herramientas para crear aplicaciones del lado del servidor y manejar la lógica del backend.

5. APIs (Application Programming Interfaces)

Función: Permiten que una aplicación interactúe con otra. Pueden ser usadas para obtener datos o realizar acciones en otras plataformas, como redes sociales, servicios de mapas, etc.

Ejemplo de uso: Usar la API de Google Maps para mostrar un mapa interactivo en una página web.

6. Bases de Datos

Función: Almacenan y gestionan los datos que las aplicaciones web necesitan, como información de usuarios, productos o cualquier otro tipo de contenido.

Ejemplo de uso: Bases de datos como MySQL, PostgreSQL, MongoDB.

7. Responsive Design (Diseño Responsivo)

Función: Técnica que asegura que las páginas web se adapten bien a diferentes tamaños de pantalla, desde dispositivos móviles hasta escritorios.

Ejemplo de uso: Uso de unidades relativas, como porcentajes o "media queries" en CSS, para adaptar el diseño.

8. WebAssembly (Wasm)

Función: Permite ejecutar código de bajo nivel en el navegador a una velocidad cercana al código nativo, ampliando las capacidades de la web.

Ejemplo de uso: Ejecutar aplicaciones más intensivas, como juegos o editores gráficos, directamente en el navegador.

9. WebSockets

Función: Protocolo que permite una comunicación bidireccional y en tiempo real entre el cliente y el servidor, ideal para aplicaciones como chats o videojuegos en línea.

Ejemplo de uso: Aplicaciones de mensajería en tiempo real.

10. PWA (Progressive Web Apps)

Función: Aplicaciones web que ofrecen una experiencia similar a la de las aplicaciones nativas, con características como notificaciones push, almacenamiento en caché y acceso sin conexión.

Ejemplo de uso: Aplicaciones web que funcionan bien en dispositivos móviles y de escritorio, incluso sin conexión.

11. SEO (Search Engine Optimization)

Función: Estrategias y técnicas para mejorar la visibilidad de un sitio web en los motores de búsqueda como Google.

Ejemplo de uso: Optimizar contenido, estructura de URL, tiempos de carga y etiquetas para mejorar el ranking.

12. HTTP/HTTPS

Función: Protocolo de transferencia de hipertexto, fundamental para la comunicación entre clientes (navegadores) y servidores. HTTPS es la versión segura.

Ejemplo de uso: Cifrado de la información que se transmite entre el cliente y el servidor, garantizando la privacidad.

13. Herramientas de Desarrollo

Función: Son utilidades que facilitan la creación y el mantenimiento de aplicaciones web.

Ejemplo de uso: Git para el control de versiones, Visual Studio Code como editor de código, Postman para probar APIs.

14. Cloud Computing (Computación en la Nube)

Función: Uso de servidores en la nube para alojar aplicaciones, almacenar datos y ejecutar procesos, eliminando la necesidad de infraestructuras locales.

Ejemplo de uso: Plataformas como AWS, Google Cloud, y Microsoft Azure.

Conclusión:

La tecnología web está en constante evolución, y el uso de estas herramientas y técnicas permite a los desarrolladores crear sitios y aplicaciones cada vez más sofisticadas, rápidas y adaptadas a las necesidades de los usuarios. ¿Te interesa saber más sobre alguna tecnología específica o cómo implementarla?

[guardianasdelrpg]

Es cierto que nadie experimenta en cabeza ajena, al menos a mi las de Entourage no me han fallado cuando les he comisionado algo, así que para mí la acusación que les hicieron se redujo drásticamente a "Lo que no fue en mi año no me hace daño". Personalmente de tener la oportunidad volvería a comisionar con ellas. Sé de CSS y HTML, pero me da flojera hacer mis skins. Si tengo dinero para pagarle a alguien, y me gusta el diseño, pues vaya y pase. Y si no me gusta pues lo digo de frente, si las cosas no salen bien mando reclamo a Paypal y asunto resuelto. // Las de Entourage jamás te vana entregar antes de los 3 meses que te permite PayPal para hacer un reclamo. Contratar estafadoras sin saberlo es una cosa, ya viendo lo que han hecho… // Esta será mi última respuesta a esta personita que parece que no entiende el principio básico de cómo funcionan los contratos:

1. Las bases se ponen desde el principio. Si aceptas las condiciones, te jodes y bailas.

2. Si algo no te gustó pero no lo hablaste a tiempo, te jodes y bailas.

3. Si en las condiciones dice que no hay reembolsos bajo ciertos parámetros y tú lo aceptaste, adivina qué: Te jodes y bailas.

Naturalmente no vas a meter reclamación a Paypal para que te regrese el 100% si de entrada las condiciones que te pone la gente a la que comisionas no te lo permiten. Si es pago contra entrega, todavía puedes apelar. Pero en fin, yo sostengo que a mí no me han quedado mal, y si a mí no me han fallado entonces los demás me importan lo mismo que un cacahuate rancio. Repito, lo que no fue en mi año, no me hace daño.

Ahora sí, a otra cosa, ¿quién tiene hambre? 👀

Cuanta empatía (?)

Lo llamas contrato, pero realmente nunca se llegó a firmar nada. Todo era de boca a boca. Muchas veces dejar algo por escrito ya lo hace vinculante, pero no creo que haya recurso suficiente cómo para llegar a un proceso legal así que su única baza era que los tumblrs le dieran su voz a su caso para que la comunidad sea consciente de que el bueno no es tan bueno ni el malo tan malo.

Y si, yo tengo hambre (?) Últimos asks del tema ya.

Ahri ❤️

[marshalmori-blog]

Desenvolvendo Apps de IA com MESOP

Assuntos Abordados:

Introdução ao Mesop

Características principais do Mesop

Conceitos fundamentais e implementação prática

Vantagens e diferenciais no desenvolvimento de IA

Importância do Mesop para o futuro da criação de apps de IA

Introdução ao Mesop

O Mesop é uma ferramenta inovadora que permite a desenvolvedores criarem rapidamente aplicativos de inteligência artificial para a web, sem a necessidade de conhecimento aprofundado em desenvolvimento frontend. Projetado para simplificar o processo de criação de aplicativos, o Mesop elimina a complexidade de design de interface, permitindo que desenvolvedores foquem na lógica e funcionalidades da aplicação em vez da apresentação visual.

Mesop oferece uma série de ferramentas e componentes pré-configurados que agilizam o desenvolvimento de aplicações inteligentes e interativas. Ele vem ganhando destaque por sua versatilidade e pela capacidade de auxiliar o desenvolvimento rápido de protótipos e produtos finais de IA sem exigir um profundo entendimento de frameworks frontend.

Características Principais do Mesop

Simplicidade na Integração de IA com Interface Web Mesop integra diretamente com modelos de IA e APIs, permitindo criar aplicações interativas que processam dados complexos em tempo real.

Componentes Pré-construídos A plataforma fornece diversos componentes prontos, como botões, entradas de texto, gráficos, e mais, que facilitam a construção de interfaces intuitivas.

Rapidez no Desenvolvimento O desenvolvimento é acelerado com abstrações que eliminam a necessidade de lidar com HTML, CSS, ou JavaScript. Os desenvolvedores focam no Python, aproveitando a linguagem para gerenciar a lógica do app.

Conceitos Fundamentais e Implementação Prática

Estruturação de Projetos com Mesop

Mesop é construído sobre uma abordagem modular que permite a fácil incorporação de componentes ao longo do processo de desenvolvimento. O código é estruturado de forma que a aplicação seja criada diretamente em Python, e o Mesop cuida da interface de forma transparente.

Um exemplo básico de um app em Mesop, que recebe uma entrada de texto do usuário e responde com uma mensagem gerada por IA, poderia ser algo como no código abaixo.

Porém é importante lembrar que antes de criar o arquivo com o código abaixo você deve seguir os passos mostrados a seguir:

Criar o ambiente isolado com a venv: python3 -m venv venv

Ativar a venv com o código: source venv/bin/activate

Instalar o mesop com: pip install mesop

Criar o arquivo main.py e inserir o código abaixo.

Executar o comando: mesop main.py

Abrir no navegador: localhost:32123

import time import mesop as me

@me.stateclass class State: input: str output: str in_progress: bool

@me.page(path="/") def page(): with me.box( style=me.Style( background="#fff", min_height="calc(100% - 48px)", padding=me.Padding(bottom=16), ) ): with me.box( style=me.Style( width="min(720px, 100%)", margin=me.Margin.symmetric(horizontal="auto"), padding=me.Padding.symmetric( horizontal=16, ), ) ): header_text() example_row() chat_input() output() footer()

def header_text(): with me.box( style=me.Style( padding=me.Padding( top=64, bottom=36, ), ) ): me.text( "Mesop Starter Kit", style=me.Style( font_size=36, font_weight=700, background="linear-gradient(90deg, #4285F4, #AA5CDB, #DB4437) text", color="transparent", ), )

EXAMPLES = [ "How to tie a shoe", "Make a brownie recipe", "Write an email asking for a sick day off", ]

def example_row(): is_mobile = me.viewport_size().width < 640 with me.box( style=me.Style( display="flex", flex_direction="column" if is_mobile else "row", gap=24, margin=me.Margin(bottom=36), ) ): for example in EXAMPLES: example_box(example, is_mobile)

def example_box(example: str, is_mobile: bool): with me.box( style=me.Style( width="100%" if is_mobile else 200, height=140, background="#F0F4F9", padding=me.Padding.all(16), font_weight=500, line_height="1.5", border_radius=16, cursor="pointer", ), key=example, on_click=click_example_box, ): me.text(example)

def click_example_box(e: me.ClickEvent): state = me.state(State) state.input = e.key

def chat_input(): state = me.state(State) with me.box( style=me.Style( padding=me.Padding.all(8), background="white", display="flex", width="100%", border=me.Border.all( me.BorderSide(width=0, style="solid", color="black") ), border_radius=12, box_shadow="0 10px 20px #0000000a, 0 2px 6px #0000000a, 0 0 1px #0000000a", ) ): with me.box( style=me.Style( flex_grow=1, ) ): me.native_textarea( value=state.input, autosize=True, min_rows=4, placeholder="Enter your prompt", style=me.Style( padding=me.Padding(top=16, left=16), background="white", outline="none", width="100%", overflow_y="auto", border=me.Border.all( me.BorderSide(style="none"), ), ), on_blur=textarea_on_blur, ) with me.content_button(type="icon", on_click=click_send): me.icon("send")

def textarea_on_blur(e: me.InputBlurEvent): state = me.state(State) state.input = e.value

def click_send(e: me.ClickEvent): state = me.state(State) if not state.input: return state.in_progress = True input = state.input state.input = "" yield

for chunk in call_api(input): state.output += chunk yield state.in_progress = False yield

def call_api(input): # Replace this with an actual API call time.sleep(0.5) yield "Example of streaming an output" time.sleep(1) yield "\n\nOutput: " + input

def output(): state = me.state(State) if state.output or state.in_progress: with me.box( style=me.Style( background="#F0F4F9", padding=me.Padding.all(16), border_radius=16, margin=me.Margin(top=36), ) ): if state.output: me.markdown(state.output) if state.in_progress: with me.box(style=me.Style(margin=me.Margin(top=16))): me.progress_spinner()

def footer(): with me.box( style=me.Style( position="sticky", bottom=0, padding=me.Padding.symmetric(vertical=16, horizontal=16), width="100%", background="#F0F4F9", font_size=14, ) ): me.html( "Made with <a href='https://google.github.io/mesop/'>Mesop</a>", )

Vantagens e Diferenciais no Desenvolvimento de IA

Foco no Python: Mesop permite que o desenvolvimento de aplicativos de IA seja realizado exclusivamente em Python, facilitando o trabalho de desenvolvedores que já dominam a linguagem e eliminando a necessidade de aprender frontend.

Escalabilidade: Mesop foi desenvolvido para ser escalável, permitindo a criação de aplicações robustas que podem atender uma grande quantidade de usuários simultaneamente.

Confiabilidade: Como uma ferramenta desenvolvida e usada internamente no Google, o Mesop é extremamente confiável e bem documentado, facilitando a criação de aplicações seguras.

Prototipagem Rápida: Desenvolvedores podem criar protótipos de forma ágil e compartilhá-los com facilidade, ideal para equipes de IA que buscam iterar sobre suas ideias de forma dinâmica.

Conclusão

O Mesop representa um avanço significativo para o desenvolvimento de aplicativos de IA, simplificando o processo de criação de interfaces web e permitindo que profissionais se concentrem no que realmente importa: a inteligência do aplicativo. Em um cenário onde o desenvolvimento rápido de IA é essencial, o Mesop aparece como uma ferramenta essencial, abrindo portas para mais desenvolvedores participarem na criação de soluções de IA eficientes e inovadoras.

Livros que Indico

Estatística Prática para Cientistas de dados

Introdução à Computação Usando Python

2041: Como a Inteligência Artificial Vai Mudar Sua Vida nas Próximas Décadas

Curso Intensivo de Python

Entendendo Algoritmos. Um guia Ilustrado Para Programadores e Outros Curiosos

Inteligência Artificial a Nosso Favor

Novos Kindles

Fiz uma análise detalhada dos novos Kindles lançados este ano, destacando suas principais inovações e benefícios para os leitores digitais. Confira o texto completo no link a seguir: O Fascinante Mundo da Leitura Digital: Vantagens de Ter um Kindle.

Amazon Prime

Entrar no Amazon Prime oferece uma série de vantagens, incluindo acesso ilimitado a milhares de filmes, séries e músicas, além de frete grátis em milhões de produtos com entrega rápida. Os membros também desfrutam de ofertas exclusivas, acesso antecipado a promoções e benefícios em serviços como Prime Video, Prime Music e Prime Reading, tornando a experiência de compra e entretenimento muito mais conveniente e rica.

Se você tiver interesse, entre pelo link a seguir: AMAZON PRIME, que me ajuda a continuar na divulgação da inteligência artificial e programação de computadores.

[fernando-arciniega]

Crea un carrito de compras con PHP, MySQL y Bootstrap

Cómo crear una tienda en línea paso a paso: guía completa para estudiantes (Frontend y Backend) En esta guía detallada, te explico cómo construir una tienda en línea paso a paso utilizando PHP, MySQL y Bootstrap. Incluye tanto la interfaz de usuario (frontend) como la interfaz de administración (backend). Es importante seguir cada paso cuidadosamente y mantener la estructura de archivos organizada. PHP es un lenguaje de programación del lado del servidor ampliamente utilizado para desarrollar aplicaciones web dinámicas e interactivas. Es conocido por su facilidad de uso, integración con bases de datos y flexibilidad, lo que lo hace ideal para gestionar formularios, sesiones de usuarios y otros elementos de sitios web. MySQL es un sistema de gestión de bases de datos relacional que permite almacenar, organizar y recuperar grandes cantidades de datos de forma eficiente. Se utiliza en conjunto con lenguajes como PHP para crear aplicaciones web que requieren almacenamiento y manejo de datos, como tiendas en línea, foros y sistemas de gestión de contenido. Bootstrap es un framework de código abierto para el desarrollo de interfaces de usuario responsivas y móviles en la web. Facilita la creación de páginas y aplicaciones con un diseño atractivo, gracias a su conjunto de componentes prediseñados y sus sistemas de grillas flexibles, haciendo que el desarrollo sea más rápido y uniforme. Requisitos previos: - Conocimientos básicos de PHP y MySQL. - Servidor local como XAMPP o WAMP. Paso 1: Crear la estructura de carpetas y archivos Crea la siguiente estructura de carpetas y archivos en tu proyecto. Nota: No es necesario incluir carpetas de CSS ni JS ya que se utilizan archivos en línea. tienda-en-linea/ │ ├── incluir/ │ ├── conexion.php │ ├── encabezado.php │ └── pie.php │ ├── recursos/ │ └── imagenes/ │ ├── admi │ ├── inicio_sesion.php . . . (backend) │ ├── panel_control.php . . . (backend) │ ├── gestion_productos.php . . . (backend) │ ├── agregar_producto.php . . . (backend) │ └── editar_producto.php . . . (backend) │ └── cerrar_sesion.php . . . (backend) │ ├── index.php . . . (frontend) ├── carrito.php . . . (frontend) ├── pago.php . . . (frontend) └── pago_exitoso.php . . . (frontend) Paso 2: Configurar la base de datos - Crea la base de datos en MySQL llamada comercio_electronico e inserta un usuario de ejemplo: CREATE DATABASE comercio_electronico; USE comercio_electronico; CREATE TABLE productos ( id_producto INT AUTO_INCREMENT PRIMARY KEY, nombre VARCHAR(100) NOT NULL, descripcion TEXT, precio DECIMAL(10, 2) NOT NULL, imagen VARCHAR(255), stock INT NOT NULL DEFAULT 0 ); CREATE TABLE usuarios ( id_usuario INT AUTO_INCREMENT PRIMARY KEY, usuario VARCHAR(50) UNIQUE NOT NULL, password VARCHAR(255) NOT NULL ); -- Insertar un usuario de ejemplo INSERT INTO usuarios (usuario, password) VALUES ('administrador', '12345'); Paso 3: Crear la conexión a la base de datos Crea el archivo incluir/conexion.php: Paso 4: Crear el encabezado y pie de página

En esta sección se diseñó el logotipo, el nombre de la tienda y el menú con el siguiente código: Archivo incluir/encabezado.php Tienda en Línea Tienda en Línea Inicio Carrito Pagar Este código es una estructura básica de una página web en HTML con Bootstrap para darle estilo y funcionalidad: - Estructura HTML: - Define la estructura básica de la página con elementos como , , , y . - Meta y Título: El define la codificación de caracteres como UTF-8 para acentos y el lenguaje español. - asegura que el sitio se vea bien en dispositivos móviles. - define el título de la página. - Enlaces a CSS: Se incluyen un archivo de estilos CSS de Bootstrap para usar componentes prediseñados. - Barra de navegación: - : Contiene la barra de navegación. - Logo y enlace: Un logo de Bootstrap es mostrado con . - Botón de menú colapsable: Permite que el menú se colapse en dispositivos móviles. - Enlaces de navegación: con - que dirigen a diferentes páginas (inicio.php, carrito.php, pago.php). El uso de Bootstrap proporciona un diseño responsivo y una presentación uniforme. Archivo incluir/pie.php

Al visualizar este archivo de manera individual, no se ver+an los estilos, ya que están siendo llamados desde el archivo index.php © Tienda en Línea. Todos los derechos reservados.

Creación del Frontend para la tienda en linea

Paso 5: Crear la interfaz de usuario Archivo index.php (Página de inicio): Inicio - Tienda en Línea

Bienvenido a nuestra tienda en línea

Hasta este punto, tu tienda deberá tener la siguiente apariencia:

Nota: no debe mostrar ningun tipo de error, ya que el mensaje de "No hay productos disponibles en este momento" hace una conexión a la base de datos y verifica si hay registros en la tabla productos Archivo carrito.php (Carrito de compras): Este archivo es un script PHP para gestionar un carrito de compras de la tienda en línea. - Conexión a la base de datos: Incluye un archivo externo (incluir/conexion.php) que establece la conexión con la base de datos. - Gestión de la sesión: Inicia la sesión con session_start() y verifica si existe un carrito en la sesión, creando uno vacío si no existe. - Lógica de carrito: - Agregar producto: Incrementa la cantidad del producto si ya está en el carrito; si no, lo agrega con cantidad 1. - Eliminar producto: Elimina un producto específico del carrito y reindexa el array. - HTML y Bootstrap: - Muestra la interfaz del carrito de compras con una tabla que detalla los productos, sus cantidades, precios unitarios, subtotales y opciones de acción (eliminar). - Calcula y muestra el total del carrito. - Enlaces y navegación: - Un botón para proceder al pago (pago.php). - Scripts y estilos: - Incluye estilos CSS y enlaces a las bibliotecas de Bootstrap y jQuery para un diseño y funcionalidad responsivos. El archivo combina lógica de servidor (PHP) y estructura de presentación (HTML/CSS) para gestionar y mostrar un carrito de compras interactivo en una página web.

Carrito de Compras

Carrito de Compras

Producto Cantidad Precio Unitario Subtotal Acciones Total: $ Proceder al Pago Archivo pago.php (Proceso de pago): Este código es un script PHP que gestiona un proceso de pago simulado de la tienda en línea, verificando que haya productos en el carrito y calculando el total. Se incluye el archivo conexion.php para establecer la conexión con la base de datos y se inicia una sesión con session_start() para gestionar el carrito de compras. Si el carrito está vacío (empty($_SESSION)), el script redirige al usuario a carrito.php y finaliza la ejecución (exit()), impidiendo que se acceda al proceso de pago sin productos en el carrito. Cuando el formulario es enviado ($_SERVER === 'POST'), se ejecuta un bucle que recorre los productos en el carrito. Se consulta cada producto en la base de datos usando su id_producto para verificar que existe y obtener su precio, y se calcula el subtotal multiplicando el precio por la cantidad de cada producto y sumándolo al total. La página muestra un encabezado y un formulario con un botón que simula la confirmación de compra y utiliza estilos CSS propios y los de Bootstrap para un diseño responsivo y atractivo. Se incluyen scripts de Bootstrap y jQuery para proporcionar funcionalidad y estilo a la página. Nota: Si el carrito está vacío, el script no realiza ninguna acción relacionada con el procesamiento de pago. En lugar de eso, verifica si el carrito está vacío y, de ser así, redirige al usuario a carrito.php y termina la ejecución del script con exit(). Esto evita que se procese un pago o se muestre la interfaz de pago si no hay productos en el carrito.

Pago

Proceso de Pago

Este es un proceso de pago simulado. Haz clic en "Completar Compra" para finalizar tu compra. Completar Compra Archivo pago_exitoso.php (Confirmación de compra):

Este archivo es una página HTML que muestra un mensaje de confirmación de compra exitosa al usuario. Incluye un encabezado (incluir/encabezado.php) y un pie de página (incluir/pie.php). El cuerpo de la página contiene un contenedor con una alerta de Bootstrap que muestra un mensaje de agradecimiento por la compra y notifica que el pedido ha sido procesado con éxito. También se proporciona un enlace con un botón que redirige al usuario de vuelta a la página de inicio (index.php). La página utiliza estilos CSS personalizados y de Bootstrap para un diseño atractivo y responsivo, y se complementa con scripts de jQuery y Bootstrap para funcionalidad adicional. Compra Exitosa

¡Gracias por tu compra!

Tu pedido ha sido procesado exitosamente. Pronto recibirás un correo con los detalles de tu pedido. Volver al Inicio Nota para los estudiantes

Hasta este punto, ya hemos creado la parte frontend de la tienda en línea. Con los archivos desarrollados, deberían poder probar la tienda y comprobar que todo funcione sin errores. Esto incluye la visualización de productos, el carrito de compras, y el proceso de pago simulado. Cómo probar la tienda antes de completar el backend Para probar las funcionalidades de la tienda, deberán ingresar un registro de producto directamente en phpMyAdmin: - Accede a phpMyAdmin y selecciona la base de datos comercio_electronico. - Selecciona la tabla productos. - Haz clic en la pestaña "Insertar" y añade un nuevo producto con la siguiente información de ejemplo: - nombre: Sudadera - descripcion: Sudadera de algodón unisex - precio: 250.00 - imagen: sudadera.png (asegúrate de que la imagen esté en la carpeta recursos/imagenes/) - stock: 10 - Guarda el registro y vuelve a tu navegador para probar la tienda en línea. Tienes que ver algo así:

Qué puedes hacer ahora: - Navegar por la página de inicio (index.php), verificar que los productos se muestren correctamente. - Agregar productos al carrito (carrito.php) y simular una compra completa (pago.php y pago_exitoso.php).

Creación del Backend para la tienda en linea

En esta sección, desarrollaremos la interfaz de administración (backend) de la tienda en línea. Esto permitirá gestionar productos de manera sencilla a través de un panel de control. La administración incluirá funcionalidades para iniciar sesión, agregar, editar y eliminar productos. Estructura de archivos del backend La estructura del backend estará contenida dentro de la carpeta admin/: tienda-en-linea/ │ ├── admin/ (backend) │ ├── inicio_sesion.php │ ├── panel_control.php │ ├── gestion_productos.php │ ├── agregar_producto.php │ └── editar_producto.php │ └── cerrar_sesion.php Paso 1: Crear el archivo de inicio de sesión (admin/inicio_sesion.php) Este archivo permitirá a los administradores acceder al panel de control.

Recuerda que los datos para acceder se insertaron al inicio al crear la base de datos: Usuario: administrador Password: 12345

Código para inicio_sesion.php: Usuario: Contraseña: Iniciar Sesión Paso 2: Crear el archivo del panel de control (admin/panel_control.php) Este archivo será el punto de acceso principal después de iniciar sesión.

Código para panel_control.php: Panel de Control - Administración

Panel de Control - Administración

Cerrar Sesión Gestionar Productos Agregar, editar y eliminar productos de la tienda. Ir a Gestión de Productos Paso 3: Crear el archivo para gestionar productos (admin/gestion_productos.php) Este archivo mostrará una lista de productos y permitirá editarlos o eliminarlos.

Código para gestion_productos.php: Gestión de Productos

Gestión de Productos

Agregar Producto Cerrar Sesión ID Nombre Descripción Precio Stock Acciones Paso 4: Crear el archivo para agregar productos (admin/agregar_producto.php) Este archivo permitirá al administrador agregar nuevos productos.

Código para agregar_producto.php Read the full article

[contadorpj]

A tecnologia é um campo em constante evolução e, felizmente, cada vez mais mulheres estão se destacando e contribuindo significativamente para o setor. Se você é uma mulher interessada em ingressar ou avançar na área de desenvolvimento, aqui estão cinco cursos incríveis que podem ajudar a impulsionar sua carreira:

👩‍💻 𝗪𝗼𝗺𝗲𝗻 𝗪𝗵𝗼 𝗖𝗼𝗱𝗲 - 𝗖ó𝗱𝗶𝗴𝗼 𝗽𝗮𝗿𝗮 𝗜𝗻𝗶𝗰𝗶𝗮𝗻𝘁𝗲𝘀:

𝘋𝘦𝘴𝘤𝘳𝘪ção: Este curso é perfeito para quem está começando. Ele cobre os fundamentos da programação, incluindo HTML, CSS e JavaScript.

𝘋𝘪𝘧𝘦𝘳𝘦𝘯𝘤𝘪𝘢𝘭: Oferece uma comunidade de apoio global, onde você pode se conectar com outras mulheres na tecnologia.

👩‍🏫 𝗦𝗵𝗲𝗖𝗼𝗱𝗲�� - 𝗪𝗼𝗿𝗸𝘀𝗵𝗼𝗽𝘀 𝗱𝗲 𝗣𝗿𝗼𝗴𝗿𝗮𝗺𝗮çã𝗼:

𝘋𝘦𝘴𝘤𝘳𝘪çã𝘰: Oferece workshops interativos que ensinam desde o básico até o desenvolvimento avançado de front-end.

𝘋𝘪𝘧𝘦𝘳𝘦𝘯𝘤𝘪𝘢𝘭: Projetado especificamente para mulheres, com um ambiente acolhedor e suporte contínuo.

👧 𝗚𝗶𝗿𝗹𝘀 𝗪𝗵𝗼 𝗖𝗼𝗱𝗲 - 𝗣𝗿𝗼𝗴𝗿𝗮𝗺𝗮 𝗱𝗲 𝗩𝗲𝗿ã𝗼:

𝘋𝘦𝘴𝘤𝘳𝘪çã𝘰: Um programa intensivo de verão que ensina programação e habilidades de liderança para jovens mulheres.

𝘋𝘪𝘧𝘦𝘳𝘦𝘯𝘤𝘪𝘢𝘭: Focado em criar uma nova geração de líderes femininas em tecnologia.

👩‍🎓 𝗔𝗱𝗮 𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗲𝗿𝘀 𝗔𝗰𝗮𝗱𝗲𝗺𝘆:

𝘋𝘦𝘴𝘤𝘳𝘪çã𝘰: Um curso gratuito e intensivo de 11 meses que combina aprendizado em sala de aula com um estágio em uma empresa de tecnologia.

𝘋𝘪𝘧𝘦𝘳𝘦𝘯𝘤𝘪𝘢𝘭: Oferece uma experiência prática valiosa e é voltado para mulheres e pessoas de gênero diverso.

👩‍🔧 𝗥𝗮𝗶𝗹𝘀 𝗚𝗶𝗿𝗹𝘀 - 𝗪𝗼𝗿𝗸𝘀𝗵𝗼𝗽𝘀 𝗱𝗲 𝗥𝘂𝗯𝘆 𝗼𝗻 𝗥𝗮𝗶𝗹𝘀:

𝘋𝘦𝘴𝘤𝘳𝘪çã𝘰: Introduz as participantes ao desenvolvimento web usando Ruby on Rails, uma poderosa ferramenta de programação.

𝘋𝘪𝘧𝘦𝘳𝘦𝘯𝘤𝘪𝘢𝘭: Focado em criar um ambiente inclusivo e colaborativo para mulheres.

🔗𝘗𝘢𝘳𝘢 𝘮𝘢𝘪𝘴 𝘪𝘯𝘧𝘰𝘳𝘮𝘢çõ𝘦𝘴, 𝘯𝘰𝘴 𝘤𝘩𝘢𝘮𝘦 𝘯𝘰 𝘞𝘩𝘢𝘵𝘴𝘢𝘱𝘱 (11) 97305-3545

✨o𝘶 𝘷𝘪𝘴𝘪𝘵𝘦 𝘯𝘰𝘴𝘴𝘰 𝘚𝘪𝘵𝘦: 𝘳𝘦𝘤𝘳𝘶𝘵𝘦.𝘵𝘦𝘤𝘩

#recrute #tech #tecnologia #dev

[natauzquiano]

SITIO WEB

Los sitios web se pueden clasificar de diversas maneras, dependiendo de su propósito, estructura y tecnología utilizada.

Sitios Corporativos o Institucionales: Representan la imagen de una empresa o institución, ofreciendo información sobre productos, servicios, historia, equipo, etc. Suelen tener un diseño más formal y estructurado.

Sitios Personales o Portafolios: Diseñados para mostrar el trabajo y experiencia de un individuo, como diseñadores, fotógrafos o programadores.

Blogs: Plataformas en línea donde se publican artículos o entradas sobre un tema específico de forma regular. Son ideales para generar contenido, atraer tráfico y construir una comunidad.

Tiendas en Línea (E-commerce): Se enfocan en la venta de productos o servicios a través de internet. Requieren de un catálogo de productos, carrito de compras, pasarela de pago y sistema de gestión de inventario.

Redes Sociales: Plataformas que permiten a los usuarios crear perfiles, conectarse con otros, compartir contenido y participar en comunidades en línea.

Portales: Sitios web que actúan como punto de entrada a otros recursos en línea, organizando y presentando información de manera temática.

Foros: Plataformas donde los usuarios pueden iniciar y participar en discusiones sobre temas específicos.

Wikis: Sitios web colaborativos donde los usuarios pueden crear, editar y organizar información de manera conjunta.

Aplicaciones Web: Sitios web que ofrecen funcionalidades similares a las aplicaciones de escritorio, como procesadores de texto, hojas de cálculo, etc.

Sitios Estáticos: Su contenido es fijo y no cambia con frecuencia. Se crean utilizando HTML, CSS y, a veces, JavaScript básico.

Sitios Dinámicos: Su contenido se genera de forma dinámica, lo que permite personalizar la experiencia del usuario. Utilizan bases de datos y lenguajes de programación del lado del servidor como PHP, Python o Ruby.

Sitios de Una Sola Página (SPA): Toda la aplicación web se carga en una sola página HTML, y las actualizaciones se realizan dinámicamente a través de JavaScript.

[infotecaweb]

Descripción del curso Los temas incluyen diseño de bases de datos, escalabilidad, seguridad y experiencia del usuario. A través de proyectos prácticos, aprenderá a escribir y utilizar API, crear interfaces de usuario interactivas y aprovechar servicios en la nube como GitHub y Heroku. Al finalizar el curso, obtendrá conocimientos y experiencia en principios, lenguajes y herramientas que le permitirán diseñar e implementar aplicaciones en Internet. Este curso continúa donde lo dejó CS50, profundizando más en el diseño y la implementación de aplicaciones web con Python, JavaScript y SQL utilizando marcos como Django, React y Bootstrap. Lo que aprenderás HTML, CSS Git Python Django SQL, Models, and Migrations JavaScript User Interfaces Testing, CI/CD Scalability and Security Si es un entusiasta de los datos, un profesional de la informática experimentado o está interesado en ingresar a la industria de más rápido crecimiento, este programa de certificación profesional desentraña las complejidades del panorama de datos actual y lo equipa con las habilidades necesarias para crear datos eficientes, precisos y procesables. perspectivas. Este programa de certificación profesional beneficiará a cualquier persona que posea o aspire a los siguientes puestos de trabajo: científico de datos, analista de datos, ingeniero de software, analista de inteligencia empresarial, ingeniero de aprendizaje automático, consultor de análisis de datos. La demanda de especialistas en IA y ML crecerá un 40% entre 2023 y 2027. La programación R tiene una gran demanda entre los científicos de datos. La encuesta salarial de Dice Technology realizada en diciembre de 2022 mostró que el salario promedio de los programadores de R aumentó un 3,8% con respecto a 2019. Contáctanos para más información y comienza a transformar tu futuro ahora mismo! Previatura: para obtener el certificado profesional completo hay que realizar tambien el curso introductorio CS50: Introducción a la informática A partir de CS50: Introducción a la informática, los estudiantes completarán una inmersión intensiva y completa en los conceptos básicos de la informática desarrollados por el renombrado profesor de la Universidad de Harvard, David J. Malan. El curso cubrirá conceptos como abstracción, algoritmos y estructuras y gestión de datos, que servirán como base sobre cómo se utilizan los datos para mejorar la toma de decisiones y las habilidades de pensamiento crítico. Con nuestra ayuda, podrás dominar conceptos clave como Scratch, C, Python, SQL, algoritmos y estructuras de datos, preparándote para enfrentar con confianza las pruebas y proyectos prácticos.