Tag Archives: HTML

HTML – Resumen de 1 minuto

4 Ago , 2017,
Jose Nunez
, , , , , ,
No Comments

HTML son las siglas de Hyper-text Markup Language (Lenguaje de hiper-texto marcado). Es un lenguaje informático para describir un documento; y es una de las columnas vertebrales de la Internet moderna. Prácticamente todo el contenido que consumimos de la web se nos presenta usando HTML.

El formato HTML se basa en la definición de etiquetas (que describen partes de un documento) y atributos (que describen a las etiquetas)

Así por ejemplo la etiqueta <p> describe un párrafo en un documento y la etiqueta <div> describe una división de un documento.

Algunas etiquetas tienen incio y fin; por ejemplo la etiqueta de párrafo abre con<p> y cierra con </p>; de esta forma el contenido dentro de las etiquetas de apertura y cierre corresponde al contenido del párrafo.

<p>Este es un párrafo</p>

Algunas otras etiquetas son auto-cerradas. Por ejemplo la etiqueta <img> que define una imagen no tiene etiqueta “</img>” de cerrado sino que se declara así:

<img src="fotografia.jpg" />

La parte final de la etiqueta “/>” describe el auto-cerrado.

A su vez, en el ejemplo de la etiqueta “<img>” vemos también un ejemplo de lo que se conoce como atributo. La construcción src="fotografía.jpg" es un atributo que describe esa etiqueta <img>. Dice que se debe cargar un archivo denominado fotografía.jpg.

Existen algunos atributos que no tienen valor. Por ejemplo el atributo disabled.

<input type="text" value="algo de texto" disabled/>

En el ejemplo anterior se produce una caja de texto con el contenido “algo de texto” que aparece deshabilitada (en gris y no se puede cambiar el contenido).

Read More…

Algunas buenas prácticas para programar

26 Jul , 2017,
Jose Nunez
, , , , , , ,
No Comments

Lineamientos Generales para todos los lenguajes

  1. Los métodos y variables privadas comienzan con minúscula y se escriben en formato “camelCase”
  2. Los métodos, variables y propeidades públicas comienzan con mayúscula y se escriben igual en formato “Camel Case”
  3. Las constantes se escriben usando todas las letras en mayúscula y separándo palabras con “guión bajo”. Ej.: MI_CONSTANTE
  4. Haga declaración explícita de las variables locales
  5. Evite el uso de variables globales
  6. Las declaraciones de variables se agrupan al principio de clases y métodos. En ocasiones es adecuado declarar una variable pública justo antes de la declaración de un método que use esa variable de manera exclusiva o prioritaria.
  7. Está bien declarar variables que se usan exclusivamente en bucles iterativos (for-loops) en la declaración de dichos bucles.
  8. Inicialice las variables que declara, y escriba su lógica de manera que pueda procesar valores “undefined/falsy/null”
  9. Evite el uso de raya baja o guiones en los nombres de métodos o variables. En casos excepcionales se puede usar raya baja para describir alguna situacion consistente a lo largo del proyecto. Por ejemplo es mejor escribir  var blueColor que  var blue_Color. Pero podría ser adecuado escribir  function testControllerInit_SuccessCase()
  10. Como convención de nombramiento, use verbos para los métodos y sustativos para las propiedades.
  11. Evite el uso de valores literales “hard0-coded” en diversos lugares. Hágalos reusables en constantes.
  12. Los operadores lucen mejor con espacios al rededor. Por ejemplo es mejor escribir  var x = 10 + 10;  que  var x=10+10;
  13. La indentación es primordial. Muchos editores de código traen herramientas para indentar adecuadamente el código.
    Good tools for code auto-format are Netbeans, Atom and Visual Studio Code.
  14. Utilice las herramientas de análisis estático de códigopara encontrar variables no utilizadas, métodos demasiado largos y errores de sintaxis. NetBeans provee herramientas muy útiles para lenguajes como JS, CSS, PHP, TypeScript, C++ y HTML.
  15. Mantenga las líneas de código de una longitud menor a 80 caracteres.
  16. Mantenga los métodos de una longitud menor a 30 lines
  17. Mantenga las anidaciones a menos de 3 niveles
  18. No deje código comentado. Escriba comentarios para encontrar código legado en su lugar.
  19. Evite comentarios innecesarios y reiterativos como /*This function creates a user*/ para una función llamada “CreateUser(args)”
  20. Aproveche las facilidades de los ambientes de desarrollo para generar documentación a partir de comentarios estructurados. Especialmente para los Web API’s y las API’s en general.

JavaScript

  1. Nunca declare objetos de tipo Number, String or Boolean
  2. No use “new Object()“. Use var x = {} en su lugar.
  3. Recuerde que JS tiene un mecanismo automático de conversión de tipos
  4. Use === en vez de  == siempre que se pueda.
    1. En ocasiones es apropiado usar  == cuando el tipo de los objetos no se ocnoce de manera predecible/estable. Sin embargo la situación de manejar objetos de tipo desconocido o impredecible debe ser evitada también.
  5. Ponga atención a los parámetros que adoptan una “definición” undefined cuando no se proveen en una llamada a una función y actúe consecuentemente.
  6. Termine los bloques “switch” con “defaults
  7. Nunca use eval()
  8. Use nombres de variable significativos comocuentaor valorPrevio en lugar de  c or vp
  9. Es apropiado utilizar funciones anónimas cuando estas serán llamadas solamente desde un mismo lugar. En caso contrario es necesario extraer las funciones con un nombre apropiado en el entorno (scope) correcto.
  10. No deje sentencias de tipo “debugging” tales como console.log en el código del ambiente productivo.
  11. En JavaScript, iniciar una declaración de bloque con una llave “{” en la misma línea de la declaración es correcto:var constants = {
       COLOR_RED: "#FF0000",
       COLOR_GREEN: "#00FF00",
       COLOR_BLUE: "#0000FF"
    };
  12. Referencias:
    1. https://www.w3schools.com/js/js_best_practices.asp
    2. https://www.w3schools.com/js/js_mistakes.asp
    3. https://www.w3schools.com/js/js_performance.asp

HTML

  1. Utilice etiquetas en minúscula de manera consistente. Use <div> en lugar de  <DIV>
  2. Asegúrese de cerrar todas las etiquetas HTML de manera apropiada. Por ejemplo,  <div> debe cerrar con una etiqueta  de cierre </div> mientras que <hr> luce mejor si se cierra de manera individual <hr />
  3. Utilice minúsculas para los nombres de atributo. Also, use camelCase format for ID’s of DOM elements. I.e.: <div id="myDiv">...</div>
  4. Utilice guiones para separar palabras en los nombres de las clases CSS: <div id="myDiv" class="jumbotron-alternative">...</div>
  5. Use comillas dobles para declarar los valores de atributos HTML: I.e.:<div id="myDiv" class="jumbotron-alternative">...</div>
  6. Use las etiquetas <table> apropiadamente para elementos tabulares no para generar estilos o layout.
  7. No agregue espacios entre los nombres de atributos, símbolo de igualdad y los valores de atributos.
    This is good<link rel="stylesheet" href="styles.css">
    This is bad: <link rel = "stylesheet" href = "styles.css">
  8. Utilice indentación apropiadamente, especialmente con elementos jerárquicos como listas, tablas, entradas de selección.
  9. Evite usar espacios en blanco, líneas en blanco o indentación innecesaria.
  10. Use comentarios de manera apropiada:
    Good for short comments:     <!-- This is a comment -->
    Good for longer comments:
    <!-- 
      This is a long comment example. This is a long comment example.
      This is a long comment example. This is a long comment example.
    -->
  11. Las definiciones de estilo van en un archivo separado, no en el código HTML. Nunca use estilos “en-línea”
  12. Coloque las referencias a archivos JavaScript al final del código HTML
  13. Valide su código HTML por medio de análisis estático. Netbeans tiene muy buenas herramientas de análisis estático para HTML.
  14. Utilice nombres con significado para variables y reglas de estilo/clases.
  15. Referencias:
    1. https://www.w3schools.com/html/html5_syntax.asp

CSS / SCSS

  1. Los estilos van en archivos separados del código HTML.
  2. Es apropiado escribir reglas cortas CSS en una sola linea.
  3. Las reglas más largas (que involucran multiples configuraciones) deben hacerse en modo multi-línea.
  4. Nótese que CSS suporta comentarios
  5. Referencias:
    1. https://code.tutsplus.com/tutorials/30-css-best-practices-for-beginners–net-6741

AngularJS Specific

  1. Organice las carpetas y archivos en una estructura basada en componentes.
  2. Remueva las dependencias no usadas en los controladores. Netbeans tiene buenas herramientas de análisis de código para detectar código no utilizado.
  3. Es apropiado usar funciones anónimas en controladores si estas serán llamadas desde un solo lugar. De lo contrario, es mejor agregar una función no-anónima y hacer las llamadas respectivas por medio de dicha función.
  4. Se recomienda usar notación de arreglo al instanciar controladores.
  5. Mantenga la lógica de presentación fuera de los controladores. Los controladores manipulan e modelo de datos y las vistas son quienes reaccionan a los cambios realizados en esos modelos. Los controladores no deben realizar llamadas de tipo document.getElementByID para encontrar elementos del DOM en una vista.
  6. Referencias:
    1. https://dzone.com/articles/angularjs-coding-best
    2. https://www.upwork.com/hiring/development/angularjs-best-practices/

C# and .Net

  1. Haga uso extensivo y prudente del registro de eventos de manera que se pueda habilitar solución expedita de problemas en ambientes productivos.
  2. WIP

SQL Server

  1. Tenga cuidado del acople y la cohesión al desarrollar Procedimientos Almacenados.
  2. Use Procedimientos Almacenados y/o vistas cuando esto mejore de manera significativa los procesos de acceso a datos. Especialmente consultas de múltiples tablas.
  3. WIP

TypeScript

  1. Una buena referencia a TypeScript: https://github.com/Microsoft/TypeScript/wiki/Coding-guidelines