Listado completo

Clase 1 - Introducción al HTML

¿Que es un front-end?

Un front-end es el encargado de la creación y maquetación de la página y de la programación de la parte cliente de la misma.

La programación de la parte cliente incluye animaciones gráficas, validaciones de formularios, recepción y envio de datos a back, etc...

Los 4 pasos de creación de web

Explicamos los cuatro pasos esenciales que se necesitan para la creación de una página web:

  • UX o User Experience
    Son los encargados de hacer la arquitectura de web, es decir, son especialistas en usabilidad web y en hacer un esquema de toda la web o de la aplicación.
    Suelen usar herramientas como visio o yED y suelen entregar un documento con toda la funcionalidad de la web a los diseñadores.
    Más información
  • Diseño
    Son los encargados de "decorar" el esquema de los arquitectos de web de UX, la mayoría suele trabajar con photoshop y entregan a los front los .psds con toda la web exactamente como se tiene ver al acabar de desarrollarla.
    Más información
  • Front-End
    Son los encargados de hacer la programación del lado del cliente, esto incluye maquetar la página o aplicación completamente con funcionalidades incluidas como quieren los diseñadores. Su parte de programación no contempla conexiones a bases de datos o creación de servicios web.
    Las herramientas de los Front-Ends son los procesadores de texto principalmente, desde el más sencillo como geany hasta el más complejo como eclipse. También deben saber tener un dominio mínimo de photoshop o cualquier programa que trate psds para poder maquetarlo.
    En muchos proyectos necesitan estar en permanente contacto con los desarrolladores de back, sobre todo durante la integración, donde ya se hacen pruebas con los datos reales y finales provenientes de la fuente definitiva.
    Entre las tecnologías que manejan se encuentran el HTML/HTML5 CSS/CSS3 y JS/JQUERY como lenguaje principal de programación.
    Más información
  • Back-End
    Son los encargados de proporcionar los datos dinámicos que necesite la aplicación. Ellos manejan tanto los accesos a bases de datos, las validaciones de la página (ej: login), el mantenimiento de los servicios web, etc.
    Existe una gran variedad de plataformas de back entre las que destacan Fat-Wire, Sharepoint, etc... y también pueden usar una variedad de lenguajes como PHP, Java, C++, C#, visual Basic, etc (dependiendo de la plataforma en la que desarrollen)
    Más información

Profundizando en el Front-End

Un profesional del front tiene que conocer varios conceptos tecnicos muy importantes a la hora de desarrollar.

  • SEO
    El SEO o Posicionamiento en buscadores es de una importancia vital en las páginas de negocios, el SEO estudia la manera de ser indexados en los motores de búsqueda correctamente y salir en las primeras posiciones, es tan grande y tan importante este campo que incluso empiezan a haber profesionales que se encargan exclusivamente de este tema.
    Existen múltiples técnicas y herramientas para mejorar nuestro SEO, plugins de análisis para navegadores, herramientas on-line de analítica (google analitycs), plugins para wordpress, etc.
    También existen multitud de videos en la red para profundizar en este tema, para ser tener buenos resultados en SEO hay que estar siempre al día de los cambios que introducen los motores de busquedas como google, yahoo, gogoduck, etc.
    Más información
  • Accesibilidad
    La accesibilidad es la manera de programar la web de tal forma que pueda ser navegada por personas con capacidades límitadas, ya sean visuales, sonoras o de cualquier tipo.
    Para hacer una web accesible tiene que cumplir una serie de estandares disponibles on-line WAGC (poner link), para comprobar si nuestras web cumplen esos requisitos tenemos unas herramientas de validación de código a nuestra disposición TAW
    Hay varios niveles de accesibilidad y desde hace varios años se obligó por ley a aplicar los estandares web de accesibilidad a todas las páginas de servicios públicos.
    buscar manual de accesisibilidad y poner link.
    Más información
  • Cross-Browsing
    Programación Cross-Browsing implica que la web o aplicación se ve correctamente en todos los navegadores de todos los sistemas operativos.
    La manera de comprobar el crowsbrowsing de nuestros desarrollos es probar la web en multitud de navegadores y sistemas operativos.
    Ahora está muy de moda el concepto de diseño responsive, esto tiene que ver mucho con el cross-browsing ya que es un diseño hecho para adaptarse a todos los tamaños, esto hace que se vea igual la aplicación en cualquier terminal ya sea tablet o Smartphone.
    Recomiendo ir probando los desarrollos en distintos navegadores con distintos motores para evitarnos sorpresas desagradables al final del desarrollo.
    Más información
  • Semantica web
    Es la manera de ordenar los contenidos del HTML de una manera correcta y adecuada teniendo en cuenta cada apartado
    Respetar y construir una web con una semantica web adecuada nos proporcionará una limpieza impoluta en el código y ayudará a que los robots indexen correctamente los contenidos webs impulsando así el SEO de manera indirecta.
    Más información

Definición de HTML y diferencias con HTML5 y XHTML

¿Que es el HTML?
HTML es el lenguaje propio de las páginas web
¿Que es el W3C?
La W3C es la organización encargada de establecer los estandares web

La diferencia básica entre HTML y XHTML es que el XHTML tiene unas normas mucho más extrictas de escritura.

El HTML5 podríamos definirlo como una actualización de estandares del HTML, añadiendo y retirando distintas etiquetas del lenguaje.

Para comprobar si hemos escrito nuestro HTML correctamente podemos hacerlo con plugins como Web developer o con herramientas on-line como htmlbeautifiers.

La validación depende directamente del de la página, y este mismo especifica si estamos construyendo una página en HTML4/HTML5/XHTML/XHTML5, etc...

Decimos que un HTML o CSS validan cuando son capaces de pasar el checheo de la W3C sin fallos.

Separación entre contenido y presentación

El HTML debe contener exclusivamente la información de la página, relegando todas las cosas de diseño a las CSS y las de programación a las páginas de JS.

Respetando esto obtendremos grandes ventajas en el SEO y mantendremos un código HTML limpio, claro y semántico.

Herramientas Html

Las herramientas para escribir código html son básicamente los procesador de texto. Existen algunos más recomendables que otros por su formato, para windows es recomendable notepad++ para linux recomiendo genay y para proyectos más grandes o con tecnología movil es mejor eclipse.

Para poder hacer un seguimiento del crossBrowsing a lo largo del desarrollo recomiendo instalar los navegadores más usados, Firefox, I. Explorer, Chrome, Opera, Safari.

También es muy recomendable el uso de algunos plugins: