Be Sociable, Share!

lunes, 20 de junio de 2016

HTML 4 ≠ HTML 5

HTML 4



¿SUFRES DE <SPAN> o <DIV>?

Para estructurar una página web con HTML5, necesitaremos:

<header> <nav> <aside> <footer>



Tipico header html 4

<div id="header">
<h1> MODELO </h1>
</div>

Como deberá ser con html 5

<header>
<h1> MODELO </h1>
</header>

Barra o menu de navegación 
( debe estar etiquetado como una lista)

<div id= "nav">
<ul> ( lista no ordenada)
<li> <a href="LINK"> Principal </a> </li>
<li> <a href= "LINk"> Contacto <a/> </li>
</ul>
</div>

Como deberá ser con Html5

<nav>
<ul>
<li> <a href= "LINK"> Principal </a> </li>
<li> <a href= "LINk"> Contacto <a/> </li>
</ul>
</nav>

Panel con la informacion principal

<div id= "news">
<p> Panel principal Html4</p>
<!-- rest of news..>
</div>

y más html 5 ...

<aside>
<main>
<figcaption>
<footer>
<figure> 
se puede incluir cualquier cosa, como una cita, un fragmento de código, una tabla, etc...

miércoles, 15 de junio de 2016

WEB FORM: BÚSQUEDA WEB - FORMULARIO WEB




Los formularios, permiten al usuario introducir datos para que sean enviados a un servidor web para que sean procesados. <BÚSQUEDA WEB - FORMULARIO WEB/>


La etiqueta <input> es la mas usada en formularios

Input no tiene etiqueta de cierre.
Campos de texto
maxlenght= numero de caracteres
Size and value = numeros de caracteres


