#plantillas html y css

[justadrunkenwhaler]

Foroactivo: ¿Creando una Skin?

Comenzaré diciendo que no conozco lo suficiente sobre Foroactivo (especialmente las plantillas) como para guiar a alguien en la creación de una skin. Estoy convencido de que haré un montón de locuras y habrá más de un diseñador aguantando las ganas de agredirme física y verbalmente. Por lo tanto, aunque esto pueda parecer un tutorial de diseño, no lo es. Se trata más de acompañarme mientras aprendo... a los golpes.

Ahora sí, a trabajar.

Pues... quiero diseñar una skin. Primero lo primero: necesito una temática.

Decidí ir por Fallout porque me gusta y también porque nunca he visto una foro de rol basado en esta saga. Así que nada, el primer paso fue un tiro al piso.

Ahora la paleta de colores, muy importante. Soy daltónico, así que lo último que quiero hacer es elegir colores por cuenta propia. Es por ello que visité un sitio muy nice llamado lospec en el que puedo encontrar paletas para pixel art. No tardé mucho en encontrar una que me gustase "Twilight 5" de Star y, tras crear las variables necesarias en un archivo de CSS, pasé al siguiente paso: ¿Por dónde carajos empiezo a codear?

Puedo encontrar un tutorial en Tumblr, otro por los foros de foroactivo (hehe) y... ¿ya? No sé, algo que no me gusta de esta plataforma es lo poco documentada que está. Lo único que se me ocurrió hacer fue ingeniería inversa.

Comencé inspeccionando el código de un foro recién creado para obtener las ids/clases del navbar y por el camino descubrí algunas variables de javascript que me fueron útiles más adelante. Tras una media hora de darme cabezazos contra el teclado, di con las "plantillas" del foro. Resulta ser que en:

Panel Administrativo > Visualización > Plantillas > General

Existe una plantilla en la que podía modificar la cabecer y barra de navegación del sitio. Esta plantilla es "overall_header".

El editor de texto de foroactivo es feo (siendo amable) así que ni en pedo iba a codear ahí directamente. Fui al vscode de mi pc, creé un archivo HTML, copié el código de foroactivo y tuve acceso a la plantilla con mayor comodidad.

Ahora que sabía de donde salía cada cosa, fue fácil conseguir la barra de navegación:

Acá empezaron mis problemas.

No quería trabajar ul y li, sino que deseaba construir todo desde cero. El problema es que esa porción de código llamada {GENERATED_NAV_BAR} genera sí o sí los links del menú en forma de li. Lo inteligente habría sido darse por vencido y trabajar con listas, pero soy terco así que opté por crear mi propio menú con juegos de azar.

Los elements del navbar no son más que enlaces con parámetros para específicar el tipo de acción, así que generar mis propios enlaces estuvo facilito.

Tuqui, tenemos enlaces. (Aunque esto volvería para romperme el culo más adelante).

Notarás que algunos enlaces tienen atributos llamados data-guest y data-auth. ¿Qué es eso?

Pues... el foro modifica la barra de navegación dependiendo de si eres un invitado o usuario registrado, así que debí replicar la misma funcionalidad. Estos atributos me permiten diferenciar los links a mostrar según que caso. Un poco de javascript y listo, problema resulto:

Acá puedes ver que utilizo una variable llamada _userdata, y es que foroactivo intenta arruinarte la vida si decides diseñar una skin, pero te da migajas para que no te rindas. Esta variable cuenta con varios datos útiles, en especial "session_logged_in" para determinar si el usuario está -o no- conectado. Acá el resto de los campos de dicha variable:

Así que listo, ahora contaba con una barra de navegación 100% funcional y acceso a los datos de mi usuario. Así que... ¿y si le doy una saludadita cuando se conecte? En este caso quería una pequeña sección en la parte superior izquierda de la pantalla que dijera:

"Bienvenido, Forastero" a los invitados

"Bienvenido, Nombre" a los usuarios conectados

Ambas vendrían acompañadas de imagen que sería el avatar para el caso de los usuarios conectados y una imagen por defecto para los invitados. Con eso en mente, me puse el overol y a trabajar.

Esta fue muy fácil. De nuevo, la variable _userdata contaba con los dos campos que necesitaba: username y avatar_link. Un par de clicks por aquí, typeo por allá y listo:

Un menú reactivo, tal y como me gusta. Finalmente, era el momento de abrir una botella de champagne y celebrar mi victoria, pero la realidad me pegó un batazo en toda la cara. ¿Qué pasa con los mensajes privados?

Mi barra de navegación funcionaba, pero no cambiaba en caso de recibir un mensaje privado. Acá no había variable que pudiera salvarme, así que tuve que resolver de una forma que honestamente no me gusta ni un poquito.

La barra de navegación original genera un span cada vez que el usuario recibe un mensaje privado, así que la respuesta estaba justo ahí. Solo debía chequear (con javascript) si ese span existía en el foro y, de ser así, ajustar mi barra de navegación para reflejar el cambio:

Creé una cuenta nueva, envié un mensaje privado al Admin y... listo!

Una vez más, la barra estaba andando. De nuevo, odio esta solución, así que si alguien sabe de una mejor alternativa, soy todo oídos.

Para el resto del día quería crear un tablón o, al menos, la estructura inicial, ajustar las fuentes y colores, agregar animación y poco más. Así que abrí fotochó, recorté al Courier de Fallout New Vegas, probé algunos prototipos y terminé de crear mi cabecera.

Acá un pantallazo de mi foro (so far):

¿Seguiré haciendo este tipo de contenido? Qcyo, puede que sí, puede que no. Todo dependerá de cuan frustrante me resulte la experiencia de diseñar una skin. Hasta ahora ha sido bastante sencillo, pero molesto en algunas secciones.

De cualquier forma, ¡gracias por leer!

— Yo soy el forastero y esta es mi marca.

[rolmaniacos]

Para los que se quejan de los códigos y no quieren aprender ni comprar, aprendan a usar la IA. Y no, no chatgpt. Las IA de interfaces son muy buenas para cosas simples como plantillas de html+css, yo hago cosas medio complejas con tablas de stats, pestañas y botones en ellas.

Podría ser una buena manera de practicar y aprender. B⊕REDOM.

[escritura-situada]

Blog educativo: herramientas y tips

Plataformas, repositorios y creación de historias gráficas

Esta semana les traigo un post que nace de una pregunta de una de nuestras lectoras, quien es profesora de educación superior y quiere conocer algunas herramientas para implementar un blog como recurso didáctico para sus clases virtuales en el próximo semestre.

Si buscamos en la RAE, el blog se define como un “Sitio web que incluye, a modo de diario personal de su autor o autores, contenidos de su interés, actualizados con frecuencia y a menudo comentados por los lectores”, en realidad esta definición está ligado a su origen, son dos bitácoras personales que inician hace casi 30 años y que tuvieron este propósito: contar vivencias y servir de diario cotidiano.

En 1994, el investigador del Laboratorio de Medios del Massachusetts Institute of Technology (MIT), Claudio Pinhanez, creó un sitio llamado “Open Diary” y documentó su vida. En el mismo año surgió el Links.net, creado por un estudiante de Pennsylvania llamado Justin Hall, quien ha sido llamado el padre del blog, el cual habla de su cotidianidad: desde consejos de programación hasta las narrativas de sus relaciones de pareja.

Los blogs han sido muy populares en distintas latitudes y han ido cambiando con los años, desde diarios personales hasta herramienta de marketing. Los blogs como recurso didáctico y de carácter educativo han ido evolucionando desde hace algunas décadas. En mi caso, diseñé blogs para comunicarme con mis estudiantes de 2008 a 2014, a veces utilizaba estas herramientas como repositorios y para dar a conocer recursos adicionales. Posteriormente me mude a otras redes sociales y ahora a otras plataformas educativas como Classroom, sin embargo los blogs tienen una gran ventaja ya que constantemente tendrás que estar pensando en cómo comunicarte con tu audiencia, cómo exponer los diferentes temas, además de cómo expresarse visualmente a través de fotografías, diseños, video y audios.

