Metodología BEM para CSS

 BEM: Bloques, elementos, modificadores

Link útil para BEM: https://9elements.com/bem-cheat-sheet/

Dividir lógicamente las piezas de las que se compone una web

.bloque{}

.bloque__elemento{}

.bloque--modificador{}

Ejemplo:

Taller de oratoria en inglés (tips)

Tongue twisters: https://www.engvid.com/english-resource/50-tongue-twisters-improve-pronunciation/

Tips by  Taller de oratoria  in Platzi

Tips

-Make a list of 5 topics of your interest. Analyze them and select 1 to be main topic of your speech

-Ask yourself WHAT do I want my audience to remember or learn about my speech?

-Express WHY your audience needs to learn about this topic

-Draft your ideas and prepare your speech

-Find a nice place to record practice!

-Record your speech

Speech 

1.    Focus on one major idea

2.    Give people a reason to care

3.    Build your idea with familiar concepts

4.    Make your idea worth sharing

Voice volume must be tempered

emotion, message, space, noise, distance

Use these 5 key points to start structuring your presentation.

-What does the audience need to hear?

-Structure the flow of your message. It does not have to be the definitive version. Create a first draft.

-Style: make it unique

-Memorize the flow, not the whole script!

-Delivery: organize the topic and your ideas. Make them clear to you so you can deliver the message effectively

 

How to put your ideas together

-What do you want the audience to remember/ understand/ believe?

-Support your message with evidence and information to validate your claims

-Make sure you include anecdotes, metaphors and opinions in your presentation.

Key points sugestions and recommendations (claims,support, connectors)

-Definition or explanation

-Elements

-Functions

-Social context

-Measurements

-Time references

-Strengths

-Consequences

-Benefits

Communication media

-Conversation and public speaking

-Messages, documents and publications

-Images and music

-Video, broadcast and social media

-Physichal environment

-Virtual and mixed reality

Concrete evidence

1.    Facts, statistics and testimonials

2.    Examples and illustrations

3.    Metaphors and analogies

Key points, suggestions and recommendations

Definitions or explanations, elements, functions, social context, measurements, time references, strengths, consequences, benefits

Get on the right mindset

-What are you good at? Acknowledge the positive!

-Accept that you make mistakes

-Have a backup plan

-Interact with the audience!

How to provide speech structure and flow

-Deliver previews in the introduction

-Highlight the transitions between the main ideas in our speech

-Supply reviews in the conclusion

The 10 minute rule

Prepare to engage your audience

- Ask provocative questions

- Provide troubling, amusing or remarkable facts

- Explain your own interest in the topic

-Tel listeners what the topic has to do with them

Example about speech

Intro:Today I will be discussing

Outline: I want to begin by.. and then I’ll move on to

Intro to the first point: I will first cover… /to get started, let’s look at

Similar points: in the same  way/ this is similar to

Disagreeing points: however/ even so / on the other hand

Transition: fundamentally/ a major issue is

Emphasizing: more importantly/ primarily /mainly

Conclude: finally, I want to say / I’d like to leave you with this

Find your public speaking voice

 -Speak slowly

 -Include different kinds of pauses in your speech

 -Read out loud   (Practice with music or poetry)

 -Record yourself!

Comandos de Terminal de Ubuntu

 Comandos útiles para npm windows terminal, react y  uso de git  

pwd  dirección actual

cd (change directory)

cd .. retrocede dos carpetas

cd/carpeta/carpeta   va directamente al directorio objetivo

cd /   directorio raiz

ls   archivos en el directorio .  listar items

cd mnt  archivos   c

cd  ~ vuelve a la raiz de carpeta  (alt gr +)

mkdir      crea una carpeta ej: mkdir carpeta

touch     crea archivo    ej: touch index .html

mv  mover archivo  de un sitio a otro ej: mv index.html  Carpeta

code.    abre el visual studio del archivo

wsl--shutdown  cada que se deje de trabajar en ubuntu

cat   muestra datos del archivo. ej: cat index.html

man   es manual  ej:  man cat

sudo apt-get update   actualiza  ubuntu

sudo apt-get upgrade  aplica los cambios de actualizacion

sudo apt install nodejs    instalar node desde terminal

clear   limpiar  código

npx  corre  programas sin instalar   npx create-react-app test

npm start inicia el proyecto

ctlr c   detiene ejecucion para react

npm start  desde new terminal en vsc  o  windows terminal para ejecutar programa

sudo chown -R miusuario micarpeta   cambia propietario de archivo

rm   borra archivo  ej: rm  index.txt

rm -d nomcarpetavacia  borra carpeta vacía

rm -rf  test    borra carpeta test

git --version  versión github