En definitiva, un formulario web es un elemento basico para cualquier  sitio web.
Etiquetas y atributos que se emplean en un formulario:




  • input.
  • text.
  • checkbox.
  • radio.
  • file.
  • password.
  • hidden.
  • button.
  • submit.
  • image.
  • select.
  • option.
  • optgroup.
  • textarea.
  • label.
  • fieldset.
  • legend.



  • Métodos de envío

    • GET
    <form action="" method="get">
    datos visibles (URL)
    Limitada
    Favoritos
    E.g.: formulario de búsqueda



    • POST 
    datos no visibles
    sin limite
    Ficheros
    E.g.: formulario de registro



    Ejemplo 0:




    Ejemplo 1:






    Para etiqueta form submit tiene atributo para envio de archivos. 
    <form enctype="multipart/form-data">
    <input type= "file..."/>
    </form>



    Atributo de 
    <input type= "submit/reset/button/image">
    Hay que meter Java script...
    Que estoy en proceso de descubriemento, todavía.....




    <label for="nombre">Nombre:</label> <input type="text" name="nombre" id="nombre" maxlength="50" />

    Label: Esta etiqueta nos permite asignar un texto a un campo de texto. Me explico. Si tenemos por ejemplo en un sector de nuestro sitio web lo siguiente:
    <label for=”nombre”>Nombre</label>
    <input type=”text” id=”nombre”>

    Si utilizamos la etiqueta label, y la asignamos a el campo que la acompaña, hacer click en el texto “Nombre”  es equivalente a hacer click en el campo de texto.



    SELECT:










    FIELDSET:









    ETIQUETAS PARA TABLAS:









    ¿COMO ENVIAR LOS DATOS?

    En el atributo action de la etiqueta <form> que define un formulario se puede indicar un correo electrónico para que los datos se envíen directamente a un correo electrónico. ¿Cómo se hace? 







    MÁS IMPORTANTE: JUEGO DE CARACTERES:


    • Utiliza siempre el mismo juego de caracteres.
    • Utiliza UTF-8 sin BOM.
    • Diferencias entre ISO-8859-1 (Latin1) e ISO-8859-15 (Latin9).
    • Cómo se indica el juego de caracteres en HTML (etiqueta meta).
    • Diferencias entre HTML4, XHTML1 y HTML5.

    HTML 4












    martes, 14 de junio de 2016

    ¿Cómo se escribe una página web?









    HTML (HyperText Markup Language):



    Aprender HTML es muy parecido 
    a aprender un idioma. 


    Herramienta para ayudar en la planificación: http://pencil.evolus.vn/


     Las etiquetas más importantes son:
    • html
    • head
    • meta
    • title
    • link
    • style
    • script
    • body
    • p
    • a
    • strong
    • em
    • img
    • form
    • input
    • select
    • textarea
    • table
    • tr
    • th
    • td
    • blockquote
    • hr
    • ul
    • ol
    • li
    • div
    • span

    Reglas html: 

    La etiqueta principal de una pagina web, es la etiqueta HTML (de inicio y de cierre);
    Las etiquetas siempre se tienen que cerrar;
    Los documentos tienen que estar bien formados;
    Etiquetas en minusculas;
    Valores artibutos en comillas;
    Extensiones htm or html;
    Todos elementos deben tener HEAD ( title);
    Proporcionar titulos ricos en contexto ( ayudará en la búsqueda Google);







    Fuente:  http://www.w3schools.com/
    Index of elements: https://www.w3.org/TR/html4/index/elements.html


    RECUERDA: Para definir presentación, iremos usar CSS


    LISTAS EN HTML:


    Listas no ordenada: <ul>

    Lista ordenada: <ol> ( ordered list)

    Para estas 3 listas, se emplea el elemento <li> (list item)

    Lista de descripción: <dl>, y aqui si emplea <dt> o <dl> ( description list)

    Lista anidadas (sublista)






    Web se basa:

    Hipertexto: Permite crear, agregar, enlazar y compartir información con hyperlink
    URL Uniforme resource Locator

    Tipos de enlaces: 

    <a> enlace </a>
    objecto sensible

    Intradocumental

    <a href= " #destino enlace" > TEXT </a>
    <h1 id="destino de enlace"></h1></a>

    Extradocumental

    <a href= " url #destino enlace" > TEXT </a>


    Errores Basicos:

    Salto de lineas: <br>  or  html5 <br/>
    No crear lista con saltos de lineas


    Espacio extra entre dos palabras: &nbsp

    miércoles, 2 de marzo de 2016

    PADRE INTERNET x PADRE WEB





    PADRE INTERNET

    Vinton Cerf es, junto con Robert Kahn, uno de los autores del protocolo TCP, uno de los protocolos fundamentales que controla la transmisión de datos en Internet. Fue creado entre 1973 y 1974. Transmisión de los datos en la Web es por  HyperText Transfer Protocol.


    PADRE WEB

    Tim Berners-Lee invented the World Wide Web in 1989.

    Hipertexto y conectarlo a las ideas de TCP y DNS y ¡ta chan! - La Web.

    Las innovaciones que Berners-Lee desarrolló para dar forma a su idea fueron tres: el HTTP (hypertext transfer protocol), que permite que al pinchar sobre un enlace lleguemos a otro documento; las URL (uniform resource location), que son las direcciones por las que encontrar el documento, y el HTML (hypertext markup language), que son las instrucciones por las que se vinculan las páginas y los archivos que contienen.



    CON:

    Hipertexto c
    onjunto estructurado de textos, gráficos, etc., unidos entre sí por enlaces y conexiones lógicas.


    Multimedia q
    ue utiliza conjunta y simultáneamente diversos medios, como imágenes, sonidos y texto, en la transmisión de una información.




    Hipermedia conjunto estructurado de diversos medios, como textos, gráficos, imágenes y sonidos, unidos entre sí por enlaces y conexiones lógicas para la transmisión de una información.

    Una URL traducido al español como Localizador Uniforme de Recursos, es un identificador que designa un recurso en Internet.


    UN DNS sistema que realiza la correspondencia entre las direcciones IP y los nombres de dominio.




    How To Find My IP Address
    http://www.howtofindmyipaddress.com/


    How To Find My IP Location

    https://www.iplocation.net/


    Programación de aplicaciones web: historia, principios básicos y clientes web

    jueves, 8 de octubre de 2015

    Buceando por RTB


    Libro Blanco de Compra Programática - IAB Spain

    Flow: MENSAJE, audiencia, cobertura, frecuencia, afinidad... 





    Objetivos:
    BRANDING x PERFORMANCE 
    AWARENESS o CONOCIMIENTO 
    (o call to action)

    Para Awareness: 
    formatos en display: Brand day, Patrocinios, Rich Media, Videos...






    Para call to action, performance/cobertura:  
    banners, cintillos, mebabanner...


    Display  cómo respuesta directa, ¿funciona? 
    Más calidad conversiones?

    CPM de 5 € por CTR de 0,2% (Ej.: CTR= 1.5% = 15 clicks /1000 impr.)
    Resulta son los 5 euros que he pagado por las mil impresiones entre los dos clics que he obtenido, 2,5€.  Cada 20 clics genero un registro (ratio de conversión a lead) Tenemos un CPL o coste por Lead de 2,5€ por 20 clics necesarios, de 50€.







    Planificación tradicional en Internet:


    COMSCORE ¿QUÉ ES?





    La respuesta está en que existen básicamente dos tipos de herramientas de analítica web, en función de como se recogen los datos: Site Centric y User Centric.





    if you think online privacy is a joke, you're 100% correct.






    domingo, 1 de junio de 2014

    Configurar Campaña Google

    Hay 2 tipos de campañas:

    1. Búsquedas ( SERPS) ( Consecuencia)
    2. Contenido o display  (clusters de palabras) ( servicios google)

    Links Interessantes:  Google Adwords Editor

    En muchos casos, en las campañas de búsqueda y display se puede aprovechar la misma estructura, aunque el objetivo sea distinto. Para agilizar todas estas tareas es imprescindible utilizar, hay un video muy chachi sobre como utilizarlo Google Adwords Editor.



    Cluster de palabras: Crear una sola campaña o várias, pero obligatoriamente crearemos una campaña para búsqueda y otra para display. El motivo de crear diferentes campañas es porque utilizaremos estrategias de segmentación geográfica distintas.


    ¿Presupuesto Ajustado? Lo más recomendable es empezar atacando todos los espectros de keywords, ya que no sabemos donde pueden estar los potenciales usuarios. Pero si el presupesto esta ajustado, hay que reducir el espectro de palabras.


    Variables de Configuración de una campaña son:

    º Ubicaciones  (Hacer un campaña para ingleses en España= ubicación: ES x Idioma: Ingles)º Idioma º Redes (campañas de búsqueda o display = Nunca las dos juntas) 
    º Dispositivos



    Ofertas y Presupuestos: Priorizar clics hay la opción "ofertas manuales para clics" CPC máximo para conseguir el máximo numeros de clics por el minimo coste. Entretanto en un primer momento hay la opción " ofertas automaticas" para intentar maximizar los clics del presupuesto.
    (Ideal presupuesto mensual y dividirlo por 30)

    Hay la opción  "priorizar conversiones" que es imprescindible para poder medir los resultados


    La opción " priorizar impresiones" (CPM) asegurará el hecho de servir un numero determinado de impresiones, y por eso asegurar que la publicación en el tiempo en el que lo deseamos.

    "preferencia de posición" (complicada gestionar) 
    Ej.: Caso de que no aparezca el primero, prefiero no aparecer...
    Ya no existe más, ahora se puede usar : " reglas automatizadas"
    El uso de las reglas automatizadas puede ahorrarle tiempo, porque reduce la necesidad de supervisar las campañas y de realizar cambios frecuentes y manuales. Retiramos la función de preferencia de posición de AdWords miércoles, 6 de abril de 2011 | 16:15


    La opción " método de publicación" alcanzar máximo reach y no perder ninguna impresión. De esta manera tendremos el máximo impacto, pero corremos el riesgoo de agotar nuestro presupuesto antes de que se acabe el día.


    " extensiones de anuncios"  

    ºUbicación (aoarecerá en el anuncio) ºTelefono ( campañas e móviles, generar llamada inmediata) ºProducto (poblándolo de links a enlaces profundos variados). 

    Enlances relevantes  como por ejemplo Google Plus.)



    Configuración Avanzada


    “estados mentales” 
    1. Programación de anuncios: horas x días
    2. Rotación de anuncios:  Lo más recomendable es que Google otimice automáticamente.
    3. Grupo demográfico: Edad
    4. Prueba: Configurar test, de forma que los resultados sean significativos.



    CREAR BUENOS ANUNCIOS
    sintáctica y semántica

    Hay sólo 3 líneas: Titular (25 caracteres=usar palavras claves) Las 2 líneas restantes corresponden al texto ( 35 caracteres por cada línea= conciso) OBJETIVO: Conseguir el mayor ratio CTR y que el tráfico sea de mayor calidad posible. Porque si nuestro CTR es alto, podremos salir en mejores posiciones a menor coste. 

    Buenos resultados provienen de keywords con buenos CTR, grupos de anuncios altos niveles de CTR y un historial CTR alto... CTR CTR CTR ...


    ANUNCIOS EN SEM, hay dos estratégias:


    ( AIDA) Atención-Interés-Deseo y Acción 

    Ratios de clics más elevados.
    Ratios conversiones mas pequeñas, aunque a clics más baratos.

    ¿Qué es el EMBUDO AIDA en marketing online?







    ( AIDCA) Atención-Interés-Deseo-Fidelización es un concepto de marketing, se refiere a la «fidelización de los clientes» y Acción 


    Segmenta tráfico mucho mejor y requiere una metodología constante creación nuevos textos. Sé realista y demuéstrale que tu promesa es cierta y que tú mereces su confianza.






    1. Tener una rítmica, sonar bien...
    2. Contener las palabras claves
    3. Inserción keywords en el tìtulo para que aparezca en la cadena de búsqueda
    4. Primera línea explicar principal ventaja o elemento diferencial
    5. Segunda lìnea llamada a la acción y/o incentivos. 


    ¿Cuántas visitas recibo?

    ¿De dónde provienen?

    ¿Qué quieren que hagan?

    ¿Qué estan  haciendo?

    ¿Cuáles son las páginas de entrada?

    ¿Las páginas más visitadas? 

    ¿La densidade de clics (CRT)?

    ¿ La tasa de abandono (salida)?

    Seis métricas fundamentales: 
    Vistas, visitas, rebote, abandono, conversación, promedio tiempo...

    Análisis SEO: 
    Tráfico pago, posición anuncio, comportamiento consumidor = PPC



    La idea es " la web se estudia y se mejora" constantemente, desde el día de su publicación hasta el fin de los tiempos. DEBEN SER POCOS, PERO IMPORTANTES = tráfico efectivo



    La primera posición no siempre es la mejor.... Es decir, nuestra competencia también se dedica a observar lo que hacemos y hacen más clics en los anuncios que están entre los primeros, como los clicadores compulsivos.