5 herramientas útiles para la creación del blog

1. Plataformas

Actualmente existen muchas opciones para diseñar un blog. Puedes invertir en un dominio y en un lugar para alojarlo, sin embargo, existen opciones gratuitas en las mismas plataformas que aquí presento:

• Wix.com es una de las plataformas para crear blogs gratuitos que más está creciendo en la actualidad a nivel mundial. Dispone de una interfaz amigable y compatible con el lenguaje HTML. Una de las cuestiones más atractivas, es que cuenta con un sistema editor de arrastrar y soltar. La plataforma es muy intuitiva y nos permitirá diseñar de manera sencilla un sitio más personalizado. También posee una gran colección de plantillas en diferentes categorías para elegir.

• SiteW.com es una plataforma intuitiva y fácil de usar. Cuando entres, la interfaz te permitirá crear una página web gratuita, un blog o un foro, sin necesidad de conocimientos técnicos. También aquí usas la técnica de arrastrar y soltar. Los usuarios disponen de todo lo que necesitan para personalizar y publicar un sitio personal o educativo.

• Weebly.com es una plataforma donde puedes diseñar un blog gratis. Este sitio nos brinda la posibilidad de disponer de un sitio web personal que funcione correctamente en todos los navegadores y en los dispositivos móviles.

• Blogger.com es la plataforma para diseñar un blog gratuito propiedad de Google. En ella tienes muchas plantillas diferentes para configurar el sitio de manera muy sencilla. Esta herramienta permite editar el CSS y el HTML.

• WordPress es un programa de software diseñado para que puedas crear páginas web, blogs y tiendas online. En esta plataforma puedes subir y gestionar contenidos multimedia, texto y posts de tu blog. Esta disponible en 50 idiomas. Existen dos posibilidades para esta opción:

a) WordPress.org es libre de instalar cualquier temas de WordPress y plugins que desee

b) WordPress.com no permite instalar temas y plugins en la mayoría de los planes

La diferencia principal es básicamente los conocimientos en programación que tengas para intervenir la plataforma, de todas formas existen muchos tutoriales disponibles en internet. Es una de las plataformas para hacer un blog gratuito que más usuarios tiene en el mundo

2. Banco de imágenes

Una vez que elijas la plataforma en la que colocarás tu blog. Escribirás contenido relacionado con tu materia en el editor de texto que ofrece la plataforma que elegiste. Coloca etiquetas para que sea más sencillo y para que los lectores busquen fácilmente tus escritos. Muchas veces el contenido que generes va acompañado de imágenes.

Una forma para verificar que tus imágenes sean libres y gratuitas es buscarlas en Google Imágenes (arrastrándola hasta el cajón de búsqueda y revisar las caracterí­sticas de su licencia). Sin embargo, una forma más sencilla es hacer uso de repositorios que clasifican a las imágenes según la licencia para compartir. Acá te dejo algunas opciones:

Creative Commons Search. Este buscador analiza las bases de datos de Google Imágenes, Open Clip Art Library, Flickr, Europeana, SpinXpress y Fotopedia. Cada resultado que encuentres tendrá toda la información necesaria para saber cómo puedes usar la imagen y en caso de ser necesario dar crédito al autor. Además, cuentas con un botón para copiar la atribución en texto enriquecido y otro para copiar el código HTML que enlaza directamente a la fuente original.

Pixabay. Es un banco de imágenes libres que te permite buscar imágenes de diferentes temas, vectores para editar e ilustraciones. También buscar por categorías específicas, por orientación (horizontal o vertical), por tamaño y por colores. Cada foto te indica la atribución y cómo usarla.

Pexels. Es uno de los mejores repositorios, tiene opción de búsqueda de imágenes gratuitas y de pago. Tienen miles de ilustraciones en una gran variedad de categorías y de buena calidad.

3. Herramientas de edición de contenido digital

A veces queremos hacer carteles, infografías o diseños que incluyan texto, imágenes o animaciones para que crear mensajes más atractivos. Existen herramientas especializadas para realizar manipulación de imágenes, creación de ilustraciones, etc., pero si no contamos con conocimiento especializado, hay opciones muy amigables que podamos usar.

Adobe Spark y Canva son herramientas gráficas, con interfaz muy intuitiva, que permite arrastrar texto e imágenes para crear una composición. Ambas herramientas permiten tener una cuenta gratuita y si quieres adquirir elementos más sofisticados, puedes comprar una membresía Premium o Pro la cual tiene un costo mensual. Les dejo un artículo que compara ambas aplicaciones y que les dará más idea: acá.

4. Repositorios de documentos

Los blogs dirigidos al estudiantado por lo general tienen un espacio dedicado a las lecturas y a poner a disposición algunos archivos esenciales de los cursos. Herramientas como Google Drive y Dropbox son opciones populares de almacenamiento en la nube. Puedes usar estas dos plataformas para acceder a tus archivos desde cualquier lugar, compartir documentos y crear copias de seguridad de tus ficheros. Les dejo un artículo donde se explica las funciones, similitudes y diferencias en términos de precios, funciones de sincronización, uso compartido, seguridad y espacio, tanto en planes gratuitos y de pago: acá.

5. Creación de cuestionarios y encuestas

Google Forms. Es una herramienta que nos ayuda en el proceso de aplicar encuestas para nuestras diversas asignaturas. Permite crear un formulario dependiendo de las necesidades que tengamos a su vez nos facilita el trabajo ya que al realizar estas encuestas o exámenes de manera online los datos que se ingresan son almacenados en una hoja de cálculo lo cual no ayuda a sistematizar los datos obtenidos.

SurveyMonkey. Permite realizar encuestas personalizadas para recopilar datos de forma sencilla. Las encuestas se pueden enviar de manera electrónica. La herramienta tiene dos maneras de ingreso, una libre, es decir sin costo alguno y otra pagando una suscripción mensual. Para utilizar dicha herramienta debes registrarte en algunas de estas dos opciones: la suscripción gratuita o la suscripción profesional si necesitamos mayor cantidad de servicios.

Poll Everywhere. Es una herramienta online a través de la cual puedes lanzar una pregunta sobre un tema para que los estudiantes participen en ella de manera anónima, sin crearse ninguna cuenta y a través de sus dispositivos móviles, tabletas u ordenadores. Es de fácil uso: hay que crear una cuenta y posteriormente diseñar una encuesta que genera un enlace al que los estudiantes deben acceder para responder al tema planteado.

Espero que alguna de las herramientas presentadas les sea de utilidad

¿Alguna vez pensaste en crear un blog?

¿Qué temas te gustaría que abordara la próxima vez?

Por favor, comparte tus experiencias, dudas o sugerencias vía correo electrónico o por mensaje directo a mis redes sociales.

Agradezco el tiempo que has dedicado en leerme y nos vemos la próxima semana.

Crédito de la imagen: WOC in Tech Chat (www.wocintechchat.com).

[josegremarquez]

Aplicando CSS a Nuestra Plantilla: Modelo de Caja Tradicional

El modelo de caja es fundamental en CSS. Cada elemento HTML se comporta como una caja, con un contenido, un relleno (padding), una borde (border) y un margen (margin). Al entender y manipular estas propiedades, podemos diseñar nuestras páginas web de manera precisa y creativa. Plantilla: Un Marco para Nuestro Diseño Nuestra plantilla será la estructura básica de nuestra página web. Definirá la…

[necromancercoding]

¡Hola! Primero que todo quería decir que lo que haces es HER MO SO y agradecerte porque tus tutoriales y respuestas a otros ask son de muchísima ayuda. Ahora voy con mi consulta ¿Hay una forma de ocultar para los usuarios el mensaje que aparece si se edita un post pero dejarlo visible para los administradores? Lo vi hace un tiempo en un foro pero no sé cómo se hará. Hablo del mensaje que dice "Última edición por usuario el fecha, editado n° vez"

¡Hola anon! Muchas gracias por tus palabras 💕 Respecto a tu consulta: se puede, pero ten en cuenta que hace uso de JS por lo que en caso de desactivarlo desde el navegador, un usuario/invitado podrá ver esas cositas igual. Entiendo que es más por apariencia que otra cosa, pero por si acaso, yo aviso.

HTML: Dirígete a tu template viewtopic_body (Visualización > Plantillas > General) y dentro de tu post, envuelve la variable {postrow.displayed.EDITED_MESSAGE} en un div llamado .editedmessage (o la clase que más te mole).

CSS: Pon una línea de CSS escondiendo la clase anteriormente mencionada. Tal que:

.editedmessage { display:none; }

JS: Instala esto en temas:

$(function(){ if (_userdata.user_level === 1) { $('.editedmessage').show(); } if (_userdata.user_level !== 1) { $('.editedmessage').remove(); } });

Y listo 😉

[tuwebpage2023]

El diseño web es a la vez un arte y una ciencia

El diseño web es el proceso de utilizar la tecnología para desarrollar un sitio web para una organización agencias publicidad digital bogota.

En este caso, los diseñadores web utilizan lenguajes de marcado como HTML o XML para crear el contenido de una página servicios de marketing digital en bogota.

Por otra parte empresas de marketing, los elementos de un sitio web definidos en HTML pueden estilizarse mediante hojas de estilo en cascada (CSS), que se utilizan para dar formato a las páginas web.

Por lo tanto marketing digital y seo en bogotá, los diseñadores web suelen utilizar tanto HTML como CSS para construir un sitio porque juntos definitivamente cómo aparecerán las páginas en los navegadores.

La creación de sitios marketing digital bogota puede hacerse con herramientas como Adobe Dreamweaver (que requiere un profesional que sepa más de codificación) y plataformas de gestión de contenidos como WordPress agencia designplus.

WordPress empresas marketing digital bogota es uno de los gestores de contenidos más populares y prácticos porque cuenta con una serie de plantillas que pueden servir de base para cualquier sitio. El diseñador web tiene la tarea de instalarlas y personalizarlas según lo que desee cada cliente agencia de marketing digital en bogotá.

¿Cuáles son las ventajas de invertir en un diseño web de calidad?

He aquí cinco ventajas de las que puede disfrutar invirtiendo en un diseño web profesional:

Una buena primera impresión puede marcar la diferencia: El sitio web agencia de marketing bogotá es la presentación de su empresa en los medios digitales. Usted quiere causar una buena primera impresión a cada cliente potencial que la visite, por lo que se preocupa de que su sitio tenga un aspecto profesional. En el caso de su sitio web, la situación no debería ser diferente de la de otras empresas. Debe reflejar la imagen de la empresa. Un sitio web mal diseñado puede hacer pensar a los visitantes que su empresa es anticuada, poco profesional y poco fiable. Esto hará que busquen ofertas como la suya de competidores que tengan un sitio web mejor.

ventaja competitiva puede lograrse de muchas maneras: Tener un sitio web profesional le ayudará a ser visto como una autoridad en su nicho, lo que le permite estar entre los primeros en su campo en comparación con los competidores que no pueden tener un sitio web tan bueno como el suyo agencias marketing digital. 

[equipo]

Consejos avanzados: Lección 13

Cómo crear un tema personalizado

Entender cómo funcionan las metaetiquetas es el primer paso para crear temas personalizados. Quienes diseñan las plantillas usan HTML y CSS e incluyen metaetiquetas para que la gente pueda editar los estilos de un tema desde el menú de personalización sin tener que tocar el código.

Las metaetiquetas sirven para controlar elementos esenciales del diseño, como el fondo, la distribución o la navegación. Si has editado el HTML de un tema alguna vez, puede que hayas visto un código como este en el apartado de la cabecera (<head>):

Esta línea sirve para añadir la opción de cambiar el color de un fondo al menú de personalización.

Sin embargo, Tumblr necesita saber qué elemento de tu blog controla esta opción.

Más abajo, en el apartado de estilo (<style>), hay una línea que sirve para asignar esta opción al color de fondo de tu blog.

Con ella, Tumblr sabrá que debe usar el color que selecciones en el menú para el fondo del blog.

😎

[rolladice]

RAD 03 - Travel Guide

Esta página HTML simula una guía de viaje que puede ser usada por ejemplo para describir tus subforos de rol, diversas culturas o lo que tu imaginación mejor considere. 

La estructura interna se compone de: un numero infinito de zonas (las imagenes a la izquierda) y un numero fijo de 3 paneles por zona (las imagenes de la derecha). 

Como siempre, se aplican las reglas de uso que hay en este post.

Si la usas, o te gusta, por favor dale a fav y rebloguealo para que otros puedan verla. Y si me pasas el link donde la uses, ¡iré a echarle un vistazo!

================ CARACTERÍSTICAS ================

Dimension total de la página de 1920px*1080px por defecto.

La página se redimensiona si tu ventana mide 1366x768px.

Las imagenes varían su tamaño aunque todas estan hechas para reescalarse, en la version original son: 120x200 (izq) y 300x450 (derecha). Sin embargo cuanto mas grandes mejor, ¡que luego se usan de background!

El fondo escala automaticamente y cambia con cada ‘evento’ seleccionado (la imagen central).

La descripcion tiene overflow por lo que no se desborda y se puede navegar sin problemas.

Si no quieres 3 descripciones, deja las balizas vacías (pero debes de incluirlas).

Animacion de fade al seleccionar diferentes zonas o al presionar las flechas de ‘siguiente panel’ o ‘anterior panel’.

Idealmente los paneles deberían de medir 1920px de largo y 1080px de ancho pero como no se ejecuta en modo pantalla completa y Chrome tiene un encabezado (y el ordenador añade a su vez una barra de tareas) las medidas varían sutilmente.

Debug via consola si os dejais zonas o paneles sin añadir.

============ COMO USAR LA PLANTILLA ==============

Dado su tamaño solo es válida para la seccion “PAGINAS HTML” de foroactivo.

Solo podrá instalarla un administrador pues el acceso a esa parte solo corresponde a ellos.

No debe de usar el encabezado pues queremos que ocupe lo maximo posible asi que desactivad esa opcion tambien.

Para añadir nuevas zonas está esta seccion del codigo:

Basta con simplemente añadir otra class=“zone” y el id, en este caso, sería id=“3″.

Cuando se añada una nueva zona, hay que añadir los paneles, para eso el codigo está lo más abajo del html (está oculto asi que jamás se vera) por lo que nos iremos a:

Y en este caso como queremos otra zona pues duplicamos lo que hay entre las balizas <div class=“RAD03-zone zone2″>...</div> y seguidamente le cambiamos el ese nombre a <div class=“RAD03-zone zone3>...</div>.

Independientemente de si quieres mostrar la informacion o no siempre tienen que estar esas 10 balizas: Un titulo siempre fijo, 3 subtitulos (<div class=“subX”>), 3 descripciones (<div class=“descX”>) y 3 imagenes (div class=“imgX”>) donde X es un numero del 1 al 3.

================ CODIGO FUENTE ==================

Podéis encontrar el CSS y HTML > AQUÍ.

Si queréis solo el JS local > AQUÍ.

En este caso dado que no se usa en un post no hace falta usar un minifier de HTML o CSS (paginas que automaticamente reducen todo el CSS o HTML a una linea y evitan problemas). Pero si lo usais (cosa que siempre aconsejo) os va a seguir funcionando.

[mrd-design]

Los templates

