{"id":1968,"date":"2024-10-09T11:37:52","date_gmt":"2024-10-09T03:37:52","guid":{"rendered":"https:\/\/www.openbyt.com\/xbox-boss-talks-project-scorpio-price-2"},"modified":"2024-10-17T19:54:11","modified_gmt":"2024-10-17T11:54:11","slug":"xbox-boss-talks-project-scorpio-price-2","status":"publish","type":"post","link":"https:\/\/www.openbyt.com\/es\/el-jefe-de-xbox-habla-de-project-scorpio-precio-2","title":{"rendered":"Comprender la importancia de las normas de codificaci\u00f3n"},"content":{"rendered":"<p>Las normas de codificaci\u00f3n son como las reglas gramaticales de la programaci\u00f3n. Al igual que una gram\u00e1tica adecuada hace que el lenguaje escrito sea claro y comprensible, las normas de codificaci\u00f3n hacen que su c\u00f3digo sea coherente y legible.<\/p><ul class=\"wp-block-list\"><li><strong>Para usted<\/strong>: Le resultar\u00e1 m\u00e1s f\u00e1cil leer y actualizar su c\u00f3digo en el futuro.<\/li>\n\n<li><strong>Para otros<\/strong>: Si comparte su c\u00f3digo o trabaja en equipo, los dem\u00e1s apreciar\u00e1n la claridad.<\/li>\n\n<li><strong>Para WordPress<\/strong>: Al ser de c\u00f3digo abierto, mucha gente contribuye. Los est\u00e1ndares mantienen todo unificado.<\/li><\/ul><figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-11.23.23-An-illustration-of-a-group-of-developers-collaborating-on-code.-The-developers-are-sitting-around-a-table-with-laptops-discussing-and-pointing-at-a-s.webp\" alt=\"\" class=\"wp-image-2430\" srcset=\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-11.23.23-An-illustration-of-a-group-of-developers-collaborating-on-code.-The-developers-are-sitting-around-a-table-with-laptops-discussing-and-pointing-at-a-s.webp 1024w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-11.23.23-An-illustration-of-a-group-of-developers-collaborating-on-code.-The-developers-are-sitting-around-a-table-with-laptops-discussing-and-pointing-at-a-s-600x600.webp 600w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-11.23.23-An-illustration-of-a-group-of-developers-collaborating-on-code.-The-developers-are-sitting-around-a-table-with-laptops-discussing-and-pointing-at-a-s-100x100.webp 100w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-11.23.23-An-illustration-of-a-group-of-developers-collaborating-on-code.-The-developers-are-sitting-around-a-table-with-laptops-discussing-and-pointing-at-a-s-300x300.webp 300w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-11.23.23-An-illustration-of-a-group-of-developers-collaborating-on-code.-The-developers-are-sitting-around-a-table-with-laptops-discussing-and-pointing-at-a-s-150x150.webp 150w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-11.23.23-An-illustration-of-a-group-of-developers-collaborating-on-code.-The-developers-are-sitting-around-a-table-with-laptops-discussing-and-pointing-at-a-s-768x768.webp 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p><strong>Aplicaci\u00f3n en el mundo real de las normas de codificaci\u00f3n en el trabajo en equipo<\/strong><\/p><p>Imagine que trabaja en un proyecto de WordPress como parte de un gran equipo. Todos contribuyen con diferentes partes del c\u00f3digo: algunos se centran en el backend, otros en el estilo y otros en la accesibilidad. Sin normas coherentes, el proyecto puede volverse ca\u00f3tico r\u00e1pidamente. Las normas de codificaci\u00f3n garantizan que:<\/p><ul class=\"wp-block-list\"><li><strong>Colaboraci\u00f3n fluida<\/strong>: Cuando todo el mundo sigue las mismas reglas, es m\u00e1s f\u00e1cil para los desarrolladores leer y comprender el trabajo de los dem\u00e1s.<\/li>\n\n<li><strong>Menos conflictos de fusi\u00f3n<\/strong>: Un formato incoherente suele provocar conflictos de c\u00f3digo al fusionar los cambios. Las normas minimizan estos conflictos, lo que permite al equipo trabajar con mayor eficacia.<\/li>\n\n<li><strong>Mejor incorporaci\u00f3n<\/strong>: Los nuevos desarrolladores que se incorporan al proyecto pueden ponerse al d\u00eda r\u00e1pidamente siguiendo un estilo de codificaci\u00f3n estandarizado, lo que reduce el tiempo dedicado a comprender el c\u00f3digo existente.<\/li><\/ul><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-11.23.27-An-illustration-of-a-group-of-developers-collaborating-on-code.-The-developers-are-sitting-around-a-table-with-laptops-discussing-and-pointing-at-a-s.webp\" alt=\"\" class=\"wp-image-2432\" srcset=\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-11.23.27-An-illustration-of-a-group-of-developers-collaborating-on-code.-The-developers-are-sitting-around-a-table-with-laptops-discussing-and-pointing-at-a-s.webp 1024w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-11.23.27-An-illustration-of-a-group-of-developers-collaborating-on-code.-The-developers-are-sitting-around-a-table-with-laptops-discussing-and-pointing-at-a-s-600x600.webp 600w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-11.23.27-An-illustration-of-a-group-of-developers-collaborating-on-code.-The-developers-are-sitting-around-a-table-with-laptops-discussing-and-pointing-at-a-s-100x100.webp 100w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-11.23.27-An-illustration-of-a-group-of-developers-collaborating-on-code.-The-developers-are-sitting-around-a-table-with-laptops-discussing-and-pointing-at-a-s-300x300.webp 300w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-11.23.27-An-illustration-of-a-group-of-developers-collaborating-on-code.-The-developers-are-sitting-around-a-table-with-laptops-discussing-and-pointing-at-a-s-150x150.webp 150w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-11.23.27-An-illustration-of-a-group-of-developers-collaborating-on-code.-The-developers-are-sitting-around-a-table-with-laptops-discussing-and-pointing-at-a-s-768x768.webp 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>Considere un escenario en el que un desarrollador abandona el proyecto y un nuevo miembro del equipo debe hacerse cargo de su parte. Si el desarrollador anterior sigui\u00f3 las normas de codificaci\u00f3n adecuadas, el \u00faltimo miembro puede incorporarse r\u00e1pidamente, mantener el c\u00f3digo y realizar mejoras sin necesitar mucho tiempo para comprenderlo.<\/p><hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/><p><strong>Est\u00e1ndares de codificaci\u00f3n PHP de WordPress<\/strong><\/p><p>PHP es el lenguaje principal de WordPress. Seguir los est\u00e1ndares de codificaci\u00f3n PHP garantiza que su c\u00f3digo se integre sin problemas con WordPress y sea f\u00e1cil de entender para los dem\u00e1s.<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-15.21.36-An-illustration-of-a-European-developer-working-on-PHP-for-WordPress.-The-developer-is-sitting-in-a-modern-workspace-coding-on-a-laptop-with-PHP-code.webp\" alt=\"\" class=\"wp-image-2459\" srcset=\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-15.21.36-An-illustration-of-a-European-developer-working-on-PHP-for-WordPress.-The-developer-is-sitting-in-a-modern-workspace-coding-on-a-laptop-with-PHP-code.webp 1024w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-15.21.36-An-illustration-of-a-European-developer-working-on-PHP-for-WordPress.-The-developer-is-sitting-in-a-modern-workspace-coding-on-a-laptop-with-PHP-code-600x600.webp 600w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-15.21.36-An-illustration-of-a-European-developer-working-on-PHP-for-WordPress.-The-developer-is-sitting-in-a-modern-workspace-coding-on-a-laptop-with-PHP-code-100x100.webp 100w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-15.21.36-An-illustration-of-a-European-developer-working-on-PHP-for-WordPress.-The-developer-is-sitting-in-a-modern-workspace-coding-on-a-laptop-with-PHP-code-300x300.webp 300w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-15.21.36-An-illustration-of-a-European-developer-working-on-PHP-for-WordPress.-The-developer-is-sitting-in-a-modern-workspace-coding-on-a-laptop-with-PHP-code-150x150.webp 150w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-15.21.36-An-illustration-of-a-European-developer-working-on-PHP-for-WordPress.-The-developer-is-sitting-in-a-modern-workspace-coding-on-a-laptop-with-PHP-code-768x768.webp 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p><strong>1.Etiquetas PHP: Utilice siempre etiquetas PHP completas <code>&lt;?php<\/code>. Evite etiquetas cortas como <code>&lt;? ?&gt;<\/code> porque puede que no funcionen en todos los servidores.<\/strong><\/p><pre class=\"wp-block-code\"><code>&lt;?php\n\/\/ Your PHP code here\n?&gt;<\/code><\/pre><p><strong>2.Codificaci\u00f3n de archivos: Guarde sus archivos PHP en UTF-8 sin marca de orden de bytes (BOM).<\/strong><\/p><p><strong>3.Finales de l\u00ednea: Utilice los finales de l\u00ednea al estilo Unix (<code>\\n<\/code>).<\/strong><\/p><p><strong>4.Sangr\u00eda: Utilice tabuladores para la sangr\u00eda (no espacios). Esto mantiene el c\u00f3digo consistente a trav\u00e9s de diferentes editores.<\/strong><\/p><p><strong>Convenciones de denominaci\u00f3n<\/strong><\/p><p><strong>1.Funciones y m\u00e9todos: Utilice letras min\u00fasculas y guiones bajos.<\/strong><\/p><pre class=\"wp-block-code\"><code>function get_user_data( $user_id ) {\n    \/\/ C\u00f3digo de la funci\u00f3n\n}<\/code><\/pre><p><strong>2.Variables: Igual que las funciones: min\u00fasculas y guiones bajos.<\/strong><\/p><pre class=\"wp-block-code\"><code>1TP4Nombre_usuario = 'John Doe';<\/code><\/pre><p><strong>3.Clases: Utilice palabras en may\u00fasculas (StudlyCaps).<\/strong><\/p><p>clase UserProfile {<br>\/\/ C\u00f3digo de clase<br>}<\/p><p><strong>4.Constantes: Todas las letras may\u00fasculas con guiones bajos.<\/strong><\/p><pre class=\"wp-block-code\"><code>define( 'MAX_UPLOAD_SIZE', 1048576 );<\/code><\/pre><p><strong>Espacios en blanco y sangr\u00eda<\/strong><\/p><p><strong>1.Espacios despu\u00e9s de las comas: Cuando enumere par\u00e1metros o elementos de la matriz, incluya un espacio despu\u00e9s de cada coma.<\/strong><\/p><pre class=\"wp-block-code\"><code>$colors = array( 'rojo', 'verde', 'azul' );<\/code><\/pre><p><strong>2.Estructuras de control: Coloque un espacio entre las palabras clave de control y el par\u00e9ntesis de apertura.<\/strong><\/p><pre class=\"wp-block-code\"><code>if ( $condition ) {\n    \/\/ C\u00f3digo\n}<\/code><\/pre><p><strong>3.Operadores: Incluya espacios alrededor de los operadores de asignaci\u00f3n, comparaci\u00f3n y l\u00f3gicos.<\/strong><\/p><pre class=\"wp-block-code\"><code>$otal = $precio + $impuesto;\nif ( $total &gt; 100 ) {\n    \/\/ C\u00f3digo\n}<\/code><\/pre><p><strong>Estructuras de control<\/strong><\/p><p><strong>1.Colocaci\u00f3n de los tirantes: Utilice el estilo Allman, en el que el tirante de apertura est\u00e1 en una nueva l\u00ednea.<\/strong><\/p><pre class=\"wp-block-code\"><code>if ( $condition )\n{\n    \/\/ C\u00f3digo\n}\nelse\n{\n    \/\/ C\u00f3digo\n}<\/code><\/pre><p><strong>2.<code>elseif<\/code>** Palabra clave**: Utilice <code>elseif<\/code> en lugar de <code>si no<\/code>.<\/strong><\/p><pre class=\"wp-block-code\"><code>if ( $condition )\n{\n    \/\/ C\u00f3digo\n}\nelseif ( 1TP4Otra_condici\u00f3n )\n{\n    \/\/ C\u00f3digo\n}<\/code><\/pre><p><strong>3.Condiciones Yoda: Coloque la constante o literal en el lado izquierdo de las comparaciones.<\/strong><\/p><pre class=\"wp-block-code\"><code>if ( true === $is_active )\n{\n    \/\/ C\u00f3digo\n}<\/code><\/pre><p>Esto ayuda a evitar la asignaci\u00f3n accidental (<code>=<\/code> en lugar de <code>==<\/code>).<\/p><p><strong>Buenas pr\u00e1cticas<\/strong><\/p><p><strong>1.Evite las etiquetas PHP abreviadas: Utilice siempre etiquetas completas para una mejor compatibilidad.<\/strong><\/p><p><strong>2.Argumentos de funci\u00f3n: Utilice nombres de variables claros y descriptivos.<\/strong><\/p><pre class=\"wp-block-code\"><code>function calcular_total( $subtotal, $asa_impuesto ) {\n    \/\/ C\u00f3digo\n}<\/code><\/pre><p><strong>3.Sanitize Inputs: Siempre sanee y valide las entradas del usuario.<\/strong><\/p><pre class=\"wp-block-code\"><code>$user_id = intval( $_GET['user_id'] );<\/code><\/pre><p><strong>4.Escapar salidas: Antes de dar salida a los datos, esc\u00e1pelos para evitar problemas de seguridad.<\/strong><\/p><pre class=\"wp-block-code\"><code>echo esc_html( 1TP4Nombre_usuario );<\/code><\/pre><p><strong>5.Comentarios: Utilice los comentarios para explicar la l\u00f3gica compleja o las notas importantes.<\/strong><\/p><pre class=\"wp-block-code\"><code>\/\/ Calcular el precio total con impuestos<\/code><\/pre><hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/><p><strong>Normas de documentaci\u00f3n en l\u00ednea<\/strong><\/p><p>Una documentaci\u00f3n adecuada facilita la comprensi\u00f3n y el mantenimiento de su c\u00f3digo.<\/p><p><strong>1.Comentarios de las funciones: Antes de cada funci\u00f3n, incluya un bloque de comentarios.<\/strong><\/p><pre class=\"wp-block-code\"><code>\/**\n * Calcula el precio total, impuestos incluidos.\n *\n * @param float $subtotal El importe del subtotal.\n * @param float $tax_rate El tipo impositivo como decimal.\n * @return float El precio total.\n *\/\nfunction calcular_total( $subtotal, $asa_impuestos ) {\n    \/\/ C\u00f3digo de la funci\u00f3n\n}<\/code><\/pre><p><strong>2.Tipos de par\u00e1metro y de retorno: Especifique el tipo de cada par\u00e1metro y el valor de retorno.<\/strong><\/p><p><strong>3.Comentarios Inline: Util\u00edcelos con moderaci\u00f3n para explicar partes complejas de su c\u00f3digo.<\/strong><\/p><pre class=\"wp-block-code\"><code>$discount = 0.0; \/\/ Inicializar la variable de descuento<\/code><\/pre><hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/><p><strong>Normas de codificaci\u00f3n HTML en WordPress<\/strong><\/p><p>El HTML es la columna vertebral del contenido web. Escribir un HTML limpio y sem\u00e1ntico es crucial para la accesibilidad y el SEO.<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-15.18.29-An-illustration-showing-HTML-coding-standards-for-WordPress.-The-image-features-a-laptop-displaying-HTML-code-with-proper-indentation-semantic-tags-l.webp\" alt=\"\" class=\"wp-image-2457\" srcset=\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-15.18.29-An-illustration-showing-HTML-coding-standards-for-WordPress.-The-image-features-a-laptop-displaying-HTML-code-with-proper-indentation-semantic-tags-l.webp 1024w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-15.18.29-An-illustration-showing-HTML-coding-standards-for-WordPress.-The-image-features-a-laptop-displaying-HTML-code-with-proper-indentation-semantic-tags-l-600x600.webp 600w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-15.18.29-An-illustration-showing-HTML-coding-standards-for-WordPress.-The-image-features-a-laptop-displaying-HTML-code-with-proper-indentation-semantic-tags-l-100x100.webp 100w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-15.18.29-An-illustration-showing-HTML-coding-standards-for-WordPress.-The-image-features-a-laptop-displaying-HTML-code-with-proper-indentation-semantic-tags-l-300x300.webp 300w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-15.18.29-An-illustration-showing-HTML-coding-standards-for-WordPress.-The-image-features-a-laptop-displaying-HTML-code-with-proper-indentation-semantic-tags-l-150x150.webp 150w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-15.18.29-An-illustration-showing-HTML-coding-standards-for-WordPress.-The-image-features-a-laptop-displaying-HTML-code-with-proper-indentation-semantic-tags-l-768x768.webp 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p><strong>Directrices generales<\/strong><\/p><p><strong>1.Doctype: Empiece siempre con el doctype HTML5.<\/strong><\/p><pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;<\/code><\/pre><p><strong>2.Atributo de idioma: Especifique el idioma en el <code>&lt;html&gt;<\/code> etiqueta.<\/strong><br><\/p><pre class=\"wp-block-code\"><code>&lt;html lang=&quot;en&quot;&gt;<\/code><\/pre><p><strong>3.Codificaci\u00f3n de caracteres: Utilice la codificaci\u00f3n UTF-8.<\/strong><\/p><pre class=\"wp-block-code\"><code>&lt;meta charset=\"UTF-8\"&gt;<\/code><\/pre><p>Estructurar su HTML<\/p><p><strong>1.Elementos sem\u00e1nticos: Utilice elementos sem\u00e1nticos HTML5 como <code>&lt;header&gt;<\/code>, <code><nav><\/code>, <code>&lt;section&gt;<\/code>, <code>&lt;article&gt;<\/code>, <code><footer><\/code>.<\/strong><\/p><pre class=\"wp-block-code\"><code><!-- Contenido del encabezado -->\n<\/header>\n<nav>\n    <!-- Enlaces de navegaci\u00f3n -->\n<\/nav>\n<main>\n    <!-- Contenido principal -->\n<\/main>\n<footer>\n    <!-- Contenido del pie de p\u00e1gina -->\n<\/footer><\/code><\/pre><p><strong>2.Sangr\u00eda: Utilice dos espacios (o tabuladores si lo prefiere) para sangrar los elementos anidados.<\/strong><\/p><pre class=\"wp-block-code\"><code><ul>\n    <li>Art\u00edculo 1<\/li>\n    <li>Art\u00edculo 2<\/li>\n<\/ul><\/code><\/pre><p><strong>3.Atributos: Utilice min\u00fasculas para los nombres de los atributos y encierre los valores de los atributos entre comillas dobles.<\/strong><\/p><pre class=\"wp-block-code\"><code>&lt;img src=&quot;image.jpg&quot; alt=&quot;Una foto impresionante&quot;&gt;<\/code><\/pre><p><strong>Buenas pr\u00e1cticas<\/strong><\/p><p><strong>1.Accesibilidad: Incluya siempre <code>alt<\/code> atributos para las im\u00e1genes y utilice roles ARIA cuando proceda.<\/strong><\/p><pre class=\"wp-block-code\"><code>&lt;img src=&quot;logo.png&quot; alt=&quot;Logotipo de la empresa&quot;&gt;<\/code><\/pre><p><strong>2.Etiquetas de autocierre: Para HTML5, no es necesario autocerrar elementos vac\u00edos como <code>&lt;br&gt;<\/code>, <code>&lt;img&gt;<\/code>, <code>&lt;input&gt;<\/code>.<\/strong><\/p><pre class=\"wp-block-code\"><code>&lt;br&gt;\n&lt;img src=&quot;image.jpg&quot; alt=&quot;Descripci&oacute;n&quot;&gt;<\/code><\/pre><p><strong>3.Comentarios: Utilice comentarios HTML para explicar secciones de su c\u00f3digo si es necesario.<\/strong><\/p><pre class=\"wp-block-code\"><code><!-- Navegaci\u00f3n principal -->\n<nav>\n    <!-- Enlaces de navegaci\u00f3n -->\n<\/nav><\/code><\/pre><hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/><p><strong>Normas de codificaci\u00f3n CSS en WordPress<\/strong><\/p><p>El CSS controla la presentaci\u00f3n de su sitio web. Escribir CSS limpio y eficiente hace que su sitio se vea bien y cargue m\u00e1s r\u00e1pido.<\/p><p><strong>Directrices generales<\/strong><\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-15.16.31-A-visual-representation-of-writing-clean-CSS.-The-image-shows-a-laptop-screen-displaying-clean-well-organized-CSS-code-with-proper-indentation-comme.webp\" alt=\"\" class=\"wp-image-2455\" srcset=\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-15.16.31-A-visual-representation-of-writing-clean-CSS.-The-image-shows-a-laptop-screen-displaying-clean-well-organized-CSS-code-with-proper-indentation-comme.webp 1024w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-15.16.31-A-visual-representation-of-writing-clean-CSS.-The-image-shows-a-laptop-screen-displaying-clean-well-organized-CSS-code-with-proper-indentation-comme-600x600.webp 600w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-15.16.31-A-visual-representation-of-writing-clean-CSS.-The-image-shows-a-laptop-screen-displaying-clean-well-organized-CSS-code-with-proper-indentation-comme-100x100.webp 100w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-15.16.31-A-visual-representation-of-writing-clean-CSS.-The-image-shows-a-laptop-screen-displaying-clean-well-organized-CSS-code-with-proper-indentation-comme-300x300.webp 300w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-15.16.31-A-visual-representation-of-writing-clean-CSS.-The-image-shows-a-laptop-screen-displaying-clean-well-organized-CSS-code-with-proper-indentation-comme-150x150.webp 150w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-15.16.31-A-visual-representation-of-writing-clean-CSS.-The-image-shows-a-laptop-screen-displaying-clean-well-organized-CSS-code-with-proper-indentation-comme-768x768.webp 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p><strong>1.Sintaxis: Siga la sintaxis CSS est\u00e1ndar: selector, llaves, pares propiedad-valor.<\/strong><\/p><pre class=\"wp-block-code\"><code>.class-selector {\n    propiedad: valor;\n}<\/code><\/pre><p><strong>2.Sangr\u00eda: Utilice dos espacios (o tabuladores) para la sangr\u00eda dentro de las reglas.<\/strong><\/p><p><strong>3.Comentarios: Utilice los comentarios para separar secciones y explicar reglas complejas.<\/strong><\/p><pre class=\"wp-block-code\"><code>\/* Estilos de cabecera *\/\ncabecera {\n    \/* Propiedades *\/\n}<\/code><\/pre><p><strong>Escribir CSS limpio<\/strong><\/p><p><strong>1.Nombres de los selectores: Utilice letras min\u00fasculas y guiones.<\/strong><\/p><pre class=\"wp-block-code\"><code>.main-navigation {\n    \/* Estilos *\/\n}<\/code><\/pre><p><strong>2.Evite los ID para el estilo: Utilice clases en lugar de ID para mantener baja la especificidad.<\/strong><\/p><pre class=\"wp-block-code\"><code>\/* Correcto *\/\n.button {\n    \/* Estilos *\/\n}\n\n\/* Evitar *\/\n#submit-button {\n    \/* Estilos *\/\n}<\/code><\/pre><p><strong>3.Propiedades abreviadas: Utilice propiedades abreviadas siempre que sea posible.<\/strong><\/p><pre class=\"wp-block-code\"><code>\/* Correcto *\/\nmargen: 10px 5px 15px 0;\n\n\/* Ampliado *\/\nmargin-top: 10px\nmargin-right: 5px;\nmargen-inferior 15px\nmargen izquierdo: 0;<\/code><\/pre><p><strong>4.Valores cero: Omita las unidades para los valores cero.<\/strong><\/p><pre class=\"wp-block-code\"><code>acolchado 0;<\/code><\/pre><p>Buenas pr\u00e1cticas<\/p><p><strong>1.Organice los estilos: Agrupe estilos relacionados, como el dise\u00f1o, la tipograf\u00eda o los colores.<\/strong><\/p><p><strong>2.Comentarios para las secciones: Utilice comentarios para dividir su hoja de estilo en secciones.<\/strong><\/p><p>\/* Tipograf\u00eda <em>\/ \/<\/em> Colores <em>\/ \/<\/em> Disposici\u00f3n *\/<\/p><p><strong>3.Evite !importante: Utilice especificidad en lugar de <code>Importante<\/code> para anular los estilos.<\/strong><\/p><p><strong>4.Consultas de medios: Coloque las consultas de medios cerca de los estilos relacionados o en una secci\u00f3n separada.<\/strong><\/p><pre class=\"wp-block-code\"><code>@media (max-width: 768px) {\n    .main-navegaci\u00f3n {\n        display: none;\n    }\n}<\/code><\/pre><hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/><p><strong>Herramientas y plugins recomendados<\/strong><\/p><p>Para asegurarse de que sigue las normas de codificaci\u00f3n de WordPress, considere la posibilidad de utilizar las siguientes herramientas:<\/p><ol class=\"wp-block-list\"><li><strong>PHP CodeSniffer<\/strong>: Esta herramienta puede ayudar a detectar violaciones de las normas de codificaci\u00f3n PHP de WordPress. Puede utilizarla con el conjunto de reglas WordPress Coding Standards para comprobar autom\u00e1ticamente su c\u00f3digo.<\/li>\n\n<li><strong>EditorConfig<\/strong>: Muchos IDE y editores de c\u00f3digo admiten archivos .editorconfig, que ayudan a mantener estilos de codificaci\u00f3n coherentes entre distintos editores y desarrolladores.<\/li>\n\n<li><strong>ESLint y Stylelint<\/strong>: Utilice estas herramientas para pelar JavaScript y CSS para detectar errores comunes y reforzar la coherencia.<\/li>\n\n<li><strong>M\u00e1s bonito<\/strong>: Un formateador de c\u00f3digo que puede aplicar autom\u00e1ticamente un estilo coherente para HTML, CSS y JavaScript, facilitando a los equipos el mantenimiento de un estilo de c\u00f3digo unificado.<\/li>\n\n<li><strong>Extensiones VSCode<\/strong>:<ul class=\"wp-block-list\"><li><strong>PHP Intelefense<\/strong>: Proporciona autocompletado inteligente y sugerencias sobre funciones y detecta posibles problemas.<\/li>\n\n<li><strong>Fragmentos de WordPress<\/strong>: Una colecci\u00f3n de funciones y fragmentos de c\u00f3digo de WordPress de uso com\u00fan para acelerar el desarrollo.<\/li><\/ul><\/li><\/ol><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-15.56.28-An-illustration-of-coding-tools-and-plugins-for-WordPress-development.-The-image-shows-a-developers-workspace-with-a-laptop-screen-displaying-various.webp\" alt=\"\" class=\"wp-image-2462\" srcset=\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-15.56.28-An-illustration-of-coding-tools-and-plugins-for-WordPress-development.-The-image-shows-a-developers-workspace-with-a-laptop-screen-displaying-various.webp 1024w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-15.56.28-An-illustration-of-coding-tools-and-plugins-for-WordPress-development.-The-image-shows-a-developers-workspace-with-a-laptop-screen-displaying-various-600x600.webp 600w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-15.56.28-An-illustration-of-coding-tools-and-plugins-for-WordPress-development.-The-image-shows-a-developers-workspace-with-a-laptop-screen-displaying-various-100x100.webp 100w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-15.56.28-An-illustration-of-coding-tools-and-plugins-for-WordPress-development.-The-image-shows-a-developers-workspace-with-a-laptop-screen-displaying-various-300x300.webp 300w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-15.56.28-An-illustration-of-coding-tools-and-plugins-for-WordPress-development.-The-image-shows-a-developers-workspace-with-a-laptop-screen-displaying-various-150x150.webp 150w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-15.56.28-An-illustration-of-coding-tools-and-plugins-for-WordPress-development.-The-image-shows-a-developers-workspace-with-a-laptop-screen-displaying-various-768x768.webp 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/><p><strong>Errores comunes que debe evitar<\/strong><\/p><p><strong>1.Nombres incoherentes:<\/strong> Mezclar camelCase y snake_case puede llevar a confusi\u00f3n, as\u00ed que at\u00e9ngase a las convenciones de nomenclatura prescritas en todo su proyecto.<\/p><p><strong>2.<\/strong>No escapar la salida: Escape siempre el contenido generado por el usuario antes de darle salida para evitar vulnerabilidades de seguridad como XSS.<\/p><pre class=\"wp-block-code\"><code>\/\/ Correcto\necho esc_html( $user_input );\n\n\/\/ Incorrecto\necho $user_input;<\/code><\/pre><p><strong>3.Uso inadecuado de globales<\/strong>: Evite utilizar variables globales a menos que sea necesario. En su lugar, pase las variables expl\u00edcitamente a las funciones para mantener su c\u00f3digo modular y m\u00e1s accesible para las pruebas.<\/p><p>4.<strong>Uso de estilos en l\u00ednea<\/strong>: Deben evitarse los estilos en l\u00ednea, ya que dificultan el mantenimiento y la anulaci\u00f3n de CSS. Utilice siempre hojas de estilo externas.<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-16.10.55-An-illustration-showing-common-coding-errors-to-avoid-in-WordPress-development.-The-image-features-a-laptop-screen-with-PHP-code-examples-demonstratin.webp\" alt=\"\" class=\"wp-image-2465\" srcset=\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-16.10.55-An-illustration-showing-common-coding-errors-to-avoid-in-WordPress-development.-The-image-features-a-laptop-screen-with-PHP-code-examples-demonstratin.webp 1024w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-16.10.55-An-illustration-showing-common-coding-errors-to-avoid-in-WordPress-development.-The-image-features-a-laptop-screen-with-PHP-code-examples-demonstratin-600x600.webp 600w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-16.10.55-An-illustration-showing-common-coding-errors-to-avoid-in-WordPress-development.-The-image-features-a-laptop-screen-with-PHP-code-examples-demonstratin-100x100.webp 100w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-16.10.55-An-illustration-showing-common-coding-errors-to-avoid-in-WordPress-development.-The-image-features-a-laptop-screen-with-PHP-code-examples-demonstratin-300x300.webp 300w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-16.10.55-An-illustration-showing-common-coding-errors-to-avoid-in-WordPress-development.-The-image-features-a-laptop-screen-with-PHP-code-examples-demonstratin-150x150.webp 150w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-16.10.55-An-illustration-showing-common-coding-errors-to-avoid-in-WordPress-development.-The-image-features-a-laptop-screen-with-PHP-code-examples-demonstratin-768x768.webp 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/><p><strong>Ponerlo todo junto<\/strong><\/p><p>Veamos un ejemplo que combina PHP, HTML y CSS siguiendo los est\u00e1ndares de codificaci\u00f3n de WordPress.<\/p><h3 class=\"wp-block-heading\">Ejemplo: Una plantilla PHP sencilla<\/h3><p><strong>Archivo PHP (template-example.php)<\/strong>:<\/p><pre class=\"wp-block-code\"><code>&lt;?php\n\/**\n * Template Name: Example Template\n *\n * A template to demonstrate coding standards.\n *\n * @package WordPress\n * @subpackage Your_Theme\n *\/\n\nget_header(); ?&gt;\n\n&lt;main id=&quot;main-content&quot; class=&quot;site-main&quot;&gt;\n    &lt;?php\n    if ( have_posts() ) :\n        while ( have_posts() ) :\n            the_post(); ?&gt;\n\n            &lt;article id=&quot;post-&lt;?php the_ID(); ?&gt;&quot; no numeric noise key 1006&gt;\n                &lt;header class=&quot;entry-header&quot;&gt;\n                    &lt;?php the_title( '&lt;h1&gt;', '&lt;\/h1&gt;' ); ?&gt;\n                &lt;\/header&gt;\n\n                &lt;div class=&quot;entry-content&quot;&gt;\n                    &lt;?php the_content(); ?&gt;\n                &lt;\/div&gt;\n            &lt;\/article&gt;\n\n        &lt;?php endwhile;\n    else : ?&gt;\n\n        &lt;p&gt;&lt;?php esc_html_e( 'Sorry, no posts matched your criteria.', 'your-text-domain' ); ?&gt;&lt;\/p&gt;\n\n    &lt;?php endif; ?&gt;\n&lt;\/main&gt;\n\n&lt;?php get_footer(); ?&gt;<\/code><\/pre><p><strong>Archivo CSS (<\/strong><code><strong>style.css<\/strong><\/code><strong>)<\/strong>:<\/p><pre class=\"wp-block-code\"><code>\/* Estilos de contenido principal *\/\n.site-main {\n    margin: 0 auto;\n    max-width: 800px;\n    relleno: 20px;\n}\n\n.entry-header h1 {\n    font-size: 2em;\n    margin-bottom: 0.5em;\n}\n\n.entry-content {\n    line-height: 1.6;\n}<\/code><\/pre><hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/><p><strong>Recursos adicionales<\/strong><\/p><ul class=\"wp-block-list\"><li><strong>Manual para desarrolladores de WordPress<\/strong>: <a>desarrollador.wordpress.org<\/a><\/li>\n\n<li><strong>Documentaci\u00f3n PHP<\/strong>: <a href=\"https:\/\/www.php.net\/docs.php\" target=\"_blank\" rel=\"noopener\">php.net<\/a><\/li>\n\n<li><strong>Documentos web de la Red de desarrolladores de Mozilla (MDN)<\/strong>:<ul class=\"wp-block-list\"><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\" target=\"_blank\" rel=\"noopener\">HTML<\/a><\/li>\n\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\" target=\"_blank\" rel=\"noopener\">CSS<\/a><\/li>\n\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\" target=\"_blank\" rel=\"noopener\">JavaScript<\/a><\/li><\/ul><\/li>\n\n<li><strong>Servicio de validaci\u00f3n de marcado del W3C<\/strong>: <a href=\"https:\/\/validator.w3.org\/\" target=\"_blank\" rel=\"noopener\">validador.w3.org<\/a><\/li>\n\n<li><strong>Est\u00e1ndares de codificaci\u00f3n de WordPress<\/strong>:<ul class=\"wp-block-list\"><li><a>Normas PHP<\/a><\/li>\n\n<li><a>Normas HTML<\/a><\/li>\n\n<li><a>Normas CSS<\/a><\/li><\/ul><\/li><\/ul><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-16.15.32-An-illustration-of-a-collection-of-web-development-resources-such-as-books-and-web-pages.-The-image-includes-visual-representations-of-online-documen.webp\" alt=\"\" class=\"wp-image-2470\" srcset=\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-16.15.32-An-illustration-of-a-collection-of-web-development-resources-such-as-books-and-web-pages.-The-image-includes-visual-representations-of-online-documen.webp 1024w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-16.15.32-An-illustration-of-a-collection-of-web-development-resources-such-as-books-and-web-pages.-The-image-includes-visual-representations-of-online-documen-600x600.webp 600w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-16.15.32-An-illustration-of-a-collection-of-web-development-resources-such-as-books-and-web-pages.-The-image-includes-visual-representations-of-online-documen-100x100.webp 100w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-16.15.32-An-illustration-of-a-collection-of-web-development-resources-such-as-books-and-web-pages.-The-image-includes-visual-representations-of-online-documen-300x300.webp 300w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-16.15.32-An-illustration-of-a-collection-of-web-development-resources-such-as-books-and-web-pages.-The-image-includes-visual-representations-of-online-documen-150x150.webp 150w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-12-16.15.32-An-illustration-of-a-collection-of-web-development-resources-such-as-books-and-web-pages.-The-image-includes-visual-representations-of-online-documen-768x768.webp 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/><h2 class=\"wp-block-heading\">Conclusi\u00f3n<\/h2><p>Seguir los est\u00e1ndares de codificaci\u00f3n de WordPress garantiza que su c\u00f3digo sea limpio, coherente y profesional. Esto le ayuda a mantener sus proyectos y facilita que otros miembros de la comunidad WordPress colaboren con usted.<\/p><p>Recuerde:<\/p><ul class=\"wp-block-list\"><li><strong>La pr\u00e1ctica hace al maestro<\/strong>: Cuanto m\u00e1s codifique siguiendo estas normas, m\u00e1s natural le resultar\u00e1.<\/li>\n\n<li><strong>Mant\u00e9ngase al d\u00eda<\/strong>: Las normas de codificaci\u00f3n evolucionan, as\u00ed que no pierda de vista la documentaci\u00f3n oficial de WordPress.<\/li>\n\n<li><strong>Pida ayuda<\/strong>: Si necesita alguna aclaraci\u00f3n, la comunidad de WordPress es amable y est\u00e1 dispuesta a ayudarle.<\/li><\/ul><p>\u00a1Feliz codificaci\u00f3n!<\/p>","protected":false},"excerpt":{"rendered":"<p>Las normas de codificaci\u00f3n son como las reglas gramaticales de la programaci\u00f3n. Al igual que una gram\u00e1tica adecuada hace que el lenguaje escrito sea claro y comprensible, las normas de codificaci\u00f3n hacen que su c\u00f3digo sea coherente....<\/p>","protected":false},"author":1,"featured_media":2475,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[36,83],"tags":[218,217,219,216],"class_list":["post-1968","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev-tips","category-developer-tips","tag-css-best-practices","tag-php-code-guidelines","tag-team-collaboration-consistency","tag-wordpress-coding-standards",""],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/posts\/1968","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/comments?post=1968"}],"version-history":[{"count":19,"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/posts\/1968\/revisions"}],"predecessor-version":[{"id":3189,"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/posts\/1968\/revisions\/3189"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/media\/2475"}],"wp:attachment":[{"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/media?parent=1968"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/categories?post=1968"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/tags?post=1968"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}