sudo apt-get update  actualiza paquetes  git

sudo apt-get upgrade actualiza paquetes git

sudo apt intall  instala git

Vincular con github desde terminal

ssh-keygen -t -rsa -b 4096 -C   tucorreo   llave para usar con github

https://t.co/6yKToNLs84

https://t.co/6yKToNLs84

— Julian (@juli6464) Sep 25, 2021

from Twitter https://twitter.com/juli6464

Apuntes curso profesional de wordpress

Apuntes curso profesional de WordPress de Platzi.

Cómo se organiza la información en WordPress:

-Taxonomías.

-términos.

-posts.

Taxonomías por defecto

Categorías: orden jerárquico.

Tags: orden no jerárquico.

Jerarquía de archivos

Slug  

category-nombre.php     tag-nombre.php

category-4.php    category-2.php

category.php  tag.php     Genérico

archive.php   si no  encuentra ninguna de las anteriores.

¿Cómo utilizar AJAX dentro de WordPress?

Para poder hacer cosas con AJAX en Wordpress usaremos algunas funciones y cosas en particular.

En el envío de la petición se puede hacer con JQuery o con Javascript Vanilla. Nosotros envíamos tres parámetros:

url:ajaxurl → Todas las peticiones AJAX se envían a la misma url.

method → La información puede enviarse por GET o POST.

data (action) → Cada función PHP que procesará una petición AJAX se registra.

Una vez que la función la recibe Wordpress, para poder recibirla necesitamos que esta función esté registrada. Para registrarla tenemos dos opciones:

wp_ajax() → Las funciones se registran con este hook para los usuarios logeados.

wp_ajax_nopriv() → Las funciones se registran con este hook para funcionar sin usuarios logeados.

Y las funciones de respuestas son:

wp_send_json() → Nos va permitir enviar la respuesta del servidor en formato JSON. Esta función puede recibir un string o un Array, y ese Array va a ser transformado en JSON para poder ser recibido por el archivo de Javascript.

Por último el archivo de Javascript, va a recibir esa información.

success / .done() → Nos permite recibir la respuesta y procesarla.

error / .catch() → Nos permite manejar errores y procesarlos.

Rest api https://developer.wordpress.org/rest-api/ 

Qué son y cómo funcionan los endpoints? en la API

Es una Url que nos permite personalizar y expandir las capacidades de la REST API de Wordpress, esto quiere decir que nos dará una nueva url que nos va a proveer datos personalizados.

Wordpress nos provee una función para generarlo:

register_rest_route() → Cada endpoint debe ser registrado para empezar a funcionar. Para su registro recibe 3 parámetros

$namespace → reemplaza el wp-b2 (por defecto de WP), espacio de trabajo para todas nuestras rutas personalizadas.

$route → el resto de los parámetros que queremos recibir en esa URL.

$args → Para indicar el método como se pueden conectar a nuestro url y función de callback que procesa la petición y da el retorno de los datos.

$override → que es opcional, permite definir si la función reemplaza a otras si tiene la misma ruta.

So proud for my first Wordpress theme and plugin. Thanks to @platzi #WordPress

So proud for my first Wordpress theme and plugin. Thanks to @platzi #WordPress

— Julian (@juli6464) Sep 10, 2021

from Twitter https://twitter.com/juli6464

Código para tener en cuenta al desarrollar theme en Wordpress

 Apuntes del curso de Platzi de Wordpress

¿Que son los Hooks? Son espacios dentro del código donde puedes ejecutar tus propias funciones, puedes ejecutar 2 tipos de hooks, action y filter 

Action Ejecuta una función en un lugar que especifiques sin retornar ningún valor. add_action

Filter Ejecuta la función recibiendo parámetros procesándolos y retornándolos ya procesados add_filter

Post type  Tipo de contenido (entradas, páginas, archivos multimedia, menús).

Custom post type Tipo de contenido personalizado . contenido que se adapten a nuestro proyecto.

Loop  Herramienta que muestra contenido que tenemos guardado en nuestro sitio.

Tipos de loop

Básico Archivos destinados a su post_type  comopage.php

Personalizado Usa WP_Query para personalizar la consulta.

wp_register_style() => registra el estilo

wp_enqueue_style() => ejecuta el estilo

En js:

wp_register_script() => registra el script

wp_enqueue_script() => ejecuta el script

add_role()  añadir roles de usuario en functions.php

remove_role() remover roles

Para ver roles y capabilities (permisos) ingresar a https://wordpress.org/support/article/roles-and-capabilities/#administrator

Generador de post_type: https://generatewp.com/post-type/

Funciones a tener en cuenta en Wordpress  https://codex.wordpress.org/Function_Reference