Si no recuerdo mal, @gitanodoescodes​ me mencionó en alguna publicación en la que pedían tutoriales relacionados con la modificación de los templates. Los templates pueden parecer una locura para alguien que no los ha tocado nunca, pero creo que la base para poder modificarlos correctamente es entenderlos. Si entendemos qué son y cómo funcionan, con un conocimiento básico de HTML y CSS (si te animas un poquito de PHP y/o JS) puedes hacer lo que te dé la realísima gana con ellos (dentro de las limitaciones de Foroactivo) y crear un diseño muy personalizado.

Qué son y de qué están compuestos

Los templates de foroactivo son el modelo vista, hojas de estilo dinámicas de phpbb que imprimen el valor de variables, ya asignadas en un lugar al que no podemos acceder. El nombre de estas variables, que muchos ya conoceréis, está entre corchetes ( { } ) y cuando colocamos una de esas variables dentro de un contenedor, lo que nos pinta es su valor. Su contenido.

{SITENAME} = El nombre de tu foro

Los templates contienen por tanto la estructura HTML de la página a la que hace referencia como un conjunto de variables que ya tienen un valor predefinido, pero, no es lo único que contienen, sino que dentro de ellas, se puede programar, y es exactamente lo que hacen esos comentarios naranjas tan vistosos y que tanto dolor de cabeza nos dan.

La sintaxis viene explicada en este tutorial de aquí y viene a utilizar órdenes clásicas de cualquier lenguaje de programación que ya le sonarán al que entienda un poco de JS. Loops, condicionales... Esos comentarios naranjas no son comentarios, sino expresiones de programación.

Cómo están organizados

Como ya sabéis, existe más de un template y cada uno de ellos sirve para una parte del foro. Hay que tener en cuenta que muchos de ello son lo que llamamos parciales, partials, y que están inyectados dentro de otro template.

Por ejemplo, los que definen la estructura base del foro serán el overall_header y los footers, en los que se crea el contenedor de nuestro foro. Dentro de ellos, o entre ellos, como un sandwich, se inyectará el index_body (por poner un ejemplo) y dentro de index_body se inyectará el index_box. Que viene definido en esta variable de index_body: {BOARD_INDEX}

Ejemplo visual

Una vez llegamos aquí, voy a poneros un ejemplo.

Visualización -> Plantillas -> General -> index_box

Sabiendo lo que sabemos ahora, ¿qué podemos intuir con este código?

<!-- BEGIN catrow --> 

<!-- BEGIN = Inicio de un loop

catrow --> = Nombre de la lista por la que itera

De esta expresión podemos intuir que va a iterar por nuestra lista de categorías y cada una se llamará catrow: row de una categoría. Si tenemos 5 categorías, la lista que le llegará, catrow, tendrá 5 elementos, por lo que iterará y pintará lo que hay entre estas dos balizas:

 <!-- BEGIN catrow --> 

Aquí

<!-- END catrow -->

5 veces. Una por cada categoría.

Lo que le sigue es un <!-- BEGIN tablehead -->, ya que, por cada categoría, tenemos varios foros y, según la jerarquía que hayamos establecido para que se visualicen, el número de cabeceras puede variar. En nuestro caso, que solemos usar todos la misma jerarquía, solo tenemos un tablehead, que es el nombre de nuestra categoría. Por lo que solo va a pasar por este loop una vez y va a pintar el título de nuestra categoría.

Lo siguiente es el <!-- BEGIN forumrow -->. De esta expresión podemos intuir que va a iterar por la lista de foros dentro de esa categoría y que cada uno se llamará forumrow: row de un foro. Por lo que, por cada foro que tengamos, entre las dos balizas de BEGIN y END, pintará una vez el contenido.

Podemos intuir entonces, que dentro de cada bucle, por cada iteración, el contenido de las variables cambiará. Ya que, entre el BEGIN y el END de forumrow existen variables que apuntan al foro en concreto que ese está pintando. Por lo que: {catrow.forumrow.FORUM_NAME} lo que está haciendo es: De la catrow en la que me encuentro, dentro del forumrow en el que estoy, dame el FORUM_NAME. Si es la primera iteración, será el nombre del primer foro, de la primera categoría.

¿Cómo modifico templates?

Yo hago esto:

Y sabiendo qué significa cada una de las balizas, creo mi HTML y recojo las variables que me interesan de Ver el template del foro por defecto. Así puedo colocarlas donde me dé la gana.

¿Se puede hacer esto?

Sí.

Son bucles independientes que solo dependen de encontrarse dentro del bucle de catrow. Por lo que podéis cambiar la distribución del contenido como más os guste y poner, qué sé yo, el título de la categoría debajo de los foros, o a un lado, o lo que se os ocurra.

Lo que no se podría hacer sería esto:

Ya que forumrow (o nuestra lista de foros) se encuentra dentro de catrow: catrow.forumrow.VARIABLE. O lo que es lo mismo: Dentro de cada categoría, tengo n número de foros. Y poniéndolo fuera, no iba a encontrar nada.

Fe de ratas: Como explico en la siguiente publicación, en este ejemplo no es válido moverlas de posición porque afectan a la estructura de la página (patinazo), pero sí lo es en otros templates, donde podemos colocar los bucles en cualquier parte siempre y cuando se encuentren dentro del loop “padre”.

Espero que os sirva, como siempre, y si tenéis alguna duda solo tenéis que mandarme un submit o un ask (no respondo por privado).

Ahora, con la base, solo os queda jugar. No tengáis miedo a romperlo todo, limpiad los templates para empezar a crear vuestro contenido y os aseguro que trabajaréis con más comodidad y mucho más rápido que modificándolos tal y como están por defecto.

¡Divertíos!

[justadrunkenwhaler]

Pestañas con Javascript!

Que algo pueda hacerse de cierta manera no quiere decir que deba hacerse así.

En el mundo del rol es casi una norma que las tablillas con pestañas se hacen a puro CSS, y eso... Puedo entenderlo, aunque no me guste.

Un usuario no tiene posibilidad alguna de usar JS en sus plantillas (a menos que emplee iframes, cosa que explicaré en el futuro), así que los diseñadores buscaron la manera de crear plantillas con pestañas usando nada más que CSS.

¿El problema? La estructura del HTML debe seguir un patrón medio rebuscado que a mi en lo personal me da dolor de cabeza. Así QUE, tocó hacer tutorial de pestañas con JS.

Pero Outsider, acabas de decir que un usuario no puede usar JS en sus posts, ¿qué p2? Bueno, esto está pensado para:

Administradores de un foro (porque se puede añadir JS al foro)

Usuarios que usen iframes (el JS estaría fuera del foro)

Ventajas de hacerlo así:

Flexibilidad: No estás atado a una sola estructura HTML.

Legibilidad: La plantilla termina siendo muchísimo más simple para el usuario final.

IMPORTANTE:

Este tutorial requiere conocimientos básicos de JS y programación. Si bien entregaré un código 100% funcional para que lo usen de base, no puedo explicar todas las cosas que utilicé en él: destructuración de objetos, ciclos, eventos, selectores, etc.

Comencemos viendo el HTML:

Primero lo primero: acá la estructura da completamente igual. ¿A a qué me refiero? Con el método "convencional" usando CSS, los checkboxes deben ser primos del contenido y blabla para poder referenciarlos de cierta forma con el CSS. Acá no. Un botón puede estar dentro de un div y los otros 400 líneas más allá. Créeme cuando te lo digo, el orden da IGUAL. Lo único absolutamente vital sería la siguiente serie de instrucciones a seguir:

Cada contenido, que es lo que mostramos al hacer clic en un botón, debe tener un id único. En este caso, vemos que hay tres divs y cada una tiene un id único: content-1, content-2, content-3.

Todos los contenidos deben compartir un misma clase para que JS pueda ubicarlos. En este caso, sería tab-content.

Todos los contenidos (excepto uno, el activo) deben contener alguna clase que se aplique en ellos para obtener los estilos al ocultarse. En mi caso es la clase hidden.

Cada botón, que es a lo que hacemos clic para mostrar el contenido, debe tener un atributo personalizado llamado data-loquesea, en este caso yo le puse data-target. El valor de cada data-target es el id del contenido que le corresponde. Por ejemplo: el botón que muestra el contenido 1 (de id content-1) debe tener un data-target con valor content-1.

Cada botón debe tener un id único. En este caso, vemos que hay tres buttons y cada una tiene un id único: tab-1, tab-2, tab-3.

El botón activo debe tener el atributo disabled.

Finalmente, todos los elementos botón deben compartir una misma clase.

Ahora viene la parte difícil:

El código anterior contiene toda la lógica necesaria para que nuestra plantilla funcione.

En primer lugar, usamos el evento DOMContentLoaded para asegurarnos que el contenido del sitio ya cargó. Expliqué el uso de dicho evento con más detalle en un tutorial anterior.

Luego tenemos las líneas 2 y 3. En ellas, buscamos a todos los botones y a todos los contenidos usando sus clases.

En la línea 5 entramos a un loop, agregando un listener para el evento "click" en cada botón.

Lo que se hace dentro del loop es, en orden:

Obtenemos el id del contenido que le corresponde (usando data-target). Líneas: 7

Obtenemos al contenido usando el id del paso anterior. Líneas: 8

deshabilitamos el botón (porque no tiene sentido poder hacerle click si ya estamos viendo su contenido). Líneas: 10

Mostramos el contenido (quitando la clase hidden). Líneas: 11

Escondemos al resto de los contenidos. Líneas: 13-15

Habilitamos a los demás botones. Líneas: 17-19

Claro está que el código puede modificarse para tener un funcionamiento distinto. Tal vez tú quieras hacer clic una vez más en una pestaña que ya se está mostrando. Yo solo quise traer lo que, para mi, es el modelo base. Lo mismo aplica para el CSS, yo simplemente le quito visibilidad al contenido:

Pero, tal vez quieras agregar transiciones y demás. Yo me tomé la libertad de hacerlo muy simple porque es un tutorial de JS.

Ah, sí, acá tienen el código del ejemplo:

[bettyleg]

¡Hola Betty! Soy una graaaan (así, con las a en largo) fanática tuya, todos tus códigos me encantan y me han salvado de muchas cosas, además de que con esto aprendo más del HTML. Tengo una gran duda respecto a tu plantilla 'stunin', me gustaría usarla, pero quiero que las imágenes de la tercera pestaña puedan mostrar el nombre de personas con las que mi personaje se relaciona, ¿me explico? Quiero saber si esto se puede, y si se puede ¿cómo? ¡Mil gracias por todo!

¡Hola! y muchísimas gracias <3 ¡Me alegro que también puedas aprender! Que bonito que estés usando stunin’, ahora te digo como podemos hacer... PD: Si entendí mal lo que querías agregar también dimelo JAJAJA <3 

¿Quieres mantener el numero de imágenes o poder agregar más implementando un scroll/barra lateral?

Lo haremos con los 9 pero si quieres agregar más seguiremos hablando <3  Vas a la pestañita 3, en el html sería el “moodboard”  Vas cambiando las 9 imagenes por esto: 

<div class="ext-nombre"><img src="https://placehold.jp/105x105.png"/><div class="ext-n">Nombre del pj</div></div>

Y ahora vamos a aplicar el CSS.

Abajo de la tablilla agregamos esto:

<style>.ext-nombre{width:105px; height:105px; overflow:hidden; position:relative;}.ext-nombre img{display:block;}.ext-n{position:absolute; width:105px; height:105px; z-index:2;  padding:10px; box-sizing:border-box; text-align:center; line-height:15px; font-family:'Hind', sans-serif; font-size:12px; color:#fff; opacity:0; background:#0000005a; cursor:pointer;}.ext-n, .ext-nombre{display:flex; align-items:center; justify-content:center;} .ext-nombre:hover .ext-n{ opacity:1;}.ext-nombre:hover .ext-n,.ext-n{webkit-transition: 1s; -o-transition: 1s;transition: 1s;}</style>

Lo puedes revisar, tocar, ver que hice o preguntarme. ¡No tengo problema! Si no te funciona vuelve a preguntar y vemos qué sucede <3 

Dejo acá el link de la tablilla que es de mis preferidas <3

[parrisrawlings]

Unos consejos para unirte a las grandes ligas del diseño web

Es posible que no desees comprar varios tipos de software de diseño web caros, plantillas ya hechas o recurrir a una empresa de diseño web Bilbao, ya que piensas que tienes lo necesario para ser un gran diseñador. ¿Lo tienes? La respuesta a esta pregunta varía según lo que estés dispuesto a aprender, más que sobre lo que ya sabes. El diseño web está en constante evolución y si te estancas ya estás perdido.

Si te da pereza vivir en un constante reciclaje, tendrás que recurrir a una empresa o programa de terceros para que te hagan el trabajo. Pero si continúas pensando que nadie como tú puede crear el mejor sitio web, entonces sigue leyendo, encontrarás buenos consejos que te ayudarán a crear tu sitio web y a hacerlo lo mejor posible.

 Consejos de diseño web

Si estás diseñando un sitio web, asegúrate de que el código que escribes tiene un HTML+CSS válido. Aunque la mayoría de los navegadores pueden dar sentido a un código que no es válido, podría ser renderizado de forma correcta o incorrecta. El código válido se renderizará de la misma manera la mayoría de las veces en los navegadores modernos. Puedes comprobar la validez de tu código HTML con un validador de HTML.

Incluye un enlace a la página de inicio en cada página del sitio. Una de las mejores maneras de hacerlo es crear un título gráfico para su página que pueda incluirse en todas las páginas. Los usuarios de la web están acostumbrados a hacer clic en un gráfico para volver a home, por lo que no habrá una curva de aprendizaje para navegar por su sitio. Es lo mínimo que debes saber de interlinking cuando creas una web.

La velocidad es importante en Internet, por lo que debes procurar que tu sitio web se cargue rápidamente. Si alguien tiene que esperar mientras tu sitio se carga, existe la posibilidad de que se impaciente y se vaya a otro sitio, y puede que no vuelva a visitar tu sitio. Esto es algo que saben tanto los diseñadores web como los especialistas en SEO, por lo que nuestros compañeros de una agencia de diseño web Bilbao han insistido que es algo a lo que hay que dar prioridad.

Divide los bloques de texto largos. Tener una enorme oleada de texto es innecesario para cualquier sitio, especialmente cuando puedes romperlo usando imágenes, o incluso separándolo en diferentes páginas. Aburrir a sus visitantes sólo hará que se marchen, así que mantén las cosas tan simples y frescas como sea posible.

Tu sitio web debe ser fácil de explorar. Las pruebas de usabilidad han determinado que la mayoría de los visitantes online no van a leer todo el contenido, sino que van a escanear en busca de algo interesante. Tener texto en ciertas áreas para crear una apariencia más audaz atraerá la atención de los lectores que escanean rápidamente cada página. Además, la información más importante debe mantenerse hacia la parte superior. Esto puede ayudarte a asegurarte de que tus visitantes tengan una mejor experiencia, ya que pueden encontrar fácilmente lo que están buscando.

Haz que tus enlaces sean obvios. A los clientes no les gusta pasar tiempo recorriendo su sitio web en busca de algo que les interese. Tener un mapa del sitio, así como proporcionar enlaces grandes y prominentes ayudará a su espectador a encontrar lo que están buscando sin perder tiempo en una cacería. Condúcelos a la información.

Aprende los fundamentos de HTML y CSS, y si es posible PHP. Aunque hay muchas plantillas que permiten simplemente rellenar los espacios en blanco para crear una página web, estas plantillas sólo ofrecen posibilidades de diseño limitadas. Entender cómo funcionan juntos el lenguaje de marcas y la hoja de estilos te permitirá personalizar tu página web a tu antojo.

Coloca fotos e infografías en tu sitio para que se vea mejor. Las fotos ayudan a que su sitio parezca más accesible y fácil de usar. A la gente le gusta ver imágenes, así que probablemente pasará más tiempo en su sitio.

Para que tu sitio web funcione como es debido, asegúrate de que todos los enlaces funcionan. Si tiene enlaces rotos, tus visitantes pueden sentirse frustrados cuando intenten hacer clic en algo que les interese. Los visitantes frustrados no es algo que quieras porque terminan abandonando tu sitio enojados.

Intenta minimizar el uso de imágenes. Por lo general, los diseños más sencillos son más eficaces para el usuario. Así que mantenga su sitio simple, pero también ordenado. Evita saturar las páginas con imágenes grandes y voluminosas que tengan tiempos de carga largos. Intente ser creativo con el diseño y utilizar su "ojo": por ejemplo, utilice puntos focales llamativos para que el espectador visite algo concreto.

Vigila la cantidad de multimedia llamativo que hay en su sitio. No exagere con un montón de "extras". Los gráficos flash y los multimedia pueden parecer atractivos, pero pueden dificultar que los visitantes encuentren la información deseada del sitio, sobre todo si lo ven desde un dispositivo no compatible con Flash. Además, el flash ya no se usa.

El uso de anuncios emergentes es una forma segura de alejar a los clientes. La incorporación de anuncios es una parte importante de un sitio web, pero no deben restarle valor a la experiencia del visitante. La gente se abstendrá de visitar su sitio si esto ocurre. Mantén los anuncios sencillos; si lo haces, no necesitarás beneficios emergentes.

Aprender diseño web no es tan difícil como aprender a hacer una cirugía a corazón abierto. No necesitas asistir a la escuela, y la vida de alguien no está en la palma de tus manos. Si puedes prestar atención a los consejos que acabas de aprender, puedes diseñar el sitio web que anhelas.

[cmon-letsplay]

Todo lo que debe saber para crear un sitio web comercial de comercio electrónico

El comercio electrónico está en auge como nunca. Se estima que para el 2021, será responsable de $ 4.9 billones en ventas .

Es un buen momento para crear una tienda de comercio electrónico en línea. Y para eso, necesita un sitio web de comercio electrónico funcional. Además, tener un sitio web le costará menos que administrar una tienda física.

Si es nuevo en los negocios en línea, la idea de crear un sitio web puede hacer que se sienta abrumado. Pero no se preocupe.

Este artículo lo guiará a través del proceso de creación de su sitio web de comercio electrónico que impulsará las ventas.

Sin más preámbulos, observemos los pasos uno por uno.

1.Comprar un nombre de dominio y alojamiento web

La compra de un nombre de dominio es un paso crucial que tendrá que tomar al crear un sitio web.

Elíjalo con cuidado, ya que el nombre de dominio que elija identificará su sitio.

Puede comprar un nombre de dominio de su proveedor de alojamiento web o ir a un servicio de nombres de dominio como GoDaddy, NameJet.com, Namecheap.com, etc.

Cuando desee que su nombre de dominio sea atractivo y memorable, asegúrese de usar palabras clave, ya que lo clasificará más alto en los resultados de los motores de búsqueda.

Aparte de esto, necesita hacer su sitio en línea. Por ello, es fundamental invertir en un buen servicio de alojamiento web. Y la buena noticia es que existen muchos servicios de alojamiento web increíbles.

Asegúrese de revisar estas características antes de seleccionar un servicio de alojamiento web para su sitio:

Seguridad

Planes de alojamiento flexibles

El tiempo de actividad debe ser superior al 98%

Considere su presupuesto

Fácil de usar

Migración gratuita

Velocidad de carga de la página

Y más

2. Invierta en un desarrollador web

Si desea que su sitio esté listo y funcionando rápidamente de manera profesional, invierta en un desarrollador web calificado. Puede obtener referencias de otros sitios de comercio electrónico que haya creado el desarrollador.

Estas son algunas habilidades que debe buscar en un desarrollador web:

Diseño web adaptable

SEO

Analítica

Fondo de diseño gráfico

HTML / CSS

JavaScript

Photoshop

3.Elija una plataforma de alojamiento web de comercio electrónico

Elegir una plataforma de comercio electrónico popular como su proveedor de alojamiento web le ahorrará tiempo y dinero. Plataformas como Shopify, BigCommerce y WooCommerce lo ayudarán a configurar su tienda de comercio electrónico rápidamente por un pequeño pago mensual.

Además, el desarrollador que contrate estará familiarizado con estas plataformas. Será más fácil integrar cosas como complementos y procesamiento de pagos.

4. Proteja su sitio web con certificado SSL

La instalación de un certificado SSL es vital, ya que protegerá los datos de su sitio web cifrándolos y brindará seguridad a sus usuarios. Los certificados SSL generan autenticidad y confianza.

Cuando los usuarios vean las señales de confianza, como el nombre de la empresa, HTTPS y el sello, estarán más dispuestos a compartir su información personal y hacer negocios con usted.

Además, Google ha anunciado que HTTPS es un factor de clasificación. Y los navegadores como Chrome envían una señal de advertencia a los visitantes si un sitio no está protegido por SSL.

No instalar un certificado SSL le costará tráfico, ya que las personas abandonarán su sitio cuando vean la señal de advertencia de que su sitio web no es seguro.

Asegúrese de comprar un certificado SSL de una autoridad certificadora de confianza para que los navegadores lo reconozcan.

Hay revendedores y autoridades de certificación como RapidSSL, GlobalSign, SSL2BUY que son confiables y pueden proporcionar SSL a precios asequibles.

5.Encuentre un tema que se adapte a su visión de comercio electrónico

Crear un sitio web desde cero no solo requiere mucho tiempo, sino que también será costoso. Para ahorrar dinero y tiempo, puede comprar temas de proveedores de temas como ThemeForest.

Es fundamental encontrar un diseño que se asemeje a su visión de comercio electrónico. ThemeForest ofrece más de 28,000 plantillas y temas y los precios comienzan desde solo $ 2.

6.Haga que su sitio esté activo

Incluso si no ha incluido ninguno de sus productos, puede activar su sitio. Pídale a su desarrollador que cree una página de inicio, una página "Acerca de nosotros" y una página de contacto.

Al tener estas páginas, puede establecer legitimidad al negociar acuerdos con los vendedores. Además, cuando se comunique con periodistas y blogueros, ellos querrán ver su sitio web y saber si su negocio es creíble.

Y tendrá un lugar para que todas las fuentes se vinculen a su sitio web y creen SEO.

7.Encuentra una pasarela de pago

Deberá encontrar una pasarela de pago y un procesador de tarjetas de crédito para su sitio de comercio electrónico, ya que aceptará pagos con tarjeta de crédito.

PayPal y Stripe se utilizan popularmente, pero para aceptar tarjetas de crédito, pagos móviles y facturación recurrente, la pasarela de pago como Authorize.net o 2Checkout.com es una excelente opción.

Tenga en cuenta que no es fácil obtener la aprobación para una pasarela de pago y un procesador de tarjetas de crédito.

Estos son los requisitos previos para obtener la aprobación:

Configurar un proceso de pago seguro en su sitio.

Creación de una política de privacidad y una política de devoluciones.

Clasificando sus métodos de envío y entrega.

Tener un número de teléfono de servicio al cliente operativo y una dirección de correo electrónico.

Tener un historial crediticio limpio.

Licencia de conducir de EE. UU. Si reside en EE. UU. O identificación estatal.

Cuenta bancaria de EE. UU.

Una identificación fiscal federal.

8 toma la ruta del marketing digital

Para atraer tráfico a su sitio y aumentar las ventas, deberá invertir en marketing digital. Considere estas estrategias de marketing digital:

SEO- Finalmente, es fundamental analizar todos los datos de tu sitio web. Debe considerar el comportamiento del usuario, la investigación de palabras clave, el contenido extenso y valioso y más. Aparte de esto, también es esencial optimizar el contenido de SEO en la página como titulares, subtítulos, slugs de URL y metaetiquetas, blogs invitados, actividad de redes sociales, mejorar la velocidad de la página, hacer que su sitio sea compatible con dispositivos móviles y obtener backlinks de calidad.

Marketing por correo electrónico: el ROI del marketing por correo electrónico es alto. Por cada $ 1 que gasta en marketing por correo electrónico, puede esperar obtener $ 42 en promedio.

Asegúrese de utilizar las herramientas adecuadas para el marketing por correo electrónico y personalícelas para ver los ingresos.

Además, no descuide el marketing de contenidos, las redes sociales, el CRM y la búsqueda pagada.

Terminando

Configurar un sitio web de comercio electrónico para su empresa puede parecer abrumador, pero no tiene por qué serlo. Siga los pasos mencionados en este artículo para configurar su tienda en línea y generar ventas.

A continuación, se muestra un desglose simple de los pasos que debe seguir:

Compra un nombre de dominio

Encuentre un desarrollador web calificado

Seleccione una plataforma de alojamiento web de comercio electrónico

Instale un certificado SSL de una autoridad de certificación confiable

Seleccione temas que se adapten a su visión de comercio electrónico

Haga que su sitio esté activo

Encuentra una pasarela de pago

Finalmente, invierta en marketing digital inteligente.

Para tener un negocio exitoso en esta era moderna, debe estar presente dondequiera que estén los clientes.

La gente siempre está en línea. Por lo tanto, crear un sitio web de comercio electrónico es el paso correcto para lograr sus objetivos comerciales.

[crocus25]

Un poco sobre Tumblr

Tumblr fue fundado en 2007 por un joven estadounidense, David Karp. Solo tenía veintiún años, pero creó una red social muy activa y progresiva en la que los bloggers publican docenas de entradas todos los días. Un gran grupo de personas revisa casi constantemente las últimas noticias en el feed de posts y artículos.

Diariamente este servicio recibe 1.20 000 suscripciones y más de 105.200 millones de entradas. El número total de usuarios es más de 230 millones. Tumblr está disponible en 13 idiomas.

Es una plataforma gratuita y extremadamente fácil de usar, donde puedes publicar tus textos, imágenes, citas, enlaces, videos, audios y chats.

Una de las peculiaridades de Tumblr es que raramente se publican artículos largos. En la mayoría de los casos, el contenido de los blogs es todo tipo de fotos, imágenes y animaciones. En lugar de comentarios, Tumblr proporciona mensajes de fans, así como preguntas que pueden usarse para ponerte en contacto con el autor de cualquier blog que te guste. Entre las ventajas de esta red social es una velocidad rápida con la que se puede abrir tu contenido.

En Tumblr prácticamente no hay publicidad. Esto se determina por la política de la administración de la plataforma. En su opinión, Tumblr se creó para personas que desean comunicarse y compartir información interesante.

Cada usuario puede elegir cualquier tema para su blog, por lo que cada blog es único en su diseño. También puedes cambiar la configuración de fondo, la fuente de contenido, los colores e incluso editar el contenido de las páginas utilizando HTML, JS y CSS. 35 Plantillas Tumblr gratis elegantes para tu blog

[necromancercoding]

¡Hola Necro! ¿Tú sabes cómo hacer que los foros de una misma categoría se vean por pestañas? He estado intentando adaptar el tutorial de las categorías por pestañas y las tablillas de pestañas pero no me aclaro. Muchas gracias de antemano por tu sabiduría y tu tiempo :)

¡Hola anon! Se puede hacer algo similar a lo que se establece en este tutorial de pestañas de categorías, pero para un subforo concreto.

Útiles externos: En el código JS incluido aquí se aplica el código de Mr. D. para dar ids a los subforos para que las pestañas funcionen, y para evitar posibles desajustes causados por instalar los códigos desordenados, se ha incluido en el interior. Por favor, si sigues este tutorial, incluye a Mr. D. en tus créditos con link a su tumblr. ¡Grax!

HTML: Vas a dirigirte a tu template index_box (Visualización > Plantillas > General) y vas a asegurarte de que tus categorías tienen este id: {catrow.tablehead.ID}. En este ejemplo/tutorial, asumiré que tus categorías tienen la clase .forabg y que tus subforos se llaman .frow.

CSS:

Tendremos que saber el id de la categoría para poder asegurarnos de que estamos aplicando todo a la categoría correcta. Para el ejemplo, supondremos que la categoría en cuestión es la primera (1) y por tanto su id será #c1. Añade esto a tu CSS.

#c1 .frow { display:none; }

JS:

Instala este código y márcalo en índice (si es una categoría visible en el índice; si es un subforo interior no haría falta) y subforos. Tienes variables para cambiar los nombres de las clases si los has modificado en tu HTML.

¡Espero que te sirva! Saludos 💕

[vincenzoreynolds]

Apps, webs y aplicaciones web

A medio camino entre la páginas web y las ya famosísimas Apps, o aplicaciones, nos encontramos las aplicaciones web. Es posible que muchos aún estemos intentando descifrar qué diferencia a las primeras de las segundas, como para entender qué son las terceras. Mi padre, por ejemplo, llama a todo ‘Facebook’, sin importar si realmente está usando o no esa red social. Cualquier cosa que esté en internet es eso para él. De modo que si no diferencias una web de una aplicación web tampoco debes agobiarte.

Las Apps nos han facilitado mucho la vida, eso es indudable, por lo que dar el paso hacia el diseño de aplicaciones web a medida era un paso natural que se tenía que dar. En ellas se combinan lo mejor de ambos mundos. Pero para tener clara la diferencia entre una web normal y una aplicación web, me puse en contacto con un estudio de diseño web en León, ellos están especializados en el diseño de aplicaciones web de gestión, y me hicieron una pequeña explicación que os traslado.

Diferencias entre páginas web y aplicaciones web

 1. En qué se diferencian las aplicaciones web de los sitios web

Un sitio web es principalmente algo informativo y estático: la tarjeta de presentación de una empresa, un sitio de recetas, un portal de la ciudad o un wiki. Un conjunto de archivos HTML preparados previamente que se encuentran en un servidor remoto y se entregan al navegador a pedido.

 Los sitios contienen varias estadísticas que, como un archivo HTML, no se generan sobre la marcha. La mayoría de las veces se trata de imágenes, archivos CSS, scripts JS, pero puede haber otros archivos: mp3, mov, csv, pdf.

 Blogs, tarjetas de visita con formulario de contacto, páginas de destino con un montón de efectos… forman parte de los sitios web, aunque rompan un poco con su estatismo y simplicidad. A diferencia de los sitios completamente estáticos, ya incluyen algún tipo de lógica empresarial.

 Y una aplicación web es algo técnicamente más complejo. Aquí las páginas HTML se generan sobre la marcha según la solicitud del usuario. Clientes de correo electrónico, redes sociales, motores de búsqueda, tiendas en línea, programas de negocios en línea, todas estas son aplicaciones web.

2. ¿Qué son las aplicaciones web?

Las aplicaciones web se pueden dividir en varios tipos, dependiendo de las diferentes combinaciones de sus componentes principales:

El backend (backend o parte del servidor de la aplicación) se ejecuta en una computadora remota, que puede ubicarse en cualquier lugar. Se puede escribir en diferentes lenguajes de programación: PHP, Python, Ruby, C # y otros. Si crea una aplicación utilizando solo el lado del servidor, como resultado de cualquier transición entre secciones, envío de formularios, actualización de datos, el servidor generará un nuevo archivo HTML y se volverá a cargar la página en el navegador.

El frontend (frontend o parte del cliente de la aplicación) se ejecuta en el navegador del usuario. Esta parte está escrita en el lenguaje de programación Javascript. La aplicación solo puede constar de la parte del cliente, si no es necesario almacenar los datos del usuario durante más de una sesión. Estos pueden ser, por ejemplo, editores de fotografías o simples juguetes.

Aplicación de página única (SPA o aplicación de página única). Una opción más interesante cuando se utilizan tanto el backend como el frontend. Usando su interacción, puede crear una aplicación que funcionará sin necesidad de recargar la página en el navegador. O en una versión simplificada, cuando las transiciones entre secciones provocan recargas, pero se prescinde de cualquier acción en la sección.

3. Django python framework, también conocido como backend

En desarrollo, un marco es un conjunto de bibliotecas y herramientas listas para usar que lo ayudan a crear aplicaciones web. Como ejemplo, describiré el principio de funcionamiento del framework Django escrito en el lenguaje de programación Python.

En la primera etapa, la solicitud del usuario va al enrutador (despachador de URL), que decide a qué función llamar para procesar la solicitud. La decisión se toma sobre la base de una lista de reglas que consta de una expresión regular y un nombre de función: si tal o cual url, entonces esta es la función.

La función que llama el enrutador se llama vista. Cualquier lógica empresarial puede estar contenida dentro, pero la mayoría de las veces es una de dos cosas: o los datos se toman de la base de datos, se preparan y se devuelven al frente; o una solicitud vino con datos de algún formulario, estos datos se verifican y se guardan en la base de datos.

Los datos de la aplicación se almacenan en una base de datos (DB). Las bases de datos relacionales más utilizadas. Esto es cuando hay tablas con columnas predefinidas y estas tablas están vinculadas a través de una de las columnas.

Los datos de la base de datos se pueden crear, leer, modificar y eliminar. A veces puede ver la abreviatura CRUD (Create Read Update Delete) para denotar estas acciones. Se utiliza un lenguaje especial SQL (lenguaje de consulta estructurado) para consultar datos en la base de datos.

En Django, los modelos se utilizan para trabajar con la base de datos. Te permiten describir tablas y realizar consultas en el desarrollador de Python habitual, lo cual es mucho más conveniente. Esta conveniencia tiene un precio: consultas como esta son más lentas y limitadas en comparación con SQL puro.

Los datos recibidos de la base de datos se preparan a la vista para enviarlos al frente. Se pueden sustituir en la plantilla y enviar como un archivo HTML. Pero en el caso de una aplicación de una sola página, esto ocurre solo una vez, cuando se genera una página HTML, a la que están conectados todos los scripts JS. De lo contrario, los datos se serializan y se envían en formato JSON.

4. Marcos de Javascript, también conocidos como frontend

El lado del cliente de la aplicación consta de scripts escritos en el lenguaje de programación Javascript (JS) y ejecutados en el navegador del usuario. Anteriormente, toda la lógica del lado del cliente se basaba en el uso de la biblioteca jQuery, que le permite trabajar con el DOM, animaciones en la página y realizar solicitudes AJAX.

DOM (modelo de objeto de documento) es la estructura de una página HTML. Trabajar con DOM se trata de encontrar, agregar, modificar, mover y eliminar etiquetas HTML.

AJAX (javascript asíncrono y XML) es el nombre general de las tecnologías que le permiten realizar solicitudes asíncronas (sin recargar la página) al servidor e intercambiar datos. Dado que las partes cliente y servidor de la aplicación web están escritas en diferentes lenguajes de programación, para intercambiar información es necesario convertir las estructuras de datos (por ejemplo, listas y diccionarios) en las que se almacena en formato JSON.

JSON (JavaScript Object Notation) es un formato universal para intercambiar datos entre un cliente y un servidor. Es una cadena simple que se puede utilizar en cualquier lenguaje de programación.

La serialización es la conversión de una lista o diccionario a una cadena JSON. Por ejemplo:

Diccionario:

  {

     'id': 1,

     'email': 'mail@example.com'

  }

Cadena serializada:

 '{"id": 1, "email": "mail@example.com"}'

La deserialización es la conversión inversa de una cadena a una lista o diccionario.

Con la manipulación DOM, puede controlar completamente el contenido de sus páginas. Con AJAX, puede intercambiar datos entre cliente y servidor. Con estas tecnologías, ya puede crear un SPA. Pero cuando se crea una aplicación compleja, el código frontend basado en jQuery se vuelve rápidamente confuso y difícil de mantener.

Afortunadamente, JQuery ha sido reemplazado por marcos de Javascript: Backbone Marionette, Angular, React, Vue y otros. Tienen una filosofía y sintaxis diferente, pero todas te permiten administrar datos en el frontend con mucha más comodidad, tienen motores de plantilla y herramientas para crear navegación entre páginas.

Una plantilla HTML es una página HTML inteligente que utiliza variables en lugar de valores específicos y proporciona varios operadores: if , for loop y otros. El proceso de obtener una página HTML a partir de una plantilla, cuando se sustituyen las variables y se aplican operadores, se denomina renderización de plantillas.

La página renderizada resultante se muestra al usuario. Pasar a otra sección en SPA es una aplicación de un patrón diferente. Si es necesario utilizar otros datos en la plantilla, se solicitan al servidor. Todos los envíos de formularios con datos son solicitudes AJAX al servidor.

5. Cómo se comunican el cliente y el servidor entre sí

El cliente se comunica con el servidor a través del protocolo HTTP. La base de este protocolo es una solicitud de un cliente a un servidor y una respuesta del servidor a un cliente.

Para las solicitudes, suelen utilizar los métodos GET si queremos recibir datos, y POST si queremos cambiar los datos. La solicitud también contiene el host (dominio del sitio), el cuerpo de la solicitud (si es una solicitud POST) y mucha información técnica adicional.

Las aplicaciones web modernas usan HTTPS, una versión extendida de HTTP compatible con el cifrado SSL / TLS. El uso de un canal de transmisión de datos cifrados, independientemente de la importancia de estos datos, se ha convertido en una buena práctica en Internet.

Hay una solicitud más que viene antes de HTTP. Esta es una solicitud de DNS (sistema de nombres de dominio). Es necesario obtener la dirección IP a la que está vinculado el dominio solicitado. Esta información se guarda en el navegador y ya no perdemos tiempo en ella.

Cuando una solicitud del navegador llega al servidor, no llega inmediatamente a Django. Primero, es procesado por el servidor web Nginx. Si se solicita un archivo estático (por ejemplo, una imagen), Nginx lo envía de vuelta al cliente. Si la solicitud no es estática, Nginx debe enviarla por proxy (transmitirla) a Django.

Desafortunadamente, no sabe cómo. Por lo tanto, se utiliza otro programa de capa: el servidor de aplicaciones. Por ejemplo, para aplicaciones de Python, esto podría ser uWSGI o Gunicorn. Y ahora envían la solicitud a Django.

Una vez que Django ha procesado la solicitud, devuelve una respuesta con una página HTML o datos y un código de respuesta. Si todo está bien, entonces el código de respuesta es 200; si no se encuentra la página, entonces - 404; si ocurrió un error y el servidor no pudo procesar la solicitud, entonces - 500. Estos son los códigos más comunes.

6. Almacenamiento en caché en aplicaciones web

Otra tecnología que encontramos constantemente, que está presente tanto en aplicaciones web y software, como a nivel de procesador en nuestras computadoras y teléfonos inteligentes.

La caché es un concepto en desarrollo cuando los datos de uso frecuente, en lugar de recuperarse de la base de datos cada vez, calcularse o prepararse de una manera diferente, se almacenan en un lugar de fácil acceso.

Todos los navegadores tienen habilitado el almacenamiento en caché de archivos estáticos de forma predeterminada. Gracias a esto, al abrir el sitio no por primera vez, todo se carga notablemente más rápido. La desventaja para el desarrollador es que con la caché habilitada, los cambios realizados en el código no siempre son visibles de inmediato.